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?
By the way, Subscribe to my YouTube channel to learn how to build a Web3 app from scratch. I also offer a wide range of premium web3 content and services, be it private tutorship, hourly consultancy, other development services, or web3 educational material production, you can book my services here.
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:
git clone https://github.com/Daltonic/tailwind_ethers_starter_kit <PROJECT_NAME>
cd <PROJECT_NAME>
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.
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.
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.
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.
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 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
If you need further help configuring Hardhat or deploying your Fullstack DApp, watch this video.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The Blockchain Service
Create a file named "Blockchain.service.js" , and save the provided code inside the file.
The Chat Service
Create a file named "Chat.jsx" within the "services" folder and copy the provided code into the file before saving it.
The Index.jsx file
Now update the index entry file with the following codes.
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.
If you're confused about web3 development and want visual materials, get my NFT Marketplace and Minting courses.
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!
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, Github, LinkedIn, or his website.
Top comments (0)