https://github.com/chanda-abdul/waveportal-client
Web3 App with Solidity + Ethereum Smart Contract
https://github.com/chanda-abdul/waveportal-client
blockchain ethereum hardhat react solidity web3-dapp web3-react
Last synced: 2 months ago
JSON representation
Web3 App with Solidity + Ethereum Smart Contract
- Host: GitHub
- URL: https://github.com/chanda-abdul/waveportal-client
- Owner: Chanda-Abdul
- Created: 2022-02-18T05:10:01.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-19T22:51:12.000Z (about 3 years ago)
- Last Synced: 2025-01-13T16:49:13.484Z (4 months ago)
- Topics: blockchain, ethereum, hardhat, react, solidity, web3-dapp, web3-react
- Language: JavaScript
- Homepage: https://gifted-aryabhata-929956.netlify.app/
- Size: 1.4 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [buildspace](https://buildspace.so/) Wave Portal 👋
### Web3 App with Solidity + Ethereum Smart Contracts
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshots](#screenshots)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
This is a solution to the [buildspace](https://buildspace.so/) challenge to build a Web3 App with Solidity + Ethereum Smart Contracts. [buildspace](https://buildspace.so/) is a platform to learn and build Web3 projects alongside other devs.
This repo contains the front-end React code for my Web3 app. You can view the repo for the Solidity + Ethereum Smart Contracts [here](https://github.com/Chanda-Abdul/waveportal-smart-contract).
I built this project so that I could learn some Solidity, write + deploy a smart contract to the blockchain, and build a Web3 client app that can interact with your a smart contract, and to basically get comfortable building an entire Web3 App.
## The challenge
### Users should be able to:
- [x] View landing page and understand the purpose of this app
- [x] Connect their ethereum wallet using Metamask, with the Rinkeby Test Network
- [x] Input a message and click button to send a "wave" to the smart contract owner
- [x] Once the "wave" is sent, the "waver" is entered to win a prize where the winner is chosen at random
- [x] While the user is waiting for their transaction to be mined on the blockchain a loading message is displayed to the UI. Because of blocktime this message may be displayed for 15+ seconds
- [x] The number of "wavers" is displayed along with each wavers address, time that wave was sent, and a message.
### Smart Contract should be able to:
- [x] Deploy your WavePortal smart contract to a local Ethereum network
- [x] Connect to our wallet and talks to our WaveContract
- [x] Update WavePortal to randomly send lucky users waving at you some Ethereum
- [x] Update UI + deploy to an Ethereum testnet so anyone on the internet can wave at you using their wallet
## Screenshots
### Landing page and Connect Wallet button
### Send message along with your wave
### View loader while wave is being sent
### View your wave, number of wavers, and data for each waver
## Links
- Link to deployed Site: [Wave Portal Web3 App](https://gifted-aryabhata-929956.netlify.app/)
- Link to Solidity Smart Contract: [Wave Portal Smart Contract Code](https://github.com/Chanda-Abdul/waveportal-smart-contract)
## My process
### Built with
- Front-end
- [React](https://reactjs.org/) - JavaScript Framework
- [Semantic UI React](https://react.semantic-ui.com/) Components
- CSS Flexbox
- [Smart-Contract](https://github.com/Chanda-Abdul/waveportal-smart-contract)
- [Solidity](https://docs.soliditylang.org/en/v0.8.12/)
- [Ethereum](https://ethereum.org/en/)
- [Hardhat](https://hardhat.org/)
- [Metamask](https://metamask.io/)
- [Rinkeby Test Net](https://www.rinkeby.io/)
- [Rinkeby Faucet](https://www.rinkebyfaucet.com/)
- [Etherscan](https://rinkeby.etherscan.io/)
- [Blockchain](https://en.wikipedia.org/wiki/Blockchain)
### What I learned
This was a useful and rewarding project for me. I became interested in Web3 and Solidity, and I knew that would be the most effect way to learn was by building a complete project. I ran into ALOT of roadblocks in previously because Web3 and Solidity are fairly new technologies that are updated all the time, sometimes with breaking changes 😩. Because of this it has been extremely hard for me to find documentation and resources to use while building Solidity projects.
This was my first successfully completed Web3 project. I really enjoyed that buildspace showed the step by step process of how to build a Web3 project and for providing a community that you can utilized to get help when you run into any blockers.
One of the main tools that helped me complete this project was [Hardhat](https://hardhat.org/)🙌🏽, which allows you to deploy your contracts, run tests and debug Solidity code without dealing with live environments.
## Continued development
There are a few things that I would like to revist when I have the time. The prize functionality is build into the smart contract, but I would like to add some feedback to the UI so that the user willl know that they entered the contest and alert them if they win. I would also like to add UI feedback for any issues we may encouter, such as running out of gas, etc.
### To-Do's
- [x] Fix `useEffect` for new wave events
- [x] Add alerts for out of gas, etc.
- [ ] Clean up
- [x] Deploy
- [x] write README.md
- [ ] add UI feedback and information for prize
## Useful resources
- [Semantic UI React](https://react.semantic-ui.com/). I used Semantic UI Components for the `` box and the `` that displays the waver's information. I didn't want to spend a ton of time on these elements because the focus of this project was to build a fully functional smart contract.
- [Hardhat](https://hardhat.org/), an Ethereum development environment. Hardhat allows you to deploy your contracts, run tests and debug Solidity code without dealing with live environments. This really helped me understand how to build a smart contract from a JavaScript point of view.
## Author
- Website - [Chanda Codes](https://chandacodes.com/)
- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)
## Acknowledgments
[buildspace](https://buildspace.so/) is a great resource if you want to get started with Web3. Highly recommended 💯.
Also, they gave me this really cool NFT for completing the project
