Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

React JS Bootcamp:Build Netflix,YouTube Clone and 3 Projects

Name: React JS Bootcamp:Build Netflix,YouTube Clone and 3 Projects
Rating: 4.4 (39 reviews)

Master React JS with a YouTube and Netflix Clone: Develop Scalable, Real-World Projects for Production-Ready Deployment.

Created byVapa Academy

Last updated 7/2025

English

What you'll learn

Master the fundamentals of React JS, including components, state, props, and hooks.
Build a real-world YouTube Clone app using React and the YouTube API.
Learn how to structure and organize scalable React projects for production-ready applications.
Implement Tailwind CSS to create responsive and modern user interfaces quickly and efficiently.
Understand how to manage complex state and data flow using React Context and hooks.
Gain experience in using GitHub for version control, collaboration, and managing project repositories.
Learn how to deploy React applications to the cloud using Vercel for fast and reliable hosting.
Optimize web applications for performance, scalability, and user experience in real-world environments.
Work with APIs to fetch data, handle asynchronous operations, and integrate third-party services into your projects.
Develop a strong portfolio of production-ready projects to showcase your skills to potential employers.

Course content

8 sections • 277 lectures • 36h 47m total length

Introduction3:28

TanStack Query Course Walk-through1:30
TanStack Query - Source Code0:06
Why Using TanStack-Query Part - 12:58
Setup React Project for Tanstack-Query Part - 26:50
Setting Query Client and Provider for Tanstack-Query Part - 36:29
Introduction to useQuery hook Part - 45:21
Conditional error and successfully fetching Part - 54:10
Typecasting for type safety Part - 64:41
Introduction to query-Key in Tanstack-query Part - 78:15
TanStack-devtools Part - 83:17
Cleaning and making modules queries with Query Options Part - 96:29

Stale-time vs. Cache-time in queryOptions Part - 14:34
Manually re-fetching and Background fetching Part - 25:12
Introduction to useMutation hook and post operation Part - 310:34
Implementing and demonstrating post operation by useMutation hook Part - 43:20
Put operation with useMutation hook Part - 510:27
Delete operation with useMutation hook Part - 65:17
Invalidating and re-fetching queries after mutations Part - 711:16
Demonstrating invalidating query Part - 83:32
Optimistic updates and rollback on error Part - 911:52
Completing optimistic rollbacks Part - 105:16

Global Error Handling Part - 15:01
Local error boundary to catch errors Part - 28:52
Query Options for dependency queries Part - 37:33
Depended query chaining Part - 47:22
Query Handlers for pagination data Part - 58:32
UI for pagination query Part - 67:00
Handlers for pre-fetching with Tanstack-query Part - 77:33
Completing UI for Prefetching data Part - 86:07
Infinite query for infinite scrolling Part - 96:45
Implementing UI for infinite-query Part - 1010:17
Custom mutation hook & custom query hooks Part - 115:58
Implementing and testing UI for custom hook and queries Part - 1210:43
Bonus how to use source codes Part - 132:28

Intro To Redux Toolkit Part - 19:44
More About Redux Toolkit Part - 23:39
Getting Started With Redux Toolkit Part - 37:29
Counter With Redux Toolkit Part - 47:04
Counter Component Part - 59:40
Redux Dev Tools Part - 64:50
Theme With Redux Toolkit Part - 77:39
Theme Slice Implementation Part - 88:23
Auth Slice Example Part - 99:49
Intro To Create AsyncThunk Part - 1011:08
Creating Users Component Part - 1113:21
Setting Up Express Back-end With MongoDB Part - 1211:38
Creating API Routes Part - 138:28
Testing API With Postman Part - 145:41
Intro To Optimistic UI Part - 158:55
Optimistic Posts Slice Part - 167:17
Posts Slice Async Thunks Part - 178:56
Posts Extra Reducers Cases Part - 1813:38
Posts Component Part - 197:18
Posts Component Logic Part - 207:31
Posts List Component Part - 216:40
Posts Creation Form Part - 227:41
Posts Creation Optimistic Logic Part - 2311:25
Posts Creation Optimistic Test Part - 2410:03
Posts UI Enhancements Part - 254:49
Intro To Create Entity Adapter Part - 268:47
Posts Components With Create Entity Adapter Part - 273:52
Setup API From Environment Variables Part - 282:34
Redux Custom Middle-Wares & Custom Logger Part - 299:34
Debounce & Throttle Middle-Ware Part - 3011:33
Middle-Ware Components Part - 3113:02
Custom Logger Event Logging Part - 3211:01
Intro To Redux Toolkit Create Api Part - 339:45
Posts With Create Api Part - 3412:34
Testing Redux With Jest Part - 3510:25
Testing Async Action With Jest Part - 3610:17
Running All The Test Cases Part - 3711:38
Deployment To Vercel Part - 386:58

Netflix Clone Project - Source Code0:04
React JS Netflix Clone Project - Live Demo2:42
Project Initialization Part-16:29
Extending Tailwind Config & Creating Pages Part - 26:21
Navbar Design Part - 310:56
Setting Up Routes Part - 43:01
Navbar Styles Part - 510:51
Navbar Responsive Part - 69:19
Navbar Functionalities Part - 75:32
Navbar Finalizing Part - 86:05
Getting TMDB API Key Part - 97:16
Making Custom API Wrapper Part - 1010:40
Adding APIs in the Custom API Wrapper Part - 119:55
API Call Structure Part - 1210:51
Movie Context Design Part - 139:17
Using Movie Context Part - 148:19
Designing Hero Component Part - 1511:19
Designing the Rest of the Hero Component Part - 1610:07
Navbar Component Scroll Effects Part - 174:04
Carousel Design Part - 1811:58
Carousel Card Design Part - 194:17
Implementing Carousel Part - 2010:24
Adding All Carousel Part - 213:34
Fixing Carousel Buttons Part - 227:15
Making The Video Player Part - 2312:18
Linking The Video Player With APIs Part - 248:43
Making The Video Player Functional Part - 256:11
Video Player External Control's Part - 264:59
PopUp Card Context Part - 276:35
PopUp Card Design Part - 2810:56
PopUp Card Functional Design Part - 2911:25
PopUp Card Buttons Design Part - 308:36
PopUp Card Complete Design Part - 315:48
Linking PopUp Card Functionality Part - 329:07
PopUp Card Dynamic Data Fetch Functionality Part - 338:08
PopUp Card Unmute & Add To Favourite Functionality Part - 3410:51
PopUp Card Add To Favorite Implementation Part - 357:34
Modal Component Design Part - 369:03
Modal Component Design Continue Part - 377:36
Modal Component Buttons Part - 387:41
Modal Component Video Player Part - 399:57
Modal Component Types & Structure Part - 4011:16
Modal Component Dynamic Data Part - 419:44
Modal Component Dynamic Trailer Mapping Part - 427:28
Modal Component Dynamic Data & Similar Movies Mapping Part - 438:09
Similar Movies Card Component Design Part - 449:22
Similar Movies Card Component Data Map Part - 457:58
Similar Movies Card Component Enhancements Part - 466:30
Modal and PopUp Card Tweaks Part - 474:35
Watch Page Design Part - 486:37
404 Error Page Design Part - 495:24
My List Page Design Part - 505:25
Build the my list page by mapping the movie list from the utility context, re-rendering on changes with useEffect, and showing 'no movies found' when empty.
Search Implementation Part - 5110:00
Toast Implementation Part - 529:11
Push Code To GitHub & Deploy To Vercel Part - 538:05

YouTube Clone Project - Source Code0:04
YouTube Clone Project - Live Demo5:43
Initializing Project Part-17:38
Creating Navbar Part - 211:34
Designing Search Input in Navbar Part - 310:00
Adding Clear Icon in Search Field Part - 43:08
Creating Sidebar Lets Import Icons Part - 57:34
Creating Sidebar Lets Create Category Object Part - 65:11
Creating Sidebar Add Categories Part-78:41
Creating Home Page Cards Part-89:43
Creating Home Page Cards Part - 94:59
Youtube API Setup Generating API_Key Part - 105:21
Going Through Videos API Part - 116:11
Calling Popular Videos API Part - 128:34
Parsing Storing Videos Data Part - 1314:42
Making Home Cards Dynamic Part - 145:50
Lets Fetch Channel Thumbnail Part - 157:33
Lets Update Channel Thumbnail and Render It Part-1610:44
Lets Select the Categories Part - 178:45
Lets Go Through Categories API Part - 183:55
Fetching Categories Id Part - 1910:07
Storing Categories Id Part - 2012:08
Fetching Videos by Category Id Part - 218:40
Custom Hook For Home Page Part - 229:48
Lets Store Page Tokens Part - 237:46
Fetching from Next Page Part - 246:13
Adding Infinite Scrolling Feature Part - 255:51
Infinite Scroll as Per Categories Part - 267:38
Implement category-specific infinite scrolling for a YouTube clone by storing videos and next page tokens per category in a typed record on the home hook.
Rendering Fetch Error Loading Spinner Part - 2712:53
Creating Watch Page Route Part - 2811:28
Creating Watch Page Layout Part-295:17
Creating Watch Page Details Part - 307:33
Creating Watch Page Buttons Part - 316:17
Create the like and share buttons on the watch page of the YouTube clone, import react icons, display like counts, and style the buttons with flex layouts and rounded backgrounds.
Designing Watch Page Description Part - 329:14
Designing Mini Cards Part - 339:34
Adding Video Duration in Mini Cards Part - 343:07
Fetching Videos Data for Watch Page Part - 358:58
Storing Videos Data Part - 369:26
Creating Helper Functions for Fetching Videos Data Part - 376:08
Lets Show the Video Details Part - 3811:20
Add New Properties in Video Data Part - 396:41
Creating Video Viewing Section Part - 4011:33
Fetching Activities For Watch Page Part - 4110:21
Storing All Fetched Video Ids in an Array Part - 4210:32
Fetching and Parsing Videos Data Part - 437:26
Storing And Displaying Videos Data Part - 446:09
Designing Comments Section Part - 4511:13
Fetching Video Comments Part - 469:11
Parsing And Storing Comments Part - 4710:03
Displaying Fetched Comments Part - 483:51
Adding Load More Button for Comments Part - 4911:27
Designing Comment Replies Part - 505:59
Fetching Comment Replies Parsing Them Part - 5111:42
Displaying Comments Replies Part - 529:54
Lets Resolve Some Bugs Part - 5311:59
Designing Channel Page Channel Details Part - 5410:38
Fetching Channel Info Part - 556:36
Parsing and Storing Fetched Data Part - 567:44
Displaying Channel Data Part - 576:24
Creating Custom Hook for Channel Part - 584:02
Lets Create Separate API Call File for Videos Channel Info Part - 5913:15
Lets Create Separate API Call File for Comments Replies Part - 6010:45
Lets Create Seperate API Call File for Video Details Channel Activities Part-6112:48
Lets Create Separate API Call File for Categories Part - 625:23
Creating Modal for Channel Description Part - 6311:09
Making Modal Scroll-able Part - 644:00
Designing Category Selection Buttons Part - 655:37
Designing Video Cards for Channel Page Part - 6613:18
Fetching Videos for Channel Page Part - 676:02
Storing Videos Data for Channel Page Part - 687:13
Displaying Video Details in Cards Part - 693:05
Creating Load More button For Videos Fetching More Videos Part - 708:49
Updating the Stored Videos Part - 715:14
Adding Infinite Scrolling For Channel Videos Part - 726:22
Designing Channel Page Playlist Cards Part - 737:22
Fetching Playlist Data Part - 7412:35
Parsing Playlist Data Part - 757:59
Updating The User Channel Hook Part - 768:55
Rendering Fetched Data in Playlists Part - 778:42
Adding Infinite Scrolling for Playlists Part - 7810:39
Removing Loader When We Fetch All Videos Part - 7910:17
Creating Parse File Part - 8012:28
Designing Playlist Item Card Part - 8112:59
Fetching Playlist Items Data Part - 828:18
Displaying PlayList Details Part - 8311:49
Creating Custom Hook for Playlist Items Part - 849:11
Designing Playlist Video Card Part - 856:19
Fetching Playlist Videos Part - 8610:31
Parsing Playlist Videos Data Part - 873:47
Storing Playlist Videos Data Part - 884:54
Creating Custom Hook for Playlist Item Part - 8910:46
Adding Interactivity to Home Watch Page Part - 909:12
Adding Interactivity to Channel Page Playlist Page Part - 9110:44
Creating Search Page Route Part - 929:50
Fetching Video Id Using Search API Part - 936:03
Getting Parsing Video Data for Search Page Part - 948:05
Storing Searched Video Data Part - 9511:54
Close Icon In Search Field Part - 9612:22
Making Navbar Responsive Part - 9711:11
Making Home Page Responsive Part - 985:23
Making Watch Page Responsive Part - 9912:23
Making Channel Page Responsive Part - 10010:44
Making Playlist Page Responsive Part - 1015:36
Pushing Code to Github Part - 10210:07
Hosting App on Vercel Part - 1036:09
Adding Necessary Type Safety Part-1045:59
Course Wrap Up3:31

News Portal Project - Source Code0:03
News Portal Project - Live Demo5:58
Initializing Project - Part - 18:00
Creating Navbar Part - 26:35
Create a navbar component in a React TSX project for the News Portal app, using Material UI typography, a Newsdaily logo, flex layout, and Tailwind styling.
Creating Navbar Search Field Part - 310:12
Creating Navbar Category Buttons Part - 47:46
Creating Header Section Part - 510:27
Creating Home Page Carousel Part - 610:05
Designing Carousel Description Part - 74:59
Designing Carousel List and Organizing Code Part - 813:15
Designing Home Page Category News Cards Part - 910:09
Organizing Home Page Code Part - 106:01
Making Our First API Call Part - 116:07
Storing Top Headlines and Rendering In Carousel Part - 129:58
Rendering Stored News Data in Carousel Part - 137:14
Creating Carousel Buttons Part - 1411:16
Updating Carousel List With Carousel Part - 156:18
Creating API Wrapper Function Part - 168:06
Utilizing API Wrapper for Top Headlines Part - 176:42
Resolving API Type Error Part - 185:45
Fetching Category News Part - 1910:16
Displaying Category News Data Part - 208:49
Designing Error and Loading State for Components - I Part - 217:22
Designing Error and Loading State for Components - II Part - 225:11
Creating Explore Page Route Part - 238:07
Storing Explore Page Category News Part - 248:42
Designing Explore Page Part - 259:32
Designing Explore Page Load More Button Part - 266:40
Adding Load More Functionality Part - 279:08
Load More Button Conditional Rendering Part - 283:05
Adding See All Button Functionality Part - 293:35
Creating Search Page Part - 309:33
Fetching News For Search Page Part - 316:03
Rendering News in Search Page Part - 3212:30
Adding Error Loading State for Explore Search Page Part - 336:28
Adding Links for All News Cards Making Navbar Responsive Part - 3410:25
Making Carousel Responsive Part - 358:53
Making Home Page Cards Search Page Explore Page Responsive Part - 365:11
Creating Skeleton for Carousel Part - 3710:10
Creating Skeleton for News Cards Part - 387:53
Creating Load More Skeleton for News Cards Part - 394:48
Course Wrapup2:36

Requirements

Students don't need to have any prior knowledge to take this course. They will learn everything from the ground up.

Description

Welcome to **React JS Project Bootcamp: Build Production-Ready Projects**, where you’ll gain hands-on experience by developing real-world, scalable applications using React JS! This bootcamp is designed for aspiring developers who want to enhance their React JS skills while building production-ready web applications.

Throughout this course, you will create **3 projects**, ranging from simple to complex, each designed to build and strengthen your understanding of React. You’ll dive into state management, hooks, routing, API integration, and responsive design, ensuring you have a solid grasp of React’s core concepts. By the end of the course, you’ll have a portfolio full of practical projects to showcase your skills.

Featured Project: YouTube Clone Web App:

In the **YouTube Clone Web App** project, you’ll learn how to integrate React with the **YouTube API**, allowing you to fetch and display video data dynamically. This project will cover:

- Fetching videos using the YouTube API.

- Creating a responsive, user-friendly interface.

- Building video search functionality.

- Displaying video details and related content.

- Implementing modern React features like hooks and context.

By the end of this project, you'll have a fully functional YouTube clone with real-world capabilities, preparing you to build similar apps in your professional career.

This course is perfect for anyone looking to level up their React JS knowledge and develop production-ready skills. Whether you’re a beginner or intermediate developer, this bootcamp will push you toward mastering React through engaging, practical projects!

Who this course is for:

Beginners who are new to React JS and want to learn by building real-world projects.
Front-end developers looking to strengthen their skills in modern React development.
JavaScript developers wanting to expand their knowledge and work on production-ready applications.
Students seeking practical experience by working on real-world projects like a YouTube clone.
Freelancers who want to build and deploy scalable React projects for clients.
Developers interested in learning how to use Tailwind CSS for efficient UI design.
Professionals wanting to master cloud deployment with Vercel and version control using GitHub.
Anyone looking to build a strong portfolio of React projects for career advancement.

React JS Bootcamp:Build Netflix,YouTube Clone and 3 Projects

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 3min

TanStack Query - Basics11 lectures • 50min

TanStack Query - Intermediate10 lectures • 1hr 11min

TanStack Query - Advance13 lectures • 1hr 34min

Redux Toolkit38 lectures • 5hr 35min

React JS Netflix Clone Project - 155 lectures • 7hr 16min

React JS YouTube Clone Project-2107 lectures • 14hr 58min

React JS News Portal Project - 342 lectures • 5hr 20min

Requirements

Description

Who this course is for: