Build an Online Bookshop with Xata and Cloudinary

Hi, there. Today, We will learn how to use Xata and Cloudinary to build Bookay, which is Jamstack architecture. Bookay is a platform for techies in Nigeria to buy technical books and sell used ones. It's an online bookshop. With Bookay, you can purchase books from the comfort of your home or sell your used books to earn more profits.

Xata is a serverless database platform with no need for servers. It's one of the features I love about this product. As a backend developer / DevOps engineer, managing relational databases daily can be very stressful. But by using Xata, You don't have to deal with database migrations again, database management, and performance tuning. You just need to focus on what you need to do and let Xata focus on Data.

Cloudinary helps with images and videos. You can use it to manage image and video uploading, deliver images anywhere on the web, and transform them. An example of image transformation is converting an image to a thumbnail. Cloudinary is used in Bookay to easily upload book images and edit and deliver images to users searching for books. We would use Cloudinary pluggable image uploader available as a React component; this comes with out-of-the-box functionality to set up image uploading swiftly. Image transformation can happen right in the element used to display them. Book images can be uploaded once and transformed anytime, anywhere.

This article will teach you how to build a web application where you can buy books and sell your books online. We would go through Bookay's architecture, teaching you how to use Xata's database-less platform and Cloudinary's image upload features to build your online bookshop. Building your applications using the platforms above, can make your application development less affected by changes in business logic.

Project Idea: Bookay

Finding technical books is not easy in Nigeria. Books are available, but it's not easy to find. The idea behind Bookay, an online bookshop, is to make books ready and available online. It is a platform where you can easily find any available technical or non-technical books you want to buy. Bookay allows sellers to list their books on the forum, allowing buyers to search and buy books easily.

Architecture Overview: Xata + Cloudinary + NextJs

Using just NextJs, Bookay was built. Uploading of data to Xata is done with APIs. Xata comes with built-in automated full-text search functionality on all created tables ❤️. Images are uploaded to Cloudinary, from which you can quickly transform them while viewing it. For example, Image thumbnails can be used when displaying a list of books from search results, and larger images are used when showing a single book.

Although, security is needed when working with APIs. NextJs allows developers to make API calls on the server side, secluding API authentication details from the client side. This is why NextJs can easily be the best framework for building Jamstack products. But, Xata does not depend on any language or framework, It is language-agnostic. You can use any of your favourite languages or frameworks to use Xata.

Building Bookay: Your Online Bookshop 🛩️

Let's go through how you can build your own online bookshop. Bookay is already deployed on Vercel and it's Open source on GitHub.

Let's get started by setting it up on our computer.

Prerequisites:

• Node v12.18.3 or higher,
• npm v6.14.6 or higher.

Dependencies

• Xata: Set up your database for free
• Cloudinary: Quickstart with Cloudinary React

Installation:

A step-by-step series of examples that tell you how to get a development env running.

Clone the project and make sure you are in the project root directory

    git clone https://github.com/devvspaces/bookay
    cd bookay

Installing dependencies

    npm install

The above command would install all necessary dependencies to run Bookay on your computer.

Setting up your own Xata and Cloudinary account is needed. After installing the required dependencies, run the command, xata auth login, to authenticate with Xata and create your DB. For more information on using Xata CLI.

When starting your New project, Xata will automatically set up your development environment.

Run your development server

    npm run dev

Usage

1. Visit your running server URL; this will likely be http://localhost:3000
2. Login / Register: This link allows you to log in or automatically create an account if it doesn't exist.
3. Register as Seller: This allows you to create a seller account specifically.
4. You can now add new books, update books, and view and delete books.
5. You can check your sellers' store orders and normal orders for users.
6. And the rest is history!

Development 💪🏽

The best feature of the project development is code reusability.

Models

In this project, we will use write model classes. These are JavaScript objects that contain methods that serve as utility methods for interacting with a table on Xata. Model classes will use the Xata SDK API to read from or write to the database. Xata's concept revolves around tables. Tables can relate to one another like a relational database. Most of the data and business logic reside here. It also allows the code to be tested without calling Xata during tests. This can be achieved just by mocking the model classes and overriding their methods. An example of the test procedure can be found in my other repo, the Xata demo todo app.

Features on your online bookshop made available by Xata are database CRUD management, full complete type safe typescript SDK, and full-text search. With these features, you are not limited to building only an online bookshop. The sky is your limit.

API Routes and Server Side Props.

API routes and Server Side Props are the only communication methods with Xata API. This is the best and recommended way because it makes sure your Xata API requests are secured and hidden. So that API Keys won't get sniffed out. Data fetching in NextJs runs on the Server Side. This development pattern available with NextJs can help you build complete web applications with a single framework. Furthermore, the app will run most of its life cycle in the client's browsers, making it blazingly fast.

Cloudinary for Image Transformation

As said earlier, this is the easiest to set up. You just install Cloudinary react components, and that's all. Using Cloudinary's documentation, you can easily set up your image book uploader and editor. It's right there in the documentation. It doesn't require complex requirements like API routes or Server Side Props. With React components, you can have a complete image upload and preview set up in 10 min.

Deployment ❤️

You can deploy your new online bookshop on Vercel or Netlify in minutes. Just connect the platform to your GitHub account. Give access to your project, and you will get a smooth developer experience for deployment. Deployment has never been this interesting and easy. It's fast. It's also pre-built with CI / CD integrations, allowing your online bookshop to automatically be redeployed to new URLs every time you update any branch. Tutorial to do that here.

Book's source code is well documented; going through the code alone can help you learn more about the project. Installing, running, and testing the project on your computer can give you more practical experience in understanding the project's architecture. You will get more experience building Xata and Cloudinary applications by adding your features to the app.

Conclusion 😎

The developing experience of using frameworks or platforms is essential. Apart from making your development faster, It means you can develop web applications while paying less to no attention to the platform's inner workings. This is Xata and Cloudinary. Focus less on how you will set up that database or that user's profile image. They will handle it. Thanks for reading.