Link to project: https://shimmering-crumble-9e7191.netlify.app
Tech used: HTML, CSS, JavaScript, React, Solidity, Hardhat, ethers
To use the app, you must be connected to a Rinkeby network, write anything that you want on the box and then send a message to everyone that have access to the portal, when a wave is sent, the address that sent it have a chance to get 0,0001 eth, the number of waves that an address sent is shown on the interface as the total number of waves. To interact with the smart contract in this project I use ethers, but another option could be web3. The number of waves changes in real time thanks to the event listeners of the smart contract events that are programmed on the code.
The app is not responsive, so an optimization for this project could be to make it responsive.
Use of hardhat to test the smart contract and the use of ethers, get a better acknowledge of solidity to program smart contracts an use the events in it to render the values on real time in the UI.
Take a look at these couple examples that I have in my own portfolio:
PlatziPunks-Backend: https://github.com/Jsebas1198/PlatziPunks-Backend-SmartContracts-WEB3
PlatziPunks-Frontend: https://github.com/Jsebas1198/PlatziPunks-Frontend-WEB3
CryptoBirz-Marketplace: https://github.com/Jsebas1198/CryptoBirz-Marketplace