What you will be building: see the live demo and the git repo.
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 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?
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:
git clone https://github.com/Daltonic/tailwind_ethers_starter_kit <PROJECT_NAME>
cd <PROJECT_NAME>
https://gist.github.com/covelitein/8c3e1d7b53034eccd82649fe839a0092?embedable=true
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; at the end, you must save these keys as an environment variable.
STEP 1: Head to CometChat Dashboard and create an account.
STEP 2: Log in to the CometChat dashboard, only after registering.
STEP 3:
From the dashboard, add a new app called DappBnb.
STEP 4: Select the app you just created from the list.
STEP 5:
From the Quick Start copy the APP_ID, REGION, and AUTH_KEY, to your .env file. See the image and code snippet.
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.
https://gist.github.com/covelitein/492156fb20fd064e230a1ac1df364a99?embedable=true
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
bytecodesandabi. - 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.
https://gist.github.com/Daltonic/252a5c3189e9b283c031bc228613b627?embedable=true
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.
https://www.youtube.com/watch?v=-q_6CyGNEDw&embedable=true
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.
https://gist.github.com/Daltonic/ed5c64d39ac49b570eed351371b04a03?embedable=true
I have a book to help your master the web3 language (Solidity), grab your copy here.
Now, let's go over some of the details of what's going on in the smart contract above. We have the following items:
IMPORTED 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
Counterlibrary 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 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.timestampto avoid conflicts when it’s retrieved by the React frontend because the timestamp returned by solidity’sblock.timestampis 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
If you need further help configuring Hardhat or deploying your Fullstack DApp, watch this video.
https://www.youtube.com/watch?v=hsec2erdLOI&embedable=true
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
This component contains the logo and relevant navigations and a connect wallet button, see the code below.
https://gist.github.com/Daltonic/078cb829fd75707b089304e66d8165d8?embedable=true
Within the components folder, create a file called Header.jsx and paste the above codes into it.
Category Component
This component carries rental categories, as shown above, see the code below.
https://gist.github.com/covelitein/4107034f658c64aa25bc481f7e823d3e?embedable=true
Again, in the components folder, create a new file called Category.jsx and paste the above codes into it.
Card Component
This component contains the images of the apartment in slides and some other relevant information as seen above. see the code below.
https://gist.github.com/Daltonic/267566f8421f76f2f1947181a617c3c1?embedable=true
Now again, in the components folder, create a new file called Card.jsx and paste the above codes into it.
ImageSlider component
This component contains a SwiperJs slider which is used for the apartment images display, see code below.
https://gist.github.com/Daltonic/48467114b5ca759bb0d52e8c4b79d7ed?embedable=true
In the components folder, create a new file called ImageSlider.jsx and paste the above codes into it.
CardCollection Component
This component loads collections of different posted apartments see the code below.
https://gist.github.com/covelitein/6f2867f66666488462ac9d630a7b77c1?embedable=true
This time again, in the components folder, create a new file called CardCollection.jsx and paste the above codes into it.
AddReview Component
This component is a modal component for adding reviews see the code below.
https://gist.github.com/Daltonic/dd7d283569e420a0b03ef49d77897ef4?embedable=true
Create a new file called AddReview.jsx in the components folder and paste the above codes into it.
AuthModal Component
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.
https://gist.github.com/Daltonic/75281de7ef5279350a12b0c626c57bab?embedable=true
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
This component carries certain information like site name and copywriting information.
https://gist.github.com/Daltonic/b13088cc698ee41d18675a9bdca1be7a?embedable=true
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
This page contains the available apartments on the platform see the code below.
https://gist.github.com/covelitein/328d3889b1f5eed95afd07f9318c2478?embedable=true
Create a file called Home.jsx in the views folder and paste the above codes into it.
AddRoom View
This page contains a form that is used for adding apartments to the platform. See the code below.
https://gist.github.com/Daltonic/22a340622fca45da1fbce5c4d4e1277c?embedable=true
Ensure that you create a file called AddRoom.jsx in the views folder and paste the above codes into it.
UpdateRoom Component
This page contains a form that is used for editing an apartment by the apartment owner. see the code below.
https://gist.github.com/Daltonic/a1c3e5850754e2c7e95eb73f69c64c5c?embedable=true
Again, make sure that you create a file called UpdateRoom.jsx in the views folder and paste the above codes into it.
Room page
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.
https://gist.github.com/Daltonic/8ef4a09cb82378fd778bd94ada1311a2?embedable=true
Don’t forget to create a file called UpdateRoom.jsx in the views folder and paste the above codes into it.
Bookings Page
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.
https://gist.github.com/Daltonic/2d8d81aec00a99499750658a956a1ef9?embedable=true
As always, create a file called UpdateRoom.jsx in the views folder and paste the above codes into it.
Recent Conversations View
This view is only accessible by the apartment to check for messages sent to him or her, see the code below.
https://gist.github.com/Daltonic/eaab85a33934d2dcaa43772658102da5?embedable=true
Again, create a file called RecentConversations.jsx in the views folder and paste the above codes into it.
Chats View
This is where all the chatting happens on the platform between apartment owners and other users. See the code below.
https://gist.github.com/Daltonic/b9cd98938f1e4ccc819cddb91c37468b?embedable=true
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.
https://gist.github.com/Daltonic/8501785cc58f5091491dcb8ef876f2c3?embedable=true
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 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.
https://gist.github.com/Daltonic/3d435edb31132fce74070ab77e7cf341?embedable=true
The Blockchain Service Create a file named "Blockchain.service.js" , and save the provided code inside the file.
https://gist.github.com/Daltonic/325f5831976ab60a8db472ffc4953b8e?embedable=true
The Chat Service Create a file named "Chat.jsx" within the "services" folder and copy the provided code into the file before saving it.
https://gist.github.com/Daltonic/b91f8b1e7d9359e2a082c7323afaf632?embedable=true
The Index.jsx file Now update the index entry file with the following codes.
https://gist.github.com/Daltonic/9d414eae297a6ef74816dceb142ce78a?embedable=true
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.
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!