NextJS 15 Ultimate - Build a Music Player App (TypeScript) from Udemy

Welcome to Next.js Ultimate - Build a Music Player App. (This course using Next.js version 15 right from the beginning.)

Note: This course is NOT focus on the CSS

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.

What's inside

Learning objectives

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

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

Syllabus

Introduction

What tools are used to build the project?

What's project look like?

Who is this course for?

Resource download

Setup Dashboard Project

Setup vite project

Setup ant design

Setup router

Build dashboard page

Understand nested route

Setup sidebar

Handle sidebar base on url

Dashboard: Authentication (JWT) with React Query

Setup signup page

Form validation with antd & signin page

Setup mongodb

Setup backend project

Setup postman to call api

Import data to backend

Setup notification context - part 1

Setup notification context - part 2

Setup tanstack react query

Setup API client

Axios interceptor

Disabled when call API (state)

useMutation

Axios error

Handle global error with react query

Custom hook

Storage access token

Protected route - part 1

Protected route - part 2

Fixing typescript

Refactor access token

Clear access token

Logout

Dashboard: Manage Song

Section overview

Build song table component

Render song list

Render image

Format duration & date

Create song modal

Fix UI song modal

How to submit out side form?

Get all genres in select

How caching in react query work?

Create a new song (API)

Revalidate cache

Fix typescript

Setup drawer to add image

Analyze component tree

Create tab component

Note about next lecture

Handle preview image (not use library)

Handle preview image (antd)

Custom upload image in antd

onProgress

Upload image status

Revalidate song

Get dynamic id when click to item

React context to prevent prop drilling

Upload audio

Update song modal

Binding data to update modal

Call API to update song

Delete popover

Call API to delete song

Pagination - part 1

Pagination - part 2

Prefetching data

Disable perform another artist

Dashboard: Manage Album

Setup album page

Create an album table

Add album modal

Call API to create album

Album drawer

Render songs for album

Add song to album - part 1

Add song to album - part 2

Remove song from album

Dashboard: Manage User (Exercise)

Let's do the manage user

Update sidebar

Next.js Fundamental: Core Concept

Setup tutorial project

Rule of create a page

More on router

Shared layout

Understand route group

Navigate between component

Dynamic route

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

Static side generation (SSG)

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Uses Next.js version 15, which ensures learners are working with the latest features and improvements of the framework

Covers four rendering methods (CSR, SSR, SSG, ISR), which provides a comprehensive understanding of Next.js data fetching capabilities

Employs Ant Design and MUI, which are popular UI libraries that can accelerate development and improve the visual appeal of applications

Requires familiarity with React, as the course focuses on Next.js, which builds upon React's component-based architecture

Does not focus on CSS, which means learners should already possess CSS skills or be prepared to learn them independently

Utilizes JWT for authentication, which is a standard approach, but learners should be aware of more modern alternatives like session-based authentication

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in NextJS 15 Ultimate - Build a Music Player App (TypeScript) with these activities:

Review TypeScript Fundamentals

Show steps

Solidify your understanding of TypeScript syntax, types, and features to write cleaner and more maintainable code in your Next.js music player app.

Browse courses on TypeScript

Show steps

Review basic TypeScript syntax and data types.
Practice creating interfaces and types for React components.
Explore advanced TypeScript features like generics and utility types.

Review 'Learning React, 2nd Edition' by Alex Banks and Eve Porcello

Show steps

Reinforce your React knowledge, which is foundational for Next.js development, by reviewing key concepts and best practices.

View Learning React: Modern Patterns for Developing... on Amazon

Show steps

Read the chapters on components, JSX, and state management.
Practice building simple React components.
Refer to the book when encountering React-related challenges in the course.

Follow Next.js Authentication Tutorials

Show steps

Deepen your understanding of authentication in Next.js by following tutorials that cover different authentication strategies and implementations.

Browse courses on Authentication

Show steps

Find tutorials on implementing authentication with Auth.js in Next.js.
Implement authentication in a separate Next.js project.
Adapt the authentication logic to the music player app.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Practice React Component Composition

Show steps

Improve your ability to create reusable and maintainable React components by practicing component composition techniques.

Browse courses on React Components

Show steps

Identify opportunities to break down existing components into smaller, reusable components.
Practice passing data and functionality between components using props.
Experiment with different component composition patterns.

Extend the Music Player App

Show steps

Solidify your Next.js skills by adding new features to the music player app, such as user playlists, advanced search, or social sharing.

Show steps

Choose a feature to add to the music player app.
Plan the implementation, including data models, UI components, and API endpoints.
Implement the feature, following best practices for Next.js development.
Test the feature thoroughly.

Contribute to a React or Next.js Library

Show steps

Gain practical experience and contribute to the community by contributing to an open-source React or Next.js library.

Browse courses on React

Show steps

Find a React or Next.js library that interests you.
Identify an issue or feature to work on.
Submit a pull request with your changes.

Review 'Fullstack React, The Complete Guide to ReactJS and Friends' by Anthony Accomazzo et al.

Show steps

Expand your knowledge of full-stack React development to better understand the context of the Next.js music player app.

View Putting Knowledge to Work on Amazon

Show steps

Read the sections on server-side rendering and data fetching.
Explore the book's examples of building full-stack applications.
Consider how the concepts in the book apply to the music player app.

Career center

Learners who complete NextJS 15 Ultimate - Build a Music Player App (TypeScript) will develop knowledge and skills that may be useful to these careers:

Frontend Engineer

A Frontend Engineer develops and maintains the user interface of websites and applications. This role typically requires a strong understanding of JavaScript frameworks like React, which this course helps build a foundation in. The course's in-depth exploration of Next.js, a React framework, is especially relevant. The course covers server-side rendering, client-side rendering, and static site generation, which are critical concepts for any Frontend Engineer. Building a complete music player application also offers practical experience using modern web development tools and techniques. This experience provides a relevant portfolio piece and a strong base for creating robust user interfaces.

See salaries and explore the career path for Frontend Engineer

Web Application Developer

A Web Application Developer builds interactive web applications, focusing on both the user interface and underlying logic. This course is useful for anyone wanting to be a Web Application Developer by providing opportunities to understand and implement server-side rendering, client-side rendering, and static site generation. This course allows a student to build a complete music player application and an admin dashboard, covering the full stack development cycle. This hands-on approach, especially with Next.js, provides a foundation for creating feature-rich web applications.

See salaries and explore the career path for Web Application Developer

Full-Stack Developer

A Full Stack Developer works on both the front and back end of web applications. This course may be particularly useful for aspiring Full Stack Developers because it includes both the front end development using React and the back end using MongoDB. The course covers key areas such as API integration, authentication, and data management, which are needed to create a full stack application. Building a music player application and an admin dashboard offers practical experience in both frontend and backend technologies. Furthermore, the course's focus on Next.js is relevant to building modern web applications, making it beneficial for a Full Stack Developer.

See salaries and explore the career path for Full-Stack Developer

React Developer

A React Developer specializes in building user interfaces using React and related libraries. This course may be useful for a React Developer due to its focus on Next.js, a very popular React framework. The course extensively covers state management, authentication, and building complex UI components, which are relevant to a React developer. Building projects such as a music player app and admin dashboard provides practical experience with React. With this course, a React Developer will build on their knowledge with practical projects.

See salaries and explore the career path for React Developer

Software Engineer

A Software Engineer designs and develops software solutions, which often includes web applications. This course may be particularly useful for a Software Engineer because it focuses on building complete web applications from scratch. The course covers key aspects of modern web development, such as server-side rendering, client-side rendering, state management, and API integration. A software engineer will appreciate that this course uses Next.js, a modern React framework, to build a music player application and an admin dashboard. This hands-on, comprehensive approach to web development provides a solid foundation for aspiring or current Software Engineers.

See salaries and explore the career path for Software Engineer

UI Developer

A UI Developer focuses on designing and implementing user interfaces. This course may be useful for someone wanting to become a UI Developer because it teaches practical skills in building user interfaces using React and related technologies with an emphasis on the Next.js framework. The course's focus on creating a music player application and an admin dashboard provides hands-on experience in designing and implementing user interfaces. Learning to handle forms, tables, modals, images and other UI elements is relevant to any UI Developer.

See salaries and explore the career path for UI Developer

Frontend Architect

A Frontend Architect designs the overall structure and architecture of frontend applications. While this role typically requires a deeper level of experience, this course may be useful to aspiring Frontend Architect since it teaches how to build complex applications with Next.js. The course covers server-side rendering, client-side rendering, state management, and authentication, which are all important considerations for a Frontend Architect. Building a feature-rich music player app from scratch is a way to build experience in structuring a frontend project. This course may help build a foundation in architectural concerns when designing a complex application.

See salaries and explore the career path for Frontend Architect

Web Developer

A Web Developer builds and maintains websites, focusing on both the front end and back end aspects. This course may be useful because it includes building an entire application using Next.js. This means that aspiring Web Developers gain experience in designing and developing with a modern framework that is used in the field. The course covers key topics such as routing, data fetching, and server-side rendering. Furthermore, the course's projects give practical experience, making it useful for any web developer.

See salaries and explore the career path for Web Developer

Application Developer

An Application Developer is involved in the design, development, and maintenance of software applications, often including web applications. This course may be useful because it provides hands-on experience in building a complete web application using Next.js within a React ecosystem. The course covers several critical development concepts and processes such as API interaction, authentication, and state management. These topics are all relevant to an Application Developer. The projects in this course allow learners to build practical skills and knowledge.

See salaries and explore the career path for Application Developer

Software Developer

A Software Developer is a general term for a wide variety of software development roles from desktop to mobile to web based applications. This course may be useful to a Software Developer because it guides students through the process of building a web application using Next.js, which is based upon React. This course provides experience in routing, data fetching, and server-side rendering which are essential skills for many Software Developers. The practical experience of managing state and building user interfaces help those looking to join a Software Development field.

See salaries and explore the career path for Software Developer

UX Designer

A UX Designer focuses on improving the user experience with technology. This course may be useful to someone wanting to be a UX Designer since it provides hands on experience in the development process, and insight into how design is implemented. The course focuses on building user interfaces using React, and may give the UI insights needed to create interfaces that are both functional and intuitive. By having experience of working with the technologies used in implementation, UX designers can have more practical experience.

See salaries and explore the career path for UX Designer

Mobile App Developer

A Mobile App Developer builds applications for mobile devices. This course may be useful because building web applications with Next.js is somewhat similar to developing mobile applications. The skills in state management, routing, and user interface design learned in this course are often transferable to mobile application development using frameworks like React Native. Although this course focuses on web development, the general concepts of application development are useful for a Mobile App Developer.

See salaries and explore the career path for Mobile App Developer

Technical Project Manager

A Technical Project Manager oversees software development projects. While this course does not focus directly on project management, it may be useful to learn the technical aspects of building web applications. A better understanding of development processes makes managing projects easier for Technical Project Managers. By taking this course, a Project Manager can gain insight into the technologies used, such as React and Next.js, and how a full stack application is developed. This knowledge may be beneficial in planning and executing technical projects.

See salaries and explore the career path for Technical Project Manager

Database Administrator

A Database Administrator manages and maintains databases. While this course is primarily focused on front end development, it has parts that cover the configuration of MongoDB. Thus, taking this course may be helpful for someone who would like to work with the backend and understand database interactions. The course also covers API calls and data management, which are essential for any Database Administrator. By taking this course, a DBA will gain a more holistic view of data management within an application.

See salaries and explore the career path for Database Administrator

IT Support Specialist

An IT Support Specialist provides technical assistance to users. While this course is not directly related to IT support, it may be useful to take this course to gain a deeper understanding of web applications. By having some understanding of the technologies involved in building web applications, an IT Support Specialist may be better equipped to troubleshoot issues and provide more effective technical assistance for similar types of software. This course gives a high level overview of many applications concepts.

See salaries and explore the career path for IT Support Specialist

NextJS 15 Ultimate - Build a Music Player App (TypeScript)

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses