DAO Music Club | React js | Thirdweb | Hashnode
Creating a DAO with React and Thirdweb
There is a hackathon happening on 31 Jan 2022, I found about it through a Hashnode article and this offers me the opportunity to prove my skills in web3 development.
First let's prepare for this
About my web3 experience
A few months ago I started to learn how to build and deploy web3 applications, I've tried solidity(Ethereum) and rust(Solana) for building smart contracts. For me, as a JavaScript developer, it's interesting to see these new kinds of data flows that solidity and rust offer, and I'm happy to learn about both. React is my choice when it comes to client libraries, and usually, I use Chakra UI for building UI components, the state management is handled by React Context for small applications and redux-toolkit for bigger applications.
I found about Thirdweb when taking a course on Buildspace, and I was very happy to hear that there is an sdk that can help me build dapps with just JavaScript. Thirdweb really makes things handy for me, it comes with a lot of advantages and I encourage you to visit their official website to learn more. Really easy to use the UI interface, and useful documentation is prepared for developers. I've done a couple of small applications with Thirdweb including DAO and NFT marketplace.
After a few courses and some discord discussions about web3, I feel like I joined the club.
What I built for participation in this hackathon
I've built a DAO app where participants can propose and vote on Youtube/Spotify links. There are special prizes offered to the ones who share good music links with the community. Users need to mint a special free NFT in order to get access to the platform. Having this special NFT users will be able to see what was proposed so far in the DAO and can participate in current and next votings. I believe in this way we can create the best music collection based on the community trend. You can find the link to the demo at the end of this article.
How I've built it
After I've built 2 projects with Thirdweb a DAO and an NFT Marketplace I've gained some knowledge on how to take advantage of the Thirdweb features. I've put together a couple of scripts for creating and deploying the smart contracts we need for the application. In order to run these scripts, I've configured the environment with a wallet and the API URL from alchemy. Running these scripts I've got from Thirdweb 3 important modules:
- Bundle Drop module - responsible for minting the special NFT
- Token module - BRBM Native Platform Token
- Vote module - responsible for community voting system
The web app is written with React JS using chakra-UI and 3rdweb/hooks, and is configured with these 3 modules I wrote above. The wallet connection is made with 3rdweb hooks, and in case of network incompatibility users should see a message and they should be able to change the network on clicking the message. The application lives now on the Rinkeby test network.
For state management, I used React Context, and I've created some custom hooks that help me with the contract business logic.
Feel free to fork the project and play around with it, let me know if you are interested in expanding the idea and maybe we can work together on this.
Conclusion
Thirdweb is an awesome tool for creating web3 applications, you can learn it pretty fast and you can ship web3 apps with just writing JavaScript. I am excited about the next projects I will build with this technology
👍 👍 👍 Thumbs up to Thirdweb 👍 👍 👍
Useful links: