Summary
Keywords
Full Transcript
🚨 Join the world’s BEST developer community “Zero to Full Stack Hero”: https://www.papareact.com/course 📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges ❗️ Sign up to Thirdweb today for FREE: https://thirdweb.com/?utm_source=youtube&utm_medium=social&utm_campaign=nftdropdapp 🗂 NFT Metadata: https://drive.google.com/drive/u/1/folders/1qU7Wfv0hDGGULe9b9z_TVMkK1G3nIacv 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 👇🏻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 Newsletter: https://links.papareact.com/newsletter 💰 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 PAPAFAM 🔥. #reactjs #web3 #nextjs
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
