1 00:00:03,890 --> 00:00:12,020 Okay, so if you are in this subsection, you are already comfortable with the part two how to build 2 00:00:12,020 --> 00:00:12,830 the front end. 3 00:00:12,920 --> 00:00:14,420 Just review. 4 00:00:14,540 --> 00:00:24,110 Let's review very quickly the main parts of this uh, part two, the main steps in the slides we have 5 00:00:24,110 --> 00:00:29,150 uh, so we first created a Next.js starter template. 6 00:00:29,150 --> 00:00:31,880 We then a. 7 00:00:33,060 --> 00:00:40,380 It included the URL of the backend in the in the dot m file. 8 00:00:40,470 --> 00:00:43,680 We created the main page of the application. 9 00:00:43,680 --> 00:00:47,940 We created the components a. 10 00:00:47,940 --> 00:00:53,280 We focus our attention especially to the key component the to do list component. 11 00:00:53,610 --> 00:00:59,220 And then we uh, uh, completed the crud. 12 00:00:59,490 --> 00:01:06,000 Uh, the most important uh uh uh, file for the Crud helpers. 13 00:01:06,000 --> 00:01:06,390 Okay. 14 00:01:06,390 --> 00:01:12,060 Here, you have some details around some of the functions we have in that file. 15 00:01:12,060 --> 00:01:18,540 The add to do the fetch to do the update to do the handle delete to do. 16 00:01:18,540 --> 00:01:22,830 And then we created the CSS styles. 17 00:01:22,950 --> 00:01:30,450 Now we want to run the front end and the back end simultaneously in our computer okay. 18 00:01:30,450 --> 00:01:34,050 And after this we will go to the part four and part five. 19 00:01:34,050 --> 00:01:37,620 This is the part three is just the first line here okay. 20 00:01:37,620 --> 00:01:38,490 So. 21 00:01:39,790 --> 00:01:43,600 The instructions in order to complete this part. 22 00:01:43,600 --> 00:01:45,010 Three to run the full stack. 23 00:01:45,010 --> 00:01:46,960 Applications are very simple. 24 00:01:47,110 --> 00:01:50,980 You need to open two terminal windows. 25 00:01:51,460 --> 00:02:01,060 In the first window, you go to the back end and directory and execute this, uh, this, uh, command. 26 00:02:01,060 --> 00:02:07,600 And in the second terminal window you go to the front end directory and execute this command okay. 27 00:02:07,600 --> 00:02:10,120 So I'm going to do this for you. 28 00:02:10,120 --> 00:02:13,600 This is uh, the back end, uh. 29 00:02:14,630 --> 00:02:15,650 Key directory. 30 00:02:15,650 --> 00:02:19,670 I am starting the backend server. 31 00:02:21,050 --> 00:02:23,540 And this is the frontend directory. 32 00:02:23,720 --> 00:02:27,740 Here I say npm run dev. 33 00:02:27,770 --> 00:02:33,740 Okay, so as you see we are starting the frontend. 34 00:02:33,740 --> 00:02:39,950 But since the frontend now is connected with our backend, if we. 35 00:02:42,060 --> 00:02:45,960 Load this in our browser right now. 36 00:02:45,960 --> 00:02:50,610 They are connected and you will see that here in the back end and also in the in the front end. 37 00:02:50,610 --> 00:02:55,350 We are starting to, uh, see, uh, things happening. 38 00:02:55,350 --> 00:02:55,680 Okay. 39 00:02:55,680 --> 00:02:58,620 So we can create a new task here. 40 00:02:58,620 --> 00:03:04,110 Like, I don't know, like go to the cinema. 41 00:03:04,710 --> 00:03:09,630 Do you remember when we went to the cinema many years ago? 42 00:03:10,110 --> 00:03:17,400 Okay, so you see here in the terminal, you are seeing the log of what is happening. 43 00:03:17,400 --> 00:03:25,980 So, as you have seen, to, uh, run the front end and back end simultaneously in your computer is 44 00:03:25,980 --> 00:03:26,850 very easy. 45 00:03:26,850 --> 00:03:32,610 In order to stop the server, you just have to use control C, okay. 46 00:03:32,610 --> 00:03:33,240 Remember that. 47 00:03:33,240 --> 00:03:39,540 So now we are going to deploy our, uh, application to the cloud. 48 00:03:39,540 --> 00:03:42,240 We will deploy the back end to render. 49 00:03:42,240 --> 00:03:44,880 Com and then the front end to Barcel. 50 00:03:44,880 --> 00:03:48,900 Com we will do this in the next subsection.