1 00:00:00,860 --> 00:00:03,470 Hello and welcome to the project in this project. 2 00:00:03,690 --> 00:00:08,630 We'll see how to build a video sharing platform from scratch using the actress. 3 00:00:09,050 --> 00:00:11,210 So what is meant by video sharing platform? 4 00:00:11,570 --> 00:00:14,990 So it is basically, as you can see, YouTube is a video sharing platform. 5 00:00:15,260 --> 00:00:19,940 So we are going to build something similar to YouTube or possibly color coded as a YouTube clone. 6 00:00:20,330 --> 00:00:21,920 So this will be the home page of your website. 7 00:00:21,920 --> 00:00:27,770 You are seeing what it will be using the data from the YouTube API, from the Google Developer console 8 00:00:28,040 --> 00:00:32,120 to fetch these videos based on the search item what the user is typing. 9 00:00:33,930 --> 00:00:38,730 So basically, we follow these steps, we will set up the project and then we'll learn about how to 10 00:00:38,730 --> 00:00:42,620 use the YouTube API, how to use it anyway. 11 00:00:42,720 --> 00:00:48,000 Grid system and then we'll be dealing with the components with a little component, really a list component, 12 00:00:48,330 --> 00:00:53,970 video item component and also exporting these components one by one and also exporting all of them together 13 00:00:53,970 --> 00:00:55,610 using index components component. 14 00:00:56,400 --> 00:01:02,460 And then finally going finish up the project by after completing all the by all the business logic code 15 00:01:02,460 --> 00:01:04,680 inside each and each end of this component. 16 00:01:06,200 --> 00:01:10,220 The frameworks and technologies that you will learn will be components, product structure, lifecycle 17 00:01:10,220 --> 00:01:16,580 methods, state management, how to pass props from parent component to child component, working on 18 00:01:16,580 --> 00:01:23,050 API requests and how to get the YouTube API key from the Google developer tools and also Axios material. 19 00:01:23,570 --> 00:01:30,740 So basically, this exercise for Perfetti requests from give an API like YouTube API and if you are 20 00:01:30,740 --> 00:01:36,110 using some other project, for example, if you want Google Authentication API building with that API, 21 00:01:36,110 --> 00:01:42,220 and now we can see our final working of the product that we are going to build. 22 00:01:42,530 --> 00:01:44,870 So this will be the landing page for the research. 23 00:01:44,870 --> 00:01:49,730 And then since there are nothing we are researching yet, there is a sense some place in learning if 24 00:01:49,730 --> 00:01:52,490 you said something, for example, and such. 25 00:01:53,730 --> 00:01:54,480 JavaScript. 26 00:01:56,130 --> 00:02:00,750 You can see I'm getting over areas related to JavaScript in such Avengers. 27 00:02:02,800 --> 00:02:07,570 You can see I'm getting rid of the utilitarian, yes, as you can see, we are getting five meters audio. 28 00:02:07,630 --> 00:02:13,600 This is because in the code, I have given the MAX results as fight, so only the five meters will be 29 00:02:13,600 --> 00:02:16,350 fetched from the search of YouTube. 30 00:02:16,720 --> 00:02:18,400 And then those five videos. 31 00:02:18,400 --> 00:02:21,370 We are like writing the code how to display them like this. 32 00:02:21,790 --> 00:02:26,830 You can also play that day, as you can see, can click on the video and the video beautifully. 33 00:02:31,860 --> 00:02:36,450 They remain the same options of beauty brands, subtitles, captions and everything. 34 00:02:38,790 --> 00:02:44,490 So here this thing, like we are getting the Typekit over here in the video list component and also 35 00:02:44,490 --> 00:02:47,160 the in the video detail component deriving the title. 36 00:02:47,490 --> 00:02:52,140 So this works because of the passing we act drops from one component other components. 37 00:02:52,680 --> 00:02:57,510 As I said in the state management and all in the frameworks and technology will learn. 38 00:02:58,220 --> 00:03:03,330 This is basically the Google Developer Council that will be using the API services and all. 39 00:03:04,350 --> 00:03:08,110 We'll see that in the four other videos, and then you click on the title. 40 00:03:08,130 --> 00:03:13,350 It will read to the YouTube a real YouTube page, and you can see the videos and all that. 41 00:03:15,090 --> 00:03:23,130 Stock, so this is what this is like, you can search anything you want to search StarWars, you can 42 00:03:23,130 --> 00:03:25,020 see we are getting the results very quickly. 43 00:03:25,380 --> 00:03:28,860 So this is very fast and then is almost similar to your API. 44 00:03:29,130 --> 00:03:29,580 You can search. 45 00:03:29,820 --> 00:03:34,410 You can watch everything that you are watching YouTube, YouTube here if you want, or you can go to 46 00:03:34,410 --> 00:03:35,190 one for step. 47 00:03:35,190 --> 00:03:42,840 And also all the styling, all the cases like YouTube blog on some of your. 48 00:03:43,920 --> 00:03:48,120 The page that you want to build your lawyer on video sharing platform, the name you give your video 49 00:03:48,120 --> 00:03:50,540 sharing platform and know, think so. 50 00:03:50,550 --> 00:03:52,350 Yeah, so this is how we can do it. 51 00:03:52,800 --> 00:03:53,940 And so it's one more thing. 52 00:03:57,020 --> 00:04:03,320 And so on to refresh, you can see everything is one, because this is the basic starting landing page 53 00:04:03,320 --> 00:04:05,270 that we are going to be going through the. 54 00:04:05,880 --> 00:04:12,050 Will be using the gate system of the React material and then reload some function. 55 00:04:12,560 --> 00:04:17,660 And then we'll be building the components of intelligence where we can export all the components through 56 00:04:17,660 --> 00:04:21,290 a single lens search, a modular detail, read item, media, a list. 57 00:04:21,740 --> 00:04:24,230 So basically, we'll see you one by one. 58 00:04:24,230 --> 00:04:30,350 We'll write the code from scratch and see how do what the code means and how it works. 59 00:04:30,830 --> 00:04:32,810 And so we'll see everything from that period. 60 00:04:32,810 --> 00:04:36,590 And I hope you are excited as well to start the project. 61 00:04:36,980 --> 00:04:37,580 Let's keep going.