It's pager here from new coder dot com.

And in this video, we're gonna give an overview of the crowd application that we're gonna be building as well as going over what things you should be familiar with in order to follow along with this tutorial Siris.

So the technologies that you should be somewhat familiar with are no Js and express Js, which we're gonna be using for our server side.

We're gonna be using a database cone, mongo, D B, And for our client side, we're gonna be using Jake Riri, the Fetch A P I and Bootstrapped, and you should know a little bit about HTML.

And last but not least for our server side and client side.

We're gonna be using a programming language called Java script.

So now let's actually take a look at the application that we're gonna be building within this tutorial.

Siri's.

So this is gonna be our to do application that we're gonna be building.

It's a very simple interface, so we just have a user input box where we're gonna type are to do so let's say I wanna tight clean garage.

I can do so it create, and you could see that this gets stored.

Now, if I hit Refresh, you can see that the data persist.

So that means that we are saving it with in our database.

If I want to edit this for something, let's say clean room.

Instead, I could click at it and you could see that we get updated with clean room it fresh data persists.

And if I hit the league, it deletes the two D'oh!

And if I want to create multiple two DUIs, I could say clean room, clean house and etcetera.

And all of this data will persist within Armando de be database.

Welcome to part one of building our crowd application from scratch.

So essentially, what we're gonna do in distant Oriole isn't stall our packages, set up our express application and connect to our mongo D B database.

So to get started, I'm just gonna go to file, Gonna go open folder.

I'm gonna right click, go to new.

We're gonna create a new folders.

I'm just gonna call it mongo D b underscore cried Let's select it.

And afterwards, when I want to do now is let's open up the terminal and from here.

I'm just gonna type Seal s to clear to terminal.

And that's because there's a visual bug with visual studio code at the moment.

And what I want to do now is install our packages that our application is gonna be dependent on.

So I'm gonna type MPM and it and we're gonna pass in the flag wife to get the default values.

And now I want to install the body Parson module and the body parts in module is gonna be used.

The parts Jason between the client side and the service side.

Next, we're gonna install Express.

Um, we're just gonna use express for routing.

Next, we're gonna install mongo D.

B.

And this is just gonna be the Mongol D B drivers, and this is gonna help us connect to our database.

And last but not least, we're gonna install the path module, and we're gonna be using the path mantra with just the serve a static HT on mount file to the user.

So now that we have our packages installed, I'm just gonna go up here.

I'm gonna hit control, be to bring up the Explorer.

I'm gonna go to package that Jason I'm just gonna change the main to AP IGs.

And this is just a personal preference I prefer at Dodge as as opposed to index dot Js.

So now I'm just gonna save that.

Let's close out of this.

We're going to create two files.

I'm gonna create my app dot Js file.

And our second file that we're gonna create is gonna be called d v dot Js.

And this is where we're gonna actually connect to Mongo D B Now from here, I want a code are apt dot Js file first.

So I'm just gonna click here, Control be get rid of that explorer and we could get rid of the terminal for now.

And what I want to do is start importing our modules that we just installed.

So I'm just gonna say, Concert Express.

It's equal to require express and let's give a space here and next.

What we're gonna do is bring in our body parts and module afterwards.

Let's create an instance of our express application.

So I'm just gonna say constant app is equal to express and let's call it now we're gonna tell our express application to use the body parts in module, and we're gonna be parsing Jason Data sent from the clients I to the service side using the body ports module.

Next, let's require our path module.

After that, let's bring in our database stuff.

So I'm just gonna say cons the D is equal to require baby.

And last but not least, we're gonna have one more variable here, and we're gonna call it collection, and we're gonna call it a collection to do so we're gonna have a database, and that database is gonna have a collection within it called to do, and that's gonna hold our two DUIs.

So now let's head over to our DVD dot Js file.

And now we're just gonna import arm mongo D B drivers.

I'm just gonna say cons mongo client is gonna be equal to require mongo D.

B.

And we're gonna require the mongo client from it.

We're also gonna require the object i d from the mongo D B module.

So I'm just gonna say cons object I d gonna be equal to require mongo d b dot object.

I d.

Next, let's give our database of names, so I'm just gonna say cons bebe name is gonna be equal to, and I'm just gonna call it cried mongo D B.

After that, we're gonna code are you are well, And this is basically the default location of where your mongo D B would be located on your local machine.

So I'm just gonna tight mongo d b local host 27 0 17 And the last configuration that we're gonna give our database is the options that we could pass in.

So I'm just gonna say mongo options and we're gonna be using the new U R L Par, sir.

Let's set that the truth.

So now let's actually give this a state.

So we're gonna be using this debate.

I Js file to actually create the connection between know Js and Armando D B Server.

So now I'm just gonna say Kant state and the default state of this is gonna be able to know.

So this is going to signify that Hey, we don't have a database yet.

Next, let's actually write our connect method, so I'm just gonna say concert connect is gonna be equal and we're gonna pass on a call back, and we're just going to say the following if state that d B So if there is a database connection, we're just gonna call to call back if there isn't a database connection, we're gonna use the mongo client to connect to the database.

And here we're gonna check if there's any errors.

If there's an error, we're gonna pass it back to our callback.

If there's nowhere, we're gonna set the state, and then we're gonna call our callback.

All right, So this is our connect method.

Let's not forget to add the semi colon here, and we got two more functions, the code.

So let's get to it.

So the next function that we're gonna code is to get the primary key.

So I'm just going to say cons get primary key and they're gonna pass in the i d.

Of the document, and all we're gonna do is return object.

I d.

And we're gonna pass in the i d.

That they passed in tow us.

And this is gonna return an object i d.

Object, which will be used to actually Cleary the database by the Primary T Next.

Let's actually create a method.

It's actually get the database.

So we're just gonna say, get TB, and I'm just gonna say Return state that baby.

So now let's actually expose all these functions that we create it.

So I'm just gonna say module that exports and I'm just gonna say, get the b connect and get primary key method.

All right, so now I'm just gonna say this and now let's head back to our app dot Js file.

So now that we have all this set up, let's actually connect to our database.

So now I'm just going to say D B Dock Connect.

And this is the function that we just created an R D B file.

We're gonna pass in a callback, and we're gonna say, if era, we're gonna consul about log unable to connect to database, and we're gonna terminate the application and we should probably wrap this within curly braces.

And if we were able to connect to the database successfully were going to say else after I listen and you could use whatever port that you want, I'm just gonna use Port 3000 and we're gonna pass in a callback, and we're just going to say, connected to a database.

AP listening on Court 3000.

So now, if I was to save this, that's put a semicolon here and then save it.

Let's go open up a terminal, seal us again in a typed note app, and you could see that we got no error.

So that means we bypassed this air statement and we executed our l statement.

So we're connected to database, and our APP is listening on port 3000.

Welcome to part two of building our crowd application from scratch.

So in this tutorial, we're gonna be covering our service side re portion of our cried application.

So we're gonna code to get routes.

The first get route is actually going to sun a static HTML files to the user, and the second get route is actually going to query the database for order to dues if an art to do collection and it's gonna return that to the user.

So let's actually get started.

Encoding this.

So I'm just gonna go down here, I'm gonna say after Yeah, and we're gonna give it a path of four slash give it this function, and then when we get down here, all we're gonna do is send a static HTML file, so I'm just gonna say rez dots and file.

And here's where our PATH module comes in handy dot Join Now, this file doesn't exactly exist yet, but we're gonna be creating this within a future tutorial.

So now let's actually head on over to our second at dot Get, and I'm just gonna call this app.

That and I'm gonna call this.

Get two DUIs, then here, we're gonna pass in our function, our requests object our response object, And within here, I'm going to say D b get TB.

Now, remember, get TB is gonna return to us our database connection.

So now I'm just gonna say dot collection and we're gonna pass in the name of our collection.

I'm gonna call them at that find, and we want all the documents within our to do collection.

But this is going to return to us a cursor and we don't want the cursor.

We want natural documents.

So I'm going to call and met.

They're called dot too, are a and then within here and this is gonna take a callback function.

I'm just gonna say error documents, and that's actually move this over a little bit.

And then within here.

We're just going to say if there's an error, we're just gonna consul this out to the user.

But traditionally would want to send an error message back to the user.

But if there is no error, what we're gonna do is first we're gonna print this out onto the council just to make sure that we're getting our documents back from the server.

And we're going to say rez dot Jason the documents.

All right, So now let's actually test this out.

So I'm just gonna hit control has to save.

Let's bring up the terminal or a new terminal.

I'm gonna type C E o s node app.

Let's bring up Google Chrome type local hosts Port 3000 and we called it Get two DUIs and to see that we get back an empty array, and that's because we don't have anything within our database.

So let's head back to visuals to be a code gonna hit control.

C Cancel out of that.

Let's start out the Mongo show.

And now I'm just gonna go back up here, Control B.

Let's find out what we named our database.

So we named it crowd mongo D.

B so I'm just gonna say use cried mongo d b I'm gonna say d b dot And let's go back to app that j s and see what we named our collection to do I'm just gonna say to do dot insert and we're gonna insert a couple of to do so I'm just gonna say to do and I'm going to say clean room So let's insert that and let's insert clean I don't know Garage.

So let's answer that.

All right, so let's cancel out of that note app.

Let's wait for our express application to boot up and a workroom.

It refresh, and you can see that our two DUIs are being sent to the client side and that it is in Jason.

Welcome to part three of building our crowd application from scratch.

So in this tutorial, we're going to be covering our server side up they portion of our crowd application.

So to get started, let's actually covert our route.

So I'm just going to say at the output and I'm gonna pass in or slash colon, I d.

Now, this is gonna be our route program, and I d is gonna be the primary key of the document that we wish toh up the next we're gonna pass in our function.

So I'm just gonna say request and response now from here, let's actually get the i d.

So I'm just gonna say const to do i d is equal to requests dot Haram's, But I d next one I want to do is actually get the user's input.

And that's gonna be found in the request.

That body the user's gonna be sending us, Jason.

So I'm just gonna say concerts user input is equal to request that body.

Now from here, let's actually connect to our database.

So I'm just gonna say d v dot Get Devi.

Then we're gonna call our collection, which is our to do collection.

Now, from here, I'm gonna call a function called find one and up there, And the first argument is gonna be too Crary object.

So what do we want to find by?

So we're gonna find by the i d.

So I'm just gonna pass a night the and I'm just going to pass in to do next.

What we want to do is pass in the document that we want to update with.

So I'm just gonna say Set and I'm going to say to do colon user input Got to do next.