Next Js Bootcamp: Build Real World Production Ready Projects

Build Real-World Apps with Next.js, Tailwind CSS, Material UI, and TypeScript—Starting with a Dynamic Next.js Project.

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

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 APIImplementing a dynamic movie search featureCreating a movie details page with trailers and cast informationBuilding a responsive slider for featured moviesPagination and filtering functionality for movies and TV showsMaking the application fully responsive for mobile and desktop using Tailwind CSS and Material UIThis 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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: Next JS Movie Web App : Project - 1

Lecture 2 Next JS Movie Web App Project Overview - Live Demo

Lecture 3 Next JS Movie Web App Project : Source Code

Lecture 4 Project and Theme Setup Part - 1

Lecture 5 Absolute Routes Part - 2

Lecture 6 Nested Route and Dynamic Route Part - 3

Lecture 7 Layout Part - 4

Lecture 8 Navbar Part - 5

Lecture 9 Navbar Adjustments for Mobile Screen Part - 6

Lecture 10 Navbar Input Field Part - 7

Lecture 11 React Context API Part - 8

Lecture 12 TMDB API Part - 9

Lecture 13 Fetch Movie Data for Context API Part - 10

Lecture 14 Simple Banner Section Part - 11

Lecture 15 Dynamic Banner Page Movie Type Part - 12

Lecture 16 Global Type Safely for Each Movies Part - 13

Lecture 17 Custom Function for the Banner Slider Part - 14

Lecture 18 Custom Countdown Progress Circle for Banner Part - 15

Lecture 19 Banner Button Optimized Part - 16

Lecture 20 Banner BG Banner Poster Banner Gradient Overlay Part - 17

Lecture 21 Banner Details Part - 18

Lecture 22 Rating Element from MUI Part - 19

Lecture 23 Second Slider Part - 20

Lecture 24 Slider Data Fetched Part - 21

Lecture 25 Slider Customization Part - 22

Lecture 26 Slider Styling Part - 23

Lecture 27 Card Group Containers Data Fetch Part - 24

Lecture 28 Griding The Card Group Part - 25

Lecture 29 Prop Drilling Media Into TV and Movie Card Part - 26

Lecture 30 Movie Cards Part - 27

Lecture 31 Finishing The Movie Card Part - 28

Lecture 32 Setting Up The Page Context Part - 29

Lecture 33 Conditionally Rendering The Pages Part - 30

Lecture 34 Make The Pagination Functional Part - 31

Lecture 35 Updating States and Context Type Part - 32

Lecture 36 Update The Default Context Part - 33

Lecture 37 Update The Fetch API for The Context Part - 34

Lecture 38 Introduction to TABS Part - 35

Lecture 39 Adding Handler to Active Tabs Part - 36

Lecture 40 TV Show Page Part - 37

Lecture 41 TV Show Cards Part - 38

Lecture 42 TV Show Type for The TV Card Part - 39

Lecture 43 Details Movie Page Part - 40

Lecture 44 Detailed Movie Page Functionality Part - 41

Lecture 45 Data Drilling Into UI Components Part - 42

Lecture 46 Media Details Banner in Detailed Movie Page Part - 43

Lecture 47 Rendering Data Into Media Details Component Part - 44

Lecture 48 Finishing The Media Details Component Part - 45

Lecture 49 Intro to Trailer Component Part - 46

Lecture 50 Intro to YouTube Player Component Part - 47

Lecture 51 Intro to Casting Component Part - 48

Lecture 52 Rendering The Casts Part - 49

Lecture 53 Adding Animations to The Casting Component Part - 50

Lecture 54 Intro to Scenes Component Part - 51

Lecture 55 Finishing The Scenes Component Part - 52

Lecture 56 Intro to Scene Modal Component Part - 53

Lecture 57 Intro to Similar Movie Component Part - 54

Lecture 58 Finishing The Similar Movie Component Part - 55

Lecture 59 Details Page for The TV Shows Part - 56

Lecture 60 Intro to The Footer Component Part - 57

Lecture 61 Make the Navbar Conditional Base on Current Path Part - 58

Lecture 62 Adjusting the Navbar Style Part - 59

Lecture 63 Intro to Theme Toggle Component Part - 60

Lecture 64 Adjusting the Search Box Component Part - 61

Lecture 65 Finishing The Search Box Component Part - 62

Lecture 66 Intro to Search Result Component Part - 63

Lecture 67 Correcting The States and Debug Part - 64

Lecture 68 Hosting The Entire Project on Vercel Part - 65

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