How to Build a Web3 Airbnb 2.0 Clone with React, Solidity, and CometChat
Tags: web3, solidity, react, cometchat
Published: 2023-03-19 16:54:30

What you will be building see the [live](https://web3-dappbnb.web.app/) [demo](https://web3-dappbnb.web.app/) and the [git repo](https://github.com/Daltonic/dappBnb).

## Introduction

Are you looking to create a cutting-edge platform that leverages the power of web3 to transform the way people book and share accommodations? If so, this tutorial on building a web3 Airbnb clone using React, Solidity, and [**CometChat**](https://try.cometchat.com/oj0s7hrm5v78) is for you

By integrating blockchain technology, real-time communication, and user-generated content, you can create an interactive platform that revolutionizes the traditional apartment booking experience.

Whether you're an experienced developer or just starting out, this step-by-step guide will walk you through the process of bringing your vision to life. So why not start building your own Web3 Airbnb clone today and disrupt the travel industry?
 
By the way, [**Subscribe to my YouTube channel**](https://www.youtube.com/@dappmentors?sub_confirmation=1) to learn how to build a Web3 app from scratch. I also offer a wide range of [**premium web3 content**](https://www.buymeacoffee.com/dappmentors/extras) and services, be it private tutorship, hourly consultancy, other development services, or web3 educational material production, you can [**book my services here**](https://www.buymeacoffee.com/dappmentors/commissions).

Now, let’s jump into this tutorial.


## Prerequisites

You will need the following tools installed to build along with me:


- Nodejs (Important)
- Ethers js
- Hardhat
- Yarn
- Metamask
- React
- Tailwind CSS
- CometChat SDK


## Installing Dependencies

Clone the starter kit and open it in VS Code using the command below: 


```sh
git clone https://github.com/Daltonic/tailwind_ethers_starter_kit <PROJECT_NAME>
cd <PROJECT_NAME>
```


{% gist https://gist.github.com/covelitein/8c3e1d7b53034eccd82649fe839a0092 %}


Now, run `**yarn install**`  on the terminal to have all the dependencies for this project installed.


## Configuring CometChat SDK

Follow the steps below to configure the [**CometChat SDK**](https://try.cometchat.com/oj0s7hrm5v78); at the end, you must save these keys as an environment variable.

**STEP 1:**
Head to [**CometChat**](https://try.cometchat.com/daltonic) Dashboard and create an account.

![Register a new CometChat account if you do not have one](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679054697538_comet1.png)



**STEP 2:**
Log in to the [**CometChat**](https://try.cometchat.com/daltonic) dashboard, only after registering.


![Log in to the CometChat Dashboard with your created account](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679054850179_comet2.png)


**STEP 3:**
From the dashboard, add a new app called **DappBnb****.**


![Create a new CometChat app - Step 1](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679054925383_comet3.png)

![Create a new CometChat app - Step 2](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679054981308_comet4.png)



**STEP 4:**
Select the app you just created from the list.

![Select your created app](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679055054898_comet5.png)



**STEP 5:**
From the Quick Start copy the `APP_ID`, `REGION`, and `AUTH_KEY`, to your `.env` file. See the image and code snippet.

![Copy the the APP_ID, REGION, and AUTH_KEY](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679055155415_comet6.png)



Replace the `REACT_COMET_CHAT` placeholder keys with their appropriate values.


    REACT_APP_COMETCHAT_APP_ID=****************
    REACT_APP_COMETCHAT_AUTH_KEY=******************************
    REACT_APP_COMETCHAT_REGION=**

The `**.env**` file should be created at the root of your project.



## Configuring the Hardhat script

At the root of this project, open the `hardhat.config.js` file and replace its content with the following settings.


{% gist https://gist.github.com/covelitein/492156fb20fd064e230a1ac1df364a99 %}


The above script instructs hardhat on these three important rules.


- **Networks**: This block contains the configurations for your choice of networks. On deployment, hardhat will require you to specify a network for shipping your smart contracts.


- **Solidity**: This describes the version of the compiler to be used by hardhat for compiling your smart contract codes into `bytecodes` and `abi`.


- **Paths**: This simply informs hardhat of the location of your smart contracts and also a place to dump the output of the compiler which is the ABI.


## Configuring the Deployment Script

Navigate to the scripts folder and then to your `deploy.js` file and paste the code below into it. If you can't find a script folder, make one, create a **deploy.js** file, and paste the following code into it.


{% gist https://gist.github.com/Daltonic/252a5c3189e9b283c031bc228613b627 %}


When run as a Hardhat deployment command, the above script will deploy your specified smart contract to the network of your choice.

Check out this video to learn how to properly set up a web3 project with ReactJs.


{% embed https://www.youtube.com/watch?v=-q_6CyGNEDw %}



## The Smart Contract File

Now that we've completed the initial configurations, let's create the smart contract for this build. Create a new folder called `**contracts**` in your project's `**src**` directory.

Create a new file called `**DappBnb**``**.sol**` within this contracts folder; this file will contain all of the logic that governs the smart contract. 

Copy, paste, and save the following codes into the `**DappBnb**``**.sol**` file. See the complete code below.


{% gist https://gist.github.com/Daltonic/ed5c64d39ac49b570eed351371b04a03 %}


I have a book to help your master the web3 language (Solidity), [**grab your copy here**](https://www.buymeacoffee.com/dappmentors/e/103755).


![Capturing Smart Contract Development](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679056023593_0b_CDn4V.png)


Now, let's go over some of the details of what's going on in the smart contract above. We have the following items:

**I****mported Dependencies**
The **"import"** statements in this smart contract are used to import external dependencies from the OpenZeppelin library, which is a widely-used and trusted collection of pre-built smart contract components.

The first dependency, **"@openzeppelin/contracts/access/Ownable.sol"**, is used to access the deployer of the contract. The "Ownable" contract provides a basic access control mechanism where there is an account that is designated as the owner, and this owner can modify the state of the contract. The deployer of the contract is typically the owner by default, and this dependency allows the contract to identify and interact with the owner.

The second dependency, **"@openzeppelin/contracts/utils/Counters.sol"**, is used to attach unique IDs to apartments. The "Counters" library provides a simple way to increment and decrement counters, which is useful for creating unique IDs for each apartment listed on the platform.

The third dependency, **"@openzeppelin/contracts/security/ReentrancyGuard.sol",** is used to protect a specific function from reentrancy attacks. Reentrancy is a type of attack where an attacker can call a function multiple times before the first call has finished executing, which can lead to unexpected behavior and security vulnerabilities. The "ReentrancyGuard" contract provides a simple way to protect functions from this type of attack, which is important for ensuring the security and integrity of the platform.

**STRUCTS**
**AppartmentStruct:** This contains the necessary information about every apartment that is been posted on the platform.
**BookingStruct:** This contains details about every booking done on the platform.
**ReviewStruct:** This contains the reviews for each apartment by other users of the platform.

**STATE VARIABLES**
**_totalAppartments:** This variable uses OpenZeppelin’s **`Counter`**library to initialize the counter and assign unique ids to newly created apartments.

**TaxPercent:** This variable holds the percentage that the owner of the contract gets from every booked apartment.

**SecurityFee:** This variable holds the amount that the apartment owner holds when a user books the apartment.

**Mappings**
**apartments:** This mapping variable stores a newly created apartment with a specific Id.
**bookingsOf:** This mapping variable holds the total bookings for a particular apartment.
**reviewsOf:** This mapping variable holds the reviews an apartment has 
**apartmentExist**: This mapping variable checks for the existence of an apartment
**bookedDates:** This mapping variable holds the list of dates booked by users for a particular apartment.
**isDateBooked:** This mapping checks if the date of booking for an apartment has been taken.
**hasBooked****:** This mapping checks if a user has at least booked an apartment once.

**Constructor**
This is used to initialize the state of the smart contract variables and other essential operations. In this example, we assigned the tax percent and security fee a value.

**Events** 
**SecurityFeeUpdated:** This event fires when the deployer updates the security fee.

**Apartment Functions**
**CreateApartment:** This function is used to add an apartment to the platform
**UpdateApartment:** This function is used to edit certain information about an apartment on the platform supplied by the owner of the apartment.
**DeleteApartment:** This function is used to delete an apartment from the platform supplied by the owner of the apartment.
**GetApartments:** This function is used to list the available apartments on the platform.
**GetApartment:** This function is used to get a single apartment on the platform.


**Booking functions**
**BookApartment:** This function is used to book a specific apartment for a number of days, it is used to secure a date or dates for the apartment, and some necessary funds are been sent for the booking of the apartment to the platform.
**DatesAreCleared:** This function checks if the dates a user is booking an apartment are free.
**HasBookedDateReached:** This function checks if the date a user booked an apartment 
**GetUnavailableDates:** This function returns all the days that have been booked on the platform.
**GetBookings:** This function lists the total bookings for an apartment.
**GetBooking:** This function returns a single booking for an apartment.
**TenantBooked**: This function returns true or false if a user has checked into an apartment.

**Reviews Function**
**AddReview:** This function receives review data from other users from the platform reviewing an apartment on the platform.
**GetReviews:** This returns the total reviews for an apartment.

**Payment Functions**
**CheckInApartment:** This function is used to check-In on the day the apartment booking was anticipated, and it disburses the funds to necessary accounts.
**RefundBooking:** This function is used to reclaim the funds before the day that was booked by the user who is anticipating the apartment.
**ClaimFunds:** This function is used by the apartment owner to disburse funds in the apartment when the day the booker anticipated passes without him or her checking-In.
**PayTo:** This function sends money to an account.

**TaxPercent and Security Fee Functions**
**UpdateSecurityfee:** This function is used to edit or change the security fee value.
**UpdateTaxPercent:** This function is used to edit or change the tax percent value.

**Time function**
**CurrentTime:** This function adjusts the date returned by the solidity `block.timestamp` to avoid conflicts when it’s retrieved by the React frontend because the timestamp returned by solidity’s `block.timestamp` is three (3) digits less than the javascript time function.

With all the above functions understood, copy them into a file named `**DappBnb**``**.sol**` in the contracts folder within the src directory. 

Next, run the commands below to deploy the smart contract into the network.


    yarn hardhat node # Terminal #1
    yarn hardhat run scripts/deploy.js # Terminal #2


![Activities of Deployment on the Terminal](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679064323514_terminal1.png)


If you need further help configuring Hardhat or deploying your Fullstack DApp, watch this video.


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



## Developing the Frontend

Now that we have our smart contract on the network and all of our artifacts (bytecodes and ABI) generated, let's get the front end ready with React.


## Components

In the src directory, create a new folder called `**components**` to house all of the React components for this project.

## **Header component**
![Header Component](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679238194152_Screenshot+2023-03-19+at+4.03.08+PM.png)


This component contains the logo and relevant navigations and a connect wallet button, see the code below.


{% gist https://gist.github.com/Daltonic/078cb829fd75707b089304e66d8165d8 %}


Within the components folder, create a file called `Header.jsx` and paste the above codes into it.

## Category Component
![Category Component](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679080451304_screenshoteasy+-+2023-03-17T192022.853.png)


This component carries rental categories, as shown above, see the code below.

{% gist https://gist.github.com/covelitein/4107034f658c64aa25bc481f7e823d3e %}


Again, in the components folder, create a new file called `Category.jsx` and paste the above codes into it.

## Card Component
![Card Component](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679238408773_Screenshot+2023-03-19+at+4.06.43+PM.png)


This component contains the images of the apartment in slides and some other relevant information as seen above. see the code below.


{% gist https://gist.github.com/Daltonic/267566f8421f76f2f1947181a617c3c1 %}


Now again, in the components folder, create a new file called `Card.jsx` and paste the above codes into it.

## ImageSlider component
![Image Slider](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679239335488_ImageSlider.gif)


This component contains a SwiperJs slider which is used for the apartment images display, see code below.


{% gist https://gist.github.com/Daltonic/48467114b5ca759bb0d52e8c4b79d7ed %}


In the components folder, create a new file called `ImageSlider.jsx` and paste the above codes into it.

## **CardCollection Component**
![Card Collection](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679238837270_Screenshot+2023-03-19+at+4.13.49+PM.png)


This component loads collections of different posted apartments see the code below.

{% gist https://gist.github.com/covelitein/6f2867f66666488462ac9d630a7b77c1 %}


This time again, in the components folder, create a new file called `CardCollection.jsx` and paste the above codes into it.

## **AddReview Component**
![Add Review Component](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679239464966_Screenshot+2023-03-19+at+1.05.52+PM.png)


This component is a modal component for adding reviews see the code below.


{% gist https://gist.github.com/Daltonic/dd7d283569e420a0b03ef49d77897ef4 %}


Create a new file called `AddReview.jsx` in the components folder and paste the above codes into it.

## AuthModal Component
![Auth Modal Component](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679241079167_Screenshot+2023-03-19+at+1.00.59+PM.png)


This component authenticates a user either to log in or sign up before being able to chat it uses the CometChat SDK for authentication, see the code below.


{% gist https://gist.github.com/Daltonic/75281de7ef5279350a12b0c626c57bab %}


Add it to the list by creating a new file called `AddModal.jsx` in the components folder and paste the above codes into it.

## Footer Component
![Footer Component](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679239717117_Screenshot+2023-03-19+at+4.28.31+PM.png)


This component carries certain information like site name and copywriting information.


{% gist https://gist.github.com/Daltonic/b13088cc698ee41d18675a9bdca1be7a %}


Create another file called `Footer.jsx` in the components folder and paste the above codes into it.

## Views

Create the **views** folder inside the **src** directory and sequentially add the following pages within it.

## Home view
![Home View](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679240090442_Screenshot+2023-03-19+at+12.58.21+PM.png)


This page contains the available apartments on the platform see the code below.

{% gist https://gist.github.com/covelitein/328d3889b1f5eed95afd07f9318c2478 %}


Create a file called `Home.jsx` in the views folder and paste the above codes into it.

## AddRoom View
![Add Room View](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679240212735_Screenshot+2023-03-19+at+12.59.20+PM.png)


This page contains a form that is used for adding apartments to the platform. See the code below.


{% gist https://gist.github.com/Daltonic/22a340622fca45da1fbce5c4d4e1277c %}


Ensure that you create a file called `AddRoom.jsx` in the views folder and paste the above codes into it.

## **UpdateRoom Component**
![Update View](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679240459578_Screenshot+2023-03-19+at+4.40.11+PM.png)


This page contains a form that is used for editing an apartment by the apartment owner.
see the code below.

{% gist https://gist.github.com/Daltonic/a1c3e5850754e2c7e95eb73f69c64c5c %}


Again, make sure that you create a file called `UpdateRoom.jsx` in the views folder and paste the above codes into it.

## **Room page**
![Room View](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679240625530_Screenshot+2023-03-19+at+12.58.41+PM.png)


This page displays a single apartment and its information, it also carries the form for booking and also a button for getting the bookings of a particular user and relevant pieces of information like reviews. See the code below.


{% gist https://gist.github.com/Daltonic/8ef4a09cb82378fd778bd94ada1311a2 %}


Don’t forget to create a file called `UpdateRoom.jsx` in the views folder and paste the above codes into it.

## **Bookings Page**
![Bookings Page](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679084650173_screenshoteasy+-+2023-03-17T194030.208.png)



![Bookings Page 2](https://paper-attachments.dropboxusercontent.com/s_A83006EDA71414B7192208CC855F36D53EB33CBD2E6946B1117858F9736DEB77_1679084672051_screenshoteasy+-+2023-03-17T195303.242.png)


This page displays information depending on who the user is, if the user is the apartment owner it displays booking requests if not it displays the booking a user has done
see the code below.


{% gist https://gist.github.com/Daltonic/2d8d81aec00a99499750658a956a1ef9 %}


As always, create a file called `UpdateRoom.jsx` in the views folder and paste the above codes into it.

## Recent Conversations View
![Recent Conversations View](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679241270209_Screenshot+2023-03-19+at+1.02.26+PM.png)


This view is only accessible by the apartment to check for messages sent to him or her, see the code below.


{% gist https://gist.github.com/Daltonic/eaab85a33934d2dcaa43772658102da5 %}


Again, create a file called `RecentConversations.jsx` in the views folder and paste the above codes into it.

## Chats View
![The Chat View](https://paper-attachments.dropboxusercontent.com/s_463183B03C87173C50AFC2966DD69D3269B88AA7890ADE56CD9ED54EC5850EC9_1679241413993_Chat+Interface.gif)


This is where all the chatting happens on the platform between apartment owners and other users. See the code below.


{% gist https://gist.github.com/Daltonic/b9cd98938f1e4ccc819cddb91c37468b %}


Now as before, create another file called `Chats.jsx` in the views folder and paste the above codes into it.

## The App.jsx file

We'll look at the **App.jsx** file, which bundles our **components** and **pages**.


{% gist https://gist.github.com/Daltonic/8501785cc58f5091491dcb8ef876f2c3 %}


Update the `App.jsx` file with the above codes.

## Other Essential Services

The services listed below are critical to the smooth operation of our application.

**The Store Service**
The application relies on critical services, including the “**Store Service**” which uses the [react-hooks-global-state](https://www.npmjs.com/package/react-hooks-global-state) library to manage the application's state. To set up the Store Service, create a "**store**" folder within the "src" folder and create an "**index.jsx**" file within it, then paste and save the provided code.


{% gist https://gist.github.com/Daltonic/3d435edb31132fce74070ab77e7cf341 %}


**The Blockchain Service**
Create a file named "**Blockchain.****service.****js**" , and save the provided code inside the file.


{% gist https://gist.github.com/Daltonic/325f5831976ab60a8db472ffc4953b8e %}


**The Chat Service**
Create a file named "**C****hat.jsx**" within the "**services**" folder and copy the provided code into the file before saving it.


{% gist https://gist.github.com/Daltonic/b91f8b1e7d9359e2a082c7323afaf632 %}


**The Index.jsx file**
Now update the index entry file with the following codes.


{% gist https://gist.github.com/Daltonic/9d414eae297a6ef74816dceb142ce78a %}


To start the server on your browser, run these commands on two terminals, assuming you have already installed Metamask.


    # Terminal one:
    yarn hardhat node
    # Terminal Two
    yarn hardhat run scripts/deploy.js
    yarn start

Running the above commands as instructed will open your project on your browser. And there you have it for how to build a blockchain voting system with React, Solidity, and [CometChat](https://try.cometchat.com/oj0s7hrm5v78).

If you're confused about web3 development and want visual materials, [**get my NFT Marketplace and Minting courses**](https://www.buymeacoffee.com/dappmentors/extras).


![NFT Marketplace Course](https://paper-attachments.dropboxusercontent.com/s_9DD2504C64828909145D2BE2D627F89C45E2B1827EB8577EFA3A98F1F4F74EA0_1679058332528_NFT+Marketplace+YouTube.png)


Take the first step towards becoming a highly sought-after smart contract developer by enrolling in my courses on NFTs Minting and Marketplace. [**Enroll now and let's embark on this exciting journey together!**](https://www.buymeacoffee.com/extras)

## Conclusion

In conclusion, the decentralized web and blockchain technology are here to stay, and creating practical applications is a great way to advance your career in web3 development. 

This tutorial has shown you how to create a web3 version of the popular Airbnb application using smart contracts to facilitate payments, along with the CometChat SDK for one-on-one discussions.

That being said, I'll see you next time, and have a wonderful day!


## About the Author

Gospel Darlington is a full-stack blockchain developer with `7+` years of experience in the software development industry.

By combining Software Development, writing, and teaching, he demonstrates how to build decentralized applications on EVM-compatible blockchain networks.

His stacks include `JavaScript`, `React`, `Vue`, `Angular`, `Node`, `React Native`, `NextJs`, `Solidity`, and more.

For more information about him, kindly visit and follow his page on [Twitter](https://twitter.com/idaltonic), [Github](https://github.com/Daltonic), [LinkedIn](https://www.linkedin.com/in/darlington-gospel-aa626b125), or his [website](https://daltonic.github.io/).