What you will be building: see the and the . live demo 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 is for you. CometChat 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 on the terminal to have all the dependencies for this project installed. yarn install Configuring CometChat SDK Follow the steps below to configure the ; at the end, you must save these keys as an environment variable. CometChat SDK Head to Dashboard and create an account. STEP 1: CometChat Log in to the dashboard, only after registering. STEP 2: CometChat STEP 3: From the dashboard, add a new app called . DappBnb Select the app you just created from the list. STEP 4: From the Quick Start copy the , , and , to your file. See the image and code snippet. STEP 5: APP_ID REGION AUTH_KEY .env Replace the placeholder keys with their appropriate values. REACT_COMET_CHAT REACT_APP_COMETCHAT_APP_ID=****************
REACT_APP_COMETCHAT_AUTH_KEY=******************************
REACT_APP_COMETCHAT_REGION=** The file should be created at the root of your project. .env Configuring the Hardhat script At the root of this project, open the file and replace its content with the following settings. hardhat.config.js https://gist.github.com/covelitein/492156fb20fd064e230a1ac1df364a99?embedable=true The above script instructs hardhat on these three important rules: : 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. Networks : This describes the version of the compiler to be used by hardhat for compiling your smart contract codes into and . Solidity bytecodes abi : 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. Paths Configuring the Deployment Script Navigate to the scripts folder and then to your file and paste the code below into it. If you can't find a script folder, make one, create a file, and paste the following code into it. deploy.js deploy.js 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 in your project's directory. contracts src Create a new file called within this contracts folder; this file will contain all of the logic that governs the smart contract. DappBnb.sol Copy, paste, and save the following codes into the file. See the complete code below. DappBnb.sol 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 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. "import" The first dependency, , 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. "@openzeppelin/contracts/access/Ownable.sol" The second dependency, , 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. "@openzeppelin/contracts/utils/Counters.sol" The third dependency, 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. "@openzeppelin/contracts/security/ReentrancyGuard.sol", STRUCTS This contains the necessary information about every apartment that is been posted on the platform. AppartmentStruct: This contains details about every booking done on the platform. BookingStruct: This contains the reviews for each apartment by other users of the platform. ReviewStruct: STATE VARIABLES This variable uses OpenZeppelin’s library to initialize the counter and assign unique ids to newly created apartments. _totalAppartments: Counter This variable holds the percentage that the owner of the contract gets from every booked apartment. TaxPercent: This variable holds the amount that the apartment owner holds when a user books the apartment. SecurityFee: Mappings This mapping variable stores a newly created apartment with a specific Id. apartments: This mapping variable holds the total bookings for a particular apartment. bookingsOf: This mapping variable holds the reviews an apartment has. reviewsOf: : This mapping variable checks for the existence of an apartment. apartmentExist This mapping variable holds the list of dates booked by users for a particular apartment. bookedDates: This mapping checks if the date of booking for an apartment has been taken. isDateBooked: : This mapping checks if a user has at least booked an apartment once. hasBooked 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 This event fires when the deployer updates the security fee. SecurityFeeUpdated: Apartment Functions This function is used to add an apartment to the platform. CreateApartment: This function is used to edit certain information about an apartment on the platform supplied by the owner of the apartment. UpdateApartment: This function is used to delete an apartment from the platform supplied by the owner of the apartment. DeleteApartment: This function is used to list the available apartments on the platform. GetApartments: This function is used to get a single apartment on the platform. GetApartment: Booking functions 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. BookApartment: This function checks if the dates a user is booking an apartment are free. DatesAreCleared: This function checks the date a user booked an apartment. HasBookedDateReached: This function returns all the days that have been booked on the platform. GetUnavailableDates: This function lists the total bookings for an apartment. GetBookings: This function returns a single booking for an apartment. GetBooking: : This function returns true or false if a user has checked into an apartment. TenantBooked Reviews Function This function receives review data from other users from the platform reviewing an apartment on the platform. AddReview: This returns the total reviews for an apartment. GetReviews: Payment Functions This function is used to check-In on the day the apartment booking was anticipated, and it disburses the funds to necessary accounts. CheckInApartment: This function is used to reclaim the funds before the day that was booked by the user who is anticipating the apartment. RefundBooking: 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. ClaimFunds: This function sends money to an account. PayTo: TaxPercent and Security Fee Functions This function is used to edit or change the security fee value. UpdateSecurityfee: This function is used to edit or change the tax percent value. UpdateTaxPercent: Time function This function adjusts the date returned by the solidity to avoid conflicts when it’s retrieved by the React frontend because the timestamp returned by solidity’s is three (3) digits less than the javascript time function. CurrentTime: block.timestamp block.timestamp With all the above functions understood, copy them into a file named in the contracts folder within the src directory. DappBnb.sol 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 to house all of the React components for this project. components 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 and paste the above codes into it. Header.jsx 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 and paste the above codes into it. Category.jsx 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 and paste the above codes into it. Card.jsx 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 and paste the above codes into it. ImageSlider.jsx 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 and paste the above codes into it. CardCollection.jsx 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 in the components folder and paste the above codes into it. AddReview.jsx 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 in the components folder and paste the above codes into it. AddModal.jsx 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 in the components folder and paste the above codes into it. Footer.jsx Views Create the folder inside the directory and sequentially add the following pages within it. views src 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 in the views folder and paste the above codes into it. Home.jsx 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 in the views folder and paste the above codes into it. AddRoom.jsx 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 in the views folder and paste the above codes into it. UpdateRoom.jsx 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 in the views folder and paste the above codes into it. UpdateRoom.jsx 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 in the views folder and paste the above codes into it. UpdateRoom.jsx 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 in the views folder and paste the above codes into it. RecentConversations.jsx 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 in the views folder and paste the above codes into it. Chats.jsx The App.jsx file We'll look at the file, which bundles our and . App.jsx components pages https://gist.github.com/Daltonic/8501785cc58f5091491dcb8ef876f2c3?embedable=true Update the file with the above codes. App.jsx Other Essential Services The services listed below are critical to the smooth operation of our application. The application relies on critical services, including the “ ” which uses the library to manage the application's state. To set up the Store Service, create a " " folder within the "src" folder and create an " " file within it, then paste and save the provided code. The Store Service Store Service react-hooks-global-state store index.jsx https://gist.github.com/Daltonic/3d435edb31132fce74070ab77e7cf341?embedable=true Create a file named "Blockchain.service. " , and save the provided code inside the file. The Blockchain Service js https://gist.github.com/Daltonic/325f5831976ab60a8db472ffc4953b8e?embedable=true Create a file named " " within the " " folder and copy the provided code into the file before saving it. The Chat Service Chat.jsx services https://gist.github.com/Daltonic/b91f8b1e7d9359e2a082c7323afaf632?embedable=true Now update the index entry file with the following codes. The Index.jsx file 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!

'DappBnB' — How to Create a Web3 Equivalent of AirBnB Using React, Solidity, and CometChat

Too Long; Didn't Read

@daltonic

RELATED STORIES