andriajah Sun Nov 2021 2 years ago
🔴 Let's Build Spotify 2.0 With Next.js 12.0! (middleware, Spotify Api, Tailwind, Nextauth, Recoil)
SPECIAL DISCOUNT: Use code SONNY for 7% OFF Annual Plans!
👉 Watch my REACT BASICS 101 class for FREE with 1 month FREE Skillshare access (First 1000 people): https://skl.sh/2Srfwuf
🚨 [BLACK FRIDAY SALE] Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course
The much anticipated SPOTIFY 2.0 build with NEXT.JS 12.0 is FINALLY HERE!
🔻Join me as I build an insane Spotify 2.0 clone where you’ll learn:
👉 Fetch Spotify Playlists + Control Music playback with the Spotify API
👉 User authentication with Spotify + NextAuth to persist user's logged in state! (Including how to use access & refresh oAuth JWT tokens)
👉 Style an awesome responsive UI with Tailwind CSS
👉 Learn how to use Next.js 12 Middleware to handle authenticated user access!
👉 Learn how to use Recoil for state management (when switching playlists and songs)!
+ SO MUCH MORE!
🖥️ CODE
Get the code for my builds here: https://links.papareact.com/github
📰 NEWSLETTER (Join to get the PAPAFAM Playlist for FREE! 🎵)
https://links.papareact.com/newsletter
🎙️ 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
❤️ SUPPORT
PAPA Merch: https://links.papareact.com/merch
Donate: https://links.papareact.com/donate
🕐 TIMESTAMPS:
00:00 Introduction
00:46 Build Showcase
03:11 Hostinger Sponsorship
07:15 Build Explanation
12:25 Setting up Next.js, Tailwind CSS & Spotify
17:01 Initialising the build
19:04 Build Layout
21:33 Building the Sidebar Component (1/3)
42:18 Explaining NextAuth Authentication
43:37 Implementing NextAuth Authentication (1/2)
56:54 Implementing Spotify Web API
1:03:08 Implementing NextAuth Authentication (2/2)
1:25:11 Customising the Sign In Page
1:37:11 Building the Sidebar Component (2/3)
1:40:09 Explaining Middleware [Next.js 12.0]
1:41:47 Implementing Middleware [Next.js 12.0]
1:50:19 Building the Center Component (1/2)
2:06:31 Implementing the useSpotify Custom Hook
2:11:24 Building the Sidebar Component (3/3)
2:19:27 Implementing Recoil
2:21:30 Implementing Recoil Atoms
2:28:00 Building the Center Component (2/2)
2:44:56 Building the Songs Component
2:49:21 Building the Song Component
3:05:54 Building the Player Component
3:11:02 Implementing the useSongInfo Custom Hook
3:14:39 Building the Left Side of the Player Component
3:25:15 Building the Center of the Player Component
3:34:22 Building the Right Side of the Player Component
3:37:08 Debouncing Explained
3:38:42 Implementing Volume Functionality using Debounce
3:47:08 Final Build Demo
3:51:09 Deploying to Vercel
3:58:31 Outro
#react #nextjs #tailwindcss #nextjs12 #middleware #spotify #oauth #nextauth #reactjs #recoil #api react developer reactjs html css js javascript papa papareact papa-react tutorial frontend webdev web-dev clone fullstack backend motivation reactnative react-native redux typescript