MERN Stack Project | Fullstack Tutorial

today we begin our journey with the mern stack arguably the most popular stack for building a full stack web application [Music] hello and welcome i'm dave today we begin building a complete mirn stack application i'll provide links to example source code and all resources in the description below what is the mern stack mern is an acronym that uses the first letter of four complementary technologies m is for mongodb e is for express js r is for react and n is for nodejs so if the mern stack is full stack that leads us to ask what is full stack and why is the mern stack considered to be full stack a full stack application means it requires code that runs on the server and code that runs in the browser the code that runs on the server is referred to as the back end and the code that runs in the browser is referred to as the front end the front end and the back end are typically two completely separate code repositories in a large enterprise full stack project there may be a team of developers that work on the front end and another separate team of developers that work on the back end as a full stack developer you should be able to work on both the front end and the back end if needed the back end for the mern stack is a rest api a rest api also known as a restful api is an interface that two computer systems use to exchange information securely over the internet the back end will receive requests from the front end those requests can be classified as crud operations crud is another four letter acronym like mern the letters of crud stand for create read update and delete these terms also indicate which type of http request methods will be used in the application for example post relates to create git relates to read patch and put requests relate to update and delete has an exact match hopefully all of that information was not only an intro but also somewhat of a review because this is not a beginner's tutorial series i already have many beginners courses available and i recommend those courses as prerequisites to this series if you have not already completed them specifically i suggest my no js course before the first lessons of this mirn series where we're going to build the back end rest api i also suggest completing my react course my redux course and my react login series playlist before the lessons in this course where we build the front and react app i'll put links to all of these suggested prerequisites in the description along with any links to resources and source code for this mirn series we're going to build a tech notes app for a small computer repair shop specifically dan d's repair shop so our stakeholder is dan d or full name dan davidson but he goes by dan d and this isn't the type of project where i'm going to give you a tour of the full project before we begin we're more taking a real world approach here for this project and to do that we start by gathering some user stories from our stakeholder dan d i've got vs code open and i've already done a preliminary interview with dan d our stakeholder for the tech notes project and i've come up with 20 user stories that dan wants now if you've never done an interview for user stories you need to think that the person you're interviewing with will probably describe what they want as a user but they're not that technical so it can be difficult to get those technical requirements out of that interview and of course that does take practice so i definitely wanted to start the project with this just so you can see the highlights that i've organized for this and we can derive our technical requirements from the descriptions that i have received from dan d so the main goal for this application the first thing dan told me is he wants to replace his current sticky note system he has a small computer repair shop and right now they use yellow sticky notes to write the problem and they slap it on the side of the computer or whatever other technology an iphone whatever somebody brings in and it goes on their shelf and that's their whole system and he knows they need to get a better system than that so that's what this tech notes program's main goal is is to have a local database something they can refer to and everybody knows what everybody else is working on and dan can manage the whole thing the second thing he wants is just a public-facing web page with basic contact info again he's from a small town small computer shop he doesn't need anything extra for his website he just basically wants it to be a business card and we're okay with that because we want to focus on building this back-end application for dan okay he wants to add an employee login to the notes app because he doesn't want just anybody to be able to access it he just wants his employees to access it and then he wants to provide a welcome page after the login thinks that would just be nice to of course show the username maybe the current day time and of course what they have to work on or what's available to them maybe their current uh level of the administration whether they're an employee a manager dan has at least one manager and then he's the admin of course he wants easy navigation he wants to display the current user and assigned role at any time throughout the application and then he wants to provide a log out option of course he wants to require users to log out or log in at least once per week so that is a big requirement that we need to think about when it comes to authorization again it's not a public facing site it's not a financial site it doesn't need ultimate security but he wants some security but he doesn't want his employees to have to log in all the time either so we need to think about that with the authorization he wants to provide a way to remove employee access as soon as possible possibly he fires someone and needs to remove that access so they do not disrupt the notes application notes are assigned to specific employees so everybody has their own responsibility notes have a ticket number title note body created and updated dates notes are either open or completed notes can be employees managers or admins notes can be deleted by managers and admins only so that's a consideration when we're applying the roles and permissions of the application anyone can create a note because a customer may come in to check in and dan doesn't know who may be at the counter but they all need to be able to check in and create a note for a customer employees can only view and edit their assigned notes however managers and admins can view edit and delete all notes so that's another thing with the roles and permissions only managers and admins can access the user settings and only managers and admins can create new users and then desktop mode is the most important because that's where they'll be using it but it should also be available in mobile now notice this is a markdown file that i created a checklist in if you're not that familiar with markdown files they end with a dot md and that's also what the readme files for github are usually created with now in visual studio code i can preview this file by pressing ctrl shift and the letter v and we can see this markdown file as it would appear possibly on github or somewhere else and the nice thing is we can also use it as a check well it's not checking right now let me go back and if we put an x in here it would check but then also we can preview this a different way with control k and then just press the letter v and now let's look at this and we have this on the right and the edit on the left and now if i check this yes it does check and we see the x over here so you can work with these markdown files within visual studio code and they're sometimes very useful for checklists so i just wanted to highlight that fact as well but those are our user stories and we'll create our technical requirements from these descriptions go ahead and create an empty folder for your back-end code for this mern stack project for tech notes and then if you do not already have it i sure hope you do but if you don't install node.js from nodejs.org and you can download that right on the home page and they have currently as of the making of this video 16.16 lts which stands for latest is recommended for most users of course get whatever the most current is that should give you npm and node i already said i hope you do because again this is not for beginners you might get through today's lesson but i don't feel like you will be comfortable and get that far if you're an absolute beginner go back to that node.js course if you are now after you've installed node and npm or maybe you already have them you can control backtick inside of visual studio code and it should open up a terminal window you can check your versions as well by typing node dash v it says i have 1616 i can type npm-v as well because that also installs and we need that and it's currently 8.15.1 so today we're going to build the back end or at least start building the back end rest api for this mern tech notes project and that will use node express and so three of the four technologies in the stack so what can we take away from these user stories already just the basic general thing that we would need for our server is we need to be able to create notes and as we mentioned in here view which would be read as related to crud edit and that would be update delete and then there's also the ability to create notes as well so we need to perform all crud operations for notes and also for users as we read through that so we know our basic rest api is going to need to complete the crud operations for both notes and for users and it's eventually going to need to support authentication although we'll do that last we want to get the application working first and then apply the authentication as the last step so we're now ready to get our server up and running in node.js and to do that i'm going to once again open up the terminal window with control and backtick then i'm going to type npm init and dash y which will help it avoid all of the questions it usually wants to ask and we can see some of that being completed here and after we did that we get a package json file now this is where our dependencies will be listed and i need to install two dependencies today so i just opened up the terminal window again i had it full screen but inside of the terminal window to install these dependencies i'm going to use npm and then type i for install and then i want to install express which is one of our mirn stack technologies and then i'll just press enter and i will let that install and we should see it listed here as a dependency inside of our package json after that there's a dev dependency which is different from a normal dependency because we'll only use it during development so i'll type npm i for install again and then i want nodemon mon at the end dash capital d and that makes this a development dependency only nodemon will let us run our code and as soon as we save the changes it will continue to run our server with those updated changes so it's very useful okay after we've applied both of those we should be able to close out the terminal once again i'm going to scroll to the top of the package json and you can see it probably named your project whatever you named your folder mine's in lesson one it's version 1.0.0 that's fine let's go ahead and put a description in here and say technotes mern project after that we're going to use a server.js file this is really just kind of preference index.js is what it defaults to and then for scripts i'm going to go ahead and remove this test script and instead i'm going to put in a start script and there i'll have node space server a comma after that because this is an object i'm going to type dev and then i'm going to have nodemon space server so we'll use nodemon during development and that's the script that will go ahead and let us start nodemon one other thing i like to do right at the beginning so i don't forget is create a get ignore file we haven't initialized git for our repository yet but we could at any point and this is dot get ignore and inside of the git ignore we list the node modules because we do not want to send those to github or wherever we might keep our code repository that is this huge folder here that installed when we added some dependencies and there's no reason to send that up to the code repository so we create this git ignore file so it's ignored and not sent along with the other code okay now that we've completed those things let's create our server.js file at the top of our server file we'll define express and we'll set this equal to require and we'll just require express right inside of there underneath that we need to define the app so we'll say const app set that equal to express and we'll call express and then i'm going to define a constant called port and this will help set what port we are running our server on in development but also when we deploy it somewhere so here we'll get a dot env port if the place we would deploy it would have a port number saved in the environment variables then it would grab that otherwise we're going to run it here locally at port 3500 okay that's the initial imports now let's just tell our app to start listening so we'll say app dot listen and then we'll pass in the port and then we have a function and in this function we'll say console.log and we'll go ahead and make a template literal here we'll say server running on port and inside of this we can pass in our value for port let's go ahead and save our server file let's press control back tick to open up the terminal window again and now we can type np let me get lowercase npm run dev and after i press enter notice our server has started running this is the console for node.js and it says server running on port 3500 it's not really doing anything if we sent a request there we wouldn't have any luck but the server is up and running with just those few lines of code let's not stop there though let's go ahead and make our servers serve a few bits of information to us and the first thing we need to do for that is import path from the node.js system so there will say require path and after we have path now we can go ahead and use it here in the body of our server file and we're going to say app dot use and we're going to listen for the root route just the slash which would normally be the root or the index of a web page and here we'll say express dot static and then we'll use path dot join which is a method of path and then we have two underscores and der name which is a global variable that node.js understands and it says look inside of the folder that we're in after that we'll put a comma and then say look inside of the slash public folder we're telling express where to find static files like a css file or other resources like an image that we would use on the server now if we save this it won't be able to find that if something was looking for it because we haven't created it but notice nodemon went ahead and restarted and we're still running on port 3500. so now let's go ahead and come over here to the file tree and create that public folder and inside the public folder i'm going to create a css folder now normally with our rest api we're just going to be receiving requests and sending back json data that would be requested and we'll be receiving json data however a rest api can still have a splash page it could still also return information about requests that cannot be fulfilled and so we can at least set that much up as we start now inside the css folder you might guess we'll go ahead and create a style.css file not being a css tutorial i'm just going to paste in some basic styles here i'll close the terminal quickly so you can see everything on one screen we're importing in a google font we've got a basic reset and just some styles on the html and body nothing big but just a few styles there so we could have something on the splash page for the rest api or possibly a 404 page when a resource is not found let's go back to the server.js now and let's put in another line of code that says app dot use and we'll once again look at that root route and now we'll say require and we're going to look for a routes folder and then a root file and now we crashed the app and you can see nodemon said that because we do not have a routes folder and we required it in the file so let's go ahead and create that routes folder and then inside of routes we're going to need to create a file named root.js inside of root we need to require express again so we'll say const express set this equal to require express now after that we need to define a router so we'll say const router and we'll set this equal to express dot router with a capital r to start the word router and then we need the path once again so we'll say const path and will require path from node.js and then after we have required those three things we're ready to say router dot get so this would be a get request that relates directly back to our http methods and the nice thing about express in these routes is they recognize regex so we can use a reg x here and the first thing i'm going to type is the carrot and that says at the beginning of the string only and then we'll put a slash and then the dollar sign which says at the end of the string only so that means this will only match if the requested route is only a slash and that would be for the root but then i'm going to put in a pipe which is an or for regex then i'll have slash index because maybe they would request more than just the slash as they put that in and after that i'm going to have oh i put in a quote that's the reason we're seeing red right now i want to remove that quote because all of this is going to be inside this string so the quote comes at the end but then after the index here i'm going to make the html optional so they could request just the slash or maybe just the slash index without the dot html or the user could request the full index.html which would also work i got an extra parenthesis in there let's put the comma there then we'll have a request and a response for our function and then inside the function we will send the file back so it'll be response dot send file then we'll say path dot join and we'll use that dur name directory name uh variable that nodejs recognizes and now we need to tell it where to find the file and the file's going to be up out of the routes folder so that's what the two dots indicate and then we're going to tell it to look into a views folder and then we're going to have it look for the index dot html file and that's quite a bit there but that should wrap it up and i need that parentheses there at the end so there i've got the syntax correct and we've got our router.get and it will get the index.html file if it matches any of those three we just now need to create the views folder and the index.html file but before we leave this file we need to say module.exports and set that equal to router and now this file is complete also notice our server is once again running nodemon restarted it as soon as the errors were fixed and it's not crashing even though we're telling them we have a file that we don't because nobody's requesting it right now so we can go ahead and do that this is not a require the require is actually what crashed before when the required thing was not available but now this does not of course crash the application okay now we'll go over here to our file tree once again create a new folder we'll call this views and then inside of the views folder we'll create a new file and call it index.html i'm going to type an exclamation mark which is an emmet abbreviation in vs code then i can press tab and we instantly get the foundation of an html page here i'm going to replace the title where it says document with tech notes api and then inside of the body i'm just going to use an h1 element and type tech notes and then we need to bring in the css so that is a link rel is a style sheet and then the href is going to be set to css slash style dot css and then we close out that link tag and actually i think i need the slash close there we go and after we save that now it can find this css because that is a static public file that we set up earlier with our route back here in the server so we didn't have to put in the full file path for that it's just one of those things that's available inside of this public route our server is still running let's drag vs code to the left i'll go to my new tab we want to go to localhost colon 3500 and press enter and there we get our tech notes homepage at the root however we could request something that doesn't exist and we might not get the best results if i put in slash dave we just get the basic express response cannot get dave so let's fix that by going ahead and taking care of basically 404 errors and those are for resources that are not found let's start by creating a 404 page inside of the views since we're already there so another new file i'll type 404 dot html again with the emit abbreviation to get the foundation here and we'll just say 404 error or we could say 404 not found i think that's a little bit better than error but then inside of an h1 we'll just say sorry and then we can put a paragraph as well and inside the paragraph we'll say the page or let's say the resource you have requested does not exist and of course we once again need to bring in the link and that would be rel equals stylesheet and href equals css style dot css and close that out and save let's go back to the server and let's handle anything that's not found we want to put this after all the other routes and of course i'll put it before the app listen for the server but here we'll just say app.all instead of app.use and now we'll listen for this asterisk which essentially means all everything that reaches it to app.all will be put through this instead of being routed to anything that's above so that it's the catch-all that goes at the end so then we'll once again have our request and our response and we'll have our function now and the first thing we know is the status is a 404 so we can set that right away although we're not sending the response yet and now we can look at the headers from the requests that come in and determine what type of response to sense we can say if the request has an accepts header that is html then we can base our response on that so here inside of this if we'll say res.send file and now this will basically be what we did before to send our index.html but we're going to send our 404 and of course we have to route to it correctly so now we're at the server level so we don't need to go up out of a folder we're just going to go down into the views folder and from there we're going to get the 404.html file after that we can put an elsif and here we could say request.accepts and let's look for json which would be very common sent to a rest api so if there's a json request that wasn't routed properly and didn't get stopped by any of the expected routes this would be the response we'll say response.json and now inside of this we'll have a message and then we'll say 404 not found very basic generic message i guess i was using single quotes before ctrl d to select both of those switch those to single just to stay consistent and finally we'll have our last else that will be sent no matter what if html or json was not matched in the accept header and here we'll say response dot type text is fairly safe just about everything can receive text and we will send once again our 404 not found now we'll test this out in the browser and as you might expect we should get html back so if i'll highlight this and just press enter again now we get sorry the resource you have requested does not exist so we got our 404 page when it didn't match any of the other routes we are well on our way to having our rest api up and running for our full stack mirn stack application remember to keep striving for progress over perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 90,547

Keywords: MERN Stack Project, mern stack, mern project, mern tutorial, mern fullstack, fullstack mern, fullstack tutorial, fullstack project, mern stack project, mern stack tutorial, fullstack mern project, fullstack mern tutorial, mern fullstack tutorial, mern fullstack project, mern stack project with redux, mern stack project with redux toolkit, mern stack project with authentication, mern stack projects for resume, mern stack project react, mern react, mern node.js, project, react

Id: H-9l-gTq-C4

Length: 28min 13sec (1693 seconds)

Published: Fri Jul 29 2022