1
00:00:03,560 --> 00:00:04,010
Okay.

2
00:00:04,010 --> 00:00:12,260
So in the first subsection of this, uh, blog, we have seen how to build the back end of our application.

3
00:00:12,560 --> 00:00:22,070
We went through the initial setup, the database preparation, and then we went through the main functionality

4
00:00:22,070 --> 00:00:26,570
of the backup, mostly the Crud helpers and also the routers.

5
00:00:27,960 --> 00:00:33,510
We finally test our backend application on a local server.

6
00:00:34,110 --> 00:00:35,070
So.

7
00:00:35,770 --> 00:00:36,700
I.

8
00:00:37,460 --> 00:00:46,010
I hope that when you are starting this new subsection, you are already familiar with the previous one.

9
00:00:46,010 --> 00:00:51,770
That is very important because we are going to add a lot of new things, a lot of new concepts.

10
00:00:51,770 --> 00:01:01,430
So if you are not a if you don't have a solid understanding of the first part, this can become more

11
00:01:01,430 --> 00:01:05,450
and more complex and difficult and overwhelming for you.

12
00:01:05,450 --> 00:01:13,610
So if you if you are not comfortable with the part one, I would tell you stop here, go back and repeat

13
00:01:13,610 --> 00:01:19,250
the part one as many times as you need in order to feel comfortable with it.

14
00:01:19,250 --> 00:01:19,850
Okay?

15
00:01:19,850 --> 00:01:21,740
Don't worry, we will wait for you.

16
00:01:22,740 --> 00:01:31,260
Now the part two of this exercise is going to be building the front end with Next.js.

17
00:01:31,290 --> 00:01:34,890
Next.js is going to be the main framework we are going to use.

18
00:01:34,890 --> 00:01:38,100
And we will follow these six steps.

19
00:01:38,100 --> 00:01:41,970
First we are going to create a Next.js starter template.

20
00:01:41,970 --> 00:01:51,750
And this is this is great because Next.js is going to provide us a with a template that is something

21
00:01:51,750 --> 00:01:54,630
like a pre-built, uh, template for us.

22
00:01:54,630 --> 00:02:03,210
So it's not a front end application, but it's uh, very uh uh, well, it's not our front end application,

23
00:02:03,210 --> 00:02:09,090
but is, is is, uh, they have work a lot, uh, there.

24
00:02:09,090 --> 00:02:16,470
So we are going to, uh, take advantage of the work of the engineers of Next.js, and we will continue

25
00:02:16,470 --> 00:02:17,430
from their work.

26
00:02:17,430 --> 00:02:23,820
You will see, they are going to provide a lot of, uh, functionality for us with this starter template

27
00:02:23,820 --> 00:02:24,660
then.

28
00:02:25,300 --> 00:02:33,460
We are going to connect this front end application with our back end, and we are going to create a

29
00:02:33,460 --> 00:02:41,110
and the, the pages, the components, which are the main elements of Next.js and React a.

30
00:02:42,100 --> 00:02:48,400
We, we will focus, uh, especially in one of the components.

31
00:02:49,060 --> 00:03:01,660
And then we will add a CSS styles a to add, you know, like font sizes, colors, positioning, etc.

32
00:03:01,660 --> 00:03:03,220
to the application.

33
00:03:03,220 --> 00:03:03,640
Okay.

34
00:03:03,640 --> 00:03:09,970
So let's follow now the notebook in the in the right side of the screen.

35
00:03:09,970 --> 00:03:14,230
And I am going to the front end.

36
00:03:14,230 --> 00:03:20,980
This is the the already finished code of the front end application here.

37
00:03:20,980 --> 00:03:21,640
Okay.

38
00:03:22,780 --> 00:03:23,230
Excuse me.

39
00:03:23,230 --> 00:03:31,690
So the first thing you are going to do is to create the front end application using a Next.js starter

40
00:03:31,690 --> 00:03:32,080
template.

41
00:03:32,080 --> 00:03:42,340
So the first thing you need to do is you are going to, uh, install a starter template from next,

42
00:03:42,340 --> 00:03:45,760
uh, entering this uh, command.

43
00:03:45,760 --> 00:03:46,600
Okay.

44
00:03:47,260 --> 00:03:49,930
When you enter this command and click on enter.

45
00:03:49,930 --> 00:03:53,230
In the terminal you will find some questions.

46
00:03:53,230 --> 00:04:00,550
In order to complete this installation and in the app name, enter to do app.

47
00:04:00,550 --> 00:04:04,540
Okay, this is going to be the name of our front end application.

48
00:04:04,540 --> 00:04:07,900
And then we are not going to use type TypeScript.

49
00:04:07,900 --> 00:04:10,480
We are going to use ESLint.

50
00:04:10,570 --> 00:04:13,210
And we are not going to use tailwind.

51
00:04:13,210 --> 00:04:18,550
Uh, just uh, follow this, uh, this uh.

52
00:04:20,510 --> 00:04:24,950
Configuration options in your terminal, okay?

53
00:04:24,950 --> 00:04:26,210
And don't worry about this.

54
00:04:26,210 --> 00:04:29,360
You can learn about these options later.

55
00:04:29,360 --> 00:04:30,380
Now don't worry about that.

56
00:04:30,380 --> 00:04:35,960
We are just installing a starter application, a starter template from Next.js.

57
00:04:36,860 --> 00:04:43,460
Now go to the main folder of the application and enter npm.

58
00:04:43,760 --> 00:04:51,590
Go to the main folder of the frontend frontend front end.

59
00:04:53,950 --> 00:04:54,340
Content.

60
00:04:54,370 --> 00:04:55,450
Application.

61
00:04:57,360 --> 00:05:00,900
And enter npm run dev to run the front end app in the browser.

62
00:05:00,900 --> 00:05:01,500
So.

63
00:05:02,250 --> 00:05:08,370
As you know, the folder, the main folder of the frontend application is in our case is this todo app.

64
00:05:08,370 --> 00:05:11,400
So in the terminal we have to go to this folder.

65
00:05:11,400 --> 00:05:17,640
And when we are in this folder we we execute npm run dev okay.

66
00:05:17,640 --> 00:05:20,010
So this folder to do app.

67
00:05:21,050 --> 00:05:24,890
Has been created by Next.js when we enter this.

68
00:05:25,430 --> 00:05:26,150
Okay.

69
00:05:26,570 --> 00:05:31,370
Because we were already in this folder in the 002.

70
00:05:31,370 --> 00:05:31,910
Next.

71
00:05:32,120 --> 00:05:32,780
Whatever.

72
00:05:32,780 --> 00:05:33,080
Right.

73
00:05:33,080 --> 00:05:40,820
So when we execute this, uh, starter template installation, this starter template installation has

74
00:05:40,820 --> 00:05:44,180
created this, uh, directory to do app.

75
00:05:44,180 --> 00:05:44,570
Okay.

76
00:05:44,570 --> 00:05:51,050
And inside this directory we have all this or most of these, uh, these are the, the final ones.

77
00:05:51,050 --> 00:05:57,680
But you will have an initial version of most of these files when you create the starter template.

78
00:05:57,680 --> 00:05:58,160
Okay.

79
00:05:58,160 --> 00:06:09,590
And then if you enter npm run dev you are going to execute the frontend, the local frontend server.

80
00:06:09,590 --> 00:06:09,950
Okay.

81
00:06:09,950 --> 00:06:15,650
So do you remember when we started the back end application in our computer.

82
00:06:15,650 --> 00:06:18,380
So this is the same thing for our front end.

83
00:06:18,380 --> 00:06:21,230
Why are we using a different approach?

84
00:06:21,230 --> 00:06:27,560
Because if you remember in front end we are speaking Spanish and in backend we are speaking German,

85
00:06:27,560 --> 00:06:28,070
right?

86
00:06:28,070 --> 00:06:34,370
So in frontend we are speaking JavaScript and in backend we were speaking Python is different ways of

87
00:06:34,370 --> 00:06:35,300
doing things.

88
00:06:36,140 --> 00:06:47,300
So now if you, uh, execute this command npm run dev in your terminal, you can go to your browser,

89
00:06:47,300 --> 00:06:52,430
the Chrome browser, uh, and enter this localhost 3000.

90
00:06:52,460 --> 00:06:57,800
Remember that when we wanted to open the back end we entered localhost.

91
00:06:57,920 --> 00:07:00,230
Uh, other other URL.

92
00:07:00,230 --> 00:07:03,170
So now is localhost 3000 okay.

93
00:07:03,290 --> 00:07:10,730
Then when you open this what you are going to see is the default user interface of the starter template

94
00:07:10,730 --> 00:07:11,660
of Next.js.

95
00:07:11,660 --> 00:07:15,770
So nothing fancy, just uh, what they provide.

96
00:07:16,890 --> 00:07:27,390
So now in the frontend you create the m file, and in this m file you are going to enter a very important

97
00:07:27,390 --> 00:07:35,940
information, which is you are telling the front your front end application where to find the back end

98
00:07:35,940 --> 00:07:36,960
application.

99
00:07:37,350 --> 00:07:39,720
Okay so this is telling.

100
00:07:39,720 --> 00:07:44,520
And your front end application where to find the back end.

101
00:07:44,550 --> 00:07:45,930
This is very important.

102
00:07:45,930 --> 00:07:52,830
And you will see we will have to change this configuration when we go into the cloud.

103
00:07:52,830 --> 00:07:57,750
Because now you are telling it that the back end is in your computer in other part of your computer.

104
00:07:57,750 --> 00:08:05,850
But when we are a when we deploy our front end and back end in the cloud, we will need to change this.

105
00:08:05,880 --> 00:08:06,420
Okay.

106
00:08:07,590 --> 00:08:14,640
Then uh, you are going to see here, follow this step by step instructions.

107
00:08:14,640 --> 00:08:25,680
You go to pages index.js and you remove everything you have there the default content and enter copy

108
00:08:25,680 --> 00:08:28,230
this code we are providing you.

109
00:08:28,230 --> 00:08:32,220
This is mostly a couple of components.

110
00:08:32,220 --> 00:08:33,480
What in react.

111
00:08:33,480 --> 00:08:38,730
And in next we call components which is layout and to do list.

112
00:08:38,730 --> 00:08:43,650
So what we are telling uh our application here is okay.

113
00:08:43,650 --> 00:08:47,490
Our home page is going to be composed of.

114
00:08:48,370 --> 00:08:49,510
A couple of things.

115
00:08:50,320 --> 00:08:53,560
A component called layout and inside layout.

116
00:08:53,560 --> 00:08:57,460
We are going to have another component called called to do list.

117
00:08:57,460 --> 00:08:58,150
Okay.

118
00:08:58,150 --> 00:09:01,360
So more information about this in the notebook.

119
00:09:01,810 --> 00:09:06,940
And once we have created this we have updated the index.js.

120
00:09:06,970 --> 00:09:12,460
We will go to the components folder and we will create our components.

121
00:09:12,460 --> 00:09:14,050
We have the layout component.

122
00:09:14,050 --> 00:09:15,940
We have the to do list component.

123
00:09:15,940 --> 00:09:19,540
And we have the to do which is included in the previous one.

124
00:09:20,240 --> 00:09:29,630
So here you have in the notebook detailed information about what you are doing in the components.

125
00:09:29,660 --> 00:09:30,380
Okay.

126
00:09:30,380 --> 00:09:36,710
So line by line this is a the code and explanations okay.

127
00:09:36,710 --> 00:09:43,250
About the layout, the layout component, the to do list component which is very important.

128
00:09:43,790 --> 00:09:46,520
And you have here a lot of information.

129
00:09:46,520 --> 00:09:54,020
So and this is going to be very good for you to study learn and practice and practice okay a step by

130
00:09:54,020 --> 00:09:55,220
step line by line.

131
00:09:55,520 --> 00:09:58,520
This means this this means this bla bla bla bla bla okay.

132
00:09:58,520 --> 00:10:01,640
In in huge detail okay.

133
00:10:01,640 --> 00:10:07,070
All especially this component because it's the most important of the three okay.

134
00:10:07,070 --> 00:10:12,080
So this is a very detailed analysis line by line okay.

135
00:10:14,430 --> 00:10:15,330
Then.

136
00:10:17,870 --> 00:10:19,640
You have the.

137
00:10:21,330 --> 00:10:23,400
Air component, which is the to do.

138
00:10:23,400 --> 00:10:25,440
Let's let's go there.

139
00:10:26,370 --> 00:10:26,850
Okay.

140
00:10:26,850 --> 00:10:33,480
You have the final component, which is the to do also explain in detail here pum pum pum pum everything

141
00:10:33,480 --> 00:10:34,440
you are doing.

142
00:10:34,650 --> 00:10:39,390
And once you have the components you create the style files.

143
00:10:39,390 --> 00:10:42,810
So probably you are familiar with CSS.

144
00:10:42,840 --> 00:10:44,340
If not, don't worry.

145
00:10:44,340 --> 00:10:45,450
Super simple.

146
00:10:45,450 --> 00:10:50,430
CSS is just a way of styling our applications.

147
00:10:50,430 --> 00:10:55,800
So we are adding colors, sizes, positioning these kind of things right?

148
00:10:55,800 --> 00:11:02,700
So you just have to delete the content of the default CSS files and create these new ones.

149
00:11:02,700 --> 00:11:05,580
CSS is is is.

150
00:11:06,240 --> 00:11:08,370
Just boring.

151
00:11:08,700 --> 00:11:10,470
There is nothing to.

152
00:11:10,650 --> 00:11:14,130
There is really nothing to learn in CS.

153
00:11:14,160 --> 00:11:19,560
It's just you will have to understand what it is doing and it's very intuitive.

154
00:11:19,560 --> 00:11:23,610
But just copy and paste this and worry about that a little bit later.

155
00:11:23,610 --> 00:11:26,340
And you can learn more about CS a little bit later.

156
00:11:26,340 --> 00:11:26,940
Okay.

157
00:11:27,600 --> 00:11:38,250
One interesting note is that if you remember in our to do application, we have an icon of a to delete.

158
00:11:38,250 --> 00:11:40,470
You know, we click on the delete icon.

159
00:11:40,470 --> 00:11:45,900
So here's where you can where you can download the image of the this icon.

160
00:11:46,930 --> 00:11:51,940
And the image of this icon is going to be.

161
00:11:55,740 --> 00:11:57,870
It's going to be probably here.

162
00:11:59,080 --> 00:12:00,550
Yes, this is the one.

163
00:12:00,550 --> 00:12:02,560
It's going to be in the public folder.

164
00:12:02,590 --> 00:12:02,890
Okay.

165
00:12:02,890 --> 00:12:08,110
So store it there then a you have it okay.

166
00:12:08,110 --> 00:12:14,650
So the a front end application has mostly.

167
00:12:14,650 --> 00:12:20,560
So then the main work of the the the front end application is this component okay.

168
00:12:20,560 --> 00:12:24,550
So follow the steps of the notebook.

169
00:12:24,550 --> 00:12:28,450
Understand what you are doing step by step.

170
00:12:28,450 --> 00:12:29,590
Following the notebook.

171
00:12:29,590 --> 00:12:35,620
Whenever you have a question doubt problem go to chat GPT four or the other sources.

172
00:12:36,250 --> 00:12:38,410
Uh w3 Schools.com.

173
00:12:38,410 --> 00:12:45,010
There you have a react uh guide in in Next.js you have a guide as well.

174
00:12:45,010 --> 00:12:45,700
The tutorial.

175
00:12:45,700 --> 00:12:46,600
Remember that.

176
00:12:46,600 --> 00:12:49,390
Get familiar with this uh, part two.

177
00:12:49,390 --> 00:12:55,990
And when you are ready, we will, uh, run the full stack application in the next lesson.