Web3 Crypto

Build Web 3.0 AirBNB Clone Using web3uikit, React, Moralis and Solidity – Full-Stack Blockchain App

Join Daily Airdrop

This weeks Moralis Project will have you building a decentralised alternative for AirBNB. Utilising the Web3 UIKit, React and Google Maps you will build a frontend clone that looks and feels like the AirBNB website. You will also create your very own smart contract to store the details of rentals and handle purchase of any new bookings on the blockchain of your choice. To connect your react app and smart contract you will be using Moralis for smart contract syncing, executing smart contract functions and storing details in the DB for easy access.


Starter: https://github.com/MoralisWeb3/youtube-tutorials/tree/main/Airbnb-starter/
Final: https://github.com/MoralisWeb3/youtube-tutorials/tree/main/AirBNB_Decentral


00:00 Moralis Projects
00:57 Introduction
04:04 Project Setup
05:50 Home Page
21:45 Rentals Page
29:50 Map Component
38:39 Create Smart Contract
52:38 Deploy Smart Contract
58:23 Sync Smart Contract
01:03:32 Moralis DB with React 1
01:09:27 Run Smart Contract Functions
01:18:20 Moralis DB with React 2
01:25:03 Outro

Join Daily Airdrop

💬 Join Our Discord: https://moralis.io/mage?utm_source=youtubemoralis&utm_medium=video&utm_campaign=rj-Mb-xz1Os
📃 Moralis Docs: https://docs.moralis.io/
😎 Merch: https://merch.moralis.io
🐦 Twitter: https://twitter.com/MoralisWeb3/
🤖 Reddit: https://www.reddit.com/r/MoralisWeb3/
🔔 Subscribe to all notifications: https://www.youtube.com/channel/UCgWS9Q3P5AxCWyQLT2kQhBw
🎓 Moralis Academy: https://academy.moralis.io/?utm_source=youtubemoralis&utm_medium=video

#moralis #ivanontech
ethereum programming, ethereum developer, dapps, ethereum smart contracts, blockchain programming, ethereum dapp build, create a coin, ethereum coding, ethereum development, polkadot programming, cardano programming, moralis, web3, web3 programming, blockchain coding, blockchain for programmersn, blockchain archive node, blockchain nodes


Related Articles


  1. Not sure if anyone else faced this issue. Right after I go through the step of adding the inputs in the Home component, the inputs I get are totally not aligned with the searchFields container.
    I found out that, in the App.css file, the input classes that were being targeted, were not the ones being used in the app.
    For instance, the rule for .sc-gGCDDS (DatePicker and Input <div>), in my case, should target the class .sc-gFGZVQ instead.
    Are these classes generated when you install the web3uikit library? I am a bit confused here.

    Thanks for the effort on these great tutorials!

  2. hey, i did not find the sync option in my moralis servers account details. can i get help to fix this please.

  3. kinda weird how it uses an actual airbnb logo. awesome tutorial though. thanks!

  4. Oddity: 18:50 "setGuest" is not correct (line 84, missing the "s")… then 20:53 "setGuests" is fixed. I didn't see any edits, so is that magic?

  5. Can we use web3uikit in next.js? If yes, can you please provide any reference to implement web3uikit in next.js?

  6. My friend , my love for this community is exponentially

  7. Hey friend, can remix be used for big proyects or just for demo or simple ones? I am still confused abuout its limitations

  8. Wow! Thank you for this incredible project. Can you please 🙏🙏🙏 clone Steemit (i.e. sharing blog post, etc. to earn and pay/swap/redeem/exchange with tokens)?

  9. Wait, why is it “containerGradinet” instead of “containerGradient” in the beginning?

  10. When I tried to deploy the netflix project using netlify, app doesn't work properly. Same situation with vercel.

  11. Looks nice, but this idea would never work in real life, IMO.
    Who would guarantee that the room actually exists?
    Who would guarantee that the person coming to your home is actually not a serial killer? Ok, this can also happen with AirBNB, but being anonymous potentialize this issue
    What if the tenant destroys your property? Who would provide insurance?

    Adding anonymity to the equation makes it not work.

  12. What do you recommend for web3 site deployment for example we were using firebase or netlify on web2 sites.

  13. Looks amazing! You're on a roll my fren. I do hope however that you will also use Ant Design again in the next one 😉🙏

Back to top button