Build Twitch with Next JS and Tailwind CSS

Code Commerce

Build Twitch with Next JS and Tailwind CSS **Bonus NextAuth.js**

Join me as I recreate Twitch in Next.JS styled with Tailwind CSS and as a bonus we will even add NextAuth.js for authentication using Github & Google! Learn the Next.JS basics of next.js routing and the Image component as we take advantage of lazy loading images! We will be creating everything from scratch and even using some mock data from https://mockaroo.com and utilizing Headless UI!

🙏 Thank you for following along and please let me know what you think in the comments below!

🏆 Build Twitch UI with Next.JS
🏆 NextAuth.js web app authentication
🏆 Headless UI Component
🏆 Create a fully responsive web app in Next.JS styled with Tailwind CSS
🏆 Lazy loading images with the Image component
🏆 Statically imported images & external URL loaded images
🏆 Routing in Next.js

❤️ Support the Channel
https://www.buymeacoffee.com/clintbriley

Instagram 💪
https://instagram.com/fireclint

Github Repo 💻
https://github.com/fireclint/twitch-nextjs-tailwind

⏰ Timestamps
00:00 Start
01:30 – Create Next APP
02:50 – Install Tailwind CSS
05:50 – Navbar Component
17:05 – Headless UI
28:55 – Mobile Menu
37:54 – **NextAuth.js Authentication**
48:55 – Account Page – Gitub Auth/Google Auth
1:21:50 – Side Menu
1:22:10 – Mock data from mockaroo
1:29:22 – Layout / Main Components
1:45:52 – Live Channels Component
1:59:20 – Embed Video from YouTube into Next.JS app
02:02:36 – Icon Bar Component
02:08:30 – Categories Component
02:20:00 – Project overview

🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard – https://amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse – https://amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor – https://amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone – https://amzn.to/3O00nqG
Mic Boom Arm – https://amzn.to/3NHn6YU
Monitor Desk Light Bar – https://amzn.to/3xzKlyj