Hello everybody!! In this article I want to explain how I built my submission for the Hashnode x Thirdweb Hackathon. I hope you like it :)
🤔 What is Web3Chat?
Has it ever happened to you that you are chatting with someone via WhatsApp and suddenly you feel the uncontrollable urge to send them your tokens? Well, now that’s possible thanks to Web3Chat! You can make it up to your friends for putting up with you after so many years.
I know what you're thinking: "But wait... Can I really transfer any kind of token to my friend??". Well... not actually 😅. Web3Chat currently only supports Davidcoins: a new token that is worth nothing nowadays, but that will exceed $1,000,000 in the not too distant future according to the greatest experts in economics and crypto things.
🧩 Components of the app
Let’s explain in detail each one of the pieces that make up Web3Chat.
💻 Frontend
The frontend is built using React, Chakra UI and ThirdWeb.
Sign in page
From the home page you can easily connect your wallet using MetaMask. Thanks to ThirdWeb, it's soooooo easy to implement a "Connect Wallet" button that I even feel bad for using their product by free (nah, not really).
Chat page
Once you have connected your wallet, that's it! You're in! From the chat page you can create groups with any other user utilising the app, chat with them in a very secure way (I don't think so 🧐) and send them Davidcoins just by clicking on their robotic heads. Easy, right?
By the way, I suggest you to import the Davidcoin token in your MetaMask wallet so that you can check your balance. This is the contract address: 0xA2cFC4Aec4c03aDF1074aF3d9839C97EEA09D86b.
Take into account that you must pay some fee with MATIC when transferring Davidcoins. This is the token associated to Mumbai Test Network, to which Web3Chat is connected.
If you want to get some fake MATIC to test go here: faucet.polygon.technology
Quiz page
Finally, how do you achieve some Davidcoins? For that we have the Quiz page, where you will be able to earn this amazing token just answering Trivia questions. Don't worry, you won't lose any Davidcoin if you don't answer correctly so feel free to select a random option (oh, are you really that kind of person? 😐).
⚙️ Backend
The backend is built with AWS Amplify. Thanks to this tool it's extremely easy to build a GraphQL API with AppSync, a DynamoDB table as database and host the app in Cloudfront.
And for those thinking: "HEY! YOU TOLD US THIS IS A DECENTRALIZED APP BUT YOU ARE USING AWS SERVICES FOR THE BACKEND. AMAZON IS CENTRALIZED. BLABLABLA...". I will say: "My app, my rules 😉".
Talking seriously, at first I tried to build a 100% decentralized app. This is:
- To use a decentralized backend.
- To use a decentralized database such as OrbitDB or GunDB.
- To use a decentralized hosting system; for example utilizing IPFS to host the website.
BUT I ended up by rejecting this approach because it was going to be too complex and time-consuming to build. So we could say this is a semi-decentralized app. Anyway I will continue improving and working on it, so maybe someday it will be 100% decentralized.
💡 Conclusion
I really enjoyed learning and building this application. It's my first project related to web3 and undoubtedly will not be the last one. I think that Thirdweb is a great tool to start in this world so I'll definitely keep an eye on it.
Feel free to visit Web3Chat. But please behave yourselves and be kind to each other. I will destroy those who dare to disturb the tranquillity and peace of Web3Chat 😡⚡️.
If you liked this post, then react to it with a beer please 🍺🤤. Thank you!