kaymen99 / DecentralAirbnb

This a decentralized web3.0 version of the AIRBNB renting website built on top of the Ethereum blockchain

Decentral AirBnb

This is a decentralized web3.0 version of the AirBnb renting website built for EVM compatible blockchains (Ethereum, Polygon,...), it was inspired by the Moralis project "Build Web 3.0 AirBNB Clone Using web3uikit, React, Moralis and Solidity - Full-Stack Blockchain App"

Built With

• Solidity
• Hardhat
• React.js
• ethers.js
• web3modal
• material ui

Table of Contents

1. Getting Started
   • Prerequisites
   • Project structure
   • Initial Setup
2. How it Works
   • Contracts
   • User interface
3. How to Use
4. Future developements
5. Contact
6. License

Getting Started

Prerequisites

Please install or have installed the following:

• nodejs and yarn
• MetaMask Chrome extension installed in your browser
• Ganache for local smart contracts deployement and testing

Project structure

This a full stack web3 decentralized application built using Hardhat/React js, so the project is devided into 2 main parts:

• Smart contract/backend side:
Located in the hardhat folder, it contains the blockchain developement envirenment built using Hardhat, with all the smart contracts tests, deployement scripts and the plugins used (chainlink).
• front-end side:
The code for the UI can be found in the src folder (as in all reactjs apps)

Initial Setup

1. Clone the repository and install all the required packages by running:

   git clone https://github.com/kaymen99/DecentralAirbnb.git
   cd DecentralAirbnb
   yarn

2. Start the ganache network and export the private key of the first account to the .env file in the hardhat folder, it will be used as admin for deploying the Airbnb contract:

   ETHERSCAN_API_KEY="your etherscan api key"
   POLYGON_RPC_URL="Your polygon RPC url from alchemy or infura"
   MUMBAI_RPC_URL="Your mumbai RPC url from alchemy or infura"
   PRIVATE_KEY="ganahce-private-key"

   • Note : I used the ganache network just for testing, if you want to deploy directly to a real/test network you'll need to add your real private key in the .env file.

3. As infura recently removed its free IPFS gateway i used web3.storage api for storing rentals images into IPFS, this api is as simple as infura it requires the creation of a free account and a new api token which you can do here, when you finish add your api token into the src/utils/StoreContent.js file:

    const web3storage_key = "YOUR-WEB3.STORAGE-API-TOKEN";

4. Get the Google maps api-key (it's free) here and add it to the src/component/RentalsMap.js file:

    export default GoogleApiWrapper({
          apiKey: "api_key",
    })(RentalsMap);

(back to top)

How it Works

contracts

The dapp is built around the DecentralAirbnb.sol contract, which contains all the app logic and has the following features:

Core functions:

• addRental: allow any user to add it's property on the rentals listing by paying a small fee
• bookDates: given the vacation start and end dates, it book a reservation if the rantal is available
• chackIfBooked: verify if a given rental is booked for the user dates

Admin functions: (admin is the only one that can call this functions)

• changeListingFee: change the fee charged when adding new rental
• withdrawBalance: the admin is able to withdraw th contract balance which is accumulated from the charged listing fee

ChainLink price feed:

As ETH or MATIC are both volatile currencies, the user need to set the renting price in $ and this price is converted using chainlink price feeds when a user is excuting the booking transaction.

User interface

The app allows users to rent any place in the world and pay in crypto, it's structured in 4 pages:

• The home page is the landing page of the app, By entering the city, the duration of the holiday and the number of guest the user is able to check all the available properties and can compare their prices, and the different facilities.

• The Rentals page is where the user is redirected after entering the holiday information, it contains a list of all the properties that match the user requirements, and also shows the location of these on a map provided by Google-maps

• Each user has their own Dashboard, it can be accessed by clicking on the account button in the top of the page, this dashboard shows all the user properites listed for renting and the reservations he has booked.

• In the Dashboard page there is a button "Add rental", which redirect the user to the AddRental page where he can list a new rental by providing a set of metadata (property name, city, latitude, longitude, description, maximum number of guests, rent price per day in $), note that it's really important to give the exact property (latitude, longitude) as they are later used to show the location on the Google map

(back to top)

How to Use

After going through all the installation and setup steps, you'll need to deploy the smart contract to the ganache network by running:

cd hardhat
npx hardhat run scripts/deploy-airbnb.js --network ganache

This will create a config.js file and an artifacts folder and transfer them to the src folder to enable the interaction between the contract and the UI

If you want to test the functionnalities of the DecentralAirbnb contract you can do it by running:

npx hardhat test

To start the app you have to go back to the DecentralAirbnb folder and run the command:

yarn start

(back to top)

Future developements

• Currently the only way to get the listed rantals is through getRentalList function, which is really inconvenient if a user want to filter rentals by owner, number of guests or price. So it's better to create a subgraph API based on the emitted events thus allowing quick access to the differnet requests.

• Perfom contracts audit using known tools such as echidna & slither.

(back to top)

Contact

If you have any question or problem running this project just contact me: [e-mail]

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)