Building Home Provider Application with Xata, Cloudinary, and NextJs
Tags: jamstack, xata, cloudinary, nextjs
Published: 2022-11-23 11:31:03

## Introduction

Nothing is more convenient than a database that works without worrying about its server(s). We don't have to worry about the server because an organization manages it. We don't have to worry about how many servers there are or how much RAM they have.

[Xata](https://xata.io?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) is a serverless data platform that provides databases that guarantee high durability, availability, and security so we can focus on other things that matter.

In this article, you will learn how to use Nextjs with Xata (a serverless database) and [Cloudinary](https://cloudinary.com/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) (an assets storage service) to build a highly robust home provider application, `Accommodate`.


## About Accommodate 

The project (accommodate) is a platform that allows registered users (hosts) to add new homes to the platform and edit and delete existing homes, where home seekers can see a list of homes added by the hosts.

The main idea is to learn and show developers how easy and flexible it is to use Xata and Cloudinary.


## Prerequisites

To follow along, we will need the following:

- Basic knowledge of JavaScript and NextJS
- Install [Node.js](https://nodejs.org/en/download/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) on our computer
- Preferred code editor Visual Studio Code


## Project Overview

I chose this project because it was helpful enough to explore various operations on the Xata database, such as insert, get, filter, create, update and delete. Also, to explore the seamless asset management features Cloudinary has to offer.

Below are some of what we will be working on within this project:

- NextJS: Our Javascript framework of choice. We will use this framework to build our front end.
- Xata: Secure serverless data platform where we will be creating databases
- Cloudinary: A cloud assets storage service where we will be storing images

**Below will be the initial screen displayed of our application****.**

![](https://paper-attachments.dropboxusercontent.com/s_5866A4BEC44FD03FA980661DFD539746AE3DCD21CCD8DE302ABBD7EAACD6A1BF_1667478909429_Screenshot+2022-11-03+at+13.32.24.png)


The source code of the project is available on [GitHub](https://github.com/jaymeeu/accomodate_with_xata).
[Here is the live link to the deployed application we will be building](https://accomodate.netlify.app/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog)


## Project Live Demonstration

Below is a video demonstration should what we will be building in this article


{% youtube
https://www.youtube.com/watch?v=o371RaCb2Yg
%}

## Project setup

Let's set up our front-end and back-end projects.

**Setting up a NextJS project.**

The source code of the project is available on [GitHub](https://github.com/jaymeeu/accomodate_with_xata?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog). Feel free to clone or fork. However, to follow through with the tutorial, bootstrap a new Next.js App.

Run the below command on the terminal in our project folder.

```
npx create-next-app accommodate
```

`accommodate` in the above indicate the project name.

Then, we should move to the project directory by running the following:
```
cd accommodate
```

**Install packages**

This project will require the following packages, so let's install them, in our terminal let’s run

```npm install @xata.io/cli -g```
This will install Xata CLI globally, allowing the Xata command to run on our device.

```npm install axios```
This will install axios which we will be using to make API calls.


**Setting up a Cloudinary Account**
Next, signup to [Cloudinary](https://cloudinary.com/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) with a google account, GitHub account, or email; once signup is completed, we will be redirected to the Xata dashboard console, where we can create databases, tables, and records.

We should get a page like so.

![](https://paper-attachments.dropboxusercontent.com/s_5866A4BEC44FD03FA980661DFD539746AE3DCD21CCD8DE302ABBD7EAACD6A1BF_1667479651343_Screenshot+2022-11-03+at+05.22.20.png)


Take note of the `Cloud Name` and the `API Key` these are the value we will be using to query Cloudinary APIs.

**Setting up a Xata Account**

Next, signup on to [Xata](https://xata.io?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) with a google account, GitHub account, or email; once signup is completed, we will be redirected to the Xata dashboard console, where we can create databases, tables, and records.


![](https://paper-attachments.dropboxusercontent.com/s_5866A4BEC44FD03FA980661DFD539746AE3DCD21CCD8DE302ABBD7EAACD6A1BF_1667480222621_Screenshot+2022-11-03+at+13.56.50.png)


With the above steps complete, we are all set. Next, let's create our database.


## Creating a Xata database:

To create a Xata database, check out the guide from the [Xata documentation](https://xata.io/docs/intro/getting-started?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog). I believe this work guide is simple and easy to follow; however, if you have any questions, feel free to drop them in the comment section.
Click `Add a database` and specify the database name. Next, create tables.

**In this project, we will be creating two tables.**

- Users table - To store user information.
- Homes table - To store home information.

**Users table**
Table name - `users`

| **Field name** | **Data Type** |
| -------------- | ------------- |
| fullname       | String        |
| email          | String        |
| password       | String        |

**Homes table**
Table name - `homes`

| **Field name** | **Data type**              |
| -------------- | -------------------------- |
| title          | String                     |
| price          | String                     |
| location       | String                     |
| dateFrom       | String                     |
| dateTill       | String                     |
| lng            | Decimal number             |
| lat            | Decimal number             |
| price          | Decimal number             |
| category       | String                     |
| image          | Multiple select            |
| host           | Link (link to users table) |

Check out [https://xata.io/docs/intro/getting-started](https://xata.io/docs/intro/getting-started?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) for more information on the data types.


## Connecting to Xata database:

Once the above steps are completed, connect to the created Xata database. To connect, let’s open our project and follow the steps below.


- On our [Xata](https://xata.io?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) dashboard, click on the `Get code snippet` button at the top-right corner of the page
- Click on the `Setup Xata Project` dropdown button.
- Copy the Xata init command; the command should look like so 

`xata init --db https://**********************.*******.xata.sh/db/accomodate`

- Then in our project terminal, let’s run the copied Xata init command. This will initialize and pull the database to our project.
![](https://paper-attachments.dropboxusercontent.com/s_5866A4BEC44FD03FA980661DFD539746AE3DCD21CCD8DE302ABBD7EAACD6A1BF_1667481765328_ezgif.com-gif-maker+10.gif)


To initialize our project, [Xata](https://xata.io?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) CLI will ask questions allowing it to create configuration files. Kindly supply responses as below: 


- Do you want to use code generation in your project? : Generate JavaScript code with ES modules
- Choose the output file for the code generator : utils/xata.js
-  Do you want to generate the TypeScript declarations? › N
-  Choose a default development branch (fallback branch).  : none

 Once the pull is done, we should get a message `✔ You are all set!`


![](https://paper-attachments.dropboxusercontent.com/s_5866A4BEC44FD03FA980661DFD539746AE3DCD21CCD8DE302ABBD7EAACD6A1BF_1667549599042_ezgif.com-gif-maker+11.gif)


With this pulled successfully, we can start querying our Xata database.
Let's go ahead to populate our user's table with some records.

From the Xata console, let’s click on our database, then click on the table we want to populate, and next click on the plus sign at the last row of our table.

Fill in the record information and click `Create record` to continue. We can add as many records as we want.

Now, let's run our first Xata query command.


**Query Xata database**
In our, NextJS project, open `pages/api`, let create a file, `getUsers.js` add code as shown below:

{% gist
https://gist.github.com/jaymeeu/a52bddb210d84b66950b39e1b9d733e0
%}


Update `index.js` like so.

{% gist
https://gist.github.com/jaymeeu/b4e7c694a96fc5beec1b4fd640c36539
%}


The above shows the simple code snippet to get all records in our user's table. Firstly we import `getXataClient` for our Xata configuration file generated earlier.

Next, we create an instance of `getXataClient` using the query command.

The question is, how do we get the query commands? Xata provides a `get``ting` `code snippet` panel where we can get our query commands, and the code snippet reflects the state of the table.
Check out the illustration below.


![](https://paper-attachments.dropboxusercontent.com/s_5866A4BEC44FD03FA980661DFD539746AE3DCD21CCD8DE302ABBD7EAACD6A1BF_1667550290030_ezgif.com-gif-maker+12.gif)



## Project implementation

With these done, let's start implementing our project.

**Project structure**
The project structure looks like so.

![](https://paper-attachments.dropboxusercontent.com/s_5866A4BEC44FD03FA980661DFD539746AE3DCD21CCD8DE302ABBD7EAACD6A1BF_1667485979753_Screenshot+2022-11-03+at+15.32.42.png)


**Create API requests**
Let's create an API to get all records from the `homes` table
In the `pages/api` folder, let's create a file, `getHomes.js`, and add code as shown below.


{% gist https://gist.github.com/jaymeeu/9ef8090c100ffe723cc2cf4e91e1e710 %}


Let's create an API to get `homes` records added by a specific user
In the `pages/api` folder, let's create a file, `getUserHomes.js`, and add code as shown below.

{% gist
https://gist.github.com/jaymeeu/4bbd0b580d4ec954e57f893f515554a9
%}



Let's create an API to add new records to the `homes` table
In the `pages/api` folder, let's create a file, `registerUser.js`, and add code as shown below.

{% gist
https://gist.github.com/jaymeeu/7dc5aea764e9b9386418926a50ac9e1f
%}

Let's create an API to authenticate a user.

In the `pages/api` folder, let's create a file, namely `loginUser.js`, and add code as shown below.

{% gist
https://gist.github.com/jaymeeu/97aa7f563a949e03dbfed13cf85a056b
%}

Let's create an API to create a user.
In the `pages/api` folder, let's create a file, `registerUser.js`, and add code as shown below.

{% gist
https://gist.github.com/jaymeeu/2bce23f740536082fd5b74694a9a37e9
%}


**Consume API request**
With all these APIs created, the next is to consume them.

Let's consume `getHomes` API by updating the `pages/index.js` file as below:

{% gist
https://gist.github.com/jaymeeu/6a8f7417c7d468e3d0936dea7afdd43e
%}


Let's consume `getUserHomes` API by updating the `pages/dashboard.js` file as below:

{% gist
https://gist.github.com/jaymeeu/69d362fbd8f6a039611eace73dd6e809
%}


Let's consume `loginUser` API by updating the `pages/login.js` file as below:

{% gist
https://gist.github.com/jaymeeu/81499c2349d5284731093bfd2862a81d
%}


Let's consume `registerUser` API by updating the `pages/signup.js` file as below:

{% gist
https://gist.github.com/jaymeeu/2a54aabac767d9f6ac6245ccd1ec6e86
%}


Let's consume `addHome` API by updating the `components/AddHomeForm/index.js` file as below:

{% gist
https://gist.github.com/jaymeeu/2a54aabac767d9f6ac6245ccd1ec6e86
%}

| Note: the above are code snippets from our code. The complete code can be found on [GitHub](https://github.com/jaymeeu/accomodate_with_xata) |

And that is all. We have now completed the implementation of our home provider application.
Now we can deploy the application to our preferred hosting platform. In our case Netlify.


## Deploying our app on Netlify

To deploy to a NextJS application on Netlify, follow this [article](https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/) on the Netlify blog post.


## Conclusion 

I hope you enjoyed this article the same as I did. In this exciting article, I explained how I built a home provider application with NextJS (JavaScript framework), Xata (a Secure serverless data platform), and Cloudinary(A cloud assets storage service).

In this article, we can learn:

- How to create a NextJS application
- How to sign up on Xata
- How to create a Xata database and tables
- How to get code snippets from Xata tables
- How to query Xata
- How to sign up on Cloudinary 
- How to insert assets into Cloudinary 
- And many more.


## What Next?

This is the end of this article, but it won't be my last contribution to the project. The project can still be improved in many ways, such as

- Users requesting home
- Users paying for home
- Getting latitude and longitude from home address
- Host delivering request

 
If you would like to contribute to this project, you are welcome to [Git fork](https://github.com/jaymeeu/accomodate_with_xata) the project and modify it.
You are welcome to connect with me on [Twitter](https://twitter.com/Abdulrasaq_Jay). This will enable you to stay up to date with more exciting articles that will be posted here.

Happy coding!
 

## Resources and reference
- [Xata documentation](https://xata.io/docs/overview?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog)
- [Deploy Nextjs on Netlify](https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog)
- UI design ideas and some assets for [Airbnb](https://www.airbnb.com/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog)
- [Cloudinary documentation](https://cloudinary.com/documentation/react_integration?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog)