Hello and welcome to the first preview of this project that is getting started with the project.
So whenever so first thing that you have to do whenever you are creating a modern application is to
create the HDR and the stylised folders are shown already.
So this is the so our main area of concern is writing the Abdi's code.
OK, so you're writing the post trick was to get requests by API, the middleware part using the database,
setting up the database, setting up the strategies for Google authentication.
Facebook authentication be the main goal.
So creating a lab Daniel pages with the Demi Jones plan, anchor tags and then styles, etc. This is
not our area of concern so that I've already been provided with view.
You can see that in the courses that is provided to you.
So now using this can get started.
So first thing you have to do is download all the folders that you are having and then the next thing
you have to do is open the terminal.
And you can see it.
Open the terminal and go to the director that you are presented.
OK.
That is react.
I have my social app directory inside my React Project Directorate.
So go inside the social app.
You can have it any name, and the first thing you ever do is and be a minute.
That means you're initializing the note package manager so that you can install all the dependencies
that you want, the modules that you want in your project.
Well, such as a Body Pass, Express, Jazz Aegis and all that stuff.
So once you click on and be a minute, it will ask for a box.
You'll be the package name, restaurant description or keywords or the letters click on.
Keep on clicking Enter until it finishes.
If not for this message until you have to click on Enter.
And then if you don't want to click into these many times, then you can use this command and beam space
in it space minus light so minus five flag by default gives you all the questions that they initialize
at us.
So this is a chart.
OK, and the next one that you have to do is to install the required packages from NPR, so you have
initialized the second one is installed.
So I haven't started to express 40 percent and also haven't started.
As you can see.
And all 10 straight idiots.
So you have to basically install an express body passer and aegis.
So offer that.
After required of them inside Europe, gorgeous.
OK.
So create a file column, dodges and required.
So as you can see.
Yeah.
Express.
Body parts that required body parts to have required expression, body posture.
I have made my app as an express app and then I have used the static public for all the static pressure
present.
So now you have to go to the public folder.
There you will see the styles, all styles and images related to the page were presented inside the
public forum and then the Indian will be set to Aegis agents embedded JavaScript.
If you want to know more about it, you can go through the documentation.
And then we are using the body parts that you are alleged called Extra.
So what is body parts that we'll see that in the coming weeks?
This is a very important topic while you are working to petroleum and farms and everything.
So here inside of you, so as you said, the view engine to Egypt.
So by default, this will search for a folder with the name views.
OK, so this is the full reviews and it will go into it, and it looks like these are all the folders
that it will set up.
But the project so that we can use whenever required, for example, we are rendering and logging directly
without mentioning any part because this response will automatically search inside this views folder,
so no need to specify the whole directory part.
Once we have done this court, then it will by default considered as the default electropop.
So here now and showing what could we have written here?
The first thing is hair that had that well contained in the title body and everything this could tell
basically the, you know, the default that the boiler picks, in fact, that if you want, you can
copy other roles, you can remove them, not at all of a problem.
This will be the hair done and the photo will be simply closing the body and extremely tight.
So will be, for example, open home.
Yes, you will be including the patient's hair that perchance for them.
Similarly, the pages will be importing that.
And then right, the remaining God between them.
So here, home page, you will have some text and then two buttons.
Two buttons, meaning register and logging.
So what they will do once click on once we click on those, they will redirect you to slash register.
OK, hatchet of sequester slash register.
So slash and you start out.
Condense these things like will have a body method for these lava form for email password.
So this is where body parts of is used to get the data, what the user is entering in boogeymen and
password so can check the code over.
This is basically a simple HD ambulances that trigger an order.
Writing the code from scratch will see the main things like what is happening inside the adaptogens
and that's why I'm giving up this pitch.
General codes.
The average for each component domain see how the code works and all the upcoming videos.
So password email register and then some buttons like such.
Sign up with Google.
Sign up with Facebook.
So here, sign up with Google.
I had an icon before that fab effect.
So where does this icon comes from?
This comes from bootstrap.
So here is the Good Shepherd have downloaded the bootstrap modules, so if you want, you can download
or you can use the bootstrap client.
So if you go to more than 30 years, you can see here we are using the CSR.
Cases will challenge downward.
But yet, instead of this, it should have you use the CBN so you can go to the will will go to whichever
documentation copy page the client already.
So that's not a problem.
So, yeah, so we have discussed your home registered in the log, any similar desktop, a change yet
it should be logging.
And then secrets inside the secrets you have no submeter are not just secret strategies here, you're
going to have your boss discover my borscht.
OK.
So you can have a poor start.
You can tell me the first thing that all basically symbolized Yemen and never see us.
So once you have done with these kind of stuff.
This should be the border that barges into that border, as we have discussed until this sovereign to
of this last, then in the next coming radius, what is the external true means what a body parts that
refers to and everything.
And then this is the most important step.
It's a big step in every project that you create with using one monster.
So basically abducted isn't means on which board of a pet should be more strict, OK, on which board
of a rabbit should get the request made by satellite that is port number four thousand.
And how to know that whether we are the pope is listening to the Florida webpages listening to that,
but it is by calling this a callback function.
So whenever this is executed, then this callback function will get a lot of I started successfully
fought for larger venues and it was over it.
I'm using four thousand currently.
You can also use three thousand two thousand fighters in anything as your wish.
So this really isn't on the boat four thousand.
And then next thing is got get slash comma callback.
So this is a callback function.
So everything.
Similarly, I have one callback function, all our callback functions.
So what the fallback on functions are doing?
What does this get?
Function the time?
This is a function present in express.
OK.
This will get the request.
That means a client is asking server for something.
So we have the server, for example, a person standing something.
There are some apps and like, for example, we type in www.youtube.com.
That means we are asking the board, the Google Home page for the Google search, what we're asking
the Google server in law as their homepage.
So this is similar to that.
We are asking the server to load the home page home page.
You referred to that quotation slash.
So if you want log in page, you need to render flash log in, flash i.
It like that.
So as you can see in homebodies aegis.
Whenever we're clicking on logging, it is calling the logging road.
So what's happening with the logging will be called it will then.
Senator callback function, which will have the request and response request means what the client is
asking their sponsors, what are what the server should accept.
So basically we have the server, we are sending a response doctor and then log in.
So basically we are rendering the log in page.
OK, we are entering this page log into digits.
That's what we are doing.
Similarly, when the user is asking for are not registered.
Not slash registered.
We are then taking the question response as the parameters for the callback function and then rendering
that just a pitch.
So this is basically it.
And then the homepage log in page registered, better known.
So then there's any potential for transfer request made by the client.
So this is the basic boilerplate code.
OK.
So if you remove these two lines or you if you combine them, the remaining four is the basic boilerplate
code that you use for any project that you build.
Using React, you need to you need to have these basic modules and start npm, initialize.
Install them, required them, use them.
Create the constant app using the Express JS make up work, listening to the request made by the client
and then a good function.
So all this make setting up of the project and not from here on what we are going to do in the code
that that project related to like using the different levels of security and everything so we can see
how to protect the, you know, whenever the user clicks on or give some data and clicks on into like
username and password, how to store them in the database and how to ensure the security that no one,
no attack that will, you know, get the data, steal the data.
Our system should not get compromised.
So this all things we'll see in upcoming reduce.
I hope you understood this.
We don't like how to get started with basic.
One stack application will meet in the next.