Live Coding A Full Stack Web 3.0 App - Soulbound NFT Collection 🚀🔥 (thirdweb, Next.js, Typescript)

Learn How To Build A Full Stack Web3.0 Application! Deploy Your Own ERC1155 Smart Contract With thirdweb, Use thirdweb Auth To Sign In With Ethereum And Interact With Your Smart Contract Using Next.js And TypeScript To Create A Full Stack Web Application!
In this video, we use a mix of Web2 and Web3 technologies to create an application where users can claim an NFT under certain criteria! We ask them to sign in with NextAuth Version 4 Using GitHub, then sign in with their Wallet using thirdweb Auth and the thirdweb SDK.
At this point, they're redirected to our homepage where they can attempt to claim an NFT from our ERC1155 NFT Collection smart contract that we deployed to the Goerli (Görli) test network!
We use Next.js API routes to run server-side logic; to check if the user has made any contributions to our organization's GitHub repositories; and use signature-based minting to allow them to mint NFTs if they have.
In the end, we have an application that restricts users' ability to claim free soul-bound (non-transferrable) NFTs that follow the ERC1155 standard, based on whether they have made contributions to our GitHub repositories.
List of technologies used:
- thirdweb (CLI, SDK, Auth (sign in with Etheruem))
- Next.js (API Routes, Dynamic Routes)
- NextAuth (GitHub Authentication)
- TypeScript
Resources:
- Securely store your private key: portal.thirdweb.com/sdk/set-u...
- Full Source Code: github.com/thirdweb-example/g...
- Application Demo: github-contributor-nft-reward...
Timestamps:
0:00 Introduction
0:51 Creating the project
2:15 Explaining the architecture
14:21 Creating Smart Contract
19:30 Next.js API Routes
24:05 thirdweb Auth
41:50 NextAuth - GitHub
1:10:38 API Criteria Logic
1:15:44 thirdweb SDK Minting
1:20:35 Making NFTs Soulbound
1:21:27 thirdweb SDK Minting cont.
1:24:30 Debugging NextAuth Issues
1:33:48 Debugging SDK Minting
1:39:18 Token Gating Content
1:43:43 Signature-based Minting
2:00:07 Styling with CSS Modules
2:05:31 Adding GitHub API
2:23:28 Outro
2:26:19 Video Ends (editing error)
Need help?:
If you have any questions related to this project, you can join the thirdweb Discord server to have me or another thirdweb engineer answer your questions: / discord
Follow Me:
Twitter: 👉 / jarrodwattsdev
Support me 👉 www.buymeacoffee.com/jarrodwatts

[@user-nc7bt6cb7m]

This is exactly what I needed!!! Love to see more of a end to end as we noobs still learning hehe

[@JarrodWatts]

Thanks for that feedback! Hoping to do more videos like this one

[@muhammadaasimsoomro4971]

Great Content. Keep doing more tuts.

[@lucasknudsen7236]

Underrated AF! Would be super interested in more advanced Amplify builds as well 👌

[@JarrodWatts]

Thanks Lucas :) haha it’s been a while since I’ve used it actually

[@RichReflectionz]

Found your channel and subscribed now, been looking around. What are the pre-requisite for web3 development in your opinion? I’m currently learning react and will spend some time building before going to web3, what in web2 is needed to be a great base to learn before web3, I see you utilise thirdweb sdk a lot, interested in your opinion. Thanks

[@teodorionescu3490]

I wrote a comment about a partnership on tiktok but then I saw that you stopped posting for a year 🤣dm me on tiktok if you are interested in more details