What you will be building, see the at Bitfinity test network and the . live demo git repo Introduction Welcome to our second comprehensive guide on “Building a Decentralized House Rental Platform with Next.js, Redux, and Solidity”. We'll be developing a Decentralized House Rental Platform using Next.js, Solidity, and TypeScript. Throughout this tutorial, you'll gain a clear understanding of the following: Building dynamic interfaces with Next.js Crafting Ethereum smart contracts with Solidity Incorporating static type checking using TypeScript Deploying and interacting with your smart contracts Understanding the fundamentals of blockchain-based rental platforms By the end of this guide, you will have a functioning decentralized platform where users can list and rent houses, all managed and secured by Ethereum smart contracts. As an added incentive for participating in this tutorial, we're giving away a copy of our prestigious book on becoming an in-demand Solidity developer. This offer is free for the first 300 participants. For instructions on how to claim your copy, please watch the short video below. Prerequisites You will need the following tools installed to build along with me: Node.js Yarn Git Bash MetaMask Next.js Solidity Redux Toolkit Tailwind CSS To set up MetaMask for this tutorial, please watch the instructional video below: https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true Once you have successfully completed the setup, you are eligible to receive a free copy of our book. To claim your book, . please fill out the form to submit your proof-of-work With that said, let’s jump into the tutorial and set up our project. Setup We'll start by cloning a prepared frontend repository and setting up the environment variables. Run the following commands: git clone https://github.com/Daltonic/dappBnbX
cd dappBnbX
yarn install
git checkout no_redux Next, create a file at the root of the project and include the following keys: .env NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545
NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID>
NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID>
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=somereallysecretsecret Replace and with your respective project IDs. <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID Get Key Here WALLET_CONNECT_PROJECT_ID Get Key Here Finally, run to start the project. yarn dev Our frontend is ready for smart contract integration, but we need to implement Redux to enable shared data space. Building the Redux Store The above image represents the structure of our Redux store, it will be simple since we are not creating some overly complex project. We'll set up Redux to manage our application's global state. Follow these steps: Create a folder at the project root. store Inside , create two folders: and . store actions states Inside , create a file. states globalStates.js https://gist.github.com/Daltonic/730e0819128d70d5881e00f5d8429e08?embedable=true Inside , create a file. actions globalActions.js https://gist.github.com/Daltonic/fa755c554d2d4bcb3768f17b5075f976?embedable=true Create a file inside the folder. globalSlices.js store https://gist.github.com/Daltonic/47f743789f5d7b075c193cddafcb948e?embedable=true Create an file inside the folder. index.js store https://gist.github.com/Daltonic/187fbf81056b88f2723da8b701f81ea2?embedable=true Update the file with the Redux provider. pages/_app.jsx https://gist.github.com/Daltonic/9c242246cfaa297a1b1bb6c90ac4457a?embedable=true We have implemented Redux toolkit in our application and plan to revisit its usage when integrating the backend with the frontend. Smart Contract Development Next, we'll develop the smart contract for our platform: Create a folder at the project root. contracts Inside , create a file and add the contract code below. contracts DappBnb.sol https://gist.github.com/Daltonic/ba8ddb07089839d2d8219b15a2f97787?embedable=true The contract represents a decentralized house rental platform where users can list apartments for rent, book available apartments, and leave reviews. DappBnb Let's go through each part of the contract: The contract imports , , and from the OpenZeppelin library. provides basic authorization control functions, is used for counting variables, and helps prevent re-entrancy attacks. Contract Setup and Libraries: Ownable Counters ReentrancyGuard Ownable Counters ReentrancyGuard The contract defines three structs: , , and . These define the data structures for apartments, bookings, and reviews respectively. Struct Definitions: ApartmentStruct BookingStruct ReviewStruct The contract declares several state variables, including security fees, tax percentages, and mappings to keep track of apartments, bookings, reviews, and other related data. State Variables: The constructor function initializes the and state variables. Constructor: taxPercent securityFee Functions like , , , , and are used to manage apartment listings on the platform. Apartment Functions: createApartment updateApartment deleteApartment getApartments getApartment Functions like , , , , , , , and are used to manage the booking process and interactions between tenants and apartment owners. Booking Functions: bookApartment checkInApartment claimFunds refundBooking getUnavailableDates getBookings getQualifiedReviewers getBooking The and functions manage the review process, allowing tenants to leave reviews for apartments they've booked. Review Functions: addReview getReviews The and functions are utility functions used in multiple other functions. is used to transfer funds between addresses, and returns the current block timestamp. Utility Functions: payTo currentTime payTo currentTime Contract Deployment and Seeding Now, let's deploy our smart contract and populate it with some dummy data: Create a folder at the project root. scripts Inside , create a and a file and add the following codes. scripts deploy.js seed.js Deploy Script https://gist.github.com/Daltonic/33dd48c1b599610d7fa5e81e838ae9d7?embedable=true Seed Script https://gist.github.com/Daltonic/5b258259081ddcf8d0b8ce5f6960e7bf?embedable=true Run the following commands to deploy the contract and seed it with data: yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2 If you did that correctly, you should see a similar output like the one below: At this point we can start the integration of our smart contract to our frontend. https://www.youtube.com/watch?v=Ubom39y5jX8&embedable=true Frontend Integration First, create a folder at the project root, and inside it, create a file. This file will contain functions to interact with our smart contract. services blockchain.jsx https://gist.github.com/Daltonic/b6fc5166eb220378d79f854f125ce804?embedable=true The above script is a service that interacts with a smart contract deployed on the chain. In a joint effort with EthersJs, it provides functions to read and write data on the blockchain via the contract's methods. Here's a breakdown of the functions: This function establishes a connection to the Ethereum network either through a browser provider (if available) or via a JSON-RPC endpoint. It then creates an instance of the smart contract using its ABI and address. If a user is connected via their wallet, the contract instance is linked to the user's account. Otherwise, a random account is generated and linked to the contract. getEthereumContracts: These functions fetch all apartments and a specific apartment respectively from the smart contract. getApartments, getApartment: Fetches all bookings for a specific apartment from the smart contract. getBookings: Fetches all addresses that are qualified to leave reviews for a specific apartment. getQualifiedReviewers: Fetches all reviews for a specific apartment from the smart contract. getReviews: Fetches all dates that are booked for a specific apartment from the smart contract. getBookedDates: Fetches the security fee from the smart contract. getSecurityFee: These functions allow a user to create, update, and delete apartments respectively. createApartment, updateApartment, deleteApartment: This function allows a user to book an apartment for specific dates. bookApartment: This function allows a user to check into an apartment. checkInApartment: This function allows a user to get a refund for a booking. refundBooking: This function allows a user to add a review for an apartment. addReview: Update the file inside to include the network using the following codes. provider.jsx services bitfinity https://gist.github.com/Daltonic/a811673bd1fe4b0c0011ae1b3b59af0d?embedable=true Page Interacting with Smart Contract Next, we'll link the functions in the blockchain service to their respective interfaces in the frontend: Update to get data from the function. No 1:  Displaying Available Apartments pages/index.jsx getApartments() https://gist.github.com/Daltonic/e9f1338669629696eb0502dc75331c25?embedable=true Update to use the , , and the other functions to retrieve apartment and booking details by the room’s Id. No 2: Displaying Single Apartment pages/room/[roomId].jsx getServerSideProps() getApartment() getBookedDates() https://gist.github.com/Daltonic/644a31568918fbf7d2d7149ae89124db?embedable=true Update to use the function for form submission. No 3: Creating New Apartments pages/room/add.jsx createApartment() https://gist.github.com/Daltonic/6435864d609e010ec5e8cc775254cdf3?embedable=true Update to use the function to retrieve apartment by Id and populate the form fields. No 4: Editing Existing Apartments pages/room/edit/[roomId].jsx getApartment() https://gist.github.com/Daltonic/f231fadbce1d6f58ab53eef044311f33?embedable=true Update to get data from the and functions. No 5:  Displaying All Bookings pages/bookings/roomId.jsx getApartment() getBookings() https://gist.github.com/Daltonic/c4bae4f5f8be07dc1509d7a3cd8623de?embedable=true Components with Smart Contract Like we did with the pages above, let’s Update the following components to interact with the smart contract: Update file to use the function to call the functions. No 1: Handling Apartment Deletion components/Actions.jsx handleDelete() deleteApartment() https://gist.github.com/Daltonic/b66fcb35c423e2795c1328388f6870bc?embedable=true Update modal to use the function to call the function. No 2: Adding Reviews to Apartment components/AddReview.jsx handleSubmit() addReview() https://gist.github.com/Daltonic/6901c666280934c5e9b8b6c145d449f5?embedable=true Observe how Redux was used to open and close the review modal. Update file to use the and functions. No 3: Adding Reviews to Apartment components/Booking.jsx handleCheckIn() handleRefund() https://gist.github.com/Daltonic/4042c750d7a8741af607aabaebbfd3fd?embedable=true Lastly, update file to use the function to call the function. No 4: Adding Reviews to Apartment components/Calendar.jsx handleSubmit() bookApartment() https://gist.github.com/Daltonic/438126facc462f32cc78d4b5a3514413?embedable=true Also notice that we are using Redux to retrieve the security fee which is necessary to calculate the cost of booking an apartment. The project is now complete as all components and pages are connected to the smart contract through the implementation of these updates. If your Next.js server was offline, you can bring it back up by executing the command . yarn dev For further learning, we recommend watching the full video of this build on our . YouTube channel https://www.youtube.com/watch?v=Qoa6z6c_wYQ&embedable=true Conclusion In this tutorial, we've built a Decentralized House Rental Platform using Next.js, Redux, and Solidity. We set up the development environment, built the Redux store, and deployed the smart contract to the blockchain. By integrating the smart contract with the frontend, we created a seamless user experience. Throughout the tutorial, you gained valuable skills in building Web3 applications, crafting smart contracts, and incorporating static type checking. You also learned how to use Redux for shared data space and interact with smart contracts from the frontend. Now, you're ready to create your own Decentralized House Rental Platform. Happy coding and unleash your innovation in the world of Web3! About Author I am a web3 developer and the founder of Dapp Mentors, a company that helps businesses and individuals build and launch decentralized applications. I have over 7 years of experience in the software industry, and I am passionate about using blockchain technology to create new and innovative applications. I run a where I share tutorials and tips on web3 development, and I regularly post articles online about the latest trends in the blockchain space. YouTube channel called Dapp Mentors Discord: X-Twitter: LinkedIn: GitHub: Website: Stay connected with us, join communities on Join Follow Connect Explore Visit

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

How to Build a Web3 Play-To-Earn Platform with Next.js, Typescript, and Solidity

How to Build a Decentralized Charity Platform with Next.js, TypeScript, and Solidity

Watch My YouTube Channel

Hire Me 

Portfolio

Buy Me a Coffee

Nominated for 2022 - HackerNoon Contributor of the Year - Decentralized Internet

Nominated for 2022 - HackerNoon Contributor of the Year - Ethereum

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Blockchain

Too Long; Didn't Read

How to Build a Decentralized House Rental Platform with Next.js, Redux, and Solidity

How to Build a Decentralized House Rental Platform with Next.js, Redux, and Solidity

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Beginner's Guide to Raffle Draws on the Ethereum Blockchain

Artificial Intelligence — a brief overview

Aut Labs Story Template: Opt Out of a System that Doesn’t Represent You

Hash Rate Analysis Projections: Why Bitcoin Should Embrace Quantum Information Science

Decentralization Systems And Unity With AI

Bring me Problems Not Solutions: Why Problem-Centric Leadership is Effective

A Beginner's Guide to Raffle Draws on the Ethereum Blockchain

Artificial Intelligence — a brief overview

Aut Labs Story Template: Opt Out of a System that Doesn’t Represent You

Hash Rate Analysis Projections: Why Bitcoin Should Embrace Quantum Information Science

Decentralization Systems And Unity With AI

Bring me Problems Not Solutions: Why Problem-Centric Leadership is Effective

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps