And welcome to cease tutorial.

What we're going to be doing today is building a simple, too dear list with the Prince Tak.

And in case you don't know what the Prince Tak stands for, it is P for Post Grass E for express our for reaction?

Yes, as your friend and framework at an end for no Gs as her back in language.

Now, by the end of this video, you'll have you better understanding of how all these different types of technologies interact with each other and go on to building more complicated applications.

Now, let me give you guys a quick demo.

So let's say I need to clean my room.

Wish I really need d'oh so I can add that I can even edit the information.

So let's change this to car.

Uh, I'll just keep it like that.

And then I can also delete the information.

So even though this is just a simple crowd application and it is trivial, there's a lot of things that's happening between the front and back end.

So in the next section, we're gonna go over a diagram or review of how this application is going to work and give you guys the big picture.

Now, before I move on, there is going to be some pre represents or more like, pre set up.

Like the first thing you're reading need is to have no gs installed.

Second, you also need to have post grass installed.

And if you don't, I'm just gonna give you guys a video.

That's why I'm gonna look at the bottom of my video That's going to show you guys how the properly install it.

Besides that, you guys need to have a basic understanding.

What jobs?

Grab reaction.

Yes.

And if you understand recipe ice, that's going to hell.

So help you guys a lot throughout the whole process.

But besides that, I'll see you guys in the next section.

Okay, so let's just quickly go over this diagram to get the big picture so you can see that this is going to be our friend.

And so right here you could see that the submit button along with the data that's going to be able to get edit and deleted.

So any time I collect the submit at it or delete button within my react application what I'm really am doing is sending an http request to my rest.

Will FBI and depending on the HTP requests and the route that's being hit, it is going to tell my database or it's going to instruct my database.

A rod type of crowd operation needs to get done.

Okay, so any time I like the Smith, But it I'm sending a post request to create a to dio Anytime I want to edit something, I'm sending a poor requests toe update to dio delete, delete.

And then when I want to read it to do, I'm gonna use it.

Get request.

So I think one of the hardest part about learning how false like application work is really understanding rest wapi eyes.

So I'm gonna really oversimplify the definitions.

But this is really all you need to know.

Arrestable e p.

I uses transfer protocol in order to run credit operations.

So what I mean by that is that our transfer protocol is going to be htp requests.

So we have access the post, put lead, get in a lot more, but these air the for me once.

But essentially, we're going to be using these htp requests and then our rational FBI is going to take them.

And then it's going to instruct.

The keyword is in struck our database.

Ah, what type of crowd operation needs to get done?

Okay, so a lot of misconception that a lot of people have is that credit operations occurred within the rest weepy I but that's not true at all.

Broader the crowd operations on Lee occur within the database.

Wonder that's post cries or mongo D B or my SQL.

It only occurs within our database.

So I'm just going to say this arrest FBI is just going to take our htp requests and it is going to instruct.

Okay, so hopefully that makes a lot more sense.

And in next section, we're going to start building arrest way.

P I Okay, so let's start building our wrestle a p I.

So the first thing I did was created a simple pern to Dio folder, and you can name this whatever you want, but really, the big idea is that it's going to hold our client and server folder.

So I'm gonna first do my dear server.

And then I'm going to see the into that server.

So you could see your It's popping up right there and immediately I'm going to run and PM in it.

So mpm and it is going to keep track of all our packages insider application.

And we're gonna answer a few more questions to give more details.

So entry point is what's going to glue or application together.

So after that, I'm going to do and PM, install, express, PG and course.

So what are these libraries?

Well, express allows us to quickly create a server in No J s, and then we, of course, which allows different domain applications to interact with each other.

For example, our service gonna be running on Look, host 5000 in our react applicators application is going to be running on local host 3000.

Finally, PG is there to connect our database with our server it in order to run some post grad queries.

Okay, so once we set this thing up, I'm going to see touch.

Indyk said yes, which is going to get to be the glue.

I'm gonna go over here, record the libraries, so I'm gonna require express, and then I'm going to create a variable called up, which is going to take my express library and then it's going to run it.

Now I pause all these cool methods in order to create a server.

So any time we want our server to start, we have to listen to a part number.

So I thought, listen for 5000 is what we're gonna will be listening to, and then I'm gonna have a callback function that's going to indicate has started.

So server has started on port.

I testes out really quick to see if it works.

I'm going to say node index, and indeed it does work.

But the thing is, is that I don't want to use note.

I highly recommend that you mpm sell globally Nordmann because every time we want to see changes, we have to restart terminal and turn it back on.

So by using no men or no mom, you're going to watch a single file and then every time there's a change that's going to be done, it's going to onsen instantly.

Restart it.

So no, mom and you can see it's going to be watching our file.

And the next thing I want to do is create Cem Mil where so middleware.

I'm gonna use up that use.

So anytime we're gonna create a middle where you have to use about use and I'm gonna put course, And I totally forgot to require that.

So constant cores.

Okay, so now that set up, that's all we have to do.

And I just kind of wanna jump ahead a swell, that any time we're building a full psych application, you need to get data from the client side.

And the only way to get data from the client side is that we have to get it from the requests that body object.

So let me show you how we could do that.

So by using this oops, we go back inside here.

So this right here essentially is allowing us and gave us access to request that body and then we can get Jason data.

Okay, so this is still a little bit confusing.

We're going to build and I'm going to wreck consists a lot.

Okay, so I'll see in the next section, and we're gonna create a database and a table for a post cries.

All right, so let's get started building our database in table, so I'm gonna first show you guys this diagram to give you guys a big overview of the commands we're gonna be using.

So you could see this or post Crest inside there.

There's gonna be a lot of other databases like to do databases or hotel database.

Now, inside these data basis, we're going to have a table.

So in this case, I'm going to create a table or I'm gonna create a database call to do Davies.

And then inside there, I'm going to create table called to d'oh.

Another purpose of having a table is that if there's anything that's related to room, for example in this database that it's gonna be placed inside the room table, anything that's related to guests is going to be placed inside the guest people, Okay?

And writing a database for creating a database is as easy as saying create database and it specifying the name along with Semi Colon.

And then after that, we have to move inside that database and then we have to run, create table to dio.

We don't stop there.

We also have to define a schema.

And the reason why s Cuma is so important is because we don't want to put anything inside her database.

You want to be specific on what we're going to be putting inside there.

And then finally, as you can see here, we have all these separate commands that you can run but in our post grad terminal, nowhere to make it easy for us to move around.

So let's get started.

So I'm gonna go back to my visual studio code, and right off the bat, I'm going to create a file called Database Thought SQL.

And the reason I created this is because it's going to make it more visually pleasing when we write our commands.

So that's pretty database.

So great database and record to name it as pern to d'oh!

All right, semi colon and the next records say create table and in to d'oh.

Now I have to specify what's going to look like.

So let me just set this little pregnancies.

First thing I'm gonna do is to do I D.

And the reason why I have to do idea is because I want to ensure that this to do is going to be unique.

For example, any time I'm trying to delete, I'm trying to update or get a specific to do.

I just want a reference this to do I d.

Because it's what's going to make it distinguishable from the other two Dios.

And then I'm going to say serial Hi, Murky.

What is this?

So primary key is exactly what I just said.

Last time essentially indicates that this value right here where this column is going to make this entire to do unique from the other two DUIs.

And then we have cereal, which is going to be this function that's going to increase our primary key to ensure uniqueness.

So if you're still looking confused, don't worry about it.

We're just gonna go over that wall.

We called this thing and finally, I'm just going to have description inside here, and I'm going to say, uh, give a far char of 2 55 which means I'm setting a Max character of 255.

We just wrote our commands, and now you should already have installed post grass.

So let me just put this aside.

So I'm gonna open this command line right here, So you should already stalled it.

And then what you're going to run is P SQL Dash you representing as the user, and we're gonna be using the user Post press.

So ain't time we installed Post Press?

You automatically have a user by default called Post Press, which is a super admin, and a super admin has full access to everything.

And then it's going to tell me what's my password?

And that's what you wrote inside your installation process.

So when he installed post breads, it told you to put a password inside there.

So we're gonna put inside here.

Okay, so I'm inside my database, So let's get a run through the commands that was talking about when I do slash out it is going to show me all of my databases.

So, for example, if it's still look confusing, essentially all of these little things that you see over here on the side is representing each of these databases.

Okay, So once I have this thing down, I could do control, See, to get out of this really quick, okay?

And then inside here, I'm going to see that have jwt off.

So I'm gonna move inside that database, so I'm gonna say slash See dont off now, as you can see here It's saying that you're connected to the database.

Jie deputy off as user pulls grass, Okay?

And then I can look at all the tables that's inside there by simply saying slash duty.

So in this case, this has a single user table.

Be awesome.

So, no, we're going to make art only database.

So I'm gonna go inside here.

I'm gonna grab this command, and I'm gonna put it right there and check this out.

I want to say you to be straight or a very database.

And then once we have that down, we could do slash help.

I can see right there that we have indeed add it to our database or to our post press.

I'm gonna do control, see again to get out of here, and then I'm going to move inside there, so slash See into referred to d'oh so you could see it doesn't seems like process.

And now I'm gonna run slash e t to see what or not we have any tables you can see here Says did not find any relations.

So now we take this thing right here, and then we put it right there.

Okay, so awesome.

So we create a table and now I do slash D t You can see that.

Indeed.

We have created a table called to d'oh.

Now I think it's also worth mentioning that you don't have to call this to do idea and also called this tea ideas wall.

So I'm just gonna show you this command later, But essentially, it's going to get all of my to do lose.

See, that right here is what we define our scheme of us to do I d and description.

And, like I said again, doesn't have to be to do I d.

I'm just being explicit.

Some people just like to say t i d or you could do whatever you want with that.

Okay, so in the next section, we're going to connect our DD baseball for server.

Okay, so let's start connecting everything together, so connecting like our database over server is really easy when we use the PJ library.

So what?

I'm gonna go is create a file called Bebe.

That Yes, and this is going to configured how we're going to connect to our database.

So I'm gonna say con school required PG library.