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

Set up a react project for the admin dashboard using a template, copy the setup steps from width.dev, create the project named music dashboard, and install dependencies in the terminal.

Set up Ant Design in a Next.js 15 TypeScript React project, install the UI library, and integrate components such as a button while comparing options like Material UI and Tailwind.

Set up routing in the music app by installing react-router-dom, creating a browser router, and rendering routes, while learning to read official docs and adapt to changing syntax.

Design the dashboard page by building a dashboard component inside a layout, wire routing with react router, and refine header, content, and styling for a clean, full-height dashboard.

Learn how to create nested routes with a route layout and outlet, so the header and left sidebar remain while inner pages render content.

Set up the sidebar by defining a root array of items with keys, icons, and labels, render them with map, and navigate on click using a menu component.

Utilize the useLocation hook from react-router-dom to read the current path and auto expand and select the sidebar item, while managing parent-child navigation state.

create a sign up and sign in page, center the form, and structure inputs for username, name, and password using a grid layout in the NextJS 15 TypeScript course.

Explore how to implement form validation with antd and build a sign-in page in NextJS 15, including username and password validation, min length checks, and handling success and error states.

Set up the MongoDB database for the project to store the data by creating a new MongoDB Atlas cluster on the free AWS tier and enabling access from anywhere (0.0.0.0/0).

Import the Postman collection, create an environment with an API endpoint pointing to localhost, and set the port. Then send requests to verify API calls and database connection.

Seed your backend with fake MongoDB data by importing prepared artist and song JSON into the collections using MongoDB compass.

Build and refactor a notification system using a notification context and provider, wire it into the component tree, test top-left and top-right triggers, and explore API options like duration.

Set up the notification context in part 2 by defining a notification object with success and error messages and passing the message to trigger alerts.

Set up tanstack react query version 5 to fetch and cache data, create a query client, and wrap your app with query client provider for server-side data and global styles.

Set up an axios-based API client in NextJS 15, build a custom API class with a sign-up method, and use environment variables to route calls via react query.

Learn how to implement and customize an axios interceptor to handle API responses in a React/Next.js app, focusing on extracting message and data properties before use.

Learn how to disable the submit button during an API call and re-enable after success. See how to manage loading state and preview replacing manual handling with React Query.

Learn to implement useMutation with React Query in a Next.js app, calling mutate to update data via an API and handle success or error states to enable UI actions.

Learn to handle Axios mutation errors by using onError, inspecting error.response data, logging messages, and triggering user notifications, including cases like username already in use.

Store the access token in local storage using a mutation flow, serialize the dataset, and separate concerns to keep the sign-up logic simple and reliable.

Implement the sign in flow by creating a sign in mutation, storing the token, and navigating to the homepage using React Router Dom, with cleanup of imports and UI adjustments.

Learn how to implement a protected route in NextJS 15 by validating an access token and admin status, fetch the current user with a bearer token, and redirect unauthenticated users.

Learn how to implement a protected route in Next.js 15 by guarding with current user checks, handling asynchronous data, and redirecting to sign-in via a route layout wrapper.

Refactor access token handling by moving local storage retrieval into components, passing it as a parameter, and centralizing header logic on the client to avoid repeating authorization across api calls.

Learn to manage access tokens in a Next.js TypeScript app, handling login, bearer tokens, unauthorized redirects, and single retry logic to protect routes and refresh user state.

Build a log out flow that clears the access token, updates the menu state, and navigates back to the hub by removing the token from storage.

In this section, learn to enable artist authentication to create songs in a NextJS 15 TypeScript music player app, using the pre-provided sign-in and sign-up for artists.

Explore how to implement sign in and sign up flows for artists in a Next.js 15 TypeScript app, including routing, API endpoints, and current user retrieval.

Build a song table component in a Next.js dashboard, configuring columns like title, duration, audio file, cover image, and release date, with data source mapping and proper key alignment.

Render the song list by fetching songs data with React Query, display the cover image, title, artist name, and duration, and refine the UI to match the data structure.

Fix the cover image by accessing the image URL from the blocks. Use import.meta.env to configure the URL and render the image in the song component.

Open a song creation modal from a button, fill a form with title and genre, submit to close the modal and add a new song row to the playlist.

Fix the song modal UI by centering the form with margin auto, adjusting width, and removing the submit button while renaming and wiring onClick to test changes.

Learn how to submit a form from outside the form element by using the form attribute and matching id, then move the form into the parent component for proper validation.

Fetch genre data from the API, map it to select options with value and label, and wire these options into the song form in the Next.js TypeScript music player app.

Explore how React Query uses a query key and internal cache to serve data instantly, avoid unnecessary fetches, and reflect loading states with isLoading in a music app.

Create a new song via API in a Next.js 15 TypeScript app by building a form, handling submit, and posting song data to update the song list.

Learn how to revalidate and refresh the song list in a Next.js 15 music player app by using React Query, query client, and cache invalidation after adding a new song.

Address TypeScript issues by clarifying form props, implementing a void function from boolean input, reviewing data file references, logging usage, and cleaning up imports.

Set up a drawer in the NextJS 15 music player app to add image uploads and audio files, using a blog button and a slider UI for media management.

Analyze the component tree to lift style from child to parent, pass open state via props, and re-render children when the parent updates to display a song block.

Build a tab component in a nextjs 15 music player app, wiring top tabs with cover image, audio blocks, and dynamic children content.

Learn image upload and live preview in a NextJS 15 TypeScript project by using a button to trigger a hidden file input and render a preview with URL.createObjectURL.

Learn how to handle preview images using the antd upload component, including uploading, removing, previewing, and wiring actions to the API in a NextJS 15 TypeScript app.

Learn to implement a custom onProgress handler and progress bar for block requests, wiring progress callbacks with React Query to visualize and reset progress.

Demonstrates uploading an image with status feedback, handling invalid format errors, managing progress, revalidate later, and resetting the ui after close.

Revalidate song data after uploading or updating a song image by triggering the open state, handling the image data, and using the query client to refresh the song list.

Upload blog audio in a Next.js music player app, wiring a song audio block to upload a file, show progress, and use a custom request for success or error handling.

Create an update song modal by wiring an update action to open the song model, refactor the song form, and revalidate data while updating the modal state and user interface.

Bind the selected song data to a modal and update title, genres, cover image, and audio via a form, with update and add modes controlled by the selected song.

Implement a delete action with a popover in a NextJS music app, wiring a delete button to a bubble confirm and an asynchronous API call to update the list.

Call API to delete a song by sending its string ID, update the list via mutation, and show a success notification after removal.

Implement pagination in a NextJS music player app by updating the URL with page numbers on click, reading the router parameter, and fetching songs when the URL changes.

Add an album modal with a button to open it and a form to enter the album title and release date, using a customized modal and album model.

Call the API to create an album by wiring a mutation function, passing data, validating the form, and handling authorization with an access token, then revalidate data.

Build the add song to album action using the album drawer to open, add songs, and update the album data with album context.

Render songs for an album by using a checkbox to select tracks, map the song data to a checkbox group, and pass song IDs to the API for album updates.

Add songs to albums by building a submit flow, wiring a button to an API call, and managing album and song selections with mutation in a Next.js TypeScript music app.

Learn to add a song to an album in a NextJS TypeScript app by selecting albums and songs, mapping data, and fixing a string type issue.

Learn to conditionally render and remove the user sidebar in the Next.js app by filtering rules with the current user data and applying the atom tool.

Explore how to set up a Next.js project with TypeScript, ESLint, the SRC directory, app router, and Turbopack, then initialize and configure the starter for a music player app.

Learn how Next.js 15 defines routes by creating a src/app/page.tsx and a sign-in page folder, exporting a default component, with npm run dev and turbopack for faster development.

Explore how to define routes in the Next.js app folder by mapping the root URL to the base, and create nested dashboards and admin paths in the app router.

Discover how to share layouts in Next.js by using the route layout and the children prop, mirroring outlet behavior, and see how a header is inherited across pages via layouts.css.

Learn how route groups in Next.js 15 app router control layout inheritance, enabling per-page headers and breadcrumbs by nesting and moving layouts within root and route groups.

Explore how to navigate between pages in Next.js 15 using the Link component and useRouter, demonstrating client-side navigation without full page refresh for sign in and sign up routes.

Explore dynamic routing in Next.js by creating a single dynamic route with square brackets and slugs. Build a product detail page that renders different ids for scalable, SEO-friendly navigation.

Explore client side rendering versus server side rendering, including static site generation and incremental static regeneration, with examples showing pre-rendered content and immediate content loading.

Understand incremental static regeneration, which avoids building all product pages at build time by prebuilding hot products and generating HTML on demand during the first requests, speeding subsequent responses.

Explore how server components in Next.js render on the server to fetch data with async/await and fetch, and why useState won’t work in server components.

Understand the Next.js client component, including using the use client tag, client tags, how client and server components render, and how static site generation and incremental static regeneration apply.

Explore the hydration process in Next.js by seeing how the server renders a react server component, sends it to the client, and hydration adds events for full interactivity.

Explore the client boundary. When a client component imports a server component, the server component becomes a client component, and the client rerenders while the server renders once.

Discover how client boundaries and client components interact with server components in Next.js 15, using use client, wrapping layouts with a provider, and understanding data fetching and bundle size implications.

Learn how to implement error handling in next.js by creating an error file, distinguishing expected and uncaught errors, and using a client component to trigger and render the error component.

Build a logged-in UI with a global header for product pages, manage API refreshes, and use React suspense to handle loading in NextJS 15.

Explore React suspense in Next.js to enhance user experience by wrapping a song list's data fetch with suspense, providing a fallback, and separating fetching logic for better performance.

Learn how to mutate data on the server in Next.js 15 using server actions, the use server directive, and form data handling to submit and process inputs.

Learn to call an API from a next server action by posting form data as json to the songs endpoint with application/json content-type.

Organize a server action file by moving the action into a dedicated server file, using the use server directive, and separating client and server concerns for easier maintenance.

Use the useFormStatus hook to manage form status during mutations, disable the submit button during delay, and share status across components.

Explore how to use the useActionState hook to manage form actions and server actions in Next.js 15, initialize state with the data shape, and display submission results on screen.

Learn schema validation in a TypeScript Next.js 15 app by handling API errors, undefined data, and array messages, and map server responses to client ui with a client component.

Master Zod for server-side form validation in Next.js by defining a schema, validating data, and handling errors with flatten and clear messages using the recommended resource library.

Master server actions in Next.js 15 by separating server and client components, using the use client directive, handling form status and style, and implementing schema validation for API data.

Explore how to use the redirect function from next/navigation to navigate to a song page after creating a song, with practical examples and testing in Next.js.

Explore four kinds of caching in Next.js, including request memoization and data cache, and see how Next.js caches by default and how server and client routing caches interact.

Explore the full route cache by building a Next.js TypeScript app, compare static vs dynamic rendering, and learn how production builds determine static base vs on-demand dynamic renders.

Compare static by and dynamic by in Next.js 15, showing how static content boosts performance while dynamic routes fetch data and how to revalidate static content.

Learn how time-based validation with revalidate works in Next.js: set duration in seconds, compare with on-demand validation, and understand how fetch triggers the data cache and handles stale data.

Explore how Next.js fetch handles caching and learn to control cache behavior with options like cache with no store, dynamic routing, and the collection API to boost performance.

Explore caching strategies to improve Next.js performance, focusing on forecast vs static and dynamic caching, with on-demand validation and memoization for client-side data requests.

Set up a Next.js 15 TypeScript project with ESLint and React, opting out of Tailwind CSS, to learn frontend logic with Material UI in a Visual Studio Code MVVM workflow.

learn to set up a Next.js 15 TypeScript project with the Material UI library, install and configure MUI with the app router, and render a sample button.

Learn the basics of Material UI (MUI) with TypeScript, including app bar, icons, box, container, grid, and API props, plus CSS in JS concepts.

Set up the music interface by creating a test folder, adding a music component, and outlining client and server components with use client, z-index, header, and sidebar.

Build the home page by creating a home layout, exporting a homepage function, and wiring the root route to render children within the layout.

Build a song card component using Material UI grid version two to display album art with hover effects, and dynamically render cards for a music player app.

Show a button on hover with a jiggle animation and opacity transition, using absolute positioning to reveal media controls and switch to a Material UI icon button, hydration.

Fetches album data from an API on the home page using a server component and the fetch function, then maps the data to albums and songs for rendering album list.

Learn to generate random images in Next.js using a random number function to vary image IDs and URLs, and stabilize URLs with environment variables and a .env file.

Add TypeScript types for a fetch client in a Next.js music app by defining album data models, mapping data to streams, and handling album art.

Learn to categorize albums by artist on the front end of a NextJS 15 TypeScript app, using a structured object, mapping albums to artists, and rendering artist albums and songs.