β Chain of Waves
December 20, 2021 β’ 2 min read
An exploration of Web3 development β stitching together a smart contract to 'wave' at me, stored on the blockchain and connected to a nice React.js front-end.
What is this?
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. - β¦
Technology
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
How it Works
Well, a video would probably explain that pretty well wouldn't it?
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!
TODO
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
