Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Next.js Course: Build a Production-Ready Movie App Project
Rating: 4.6 out of 5(16 ratings)
7,223 students

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

Build Real-World Apps with Next.js, Tailwind CSS, Material UI, and TypeScript—Starting with a Dynamic Next.js Project.
Created byVapa Academy
Last updated 10/2024
English

What you'll learn

  • Build A Fully Functional Movie App Using Next JS And TMDB API
  • Master Core Next JS Concepts Like Server-Side Rendering (SSR) And Static Site Generation (SSG)
  • Implement Responsive Designs Using Tailwind CSS
  • Learn To Create Modern, Stylish Components With Material UI
  • Integrate TypeScript For Type-Safe And Scalable Application Development
  • Handle API Routes And Data Fetching In Next JS
  • Develop A Dynamic Search Feature With Real-Time Results
  • Build Pagination, Filtering, And Advanced Layouts For Movies And TV Shows
  • Deploy Projects To Vercel For Live, Production-Ready Applications
  • Optimize Apps For Responsiveness Across Mobile And Desktop Devices

Course content

1 section • 67 lectures • 8h 7m total length

  • Next JS Movie Web App Project Overview - Live Demo5:35
  • Next JS Movie Web App Project : Source Code0:04
  • Project and Theme Setup Part - 19:40
  • Absolute Routes Part - 24:55
  • Nested Route and Dynamic Route Part - 36:41
  • Layout Part - 48:48
  • Navbar Part - 55:51
  • Navbar Adjustments for Mobile Screen Part - 68:14
  • Navbar Input Field Part - 73:39
  • React Context API Part - 82:55
  • TMDB API Part - 96:13
  • Fetch Movie Data for Context API Part - 109:09
  • Simple Banner Section Part - 119:11
  • Dynamic Banner Page Movie Type Part - 127:25

    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.

  • Global Type Safely for Each Movies Part - 135:39
  • Custom Function for the Banner Slider Part - 149:53
  • Custom Countdown Progress Circle for Banner Part - 154:36
  • Banner Button Optimized Part - 162:19
  • Banner BG Banner Poster Banner Gradient Overlay Part - 176:15
  • Banner Details Part - 187:33
  • Rating Element from MUI Part - 1910:36
  • Second Slider Part - 208:33
  • Slider Data Fetched Part - 218:29
  • Slider Customization Part - 224:31
  • Slider Styling Part - 239:08
  • Card Group Containers Data Fetch Part - 249:15
  • Griding The Card Group Part - 254:06
  • Prop Drilling Media Into TV and Movie Card Part - 267:21
  • Movie Cards Part - 279:02
  • Finishing The Movie Card Part - 285:08
  • Setting Up The Page Context Part - 294:07
  • Conditionally Rendering The Pages Part - 309:09
  • Make The Pagination Functional Part - 318:52
  • Updating States and Context Type Part - 329:44
  • Update The Default Context Part - 336:30
  • Update The Fetch API for The Context Part - 348:54
  • Introduction to TABS Part - 356:01
  • Adding Handler to Active Tabs Part - 368:26
  • TV Show Page Part - 378:26
  • TV Show Cards Part - 387:44
  • TV Show Type for The TV Card Part - 3910:08
  • Details Movie Page Part - 408:18
  • Detailed Movie Page Functionality Part - 419:34
  • Data Drilling Into UI Components Part - 428:37
  • Media Details Banner in Detailed Movie Page Part - 438:37
  • Rendering Data Into Media Details Component Part - 449:37
  • Finishing The Media Details Component Part - 456:11
  • Intro to Trailer Component Part - 465:40
  • Intro to YouTube Player Component Part - 475:08
  • Intro to Casting Component Part - 489:08
  • Rendering The Casts Part - 495:09
  • Adding Animations to The Casting Component Part - 504:00
  • Intro to Scenes Component Part - 516:08
  • Finishing The Scenes Component Part - 526:30
  • Intro to Scene Modal Component Part - 539:02

    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.

  • Intro to Similar Movie Component Part - 547:58

    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.

  • Finishing The Similar Movie Component Part - 556:38
  • Details Page for The TV Shows Part - 569:00
  • Intro to The Footer Component Part - 575:20
  • Make the Navbar Conditional Base on Current Path Part - 588:09
  • Adjusting the Navbar Style Part - 595:31
  • Intro to Theme Toggle Component Part - 609:44
  • Adjusting the Search Box Component Part - 617:50
  • Finishing The Search Box Component Part - 623:03
  • Intro to Search Result Component Part - 638:49
  • Correcting The States and Debug Part - 6414:26
  • Hosting The Entire Project on Vercel Part - 6510:38

Requirements

  • Students Don't Need To Have Any Prior Knowledge To Take This Course; They Will Learn Everything From It.

Description

In this comprehensive Next.js Bootcamp, you will build real-world, production-ready applications from scratch. The core project is a Movie Web App using the TMDB API, where students will learn:


  • Fetching movie data from the TMDB API

  • Implementing a dynamic movie search feature

  • Creating a movie details page with trailers and cast information

  • Building a responsive slider for featured movies

  • Pagination and filtering functionality for movies and TV shows

  • Making the application fully responsive for mobile and desktop using Tailwind CSS and Material UI


This hands-on course covers all essential Next.js concepts, including server-side rendering (SSR), static site generation (SSG), and API routes. You'll enhance your TypeScript skills while learning to manage complex states and props in Next.js.

Additionally, you will master how to style modern web applications using Tailwind CSS for fast, responsive design and Material UI for elegant component libraries.

We’ll also guide you through deploying your project on Vercel, so you’ll be able to showcase your movie app live on the web with a custom domain, setting up production environments effortlessly.

By the end of this course, you'll have the expertise to build and deploy any web application using Next.js, TypeScript, Tailwind CSS, and Material UI—all while deploying production-ready projects to the cloud.


Who this course is for:

  • Beginners Looking To Dive Into Web Development With Next JS
  • Aspiring Developers Wanting To Build Real-World Projects
  • Front-End Developers Seeking To Enhance Their Skills With Modern Technologies
  • Anyone Interested In Learning About TypeScript And Its Benefits
  • Designers Wanting To Implement Functional Prototypes With Tailwind CSS
  • Students Eager To Learn About API Integration In Web Applications
  • Professionals Aiming To Expand Their Skill Set With Material UI
  • Individuals Interested In Building Responsive And Dynamic Web Apps
  • Developers Who Want To Deploy Their Projects To The Cloud
  • Anyone Looking To Create A Portfolio With A Completed Movie App Project

Report abuse