Scan a QR Code and Claim an NFT - Phygital Experience Tutorial
In this video, learn how to claim an NFT by scanning a WR code. Learn to generate a unique QR code which will direct your user to a unique claim page, if the NFT has not been claimed yet you can claim the NFT by logging into a wallet. If the NFT has been claimed you cannot claim the NFT
*Mumbai testnet support has been officially deprecated. Transition to the Amoy testnet for improved scalability and reduced gas fees.*
ERC721 NFTCollection: https://thirdweb.com/thirdweb.eth/Tok...
MongoDB: https://www.mongodb.com/
GitHub repo: https://github.com/thirdweb-example/p...
thirdweb Engine Docs: https://portal.thirdweb.com/engine/ge...
How to setup local thirdweb Engine: • Build scalable apps with a web3 backend - ...
thirdweb API: https://thirdweb.com/dashboard/settings
Creating an API: • Start building blockchain apps: Getting st...
thirdweb Docs: https://portal.thirdweb.com/
Join our Community of over 30,000 Web3 builders: / discord
thirdweb Official Site: https://thirdweb.com/dashboard
thirdweb Twitter: / thirdweb
Timestamps:
00:00 Introduction to building a web3 app to scan a QR code and claim an NFT
01:15 Demo of scanning QR code to claim NFT and viewing owned NFTs
04:40 Deploy an ERC721 NFT Collection smart contract using thirdweb
07:00 Setup MongoDB
09:30 Create a new Next.js project and install thirdweb and Prisma
10:45 Setup Prisma with MongoDB and create a database collection for our NFTs
16:15 Create NFT claim API using thirdweb Engine
24:30 Create component for ThirdwebProvider and configure for your application
27:30 Create unique claim pages for when QR code is scanned
31:30 Create claim button to claim NFT from QR code scanned using thirdweb API
35:00 Show user's owned NFTs based on the wallet they are connected with
37:15 Setup a local instance of Engine and test claiming NFT
40:30 Create script to generate unique QR codes for each NFT
43:00 Test scanning QR code and claiming NFT
44:00 Conclusion