🔴 React.js Clones by PAPA React - 🔴 Let's build a Music Streaming App with NEXT.JS 12! (Middleware, API, Tailwind, Auth, Recoil)

🚨 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 Check out Hostinger 👉 https://www.hostinger.com/sonny SPECIAL DISCOUNT: Use code SONNY for 7% OFF Annual Plans! The much anticipated Music Streaming App with NEXT.JS 12.0 is FINALLY HERE! 🔻Join me as I build an insane Music Streaming App where you’ll learn: 👉 Fetch Playlists + Control Music playback 👉 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! 🎙️ 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: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 DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Spotify and it's subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes. #react #nextjs #tailwindcss #nextjs12 #middleware #spotify #oauth #nextauth #reactjs #recoil #api