🔴 Let’s build a CRYPTO LOTTERY with NEXT.JS! (React.js, Solidity, TypeScript, TailwindCSS, Thirdweb)

Sonny Sangha

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

🫂 Join my Community, “University of Code” for FREE: https://www.universityofcode.com

🔴 LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github

📩 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/deploy?utm_source=youtube&utm_medium=social&utm_campaign=lotteryapp

Lottery Smart Contract Repo: https://github.com/sonnysangha/lottery-smart-contract

Deploy the contract directly here: https://thirdweb.com/0x741179Acd84FeDEb7315a8ce4149f5cEF914185c/Lottery

—

Join me as I build a WEB 3.0 CRYPTO LOTTERY app with Next.js (yes we’re building an actual lottery app!) – you’ll learn how to do the following in this build:

👉 Use Next.js to build a functional WEB 3.0 Crypto Lottery app!
👉 Deploy your first SOLIDITY smart contract with thirdweb’s amazing NEW deploy & release features!
👉 Learn how to deploy smart contracts to the Ethereum, Polygon (+ many more) blockchains using thirdweb!
👉 Use Tailwind CSS for awesome responsive styling!
👉 You’ll learn how to write robust code with Typescript!
👉 Use Tailwind CSS Heroicons 2.0 to elevate your app design!
+ SO MUCH MORE!

🎙️ PODCAST
https://links.papareact.com/podcast

🌍 SOCIALS:
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

❤️ SUPPORT
PAPA Merch: https://links.papareact.com/merch
Donate: https://links.papareact.com/donate

🕐 TIMESTAMPS:
00:00 Introduction
00:52 Build Showcase
06:58 Build Explanation
08:31 thirdweb Sponsorship
09:24 Zero to Full Stack Hero
12:38 Setting up Next.js & Tailwind CSS
15:12 Initialising the Build
17:05 Disclaimer for the Build
17:44 Recommended VS Code Extensions
18:32 Explaining the Build Process
23:37 Building the Header Component (1/2)
32:04 Building the NavButton Component
38:19 Implementing Heroicons v2
41:02 Building the Header Component (2/2)
47:08 Explaining and Deploying your Smart Contract
1:02:07 Implementing thirdweb
1:05:54 Implementing Login / Logout Functionality using MetaMask
1:27:21 Refactoring the Code
1:29:55 Building the Next Draw Section
1:50:15 Live Debugging
1:58:18 Pulling in the Lottery Statistics from thirdweb
2:08:30 Building the CountdownTimer Component
2:20:38 Implementing the Buy Ticket Functionality
2:28:12 Live Debugging
2:39:46 Building the Ticket UI Box
2:51:04 Building the Footer Section
2:52:22 Implementing Winner Winner, Chicken Dinner!
3:02:38 Implementing React Fast Marquee
3:06:41 Implementing the Check Admin Functionality
3:07:49 Building the AdminControls Component
3:17:15 Final Build Explanation and Demo
3:22:46 Outro

DISCLAIMER: This video is made for informational and educational purposes only. The content of this tutorial is not intended to be a lure to gambling. Instead, the information presented is meant for nothing more than learning and entertainment purposes. We are not liable for any losses that are incurred or problems that arise at online casinos or elsewhere after the reading and consideration of this tutorials content. If you are gambling online utilizing information from this tutorial, you are doing so completely and totally at your own risk.

#reactjs #nextjs #solidity #tailwindcss #tailwind #thirdweb #papafam #sonnysangha