This is a fun project that I'm working on to ramp up on Web3 development. It's essentially a website where people can "wave" at me and have these waves recorded on the blockchain (specifically the Rinkeby Eth testnet). This is based on a project from Buildspace.
As this was my first Web3 project, there were a lot of learnings along the way — here's a rough order of how things got to the way they are:
- Set up Ethereum development environment with Hardhat and then ran a contract to make sure it worked.
- Created a smart contract that will store who has waved at me, and how many times they've done so — this information is pulled directly from the blockchain and displayed on the site.
- Afterwards, the contract was deployed to the Rinkeby testnet here.
- Then, I made the frontend in React which uses some libraries to connect to Metamask (s/o
window.ethereum
) and call the deployed contract. - Hosting is done on Replit for ease of development and so that we can spin up a web server on the fly that points to the output, which is done with the lightweight
vite
library. - ...
React
for frontendReplit
for webserver & hostingWeb3.js
for connecting webapp to blockchainAlchemy
for deploying the smart contractSolidity
for smart contract developmentHardhat
for eth dev environment
Well, a video would probably explain that pretty well wouldn't it?
Screen.Recording.2021-12-31.at.9.45.34.AM.mov
If you want to interact with the live site, you can do the following:
- Set up Metamask (plenty of online tutorials)
- Switch to the Rinkeby testnet
- Get some Rinkeby ETH (not real $) from a faucet
- Wave at me!
I've still got a few more things I want to add before I finish up this project:
- Fund a contract to randomly send a waver some Eth
- Explore defensive mechanisms to prevent spam