Next.js Course: Build a Production-Ready Movie App Project

Explore a live demo of a production-ready Next.js movie app built with TypeScript, context API, and Daisy, featuring a carousel, in cinemas, top rated, tv shows, and search pages.

Follow step-by-step setup to create a Next.js production-ready movie app, including creating a TypeScript project with ESLint and Tailwind, integrating Daisy UI, configuring app router, and launching a dev server.

Explore Next.js app routing by structuring the app folder with page.tsx to create pages like /movies and /tv-shows, and preview dynamic routing in future videos.

Explore nested and dynamic routing in Next.js by building movie and TV show detail pages, using square bracket parameters and page.tsx to render dynamic content.

Master building a shared navbar across all Next.js pages using the app folder and layout.tsx. Render page content via the layout's child prop to keep headers consistent.

Improve a production-ready movie app by building a responsive Daisy UI navbar with home, explore, and TV shows, including a dropdown and mobile collapse.

Adjust the navigation bar for mobile screens, making links routable to movies and TV shows with href anchors, and implement a responsive two-menu navbar using Tailwind breakpoints.

Add a search bar to the navigation using sailboat UI tailwind inputs with an icon. Create a search box TSX component and wire it to the nav bar.

Learn to create a master context with React's context API, organize a context folder, export the main context, and set up a provider with an object-based context value.

Learn to fetch TMDB movie data via the API, obtain an API key, test with curl and postman, and integrate the key into a Next.js context for movie cards.

Set up and fetch movie or tv data using a context api, managing loading and error states with useEffect and fetch, including an api key.

Build a banner section component in a Next.js project and integrate a Daisy UI carousel with proper image handling. Configure image domains and wrap children to fix context errors.

Create a dynamic banner system by extracting a banner single component, fetching and mapping 20 movies from a master context, and typing banner props with a movie interface in TypeScript.

Define a movie type in TypeScript with key fields like id, title, original_title, backdrop_path, poster_path, overview, genre_id, release_date, vote_average, and vote_count, then access the array to build a movie slideshow.

Add a banner slider with current item, progress, countdown states, and implement useEffect with an interval to cycle items, update progress and countdown, and pass item index prop.

Use the useEffect hook to drive a five-second countdown with setInterval, cycling banner pages 1–6 and back to 1, with CSS for sliding animation.

Build a production-ready movie app with Next.js by implementing a dynamic banner and carousel, using the Next.js image component with responsive sizing and a gradient overlay for readable text.

Create a responsive Next.js banner with a poster image and text panel, using alt text set to the movie title, a movie overview, and vote counts for a production-ready app.

Install and configure the Material UI rating in a Next.js movie app, show a tooltip with vote average divided by two, and render a read-only five-star rating with 0.5 precision.

Build a three-item snapping carousel in a Next.js project by creating slider and slider container components, using daisy ui carousel, and preparing for data fetching in a future step.

Fetch movie data for a slider via a context and render dynamic slider items. Map over the data, destructure movie props, and adjust tailwind margins and image size to 500.

Customize the movie slider to a production-ready look by wrapping it in a link and using next/image with width 250 and height 350, plus overlay and total votes display.

Style a movie slider card with a bottom tooltip for vote average and a five-star rating. Add hover overlays with opacity and translate transitions for a production-ready Next.js movie app.

This lecture adds a card group container to display top rated movies, builds a card container to fetch and render movie cards, and connects them to the master context.

Fetch data with useEffect from the context API and render a streaming movie or tv card grid with a responsive layout.

Learn to build a production-ready movie app by filtering movies by poster path, mapping results, and rendering movie and TV show cards through reusable components in a Next.js project.

Style movie and tv cards with Daisy card styling, filter out posters, and implement hover shadows; render Next.js images with media.title alt text, and truncate long titles to 16 characters.

Add a card container for top rated movie cards, fix required props, and display vote counts with a read-only rating and a tooltip showing the vote average.

Implement page context to power top and bottom pagination in the cart container, using a tailwind-based pagination tsx component and a number page state with a default of one.

Learn to conditionally render pagination in a Next.js production-ready movie app using a sailboat UI pagination component, use context, and implement previous/next with plus/minus two pages.

Implement functional pagination by wiring onClick to setPages with previous value logic and plus/minus navigation. Highlight the current page with data-tip and theme styling.

Upgrade the context API and its types to manage single movie, search results, slider data, similar movies, details, and movie ID with typed arrays for a production-ready movie app.

Update the default values in the context api by defining arrays for search results, data, and similar movies, a true loading flag, a null error, and default movie details.

Update the fetch API for the context part by building async data fetching with useEffect, handling now playing and search endpoints, and updating slider data.

Build a production-ready movie app interface in next.js by wiring the explore page with a tabs UI and an active tab state using useState.

Add handlers to each tab to switch the active tab dynamically in a Next.js movie app, enabling navigation between popular and upcoming tabs with dynamic active styling.

Replicate the movie page to build the tv show page, using the context API to set details and streaming type to tv, showing tv shows on the air with pagination.

Create a dynamic TV show card in a Next.js project by using a fetched image URL and TV show title as alt text, with hover shadows, transitions, and tilt effect.

Build a production-ready movie app card in a Next.js project by implementing a TV show card with hover gradients, vote counts, rating, and TV-specific fields.

Configure useEffect hooks to fetch movie data, credits, and scene galleries; derive genre names and featured crew. Implement a dialog-based image viewer with close and reset behavior.

Builds a TV show header component with movie, genre name, and featured crew props, plus a handle open modal action; uses Next.js image and a gradient overlay.

Define a tv show header props interface with movie, genre name, featured crew, and a modal handler; then render a next.js image backdrop with a gradient overlay and absolute-positioned content.

Render a responsive media details component in a production-ready next.js movie app by conditionally displaying poster and backdrop, styling typography, rating, and genre badges.

Finish the media details component by dynamically rendering the featured crew: slice the first four members, map them to styled blocks showing name and job, and apply concise UI styling.

Build a production-ready movie trailer section in a Next.js project by creating a trailer component, typing YouTube data with an interface, and mapping videos to display.

Build a YouTube video player component for a Next.js movie app using an iframe, dynamic id, and typed React props.

Create a Next.js casting component by defining casting props and an actor interface, and render the first ten cast members with profile images, filtering by profile path.

Customize the cast section with an overlay gradient and centered actor names and roles. Implement a conditional loop to render the cast when length > 0, otherwise show no cast.

Add hover 3d animations to the casting component in a Next.js production-ready movie app by styling the cast card with perspective, 3d transforms, and image scaling for interactive feedback.

Build a production ready static movie scenes gallery in Next.js by creating a scene gallery component with typed props, image handling, and dynamic movie or TV scenes.

Loop through the seen images using the Next.js image component, applying flex wrap, gap, and hover-enabled scaling. Attach a click handler to open the scene with its file path.

Implement a scene modal in a Next.js project by creating a scene modal component, wiring props for the selected image, and handling close actions with a dialog based UI.

Create the similar movie component in the component folder, mark it as a client component, and fetch similar movies by movie ID and media type, using loading and error handling.

Enhance the production-ready movie app by implementing a semantic footer using Daisy components, adding tooltips for share, subscribe, and like, and integrating it into the layout alongside the navbar.

Implement an active navbar by tracking the current path with state and updating the active tab using Tailwind classes, click handlers, and a theme toggle.

Adjust the navigation bar to be sticky at the top with visibility, padding, and a drop-down driven by a boolean open state; set z-index 20 and incorporate a Daisy SVG.

Create a client theme toggle that loads the stored theme (night or Nord), toggles it, updates document data-theme, and shows a tooltip like switch to light or dark mode.

Adjust search bar to fetch movie results with a client component, manage input and results using useState and useEffect, and wire in the master context for URL and API key.

Build and reuse a search results component and search result card in a Next.js app, wiring movie data, images, links, and hover styling to showcase movie details.

Apply strict type checking in a Next.js movie app by typing states with useState and defining movie and video types. Debug type errors across components to ensure robust data flow.

Learn how to host a Next.js project on Vercel by configuring the repo, pushing to GitHub, and deploying for a universal shareable link, including troubleshooting deployment issues.