Build a Decentralized Bike Rental App on Binance Smart Chain Watch Preview
Create a Decentralized Bike Rental App on the Binance Smart Chain using Solidity for the Smart Contract and React/Ethers.js on the front end. A solid project for your Web3 portfolio.
UPDATE: Get all my courses, blueprints, and the fun of a vibrant, encouraging coding community over in the Travis Media Community.
Are you looking for a unique Web3 project to add to your portfolio?
Perhaps you're looking for more practice with Solidity, Ethers.js, or just blockchain development in general?
Or maybe you are tired of using Ether in your projects and want to explore the Binance Smart Chain (and its low gas fees)?
Well, this project checks all three off the list.
In this decentralized bike rental app you'll learn:
- How to use BNB in Remix IDE instead of Ether.
- How to create a secure Smart Contract in Solidity and deploy it to the Binance Smart Chain.
- How to interact with your Smart Contract and the Blockchain from a React front-end.
- How to display error messages from your smart contract on the front-end.
- How a decentralized project like this can provide sustainable income for the owner.
AND... as mentioned above, you'll have a solid Web3 project to add to your portfolio.
You can see the final app in action as well as hear more about the course in this video.
This course is not an intro to Web3 technologies. If you have NOT explored the Web3 ecosystem, then go and work through my hands-on Web3 technologies introductory video first.
If you have:
- Basic working knowledge of HTML/CSS
- Basic working knowledge of React and React Hooks
- Basic understanding of Blockchain technologies
Then you will do well in this course. Go and get started!
Introduction and Overview of Application
Images and link to GitHub provided
Learn Solidity in 60 Minutes
This is an optional lesson for those unfamiliar with Solidity.
Creating our Smart Contract
Creating the Bike Rental smart contract
Finalizing our Smart Contract
Finishing the smart contract and deploying to the Binance Smart Chain testnet
Front End UI
Project Setup and Building the Homepage
Setting up our React project, Chakra UI, and building out the Navbar and Homepage.
Building the Dashboard
Building the Dashboard UI
Connecting Metamask and Talking To Our Contract
Connecting to our Metamask Provider and testing a call to our smart contract
Front End Blockchain
Building the Add Renter Form
Creating a registration form for the renter
Populating Dashboard and Bike Rentals
Populating the Dashboard with dynamic values from our Smart Contract and the Blockchain
Optimizing UI and Security Checks
Adding some UI notifications on error and adding more security to our smart contract
Owner Bonus Features
A bonus lesson for you to implement. Creating an owner dashboard where he or she can view the balance of the contract, their cut of that balance, and a feature to withdraw their earnings.