Master Next.js: Build a Movie App with TypeScript & MUI
Focused View
8:11:25
1 -Introduction.mp4
03:59
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
More details
Course Overview
Learn to build a production-ready movie app using Next.js, TypeScript, and Material UI. This hands-on course covers everything from SSR/SSG concepts to deployment on Vercel, with real-world API integration using TMDB.
What You'll Learn
- Master Next.js core concepts like SSR and SSG
- Build responsive UIs with Tailwind CSS and Material UI
- Implement type-safe development with TypeScript
Who This Is For
- Beginners diving into Next.js web development
- Front-end developers enhancing modern skills
- Designers creating functional prototypes
Key Benefits
- Real-world project with TMDB API integration
- Production-ready deployment on Vercel
- Complete responsive design for all devices
Curriculum Highlights
- Project setup and API integration
- Dynamic routing and responsive layouts
- Advanced components like sliders and pagination
Focused display
Category
- language english
- Training sessions 67
- duration 8:11:25
- Release Date 2025/05/25
