In this lesson, we will build a frontend for our dapp using React, Next.js, ethers.js, Rainbowkit, Web3.Storage, and The Graph. Our app will work with Coinbase Wallet or other user-controlled wallets like MetaMask, Rainbow, and WalletConnect. Users will be able to connect their wallet and interact with our smart contract so they can create new events, RSVP to events, and confirm attendees.
In the next few sections, we will work on enabling users to create new events. First, we will set up RainbowKit to support an intuitive multi-wallet experience in our app. Next, we will integrate Web3.Storage to store some event data off-chain, or off the blockchain. Then we will import and use ethers.js to interact with our deployed smart contract. Finally, we will brush up our frontend to call our smart contract's createNewEvent
function and handle successful or failed transactions.
Note: To make it easy for you, please create a new repo/project folder for this section. However, if you feel you are comfortable enough, you can choose to use mono repos
To get started, you can fork and clone our starter repo, which has some design assets to make our app look a little nicer.
git clone https://github.com/...
(paste in your own link that you copied). If done successfully, you should see something that says: Cloning into 'web3RSVP-frontend-starter'...
.cd web3RSVP-frontend-starter
command in your terminal.Install all dependencies needed for this project by running npm install
or yarn
. You can start the development server by running npm run dev
or yarn run dev
.
Now you have this code on your computer! Open this folder in VS code either manually or by entering the code .
command into the terminal (Note: On some Linux systems, the code .
command may require additional installation if your VSCode was not previously installed via the terminal.)
If you want to change any of the designs or images used along the way, go for it! This project is 100% yours to customize however you like.
If you need help, check to see if your question has already been asked in #section-6-help. If you don't see it in there, post a question with any details that would make it easy for a team member to help you. We'll answer most frequently asked questions in live office hours, so keep an eye out in #announcements for those!
Writers: Avni Agrawal, Editors: Sarah Schwartz