❗️ Sign up to Thirdweb today for FREE: https://thirdweb.com/?utm_source=youtube&utm_medium=social&utm_campaign=nftdropdapp
❓ Was this too difficult?
Watch my REACT BASICS 101 class for FREE with 1 month FREE Skillshare access (First 1000 people) 👉 https://skl.sh/2Srfwuf
🗂 NFT Metadata: https://drive.google.com/drive/u/1/folders/1qU7Wfv0hDGGULe9b9z_TVMkK1G3nIacv
🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course
Join me as I build the NFT DROP DAPP with NEXT.JS. You’ll learn how to do the following in this build:
👉 How to create and release your first NFT drop collection smart contract with Thirdweb!
👉 How to allow users to MINT a Real NFT which is visible on OpenSea – The largest NFT marketplace to exist!
👉 How to build a Login and Logout Authentication flow with Metamask!
👉 How to implement toaster notifications & silky smooth loading animations!
👉 How to implement Sanity to have a full CMS platform which is customisable even when the website is live!
👉 How to use testnets such as the ETH Rinkeyby test network!
👉 How to finally deploy the final build on Vercel!
+ So Much More!
🔴 LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github
📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up to the PAPA Newsletter here 👉 https://links.papareact.com/newsletter
👇🏻FOLLOW ME HERE:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPA Merch: https://links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
01:19 Build Tech Stack
02:28 Thirdweb Sponsorship
04:23 Build Showcase & Explanation
07:07 Setting up Next.js & Tailwind CSS
08:56 Initialising the Build
15:47 Implementing Routing
18:37 Creating the NFT Drop Page
20:21 Building the Left Side of the NFT Drop Page
32:38 Building the Right Side of the NFT Drop Page
33:50 Building the Header Section of the NFT Drop Page
42:13 Building the Content Section of the NFT Drop Page
47:28 Building the NFT Mint Button (1/2)
49:56 Building the Login Functionality with Thirdweb
58:14 Building the Logout Functionality
1:00:53 Adding the Wallet Address Text
1:04:05 Deploying the Build (1/3)
1:08:13 Setting up Sanity
1:26:46 Modifying Sanity Schemas
1:37:41 Creating and Deploying the NFTs in Thirdweb
1:43:27 Adding Funds to your MetaMask Wallet
1:45:23 Batch Uploading NFTs using Thirdweb
1:50:58 Adding a Claim Phase
1:53:51 Explaining Server Side Rendering in Next.JS
1:54:42 Implementing Server Side Rendering using Next.JS (1/2)
2:02:27 Creating Type Definitions using TypeScript
2:04:45 Building the Home Page
2:15:19 Implementing Server Side Rendering using Next.JS (2/2)
2:19:36 Implementing the Sanity Collection Data
2:25:22 Deploying Sanity & Build (2/3)
2:30:57 Adding the Total Number of NFTs Claimed
2:40:03 Adding a Silky Smooth Loading Animation
2:44:17 Building the NFT Mint Button (2/2)
3:00:31 Implementing Toaster Notifications
3:08:36 Final Build Explanation & Demo
3:10:53 Deploying the Final Build (3/3)
3:12:02 Outro
Let’s get it PAPA fam🔥.
#reactjs #web3 #nextjs
