React JS Project Bootcamp:Build YouTube Clone and 2 Projects

Focused View

Vapa Academy

14:58:46

0 View

1 - Introduction

1 -Introduction.mp4

04:32

2 - YouTube Clone Project-1

1 -React-Youtube-Clone-Source-Code.rar

1 -YouTube Clone Project - Live Demo.mp4

07:35

1 - YouTube Clone Project - Source Code.html

2 -Initializing Project Part-1.mp4

07:38

3 -Creating Navbar Part - 2.mp4

11:34

4 -Designing Search Input in Navbar Part - 3.mp4

10:00

5 -Adding Clear Icon in Search Field Part - 4.mp4

03:08

6 -Creating Sidebar Lets Import Icons Part - 5.mp4

07:34

7 -Creating Sidebar Lets Create Category Object Part - 6.mp4

05:11

8 -Creating Sidebar Add Categories Part-7.mp4

08:41

9 -Creating Home Page Cards Part-8.mp4

09:43

10 -Creating Home Page Cards Part - 9.mp4

04:59

11 -Youtube API Setup Generating API Key Part - 10.mp4

05:21

12 -Going Through Videos API Part - 11.mp4

06:11

13 -Calling Popular Videos API Part - 12.mp4

08:34

14 -Parsing Storing Videos Data Part - 13.mp4

14:42

15 -Making Home Cards Dynamic Part - 14.mp4

05:50

16 -Lets Fetch Channel Thumbnail Part - 15.mp4

07:33

17 -Lets Update Channel Thumbnail and Render It Part-16.mp4

10:44

18 -Lets Select the Categories Part - 17.mp4

08:45

19 -Lets Go Through Categories API Part - 18.mp4

03:55

20 -Fetching Categories Id Part - 19.mp4

10:07

21 -Storing Categories Id Part - 20.mp4

12:08

22 -Fetching Videos by Category Id Part - 21.mp4

08:40

23 -Custom Hook For Home Page Part - 22.mp4

09:48

24 -Lets Store Page Tokens Part - 23.mp4

07:46

25 -Fetching from Next Page Part - 24.mp4

06:13

26 -Adding Infinite Scrolling Feature Part - 25.mp4

05:51

27 -Infinite Scroll as Per Categories Part - 26.mp4

07:38

28 -Rendering Fetch Error Loading Spinner Part - 27.mp4

12:53

29 -Creating Watch Page Route Part - 28.mp4

11:28

30 -Creating Watch Page Layout Part-29.mp4

05:17

31 -Creating Watch Page Details Part - 30.mp4

07:33

32 -Creating Watch Page Buttons Part - 31.mp4

06:17

33 -Designing Watch Page Description Part - 32.mp4

09:14

34 -Designing Mini Cards Part - 33.mp4

09:34

35 -Adding Video Duration in Mini Cards Part - 34.mp4

03:07

36 -Fetching Videos Data for Watch Page Part - 35.mp4

08:58

37 -Storing Videos Data Part - 36.mp4

09:26

38 -Creating Helper Functions for Fetching Videos Data Part - 37.mp4

06:08

39 -Lets Show the Video Details Part - 38.mp4

11:20

40 -Add New Properties in Video Data Part - 39.mp4

06:41

41 -Creating Video Viewing Section Part - 40.mp4

11:33

42 -Fetching Activities For Watch Page Part - 41.mp4

10:21

43 -Storing All Fetched Video Ids in an Array Part - 42.mp4

10:32

44 -Fetching and Parsing Videos Data Part - 43.mp4

07:26

45 -Storing And Displaying Videos Data Part - 44.mp4

06:09

46 -Designing Comments Section Part - 45.mp4

11:13

47 -Fetching Video Comments Part - 46.mp4

09:11

48 -Parsing And Storing Comments Part - 47.mp4

10:03

49 -Displaying Fetched Comments Part - 48.mp4

03:51

50 -Adding Load More Button for Comments Part - 49.mp4

11:27

51 -Designing Comment Replies Part - 50.mp4

05:59

52 -Fetching Comment Replies Parsing Them Part - 51.mp4

11:42

53 -Displaying Comments Replies Part - 52.mp4

09:54

54 -Lets Resolve Some Bugs Part - 53.mp4

11:59

55 -Designing Channel Page Channel Details Part - 54.mp4

10:38

56 -Fetching Channel Info Part - 55.mp4

06:36

57 -Parsing and Storing Fetched Data Part - 56.mp4

07:44

58 -Displaying Channel Data Part - 57.mp4

06:24

59 -Creating Custom Hook for Channel Part - 58.mp4

04:02

60 -Lets Create Separate API Call File for Videos Channel Info Part - 59.mp4

13:15

61 -Lets Create Separate API Call File for Comments Replies Part - 60.mp4

10:45

62 -Lets Create Seperate API Call File for Video Details Channel Activities Part-61.mp4

12:48

63 -Lets Create Separate API Call File for Categories Part - 62.mp4

05:23

64 -Creating Modal for Channel Description Part - 63.mp4

11:09

65 -Making Modal Scroll-able Part - 64.mp4

04:00

66 -Designing Category Selection Buttons Part - 65.mp4

05:37

67 -Designing Video Cards for Channel Page Part - 66.mp4

13:18

68 -Fetching Videos for Channel Page Part - 67.mp4

06:02

69 -Storing Videos Data for Channel Page Part - 68.mp4

07:13

70 -Displaying Video Details in Cards Part - 69.mp4

03:05

71 -Creating Load More button For Videos Fetching More Videos Part - 70.mp4

08:49

72 -Updating the Stored Videos Part - 71.mp4

05:14

73 -Adding Infinite Scrolling For Channel Videos Part - 72.mp4

06:22

74 -Designing Channel Page Playlist Cards Part - 73.mp4

07:22

75 -Fetching Playlist Data Part - 74.mp4

12:35

76 -Parsing Playlist Data Part - 75.mp4

07:59

77 -Updating The User Channel Hook Part - 76.mp4

08:55

78 -Rendering Fetched Data in Playlists Part - 77.mp4

08:42

79 -Adding Infinite Scrolling for Playlists Part - 78.mp4

10:39

80 -Removing Loader When We Fetch All Videos Part - 79.mp4

10:17

81 -Creating Parse File Part - 80.mp4

12:28

82 -Designing Playlist Item Card Part - 81.mp4

12:59

83 -Fetching Playlist Items Data Part - 82.mp4

08:18

84 -Displaying PlayList Details Part - 83.mp4

11:49

85 -Creating Custom Hook for Playlist Items Part - 84.mp4

09:11

86 -Designing Playlist Video Card Part - 85.mp4

06:19

87 -Fetching Playlist Videos Part - 86.mp4

10:31

88 -Parsing Playlist Videos Data Part - 87.mp4

03:47

89 -Storing Playlist Videos Data Part - 88.mp4

04:54

90 -Creating Custom Hook for Playlist Item Part - 89.mp4

10:46

91 -Adding Interactivity to Home Watch Page Part - 90.mp4

09:12

92 -Adding Interactivity to Channel Page Playlist Page Part - 91.mp4

10:44

93 -Creating Search Page Route Part - 92.mp4

09:50

94 -Fetching Video Id Using Search API Part - 93.mp4

06:03

95 -Getting Parsing Video Data for Search Page Part - 94.mp4

08:05

96 -Storing Searched Video Data Part - 95.mp4

11:54

97 -Close Icon In Search Field Part - 96.mp4

12:22

98 -Making Navbar Responsive Part - 97.mp4

11:11

99 -Making Home Page Responsive Part - 98.mp4

05:23

100 -Making Watch Page Responsive Part - 99.mp4

12:23

101 -Making Channel Page Responsive Part - 100.mp4

10:44

102 -Making Playlist Page Responsive Part - 101.mp4

05:36

103 -Pushing Code to Github Part - 102.mp4

10:07

104 -Hosting App on Vercel Part - 103.mp4

06:09

105 -Course Wrap Up.mp4

03:31

Description

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

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.

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

What You Need to Know?

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

More details

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 20 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.

User Reviews

Rating

average 0

Total votes0

Focused display

React

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.