How to Build a Phygital NFT Claim - Scan QR to Claim NFT
In this video learn how to build a phygital NFT claim where a user can scan a QR code which allows them to claim an NFT associated with it. We'll cover how to create the physical QR codes for users to scan along with a web3 app that users can use to access to NFT for each QR code. We will be taking advantage of tools like In-App wallets for social and email login and Engine to mint the NFTs to the users wallet.
Unlimited Wallet Promo: https://thirdweb.com/unlimited-wallets
Github Repo: https://github.com/thirdweb-example/p...
In-App Wallets: https://portal.thirdweb.com/connect/i...
Engine: https://portal.thirdweb.com/engine
thirdweb API Key: https://blog.thirdweb.com/guides/crea...
thirdweb Support: https://thirdweb.com/support
Join our Community of over 30,000 Web3 builders: / discord
thirdweb Official Site: https://thirdweb.com/dashboard
thirdweb Twitter: / thirdweb
Timestamps:
00:00 Overview of how to build a phygital NFT claim - Scan QR code to claim
00:45 Demo of scan QR code to claim NFT app
05:13 Break down of how the app works
09:54 Deploy and configure NFT smart contract - ERC-1155
14:39 Create a new database project with MongoDB
17:16 Create a new project - Add Prisma and create a collection for our database
22:15 Add NFT metadata to our database
26:50 Generate QR codes for NFT metadata
30:47 Install and configure thirdweb SDK
36:53 Build a navbar with a wallet connect button
48:22 Build QR code reader component to redirect user to claim page
55:32 Build out dashboard components
01:05:00 Create a claim page to display the NFT metadata of scanned QR code
01:12:00 Implement thirdweb Engine to mint NFT when claimed
01:21:30 Read and display NFT data on dashboard
01:26:02 Conclusion