The ULTIMATE MERN Stack Complete Guide (MongoDB, Express, React, Node.js)

in this video you're going to learn what the M Stack is we're going to set up a new project build out the back end the front end and connect to mongodb if you want to follow along there is a written version of this tutorial and the full code is available on GitHub there's a link in the video description so what is the M Stack well stack refers to a combination of Technologies now the M Stack consists of mongodb Express react and node.js and there are other similar variants like the mean stack which swap out react for angular in the mer stack we use mongodb to create the database layer node.js and express to make up the middle or application layer and react to implement the presentation layer in this M Stack tutorial we're going to utilize these four Technologies to develop a basic application that's able to record the information of employees and then display it using a react front end so to get started we're going to use node.js version 20 plus and a code editor now for this tutorial I'll be using visual studio code and these are both free downloads as well now M lets us create a fullstack solution and for this project we're going to create both a backend and a front end the front end we're going to implement with react and the backend we're going to implement with mongodb node.js and express so we're going to call the front-end client and the backend server so again I'm using vs code and I'm in my terminal uh there are many different ways to go about this you could use the UI if you want uh but we're going to start by creating an empty directory we're going to call it m so I'm going to make dur M and then CD into M next we'll create a folder for the back end and we'll name that server so make dur server and then CD into server now let's initialize this project by typing npm init Dy and that will give us a package Json so if we look over at our folders we'll see Server and then package Json now in order to use ecmascript modules the officially supported standard format to package JavaScript code for reuse we're going to add a line to this package Json so we're going to add type is going to equal module so this will allow us to use es modules instead of commonjs and we can close that go back into the terminal and then let's install the rest of our dependencies so we're going to npm install mongodb and Express and cores so mongodb of course is going to install the node.js mongodb database driver that was going to allow our application to connect to our database and work with our data and then Express is a web framework for node.js and it's just going to make our lives easier here and then cores is a package for cross origin uh resource sharing all right now that we have our dependencies installed let's create another file here we'll say touchs server.js in this file we'll import Express cores and Records which we'll create in just a minute we're also going to set our Port it's going to come from our environment variables or we'll set it to 50/50 if that's missing we'll get our Express server going with cores and then use those records and then finally listen on our port and then just console log that the server is running and it's listening on that specific Port now it's time to connect our server to our database and we're going to use M to be Atlas as our database Atlas is our cloud-based database service now M to be Atlas provides a free tier cluster that never expires doesn't require a credit card and it lets you access a subset of atlas features and functionality now to get you started with Atlas if you don't already have your cluster set up we have a video for you to watch there so pause this video go back and watch that one and come back if you haven't already set up your cluster so this is my cluster I'm going to go to my database that I've already set up and I'm going to go to connect and then select drivers and we're going to use node.js of course and this is my connection string so I'll copy that now my connection string is going to be different from your connection string so now that you have your connection string we'll go back to our server directory and we're going to create a file called config Dov so let's create a new file here config Dov and we're going to create a new variable in here and assign it our connection string so I'm going to call this variable Atlas _ URI and then paste in my connection string now in here you'll notice that we have our username and our password so be sure to change this with your password and then after this we're going to create another variable we're going to call it port and we're going to set it to Port 50/50 and then save this file now to set up our database we're going to add another file we're going to actually add a folder and a file so we're going to add a folder called DB and then connection. JS and this this should actually be in the server directory so let's make sure that that is set up properly so it should be M server and then DB and then connection. JS now I've just pasted this code in here so let's review it we're going to import the client and server API version from mongodb we're going to get our Atlas URI from the environment variable that we just created and then we're going to create our client which is going to create a new client passing it that URI as well as some extra options below this we have a TR catch where we're going to connect and then we're going to await our client. DB which we're connecting to the admin database and we're going to send the command ping this is just so that we can confirm that we've successfully connected so then we'll console log that we are successfully con connected and then of course if there's an error we'll catch that finally we're going to get our employees database and then export that now don't worry if you don't already have an employees datab database set up this is going to create it automatically for us if it's not already there so be sure to save that file and then you can close it all right the database is done the server is done and now it's time for the API endpoints so let's start by creating a new folder and file for that so again under server let's be sure to do that and then let's create a new folder called routes and then a file called record.jpg again we're going to import Express here we're going to bring in our connection file that we just created to connect to our database we're also going to import this method from mongodb called object ID that's just going to help us to convert the IDS to a string from theore ID field then we're going to create our router which is an instance of the express router and then we're going to set up our various API endpoints so this first endpoint here is going to be a get route at slash then within this we'll have an async function that has our request and our response we're going to get our collection which is going to be records and then we're going to do a find all on that collection so find everything and return that as an array and so that will be our results so we're going to res. send and then set the status to 200 the next route will allow us to get a single record so instead of getting all records this one is just going to get a single record again this is a and it's going to be the Slash and then the ID so now anything after the slash is going to be a string which would represent the ID so here we'll get our collection again and then we're going to set our query is going to equal uh a new object ID which is going to come from our request. brs. and then we'll do a collection. find one and pass in that query now if we don't have any results then we'll say it was not found and a status of 404 uh otherwise we're going to send the result back with a status of 200 now the next route is going to allow us to create a new record so this is going to be a post route as opposed to a get route it's going to be to slash as well in here we have a try catch we're going to create a new document object and in this document we're going to have a name a position and a level we're going to get these values from our request body so requestbody name body position and level again we'll get our collection which is records and then we're going to insert one we're going to insert that new document that we created here and the result is going to be sent and with a status of 204 and if we have an error we'll send a status of 500 and just say that there was an error adding the record now the next uh API endpoint is going to be a patch which will allow us to update a record so it's going to be to slid so again this is an individual record so we're going to uh create our query here underscore ID is going to be new object ID which we're going to get from the request prams doid so it's going to pull that string from the string that we have after our slash in our URL we're going to create our query here which we're going to name updates so here we're going to use the dollar set operator to set the name position and level to the new values that we're getting from our request body of name position and level so again we'll get our collection and then we're going to uh use our collection update one send it our query along with the updates so it's going to find this one record uh that we identified here in our query and it's going to pass along those updates we're going to send the results and then a status of 200 if we have an error of again we'll have a status of 500 and say there was an error updating the record and then our last endpoint is going to be the delete route so this is going to be a delete of course and then it's going to be to a specific ID again we're going to query by that ID we'll get our collection and then we'll say delete one based on that query we'll send the results and if we have an error we'll send an error and finally we'll export the entire router so that it can be used by Express so again if we go back to our main server file this is where we're pulling in our records for our routes and then we're initializing it right here so notice here we have slash reccord this allows us to identify an initial path so anything at slash reccord and then after that will be these records so for instance to find a specific record by ID it would be something like slash reccord and then slash1 2 3 4 if that is the uh the record's ID if we want to get all records then it would just be/ reccord so let's open up our terminal and run the application and see what happens so here we'll run node and then- dv- file equals config EnV and then server now server is the name of the file that we created for our server server.js and then notice that we're also using the built-in environment variable functionality of the latest versions of node.js so let's run this and we'll see ping your development server you successfully connected to mongodb so that's good and it's listening on Port 5050 so now our back end is working and it's time to move over to building out the front end so for the front end we're going to use vit that's a modern way to create react applications so let's create a new terminal I'm going to CD into the M folder so here we're going to npm create V at latest we're going to name our uh frontend client and then we're going to use a template which is the react template super quick let's CD into client now and then npm install we get all of those uh dependencies installed and now there are some additional dependencies that we need here we'll npm install - D is uh for the dev dependencies we're going to install Tailwind CSS post CSS and auto prefixer and then we're going to npx Tailwind CSS in n-p that's going to initialize our Tailwind config so let's go over into our client directory now and we have a Tailwind doc config.js file and we're just going to set this up for V here in content we're going to add our index.html and then the rest of these files in the source directory for Tailwind to Monitor and then in the source and then index.css file we're going to delete all of the boiler plate here and then just paste in our Tailwind base components and utilities so Tailwind is a utility first CSS framework that allows us to add CSS styles by utilizing predefined class names it's just really easy to work with in my opinion now back in our terminal the last thing we're going to install is react router Dom so npm install as a Dev dependency react router Dom and react router adds client side page routing to react now let's go over to our source folder in under client and then our main. jsx file and we're going to update this so we're going to import react and create browser router and router Provider from react router Dom we have our main app component and we'll have a record and a record list component which we'll create in just a bit and then of course our CSS so we're going to first set up our router so we're going to have different pages we'll have a page that shows all of our records we'll have a page that allows us to add records a page that allows us to update records and so this this is where we're going to set this up under create browser router so the slash route or root route is going to display our app and it's also going to have children so the child of Slash is going to be our record list which shows all of our records after that we'll have our edit route which is going to have an ID in that again we'll have our main app route but the child of this one is going to be our record so it only shows a single record and then the create route is pretty much the same me create and then it shows that single record and once we move over into our app component you'll see uh how these are laid out so then we have our react Dom create root and then we render our react components in our root element uh and then we have our router provider which is then passing in our router so again this is going to display our app and then the optional children so again react router helps us to seamlessly transition uh while switching between components and basically it will only uh reload or refresh the component that needs to be changed instead of refreshing or reloading the entire page now though react router is not a necessity it is a must have uh when you're building a responsive application like this in react all right next let's create some components so in the source folder here we're going to create a new folder called components and then let's create a file called navb bar. jsx all right the only thing that we'll import is the nav link from react router Dom that's because this Navar is going to be linking to the other pages in our application so it's pretty simple we have uh a nav here and then our two nav links our first nav link is just going to be an image and that is going to be our logo and then the second link is going to be a button that says create employee all right let's create our next component under components we'll create a new file and we're going to name it record uh list. jsx okay so this component is going to list out all of our existing records so we're going to use uh use effect and use state from react and we'll also import link from react router Dom so first we're going to set up each individual record which will then uh display further down so we have our table set up we've got table rows and columns here that are going to display our record name position and level after that we'll have a couple of buttons uh one is a link that is going to allow us to edit this record and the other one is going to be a button that allows us to delete this record so let's go down and take a look at the uh the actual component here of record list so we're going to set up a use state of records and set records and then we will have a use effect here so the use effect is going to get our records from our backend so now we're actually connecting and using that backend that we created so again we're running this locally so we set this to localhost 5050 slrec and remember the root route is going to fetch all records so if there is no response okay we're going to then console error a message otherwise we're going to get our records and then set our records in our used State and since this is an async function in a use effect uh we set it up this way and then run it and then we set the dependency to records. length so if an additional record comes in this will run again the next method we have here will allow us to delete a record so again we're going to our Local Host 50/50 record and then we're passing in the ID now notice here that the method here is delete so then we'll filter that record out of our state and then set records to the new state that does not include this record that we just deleted and then finally we'll map these records out to a list here so record list we're going to map through our records and then use our record component that we created at the top of this file we'll pass in our record and then the delete record function here and of course set a key and then return the whole thing so this is going to return an H3 that says employee records and then within that we'll have our t table and um we'll set up our headers here name position level and action and then pass in the entire set of Records no matter however many there are it's going to map through them and then display each table row all right the next component that we're going to set up is record. jsx so let's create a new file here call it record. jsx and now this component is going to allow us to either create a new record or update an existing record so we have our use State use effect we're going to also pull in use prams and use navigate from react router Dom so we have our record component here we're going to set up our initial state which is going to be uh form and set form and we'll have our name position and level in here uh initially set to blank and then we need to identify whether we're creating a new record or updating an existing record so we're going to create the state that is is new and set is new and the default is true so by default this is going to be a brand new record we're going to get our pams from use pams and navigate from use navigate we'll set up our use effect here and this is going to fetch data so first of all we're going to get our ID from prams ID set that to a string and if it's not there we'll set it to undefined so again if uh we are updating an existing record then the ID will be there if we're creating a new record record there won't be an ID so if there is not an ID let's just return and not do anything in this use effect if there is an ID then we're going to set is new to false because we're updating something and then we're going to get the data for this existing record so we're going to fetch from Local Host record and then get that ID and if uh the response okay is is not okay then we're going to send an error message if it is we'll get that uh record and if for some reason we didn't find the record uh we'll do a warrn and just say that that record was not found otherwise we're going to set form and pass in that record so we then fill in the form with that record's details so we're going to run that fetch data function that we just looked at up up here and we're going to also set our dependencies of pam. ID and navigate we have another method here that we'll set up to update the form so every time the form updates we're going going to set form uh and then just pass in the previous value and the new value so every time this runs our form will be updated and then we have our onsubmit so when our form is submitted let's prevent the default and then create a person object here from the form uh information we'll create a response object and then we're going to do one of two things if this is a new record uh if is new is true then we're going to post our our new record there's a post method here we're going to post our new record to our back end if this is not a new record that means it's an update then we're going to patch our existing record and pass in that record ID in the URL here and in each of these we have our body which is then passing in the data from our form all right so then of course if uh there's an error we'll throw an error there uh we have another catch here that throws an error if something happens and then finally when we're done submitting uh we want to reset our form set everything back back to blank and then navigate back to our root directory all right finally we're just going to return the entire form here so we have an H3 that says create update employee record then we have our form we have our onsubmit function that we just looked at here we have our employee info and then here is a label here of name for the input that is just below here so this is the name input every time this input changes we call the update form which is going to then you know update the value of this input same thing for the next input we have our label for position and our actual position input which has the same on change and lastly we have uh our input for our radio Group which is going to allow us to choose from either uh the position of intern Junior or senior and then we have our submit button at the bottom all right so now let's pull all of this together let's go over to the app.jsx file and this is the default uh boilerplate uh template that we installed let's highlight all of that and change it out to this a little bit simpler uh so we have our Outlet which we're pulling in from react router Dom and then we're pulling in our navbar component that we created earlier we have our app component which is going to turn our Navar so our Navar is going to be on every single page and then the outlet are the components that we set as children in our main. jsx file remember we go over to main. jsx we have these children here so app is rendered really on every path and that is going to allow us to render that header here at the top the outlet is pulled from these child elements so we have our record list and then our record element on these other paths so this is how all of that is going to be displayed to our front end all right let's see it in action now I already have my server running so I have this terminal here where the server is already listening on Port 5050 and it's connected to mongodb so now in my client terminal I'm going to run npm run Dev to get the uh client up and running and let's go to Local Host 5173 all right so I already have some records in here so that's why it is uh displaying these records here we can edit and delete these records or let's go ahead and create a new employee here so we have our form with our employee info so we're going to say we'll say John Doe we'll say developer and in turn and then save the employee and there we go now we could edit the employee and we'll say uh John Doe again and we can delete the employee and that's it if I refresh the page you'll see that it's still pulling that same information congratulations on building your first M application now for more ideas and advanced concepts go visit our developer Center there's a link in the video description and if you have any questions go to our community forums there's a link in the video description now if this video was helpful give it a like And subscribe for more mongodb content

Channel: MongoDB

Views: 4,003

Keywords: MongoDB Atlas, JavaScript, Node.js, Awareness, Developer, Introductory, DA, Express.js, VI

Id: 4nKWREmCvsE

Length: 25min 22sec (1522 seconds)

Published: Fri Mar 08 2024