Next.Js Ultimate - Build A Music Player App

Master Next.js, Auth.js and React by Building Music Player App

What you'll learn

Build a React Project with Ant design

Caching data with React Query

Next js Fundamentals: Understand routing, data fetching, and server-side rendering, caching

Understand 4 ways of rendering: CSR, SSR, SSG, ISR

State Management: Manage app state effectively using React Context

Authentication and Authorization: Add secure login with Auth js

Requirements

Basic Knowledge of JavaScript

Basic React Knowledge (useState, useEffect)

Ability to building a Simple React App (Todo App)

Basic Knowledge of TypeScript

Description

Welcome to Next.js Ultimate - Build a Music Player App!Usually, when you watch a tutorial, you think you "get it". But after you start working on the project, you find it difficult—you don’t know where to start. Why? Because most tutorials show you the "correct code" right from the beginning, but they don’t teach you how to find that code, how to practice, or how to test and refine your way to the "correct code". That’s what we call "tutorial hell"—you only know how to follow instructions, not how to solve problems independently.In this course, we break that cycle. You’ll learn how to think like a developer, tackle challenges head-on, and build your project with confidence.This course is your ultimate guide to mastering Next.js, the most powerful React framework for building modern, high-performance web applications. Whether you're a beginner or an experienced developer, this hands-on course will take you step-by-step through the process of building a feature-rich Music Player App from scratch. By the end of this course, you will have a fully functional music player app.What Will You Build?Admin Dashboard with React and Ant DesignIn the first project, you’ll use React and Ant Design (antd) to create a fully functional and visually appealing Admin Dashboard.Music Player App with Next.jsAfter mastering the admin dashboard, we’ll dive into Next.js to build a dynamic, fully interactive Music Player App with MUI.This course is packed with practical projects and code-along exercises designed to give you the skills and confidence to build complex web applications.Join now and take the first step towards becoming a Next.js pro.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What tools are used to build the project?

Section 2: Setup Dashboard Project

Lecture 3 Setup vite project

Lecture 4 Setup ant design

Lecture 5 Setup router

Lecture 6 Build dashboard page

Lecture 7 Understand nested route

Lecture 8 Setup sidebar

Lecture 9 Handle sidebar base on url

Section 3: Dashboard: Authentication (JWT) with React Query

Lecture 10 Setup signup page

Lecture 11 Form validation with antd & signin page

Lecture 12 Setup mongodb

Lecture 13 Setup backend project

Lecture 14 Setup postman to call api

Lecture 15 Import data to backend

Lecture 16 Setup notification context - part 1

Lecture 17 Setup notification context - part 2

Lecture 18 Setup tanstack react query

Lecture 19 Setup API client

Lecture 20 Axios interceptor

Lecture 21 Disabled when call API (state)

Lecture 22 useMutation

Lecture 23 Axios error

Lecture 24 Handle global error with react query

Lecture 25 Custom hook

Lecture 26 Storage access token

Lecture 27 Sign in

Lecture 28 Protected route - part 1

Lecture 29 Protected route - part 2

Lecture 30 Fixing typescript

Lecture 31 Refactor access token

Lecture 32 Sign up admin

Lecture 33 Clear access token

Lecture 34 Logout

Section 4: Dashboard: Manage Song

Lecture 35 Section overview

Lecture 36 Sign in with artist

Lecture 37 Build song table component

Lecture 38 Render song list

Lecture 39 Render image

Lecture 40 Format duration & date

Lecture 41 Create song modal

Lecture 42 Fix UI song modal

Lecture 43 How to submit out side form?

Lecture 44 Get all genres in select

Lecture 45 How caching in react query work?

Lecture 46 Create a new song (API)

Lecture 47 Revalidate cache

Lecture 48 Fix typescript

Lecture 49 Setup drawer to add image

Lecture 50 Analyze component tree

Lecture 51 Create tab component

Lecture 52 Note about next lecture

Lecture 53 Handle preview image (not use library)

Lecture 54 Handle preview image (antd)

Lecture 55 Custom upload image in antd

Lecture 56 onProgress

Lecture 57 Upload image status

Lecture 58 Revalidate song

Lecture 59 Get dynamic id when click to item

Lecture 60 React context to prevent prop drilling

Lecture 61 Upload audio

Lecture 62 Update song modal

Lecture 63 Binding data to update modal

Lecture 64 Call API to update song

Lecture 65 Delete popover

Lecture 66 Call API to delete song

Lecture 67 Pagination - part 1

Lecture 68 Pagination - part 2

Lecture 69 Prefetching data

Lecture 70 Disable perform another artist

Section 5: Dashboard: Manage Album

Lecture 71 Setup album page

Lecture 72 Create an album table

Lecture 73 Add album modal

Lecture 74 Call API to create album

Lecture 75 Album drawer

Lecture 76 Render songs for album

Lecture 77 Add song to album - part 1

Lecture 78 Add song to album - part 2

Lecture 79 Remove song from album

Section 6: Dashboard: Manage User (Exercise)

Lecture 80 Let's do the manage user

Lecture 81 Update sidebar

Section 7: Next.js Fundamental: Core Concept

Lecture 82 Setup tutorial project

Lecture 83 Rule of create a page

Lecture 84 More on router

Lecture 85 Shared layout

Lecture 86 Understand route group

Lecture 87 Navigate between component

Lecture 88 Dynamic route

Lecture 89 Client side rendering (CSR) vs Server side rendering (SSR)

Lecture 90 Static side generation (SSG)

Lecture 91 Incremental static regeneration (ISR)

Lecture 92 Understand server component

Lecture 93 Understand client component

Lecture 94 Hydrate process

Lecture 95 Understand client boundary issue

Lecture 96 More on client boundary

Lecture 97 Handle error

Lecture 98 Loading

Lecture 99 React suspense

Section 8: Next.js Fundamental: Server Action

Lecture 100 Server action

Lecture 101 Call API in server action

Lecture 102 Organize server action file

Lecture 103 useFormStatus hook

Lecture 104 useActionState hook

Lecture 105 Schema validation

Lecture 106 Zod

Lecture 107 Server action - summary

Lecture 108 Redirect

Section 9: Next.js Fundamental: Cache

Lecture 109 Difference type of cache

Lecture 110 Full route cache

Lecture 111 Understand static page & dynamic page

Lecture 112 Understand time based validation

Lecture 113 Understand on demand validation

Lecture 114 Hey! I don't want to use cache

Lecture 115 Cache: Summarize

Section 10: Big Project Time: Setup Project

Lecture 116 Setup project

Lecture 117 Integrate MUI into project

Lecture 118 How to read docs MUI ?

Lecture 119 Prepare UI

Lecture 120 Build a home page

Lecture 121 Buld a song card component

Lecture 122 Show button when hover

Lecture 123 Render album list

Lecture 124 Generate random image

Lecture 125 Create a custom fetch client

Lecture 126 Adding typescript for fetch client

Lecture 127 Categorize album by artist name

Section 11: Feature: Play Audio, Communication with Context

Lecture 128 Audio footer

Lecture 129 Help! The duration not show? Why

Lecture 130 Play song button - Get audio

Lecture 131 Audio context

Lecture 132 Synchorize state

Lecture 133 Prevent same song

Lecture 134 Handle play next & previous song in album

Lecture 135 Fix: request interrupted

Lecture 136 Section summary

Section 12: Feature: Authentication (Auth.js & NextAuth) with JWT

Lecture 137 Menu dropdown

Lecture 138 Build sign in page quickly

Lecture 139 Explore catch all segment & route handler

Lecture 140 Integrate auth.js with github provider

Lecture 141 Sign in with github - part 1

Lecture 142 Sign in with github - part 2

Lecture 143 The problem with outside authentication service

Lecture 144 Customize authentication

Lecture 145 Call API sign in with social to connect with my backend

Lecture 146 Fixing typescript

Lecture 147 Sign in with credentials

Lecture 148 Issue with redirect

Lecture 149 Create another data type file

Lecture 150 Form validation

Lecture 151 useFormStatus

Lecture 152 Sign up

Lecture 153 useRequireLogin

Lecture 154 Require context

Lecture 155 Section summary

Section 13: Feature: Album

Lecture 156 Prepare the album page

Lecture 157 Render songs in album

Lecture 158 Next Image

Lecture 159 Handle play song in album - part 1

Lecture 160 Handle play song in album - part 2

Lecture 161 Handle play song in album - part 3

Section 14: Feature: Playlist

Lecture 162 More button

Lecture 163 Playlist modal

Lecture 164 Create playlist - Call API

Lecture 165 Put access token to server action

Lecture 166 Form validation

Lecture 167 Handle unknow eror

Lecture 168 Show playlist on sidebar

Lecture 169 Render playlists

Lecture 170 Playlist detail page

Lecture 171 Add to playlist modal

Lecture 172 Render playlist in modal

Lecture 173 Add song to playlist - Call API

Lecture 174 Show notification

Lecture 175 Exercise

Lecture 176 Handle next & previous song in album

Lecture 177 Section summary

Section 15: Build Project: Production Mode

Lecture 178 Help! All of my pages are dynamic

Lecture 179 Session

Lecture 180 Hmm. Why home page is dynamic?

Lecture 181 Fix dynamic page issue

Lecture 182 AUTH_TRUST_HOST error

Lecture 183 Playlist Context

Lecture 184 Fixing playliist context

Lecture 185 Refactor fetch client

Lecture 186 Time based validation

Lecture 187 Error & Loading

Lecture 188 generateStaticParams

Lecture 189 apply generateStaticParams to our project

Lecture 190 On demand validation (outside nextjs)

Lecture 191 Section summary

Lecture 192 Fix: Bad Credential

Beginner to Intermediate Developers,React Developers Exploring Next js,Frontend Developers Looking to Build Practical Projects,Anyone Who Has Faced “Tutorial Hell”