Spotify Clone with NextJS – Tailwind CSS – NextJS Middleware – NextAuth – Spotify API

Welcome to my Spotify build video! Helpful for beginner/intermediate devs who are learning NextJS! Code and details below:

What concepts will we use?

– Implementing Login with X functionality using NextAuth
– Implement persisted login session where user stays logged in
– Using NextJS middleware
– Using Spotify API to clone their functionalities
– Using heroicons

Github code: www.github.com/apoorvnandan/spotify-2-0
Twitter: @NandanApoorv
Discord server for doubts: discord.gg/Aw3vsWtGgH

TIMESTAMPS:

00:00:00 Showing the build
00:03:16 Create NextJS project
00:06:45 NextAuth Documentation
00:10:49 Spotify Developer Dashboard
00:13:05 Env variables
00:15:22 NextAuth Configuration
00:27:10 NextAuth Callbacks
00:36:11 Refreshing access token
00:41:48 Login page
00:47:21 Using Spotify API with access token
00:55:58 Layout
00:59:00 Sidebar
01:03:24 Using Heroicons
01:27:35 Playlist view
02:03:59 Changing opacity on scroll
02:12:58 Displaying songs
02:33:29 Song player
03:21:22 Library view
03:37:45 Search view
03:50:31 Featured playlists
03:54:52 Search results
04:31:43 Artist page
04:59:27 Linking artist page
05:04:22 Logout button
05:07:22 Middleware
05:12:55 Styling Login page
05:14:18 Fixing scroll
05:15:36 Fixing refresh token
05:21:16 Final showcase
05:22:34 Outro