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

Focused View

Vapa Academy

8:11:25

0 View

1 - Introduction

1 -Introduction.mp4

03:59

2 - Next JS Movie Web App Project - 1

1 -Next JS Movie Web App Project Overview - Live Demo.mp4

05:35

2 -Next JS Movie App Project Source Code.zip

2 -Project and Theme Setup Part - 1.mp4

09:40

2 - Next JS Movie Web App Project Source Code.html

3 -Absolute Routes Part - 2.mp4

04:55

4 -Nested Route and Dynamic Route Part - 3.mp4

06:41

5 -Layout Part - 4.mp4

08:48

6 -Navbar Part - 5.mp4

05:51

7 -Navbar Adjustments for Mobile Screen Part - 6.mp4

08:14

8 -Navbar Input Field Part - 7.mp4

03:39

9 -React Context API Part - 8.mp4

02:55

10 -TMDB API Part - 9.mp4

06:13

11 -Fetch Movie Data for Context API Part - 10.mp4

09:09

12 -Simple Banner Section Part - 11.mp4

09:11

13 -Dynamic Banner Page Movie Type Part - 12.mp4

07:25

14 -Global Type Safely for Each Movies Part - 13.mp4

05:39

15 -Custom Function for the Banner Slider Part - 14.mp4

09:53

16 -Custom Countdown Progress Circle for Banner Part - 15.mp4

04:36

17 -Banner Button Optimized Part - 16.mp4

02:19

18 -Banner BG Banner Poster Banner Gradient Overlay Part - 17.mp4

06:15

19 -Banner Details Part - 18.mp4

07:33

20 -Rating Element from MUI Part - 19.mp4

10:36

21 -Second Slider Part - 20.mp4

08:33

22 -Slider Data Fetched Part - 21.mp4

08:29

23 -Slider Customization Part - 22.mp4

04:31

24 -Slider Styling Part - 23.mp4

09:08

25 -Card Group Containers Data Fetch Part - 24.mp4

09:15

26 -Griding The Card Group Part - 25.mp4

04:06

27 -Prop Drilling Media Into TV and Movie Card Part - 26.mp4

07:21

28 -Movie Cards Part - 27.mp4

09:02

29 -Finishing The Movie Card Part - 28.mp4

05:08

30 -Setting Up The Page Context Part - 29.mp4

04:07

31 -Conditionally Rendering The Pages Part - 30.mp4

09:09

32 -Make The Pagination Functional Part - 31.mp4

08:52

33 -Updating States and Context Type Part - 32.mp4

09:44

34 -Update The Default Context Part - 33.mp4

06:30

35 -Update The Fetch API for The Context Part - 34.mp4

08:54

36 -Introduction to TABS Part - 35.mp4

06:01

37 -Adding Handler to Active Tabs Part - 36.mp4

08:26

38 -TV Show Page Part - 37.mp4

08:26

39 -TV Show Cards Part - 38.mp4

07:44

40 -TV Show Type for The TV Card Part - 39.mp4

10:08

41 -Details Movie Page Part - 40.mp4

08:18

42 -Detailed Movie Page Functionality Part - 41.mp4

09:34

43 -Data Drilling Into UI Components Part - 42.mp4

08:37

44 -Media Details Banner in Detailed Movie Page Part - 43.mp4

08:37

45 -Rendering Data Into Media Details Component Part - 44.mp4

09:37

46 -Finishing The Media Details Component Part - 45.mp4

06:11

47 -Intro to Trailer Component Part - 46.mp4

05:40

48 -Intro to YouTube Player Component Part - 47.mp4

05:08

49 -Intro to Casting Component Part - 48.mp4

09:08

50 -Rendering The Casts Part - 49.mp4

05:09

51 -Adding Animations to The Casting Component Part - 50.mp4

04:00

52 -Intro to Scenes Component Part - 51.mp4

06:08

53 -Finishing The Scenes Component Part - 52.mp4

06:30

54 -Intro to Scene Modal Component Part - 53.mp4

09:02

55 -Intro to Similar Movie Component Part - 54.mp4

07:58

56 -Finishing The Similar Movie Component Part - 55.mp4

06:38

57 -Details Page for The TV Shows Part - 56.mp4

09:00

58 -Intro to The Footer Component Part - 57.mp4

05:20

59 -Make the Navbar Conditional Base on Current Path Part - 58.mp4

08:09

60 -Adjusting the Navbar Style Part - 59.mp4

05:31

61 -Intro to Theme Toggle Component Part - 60.mp4

09:44

62 -Adjusting the Search Box Component Part - 61.mp4

07:50

63 -Finishing The Search Box Component Part - 62.mp4

03:03

64 -Intro to Search Result Component Part - 63.mp4

08:49

65 -Correcting The States and Debug Part - 64.mp4

14:26

66 -Hosting The Entire Project on Vercel Part - 65.mp4

10:38

Description

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

Who is this 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

What You Need to Know?

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

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

Next JS

Vapa Academy

Instructor's Courses

We have several years of experience in online teaching. We love to share our skills with our students, and providing the best online courses is our main goal. We are a team that strives to explain every difficult concept in the easiest way possible so that students can learn it easily. In our courses, we emphasize practical learning because we believe in learning by doing.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.