1 00:00:00,420 --> 00:00:05,310 Hello, everyone, and welcome to one really important feature, which slipped my mind, which we are 2 00:00:05,310 --> 00:00:11,820 going to add to this website and I forgot to mention during the introduction with you is that we are 3 00:00:11,820 --> 00:00:13,770 going to host this website live. 4 00:00:13,800 --> 00:00:14,910 Yes, you heard it right. 5 00:00:15,120 --> 00:00:16,320 We are going to hold this up. 6 00:00:16,320 --> 00:00:17,850 So live on Firebase. 7 00:00:18,150 --> 00:00:21,600 So we'll be using Firebase for the hosting of this website. 8 00:00:21,870 --> 00:00:26,670 So that is a really important feature, which I forgot to mention during the introduction video. 9 00:00:26,970 --> 00:00:28,590 So that's what we are going to do. 10 00:00:28,710 --> 00:00:33,960 We are going to learn about Firebase and host this upstart live and Firebase, so will do it at the 11 00:00:34,290 --> 00:00:37,260 end of the project when we are done with the coding part and all. 12 00:00:37,680 --> 00:00:40,800 So that said, OK, so now let's get started. 13 00:00:41,340 --> 00:00:47,660 So now what need you need to do is if you are new to react, let me just tell you if you are an intermediate 14 00:00:47,780 --> 00:00:50,100 beginner, that's OK, but for the ones who are new. 15 00:00:50,580 --> 00:00:56,250 And so for them, let me just tell you, if you are new to react, you need to have Node.js and npm 16 00:00:56,250 --> 00:00:58,680 install on your machine, your computer. 17 00:00:58,950 --> 00:01:04,050 So for that, if you don't have installed, you just need to go to this website, which is Node.js dot 18 00:01:04,050 --> 00:01:04,860 org. 19 00:01:05,760 --> 00:01:08,820 So here you will have to download this installer. 20 00:01:09,180 --> 00:01:15,620 So once you hit this download button and installer will be downloaded, and after downloading, install 21 00:01:15,620 --> 00:01:21,450 all you have to just follow the procedure and instructions to friends to install the Node.js and PM. 22 00:01:21,870 --> 00:01:23,940 So I am telling and PM also with Node. 23 00:01:23,940 --> 00:01:28,830 Yes, is that if you download this installer and install Node.js from here. 24 00:01:29,100 --> 00:01:34,800 So npm will be automatically installed on your machine, you don't need to install it separately from 25 00:01:34,800 --> 00:01:35,970 any other source. 26 00:01:36,270 --> 00:01:40,170 OK, so once you have installed and all and PM, you're good to go. 27 00:01:40,380 --> 00:01:42,000 Next, you need a code editor. 28 00:01:42,000 --> 00:01:48,240 So I personally used scored and I prefer the score, and I'll recommend you also to use vs code because 29 00:01:48,240 --> 00:01:50,160 it's very development friendly. 30 00:01:50,490 --> 00:01:52,980 And so that's what I use. 31 00:01:53,220 --> 00:01:57,930 So if you don't have to be escorted, you can just go to this website, which is code or visual studio. 32 00:01:58,230 --> 00:02:00,190 Dot com slash download. 33 00:02:00,240 --> 00:02:04,740 So from here, you can download VSCO according to your operating system. 34 00:02:04,740 --> 00:02:10,800 If you are a Linux, Mac or Windows, any user according to your configuration of your PC, you can 35 00:02:10,800 --> 00:02:12,090 download it and install it. 36 00:02:12,390 --> 00:02:18,540 The installation process is really, really basic, which is that in any other software in the world. 37 00:02:18,720 --> 00:02:20,400 So we just need to install it. 38 00:02:20,410 --> 00:02:23,640 And after installing, you are good to go. 39 00:02:24,450 --> 00:02:25,320 You can disappointed. 40 00:02:25,710 --> 00:02:30,930 So next, let me just tell you the API, which you are going to use today, that is the admin API. 41 00:02:31,170 --> 00:02:37,020 So this is the API which we are going to use today to fetch the data and to get all the images, data 42 00:02:37,770 --> 00:02:39,810 and the name of the recipes and everything. 43 00:02:40,050 --> 00:02:41,130 So this is the. 44 00:02:41,790 --> 00:02:42,870 This is the website. 45 00:02:42,990 --> 00:02:43,860 This is the API. 46 00:02:44,160 --> 00:02:47,780 This is a really, really famous Adam API website. 47 00:02:47,790 --> 00:02:52,150 So this is what we are using to get the fetch the data and. 48 00:02:52,740 --> 00:02:56,370 So let me just show you how to set up the API and all. 49 00:02:57,450 --> 00:03:01,470 So for that, you need to just go to this website, the dot com. 50 00:03:01,980 --> 00:03:06,600 So from here, first of all, the very first thing is that you need to log in if you have an account. 51 00:03:06,600 --> 00:03:10,740 And if you don't have an account, of course you need to sign up and create an account and then you 52 00:03:10,740 --> 00:03:11,640 need to log in again. 53 00:03:12,030 --> 00:03:18,570 So once you are logged into this website, then you need to go to this API developer portal here and. 54 00:03:19,890 --> 00:03:27,270 Then you can just go to IPPIS and then you to go to recipes, so Typekit and this is the product which 55 00:03:27,270 --> 00:03:29,610 we are going to build today, so we'll be using recipes. 56 00:03:31,200 --> 00:03:35,370 Then you to go here and then you need to select a plan. 57 00:03:35,680 --> 00:03:39,180 So of course, we are going with the free plan that is the developer plan. 58 00:03:39,480 --> 00:03:44,910 So just click on Start now and then you need to provide your name, email address and everything. 59 00:03:46,900 --> 00:03:51,820 Once you have filled that form and take on some weight and then you will receive the thank you marks 60 00:03:51,820 --> 00:03:53,590 two percent, please log in to your account. 61 00:03:54,150 --> 00:03:57,730 So now I need to log in again to the account. 62 00:03:57,760 --> 00:03:59,020 It will log me out. 63 00:03:59,530 --> 00:04:00,550 Maybe not. 64 00:04:01,030 --> 00:04:09,220 So if you have logged out so you need to log in again and then you need to create another application, 65 00:04:09,230 --> 00:04:11,140 indie and API key. 66 00:04:11,440 --> 00:04:13,240 So how you will create that? 67 00:04:14,670 --> 00:04:21,410 That you need to go to the API developer portal and then you need to go to this get API key, now you 68 00:04:21,410 --> 00:04:29,090 need to click on this and then I already have our API key, but you can create another one. 69 00:04:29,090 --> 00:04:31,250 Maybe I can create a new application. 70 00:04:32,150 --> 00:04:38,780 And then it will it will ask for the category, so we are going with the recipe for Tupaea, of course. 71 00:04:40,250 --> 00:04:44,810 And now we need to provide name name will provide best. 72 00:04:46,750 --> 00:04:47,880 Not just best. 73 00:04:49,010 --> 00:04:50,140 And this. 74 00:04:51,230 --> 00:04:54,530 Is the best application? 75 00:04:54,620 --> 00:04:55,010 All right. 76 00:04:55,580 --> 00:05:00,140 Next, we'll click on create applications through our application will be created, hopefully. 77 00:05:01,330 --> 00:05:06,580 And yeah, so we have got the application ID and application kit. 78 00:05:06,970 --> 00:05:09,100 So these two things are really, really important. 79 00:05:09,220 --> 00:05:14,980 So you can just copy both of them and keep it somewhere based off somewhere because we'll be needing 80 00:05:14,980 --> 00:05:18,220 this during the time of coding. 81 00:05:18,450 --> 00:05:24,970 So without this, we cannot fight the data and it will be needing this application and application kit. 82 00:05:25,810 --> 00:05:29,050 Or you can leave this page as it is, or you can just copy and paste. 83 00:05:29,590 --> 00:05:31,240 So that's it. 84 00:05:31,720 --> 00:05:38,410 And now let's go to we escort and let's install our project, and let's start. 85 00:05:38,410 --> 00:05:42,700 Let's start building our project and let's install a React project. 86 00:05:43,730 --> 00:05:49,580 So now I'm here and we scored and I've created my project, so if you know how to create a real project, 87 00:05:49,580 --> 00:05:51,590 you can just go ahead and create ready for project. 88 00:05:51,980 --> 00:05:54,950 And if you don't know, let me just go ahead and tell you how to create. 89 00:05:55,310 --> 00:05:57,170 Well, first of all, you need to open with a score. 90 00:05:57,530 --> 00:06:00,230 So don't don't like Match. 91 00:06:00,230 --> 00:06:00,470 What? 92 00:06:00,650 --> 00:06:01,640 What is showing up? 93 00:06:01,640 --> 00:06:06,890 In my view, a score you and it will be different because you all you have installed for the first time, 94 00:06:06,890 --> 00:06:11,900 maybe so or whatever you need to just first of all, open the scoring and then you need to go to the 95 00:06:11,900 --> 00:06:13,970 third terminal and you need to just select. 96 00:06:16,640 --> 00:06:16,910 They. 97 00:06:19,030 --> 00:06:22,210 A CO two car have buckled to.