We're going to be learning the murders stack by creating an exercise tracker app.

My name is Bo Kearns, and I am a teacher and developer with freak Oh, camp dot or GE.

We will be first, starting with an introduction to the modern Stack.

Then we'll be going over some database concepts.

Then we will talk about how to get started with Mongo D B Atlas, which is the database will be using for the armored stack app.

Then we'll be getting into our code and I will be actually creating the back end of the exercise tracker app and showing you how I do it.

After that, we will have an introduction to react and then start creating the front end of the exercise tracker app with react and finally will connect the front end to the back end.

So what is the murder stack?

Well, it consists of the following technologies.

We have manga d be expressed, react and no Js.

That's what Murn stands for.

So no Js is the JavaScript runtime environment that allows you to exercise JavaScript code outside of a browser such as On a Server and Express is a Web application framework for Know Js.

It allows us to easily create a Web server, and then Mongo D.

B is the document based open source database.

So in our app will be storing our data in Mongo D.

B.

And then finally, the front end is react, which is a job script front and library for building user interfaces and then, finally, at the bottom.

There we will be using Mongoose, which is a simple, schema based solution to model application data.

Basically, it makes it easier to use Mongo D B in Know Js.

So let's review some database concepts.

We're gonna just review some terminology.

So what?

A lot of people are used to our tabular or relational databases, so we think of things like databases, tables, rose and stuff like that.

So Mongo D.

B has similar concepts that use different terms, so I just want it can make everyone aware of those terms.

So instead of the table, we have collections instead of Rose, we have documents.

We can do joint operations with the look up operator instead of foreign keys, we utilize references.

And just as a point of clarification, a lot of people talk about mongo D B as a non relation a LL database.

But really all data is relational.

So sometimes I use the term tabular to describe the legacy databases that use tables.

Mongo D B is very well student for handling data with a wide variety of relationships.

We're not gonna cover all of these concepts in the APP today, but I just wanted to you to be aware of some of the differences.

So let's look at the document model.

This is an example of what a Mongo D B document looks like.

It looks a lot like Jason.

We can see a variety of relationships and address a title and ah mahn Cody be stores data on disk in the beasts on format, which stands for buying Mary Jason.

This provides a wide variety of support for data types like strings and managers.

The document model also allows for nesting documents inside each other.

These sub documents are one of the great things about the doctrine model, so it allows us to apply the concept of data that access together is stored together in an application.

We also have the ability to store information inside raise, which is another powerful feature of the document model.

And as I mentioned, these documents are Jason structured objects, which is how most developers think of things.

So a person is an object that has various attributes, like a job title address and stuff like that.

So this allows modern development practices to use the document model in a very intuitive way without having to break the data apart to put the tables and normalize things.

So we will be using Mongo D B Atlas, which is a really fast and easy way to get started with Mongo D.

B.

So some people would just run up Mongo D be locally on their local computer for testing.

But Mongo D.

B Atlas actually makes things a lot easier, even if you're just doing a local project.

So the first step for getting started with Mondo Di B.

Atlas is to sign in.

So if you go to a Web page, you'll just get this getting started screen.

And once you've logged into manga TV, endless, we need to set up a place to store the data we need a cluster.

So this is the screen that you'll see when you first get logged in.

And to start building the cluster, you're gonna click the new project button.

That's the button right here.

And then after you click that you'll be able to build a cluster.

The big re button in the middle here allows us to create an configure a cluster.

So once you click that, we'll bring you to this screen where you can create a new cluster.

So here you can see that in Mondo di B Atlas, there's a bunch of providers will be using Google Cloud Platform and then you can choose the region.

We're gonna be using the free tier today, which is gonna be great for our app.

And just when you're getting started on learning how to use things, I recommend starting with the free tier.

And then once you get things going, you can always switch to another tier later.

So you just gotta click a region associated with the free tier and then s o The free tier is just the M o sandbox.

Give the server side a super size of 512 megabytes, which is typically plenty to get started with, and then one thing to notice is that the bottom is always gonna show you how much things cost.

So in this case, it's free.

Then you can click, create cluster, and then the provisioning will start so you can see it says it's going to take 7 to 10 minutes to provision in, and it's often quicker than that.

But you know, it's just gonna take some time to step things up.

So once it's created, we're ready to get a couple of security things configured and finally get a connection string.

So once is configurable, you'll be on this screen where you conception security.

And just so you know, I'm doing this all in a slide show right now, but in a little bit will actually be on the actual website so you can see where all this is on the actual website.

But from a security standpoint, we need to set up I P White List addresses and a database user.

So for this project, since it's just going to be hosted on locally, we can add your current I P address for the White List I P address and Then you can create any user name and password for the Mongo D B user, so now we can get our connection information.

There are a few different ways that we provide information to connect to Mongo D B Atlas through the Mongol D B shell, which is a command line interface with the Application Connection String, which is what we'll be using today and through Mongo D B Compass, which is a gooey tool for interacting with data stored in Mongo D.

B.

So then, after you click, the connector application will be taken to the screen on the right here, and we're provided information on getting a connection string and then some connection examples for different languages.

But we'll just need the connection string, and normally you could copy here.

But this is just a slide show, so I can't do that.

But we will be going to this exact screen and copying the connection string to use in our app.

Okay, we're just about to write some code, but let's just quickly review the collections in our database.

Our applications gonna contain exercise exercises and users, and every exercise has one user.

Once you see how simple this is you'll realize that we could have probably just had one collection.

But just for the sake of example, to see how it would work, we're gonna have exercises and users collection.

So now we will really will get into the code.

So I have visual studio code up here, and the first thing we're gonna do is verify note is installed, so I'll just do node dash V and I do have it installed.

If you don't, you're gonna have to make sure you install it.

But I'll leave that up to you to figure out how to do that.

So next will create the initial react project by using create react app.

And if we use the MP ex command, then we can run, create react app without installing at first.

So other MPX create react.

Yeah, and then I'm just going to be calling it Murder Exercise tracker.

And then this is going to create a a directory containing the default react project template with all the dependencies installed.

So well, this is installing.

I'm actually gonna go back over here to just talk a little bit about a mongo D B object.

I.

D.

S So this object I d is automatically generated by the Mongol D B driver and is guaranteed to be unique across the collection so you can see different parts of the object.

I d represent different things, and we can define her own idea if we'd like.

But it must be unique for each document in a collection for this application.

I'm just gonna let Mongo d b handle it.

So let's go back over to visual studio code and you can see that our murder exercise tracker is all set up our react project.

So right in the terminal, we just make this a little bigger here, right in the terminal.

I'm going to do a CD Murn and go into the directory there.

And normally, if I want to start a Web server, the React Web, the react development server, we I would type and MPM start here.

But first we're going to create the back end, and then we're gonna come back to create the front end.

So we'll start by cream the back in and connecting it to Mom, Judy Bee Atlas and Ghoul Cloud.

And then we'll come back and write the react later.

So inside this folder, we're going to create new folder called Back End.

So a lot of people would create the back end in a separate folder from our front and folder.

But just to simplify things since this, since this is a simple project will just create the backend folder right in our in our, uh, react front and folder.

So let's go into the back and folder.

Okay, Now we'll create a peck is dot Jason file inside the folder by doing in P m and knit.

And then why?

To answer yes to all the questions asks.

Okay, now we can install a few dependencies, so MP, install express cores, Mongoose and dot E N V.

Okay, So what are these packages?

Well, we already discussed Express, which is a light and a lightweight and fast Web framework for no GS cores stands for cross origin resource sharing.

And this allows Ajax requests to skip the same origin policy and access resource is from remote hosts.

The course package provides an express middleware that can enable cores with different options, which is this is going to make it so we can easily access some something outside of our server from our server.

So also, we already discussed Mongoose, which makes interacting with mongo D B through node.js simpler, and the last one is no dot m v, which lows loads environment variables from a dotty envy file into process dot m b.

This makes development simpler.

So instead of studying environment variables on our development machine, they could be stored in a file.

We'll create a dot N V file later, so we'll install one final package globally, So I'll do MPM install G for globally and node mon.

So known mon makes development easier.

It's a tool that helps develop know Js based applications by automatically restarting the note application when files when file changes in the directory are detective.

So let's see.

Looks like we have some sort of air.

I wonder what a Oh I should do a pseudo whenever you're going to install something globally will do Studio install G No would mom.

So whenever we update our server file, it will automatically restart the server.

So that's what Node Mountain mon does.

So now it's time to create our server.

So, inside the back end folder, I'm going to create a new file called server dot Js.

So I'm gonna start.

I'm actually just gonna paste in some code here, and then I'll talk about what the code is.

So first, we're going to require all the things we're gonna need.

Actually, we're not going to need a body part.

Sir.

I originally thought would any body part, sir, but it's actually it's not needed in the new version of Express and this since where it's included an express.

So I can actually change that to express their.

So we're gonna We're just gonna need express and course and then this configures so we can have our environment variables in the dot M.

V file.

This is how we're going to create our express server and then you can see the port that the server will be on.

Then we have our middleware.

So this is the core's middleware, and this is going to allow us to parse Jason because our server is going to be a sending and receiving Jason and then you can see this line Here is what starts the server.

It starts listening on a certain port.

So once we have that, I can save this, and I can start the server.

So, Node Mon server right in the terminal here.

So now we have the server running.

You can see it's a server is running on port 5000.

So now we've gotten to the point where we can connect our database.

We can connect to our database on mongo d be Alice.

So at the top of this server file after this, um, require cores line.

I'm going to add the following line.

Const Mongoose equals require mongoose.

So Mon Goose is what's going to help us to connect to Armando de be database.

So now, um, the next section I'm actually just going to paste in here.

So after we set up our middleware, we're going to do this.

So we have our your eye, which is our our database.

You are I This is something we have to get from the Mongol D B Atlas dashboard, which will do in a minute here.

So here mongo stopped connect, and we pass in the u R I.

That's where our database is stored.

And that's how we start our connection.

So you can see we have some flags here.

Ah, the 1st 1 is added.

This use new user.

Partially true.

That's added because Mongo, the Mongol to be no Js driver, rewrote the tool it uses to parse Mongo D B connection strings.