Okay.
So in the first subsection of this, uh, blog, we have seen how to build the back end of our application.
We went through the initial setup, the database preparation, and then we went through the main functionality
of the backup, mostly the Crud helpers and also the routers.
We finally test our backend application on a local server.
So.
I.
I hope that when you are starting this new subsection, you are already familiar with the previous one.
That is very important because we are going to add a lot of new things, a lot of new concepts.
So if you are not a if you don't have a solid understanding of the first part, this can become more
and more complex and difficult and overwhelming for you.
So if you if you are not comfortable with the part one, I would tell you stop here, go back and repeat
the part one as many times as you need in order to feel comfortable with it.
Okay?
Don't worry, we will wait for you.
Now the part two of this exercise is going to be building the front end with Next.js.
Next.js is going to be the main framework we are going to use.
And we will follow these six steps.
First we are going to create a Next.js starter template.
And this is this is great because Next.js is going to provide us a with a template that is something
like a pre-built, uh, template for us.
So it's not a front end application, but it's uh, very uh uh, well, it's not our front end application,
but is, is is, uh, they have work a lot, uh, there.
So we are going to, uh, take advantage of the work of the engineers of Next.js, and we will continue
from their work.
You will see, they are going to provide a lot of, uh, functionality for us with this starter template
then.
We are going to connect this front end application with our back end, and we are going to create a
and the, the pages, the components, which are the main elements of Next.js and React a.
We, we will focus, uh, especially in one of the components.
And then we will add a CSS styles a to add, you know, like font sizes, colors, positioning, etc.
to the application.
Okay.
So let's follow now the notebook in the in the right side of the screen.
And I am going to the front end.
This is the the already finished code of the front end application here.
Okay.
Excuse me.
So the first thing you are going to do is to create the front end application using a Next.js starter
template.
So the first thing you need to do is you are going to, uh, install a starter template from next,
uh, entering this uh, command.
Okay.
When you enter this command and click on enter.
In the terminal you will find some questions.
In order to complete this installation and in the app name, enter to do app.
Okay, this is going to be the name of our front end application.
And then we are not going to use type TypeScript.
We are going to use ESLint.
And we are not going to use tailwind.
Uh, just uh, follow this, uh, this uh.
Configuration options in your terminal, okay?
And don't worry about this.
You can learn about these options later.
Now don't worry about that.
We are just installing a starter application, a starter template from Next.js.
Now go to the main folder of the application and enter npm.
Go to the main folder of the frontend frontend front end.
Content.
Application.
And enter npm run dev to run the front end app in the browser.
So.
As you know, the folder, the main folder of the frontend application is in our case is this todo app.
So in the terminal we have to go to this folder.
And when we are in this folder we we execute npm run dev okay.
So this folder to do app.
Has been created by Next.js when we enter this.
Okay.
Because we were already in this folder in the 002.
Next.
Whatever.
Right.
So when we execute this, uh, starter template installation, this starter template installation has
created this, uh, directory to do app.
Okay.
And inside this directory we have all this or most of these, uh, these are the, the final ones.
But you will have an initial version of most of these files when you create the starter template.
Okay.
And then if you enter npm run dev you are going to execute the frontend, the local frontend server.
Okay.
So do you remember when we started the back end application in our computer.
So this is the same thing for our front end.
Why are we using a different approach?
Because if you remember in front end we are speaking Spanish and in backend we are speaking German,
right?
So in frontend we are speaking JavaScript and in backend we were speaking Python is different ways of
doing things.
So now if you, uh, execute this command npm run dev in your terminal, you can go to your browser,
the Chrome browser, uh, and enter this localhost 3000.
Remember that when we wanted to open the back end we entered localhost.
Uh, other other URL.
So now is localhost 3000 okay.
Then when you open this what you are going to see is the default user interface of the starter template
of Next.js.
So nothing fancy, just uh, what they provide.
So now in the frontend you create the m file, and in this m file you are going to enter a very important
information, which is you are telling the front your front end application where to find the back end
application.
Okay so this is telling.
And your front end application where to find the back end.
This is very important.
And you will see we will have to change this configuration when we go into the cloud.
Because now you are telling it that the back end is in your computer in other part of your computer.
But when we are a when we deploy our front end and back end in the cloud, we will need to change this.
Okay.
Then uh, you are going to see here, follow this step by step instructions.
You go to pages index.js and you remove everything you have there the default content and enter copy
this code we are providing you.
This is mostly a couple of components.
What in react.
And in next we call components which is layout and to do list.
So what we are telling uh our application here is okay.
Our home page is going to be composed of.
A couple of things.
A component called layout and inside layout.
We are going to have another component called called to do list.
Okay.
So more information about this in the notebook.
And once we have created this we have updated the index.js.
We will go to the components folder and we will create our components.
We have the layout component.
We have the to do list component.
And we have the to do which is included in the previous one.
So here you have in the notebook detailed information about what you are doing in the components.
Okay.
So line by line this is a the code and explanations okay.
About the layout, the layout component, the to do list component which is very important.
And you have here a lot of information.
So and this is going to be very good for you to study learn and practice and practice okay a step by
step line by line.
This means this this means this bla bla bla bla bla okay.
In in huge detail okay.
All especially this component because it's the most important of the three okay.
So this is a very detailed analysis line by line okay.
Then.
You have the.
Air component, which is the to do.
Let's let's go there.
Okay.
You have the final component, which is the to do also explain in detail here pum pum pum pum everything
you are doing.
And once you have the components you create the style files.
So probably you are familiar with CSS.
If not, don't worry.
Super simple.
CSS is just a way of styling our applications.
So we are adding colors, sizes, positioning these kind of things right?
So you just have to delete the content of the default CSS files and create these new ones.
CSS is is is.
Just boring.
There is nothing to.
There is really nothing to learn in CS.
It's just you will have to understand what it is doing and it's very intuitive.
But just copy and paste this and worry about that a little bit later.
And you can learn more about CS a little bit later.
Okay.
One interesting note is that if you remember in our to do application, we have an icon of a to delete.
You know, we click on the delete icon.
So here's where you can where you can download the image of the this icon.
And the image of this icon is going to be.
It's going to be probably here.
Yes, this is the one.
It's going to be in the public folder.
Okay.
So store it there then a you have it okay.
So the a front end application has mostly.
So then the main work of the the the front end application is this component okay.
So follow the steps of the notebook.
Understand what you are doing step by step.
Following the notebook.
Whenever you have a question doubt problem go to chat GPT four or the other sources.
Uh w3 Schools.com.
There you have a react uh guide in in Next.js you have a guide as well.
The tutorial.
Remember that.
Get familiar with this uh, part two.
And when you are ready, we will, uh, run the full stack application in the next lesson.