Introuduction

Web 3.0 is gaining a lot of popularity and its craze is getting bigger and bigger day by day. The craze is justifiable as it has the potential to change the Web.

To keep with the advancement in web development regarding the shift from Web 2.0 to Web 3.0. You have to keep learning. The learning curve for Web 3.0 is not easy, especially for developers. There is a ton of things to understand such as blockchain, wallet, solidity, smart contracts, contract deployment and managing it.

ThirdWeb is here to reduce, your learning by managing all the things related to smart contracts. You can create

• NFT Collection
• Token
• Drops
• NFT Marketplace
• Voting Protocols
• And Many More

Today, we are going to use the thirdweb development tool to create a quiz app.

ThirdWeb Quiz

The Quiz App will generate a question after connecting the app to the wallet. Currently, it supports only MetaMask. It will have 4 options with one option being the correct one. When the user clicks on the correct one, a transaction will take place and the user will get the drop.

We have used the Open Trivia DataBase API to get the question for our app.

How I built it

I have used most of the tools from thirdweb to create this app.

Connecting App to Wallet

I have used the ThirdwebProvider from thirdweb to connect my app to the MetaMask Wallet. You can also connect your dApp to a Wallet. Read More here.

You need to wrap your app with the ThirdwebProvider to connect with a wallet.

import { ThirdwebProvider } from "@3rdweb/react";

const supportedChainIds = [80001];

const connectors = {
  injected: {}
};

ReactDOM.render(
      <ThirdwebProvider 
        connectors={connectors} 
        supportedChainIds={supportedChainIds}
        className="app">
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </ThirdwebProvider>,
  document.getElementById('root')
);

Drop Module

With the help of thirdweb, I have created the Drop Module. It will be claimable after every correct answer. You can Read More about here.

App Link

You can take a look into the App that is created with the thirdweb. Here is the link: thirdweb-quiz.netlify.app

GitHub Repo

What I learned

Before starting the Hackathon, I was having little knowledge about Web 3.0. Due to this Hackathon, I have learned

• Blockchain Network
• Ethereum Network
• Smart Contracts
• Solidity
• Test Networks
• NFT and Marketplace

This Hackathon has encouraged me to learn more about Web 3.0 in a short span of time. Also, thirdweb platform helped me in learning more about developing and deploying dApps. It helped me in learning:

• Connecting dApp to Wallet
• Creating NFT, MarketPlace, Drops
• Creating and circulating crypto-based currency
• And Many More

What I would love to improve in thirdweb platform

• Documentation: I would love to see an improved version of the documentation. Currently, it feels pretty straightforward and has missed a lot of concepts. Especially beginners will find it very tough to go through it.

Last Note

I have learned most in this Hackathon. It pushes me to learn more about Web 3.0. So thanks to thirdweb and hashnode for organizing this Hackathon.

I hope this post has helped you in ceratian ways. Thank you for reading the post.