Node.js / Express Course - Build 4 Projects

freeCodeCamp.org · Beginner ·🔧 Backend Engineering ·4y ago

Key Takeaways

This video course teaches Node.js and Express.js by building four projects, covering topics such as API design, cloud database integration, and task manager development.

Full Transcript

improve your node.js skills by building four projects this course is taught by john smilga the wonderful instructor from coding addict what's up everybody this is john from coding addict and welcome to another nodejs video and in this video we're going to make four node js projects while working on the projects amongst other things we'll cover what is mongodb and how to set it up in our app how to get up and running with mongoose how to set up error handling in express and eventually we'll deploy our project to heroku and implement swagger documentation as well just like my other videos we'll start with the fundamentals and slowly but surely move up to more complex functionality this is the second part of node.js tutorial video so my assumption is that you're already familiar with nodejs and express basics if you're interested in the first video node and express tutorial you can find the link in the description in order to follow with a project you will need a starter and the fastest way you can get it is by navigating to johnsmilk.com again the url is johnsmilk.com and once you hit this lovely site look for the projects more specifically node ones and then all of these three links lead to the same repo so you can pick any of them and once you click you'll navigate to the repo node express course and essentially in here just pick your weapon whether you want to download zip or if you just want to clone it i think in my case i'm just going to go with download option then go back to your computer look for your downloads then crack open the zip file and right away open up your favorite editor in my case that is visual studio code i'll drag and drop and during this video will work on following projects so we'll work on zero three task manager store api as well as jw2 basics and jobs api and for all the projects you'll have the same structure where there's going to be a final and a starter so final is a complete project and starter is where we'll do all of our work now keep something in mind where for the final one not only you'll need to install all the dependencies basically run npm install but you'll also need to add some additional info what info well that we will cover during the project so don't be surprised if you just run npm install and npm start in the final folder and you get back bunch of errors that's about it for overall setup and when it comes to project specific setup i'll cover that right after each project intro video so once you've got the repo in your text editor feel free to continue with the video awesome and welcome to our first project task manager api and before we cover the features let me list the main goals of this project and they're following with the help of this project we will learn how to set up and connect to the cloud database so effectively we'll learn how to persist our data to the cloud and not only that we'll also learn how to perform all the crowd operations and crud stands for create read update and delete on our data which is fundamental fundamental to any application also let me mention that since it's a node course we'll only work on a back end so essentially the front end app you see right now is already prepared for you and it's only there so you get the full picture and the same is going to be for the rest of the project i'm probably not going to make front ends for all of them but if i'll see that a matching front-end app can provide more clarity i'll definitely whip up one as well just so you can see the entire request and response cycle not just post my responses as far as the first project on the front end we've got a form analyst and by communicating with our backend meaning by sending requests to our api the user can create read update and delete or destroy tasks again let me stress something this is not your typical to-do list app that stores everything in local storage what's fundamentally different is that we're going to be responsible for setting up the api that communicates with the cloud database and persist the data to the cloud and as far as the functionality it goes something like this where we have the form and of course i can enter a new task that's exactly how i'll call it we press submit so we send off the post request and since we're successful we get back all the tasks and the newest task is added to the list now we can also delete task so if i don't want to walk the cat i just removed from the list and then if we want to edit we click over here and first we'll see only the specific data about that one task and then if we want to edit for example if i want to set it up as completed and if i want to rename it as old task then of course we just press edit then we send off the request and now if we navigate back to all the tasks now as you can see it is completed and the name is different as well and as far as the task manager setup like i already previously mentioned we have final folder so this is where you'll find complete project however not only we need to install all dependencies but also if you take a look at the readme you'll notice a text where it says in order to run the project you need to set up dot env and set up the uri connection variable and essentially these are the things that we'll cover during the project so in order to spin up the project yes you'll have to watch some videos where we actually cover that and only then you'll be able to do that now as far as the setup a lot of things should look very familiar so in here we have the public and of course in the public this is where we have our app again everything is already prepared for you and just so we all are on the same page i actually created that with vanilla.js and then of course we have the app.js and here i simply have one line task manager app and then if you take a look at the package.json as far as the packages we have express something we covered in the second part of the course and then you see two more packages dot env and mongoose and of course these ones will cover during the project why they're there and what is going to be the use case now in order to make our dev setup easier i also installed nodemon as a dev dependency and as far as the script well you just need to type npm start and that essentially will spin up nodemon with app.js and then we also have git ignore which we're going to cover a little later once we create the env but long story short this is just a file that prevents specific files being added to the source code and essentially with this setup these two things will be ignored if we decide to push this up to the github so we'll ignore node modules because usually they're pretty big and then dot env because this is where we want to keep our secrets and of course we will cover this one later in the project and once we're familiar with the setup let's kick things into gear and actually start working on project and first thing that you need to do is to navigate to the starter folder again you're looking for the third project the task manager and then more specifically the star folder and i think the fastest way to navigate there is by just typing cd and then grab the star folder and drop it here and then once you're in a starter before you do anything make sure that you install all the packages and of course we do that by running npm install and then once all the packages are in place in order to spin up the nodemon we need to go with npm start unless of course you want to change it to a different command if that's the case then make the changes and then use that command instead so in my case i'll just wait a little bit i mean it shouldn't take too long there's not that many packages in there and then once i have all the packages in place then of course like i said we're gonna go with npm start and if you see task manager in the console we are in good shape and now let's set up the most basic express server which essentially is just going to be listening for one route forward slash hello and it's going to be on port 3000 now if you want to jog your memory and test it up yourself just pause the video and resume once you're done if you don't want to do that just keep on watching the video and the way we set up the most basic express server is by setting up a variable by the name of express then we'll set it equal to require and that's going to be equal to our express package then we need to initialize it so we go with app and that is equal to express and we invoke it and then unlike the previous examples we'll actually set up a variable by the name of port and for time being we'll hard code this to 3000 but eventually there is going to be more code and i'll talk about the reasoning later so for now just set up the variable and we'll be in good shape and in here we need to go with amp.listen of course and first thing we pass in is the port and the second is the console.log so we go here with some kind of text and i'm going to go with server is listening on port and then of course we pass in the port value and i always like to add those three dots as well so i'll do it in this case and then i'll open up my console the moment i have server is listening on port 3000 which is just awesome so now let's also set up that one lonely route so above the port i'm going to go with my comment routes and then we'll just say app.get so this is going to be a get request now what is going to be the url well we'll go with forward slash and hello so that's going to be the path and then of course we have the callback function once the user hits the route and we're looking for iraq and res so request and response and we simply want to go with reg dot send and then we'll pass task manager and app so i'll save it here i'll navigate to the browser and i'm looking for port 3000 of course and then we'll go with hello and if we see task manager app displayed in the browser then of course we are off to the great start beautiful and once we have the bones in place next let's take a look at our application so we can decide what route eventually we're going to have and i can see that i'm getting all my tasks so there will definitely be a get request that gets me all my items now i can also create a new task so there will be a post request that can create a new task now we can also delete one so there will be a route for that and if we click on edit we open up a new page and in here we get info about specific route so there will be a get request that just gets me info about one single task and also we'll have the ability to edit so if i change the completed from true to false if i successfully edit that then if i go back to the tasks of course in here i don't see the check mark which means that i successfully edited the task and what that means is that there's also a route for the update and in summary our routes are going to look something like this where there will be a get request on api version one and then tasks so this will get all the tasks then there will be a post request on api version 1 tasks again the same url however the method is different so total different functionality in this case we'll create a new task and then we have guest route with params so with the id of the task that gets us that single task and of course one for update and one for delete and since there's a lot to unpack over here i'll spend the next video on the reasons behind such api structure all right so let's go step by step and probably your first question is well why do we go here with forward slash api and then version one and essentially that is just a convention we need to understand that on the server we also might have different routes not just the routes for the api so for example you could be serving a index page here on a forward slash meaning there could be a nice index.html page that you're serving up over here and then also on the same server you have the api routes so convention is effectively just to signal that all of these are the api routes now as far as the version well as you're setting up the api eventually you might want to change some things so it's easier if you have this version because that way when you create a new one then you can just direct everybody to api and then version two three or whatever and while we're still on that same note why don't we navigate to a hacker news one the one that i showed you previously with algolia and you'll notice exactly the same setup more essentially they go with domain and then forward slash and then api and then version number one and that leads me to my next point where if you're ever in doubt or if you're just interested on different setups just check out the different apis there's tons of apis out there and you can just look for one then take a look at their setup and then decide if what they're doing makes sense to you then of course you can implement in your project if not then just move on to a different api and eventually you'll find a setup that makes the most sense to you after that you're probably wondering okay i understand the api high-end version that kind of makes sense but why do we go here with get and then tasks then we have the post and the same tasks and then for get patch and delete we go to the tasks but then we're looking for the colon why isn't this written in a different way where we're just looking for a single task or something along those lines and to give you a short answer that is a convention but since there's more to it i want to actually cover that in a few videos so i want to set up the basic routes with just some simple responses then i want to open up the postman and do a little bit of setup over there and then right before we start setting up the database i actually want to spend one video on just talking about the convention and then lastly if you remember in tutorial we worked with put and now for the update we're using patch and i know that this might be a little bit frustrating to you but that's also going to be something that we will cover a bit later once we have already a working application because that way i believe that i can give you a solid example of the differences between the put and patch that's about it for the general route structure so now let's start implementing it not bad that bad i think we're good with the general structure so now let's start implementing it and i want to right away set up the router as well as the controllers and if you remember at the very end of the express tutorial i covered why is that necessary and essentially the short answer is that as our application grows bigger it's not going to be very sustainable if we'll just start dumping everything in the app drives and for time being i just want to create this one route now as far as the response it's just going to be a simple string that says hey here are all the items or something along those lines and then once we have that one in place then we'll add the rest of them and then we'll test it out in postman so let's get cracking and i'm going to go with new folder so here will be all the controllers and in this case i'm going to be looking for tasks and i also want to set up a routes folder so in the routes folder we'll go with new file and same thing we're going to go with tasks js and then as far as the setup in the routes we need to look for the express router so say const express and that is equal to require and then again we'll look for express and this should be a refresher because we did cover that at the end of the express tutorial so just to jog your memory if we go back to express tutorial and then more specifically we'll look for the final one the file 13 the router people shows a basic router example and essentially we have two options we can either go with route or get and then add all the controllers one by one or we can actually change them together where we go with router and then user route so this is going to be the main route in our case api version one and then tasks and then we chain get and post and i think i'm gonna go with this setup so first let's start by setting up the router and that is equal to express and then router we invoke it and then eventually we'll import controllers but for now of course we don't have any so let's just leave that one blank and we'll go with router router then route like i said then forward slash and then i want to go with get method and for time being i'll just hard code the response over here so say wreck and res and res dot and send and like i said we'll just start simply so say all items now let's save that one and then all the way in the bottom we want to go with module exports and that is equal to our router so now back in the app.js we want to import the router we want to import our tasks and we want to set up the middleware so in here let's just go with const and then routes and that is equal to require and then like i said we're going to be looking in the routes folder and then more specifically we're looking for tasks and then right after this hello and don't worry we'll change that one a little bit later for time being it can just stay the way it is we'll go with app.use and then of course what route are we looking for well we want to go with api then version one and then tasks so that's going to be that root route for the tasks router and then we just want to go with our routes and you know what let's just change the round but for some reason i went with routes let's just call it tasks i believe it's going to make a bit more sense and since we'll be sending json from our application for example when we're creating a new task and since i want to access that data in my routes what we need to do of course is get middleware that is built into express and that middleware is express json so above the routes we'll go here and i'll try to spell this correctly since that is always an issue hopefully this is correct middleware and then we'll just go with app.use and eventually we'll set up the static one as well but since at the moment we have barely any routes i'm just gonna go with express and json if you remember if we don't use this then we won't have that data in rec.body so i'll save it here and i'll leave the comments just so we all are on the same page and before i test it out in the browser let me just double check so i'm using the middleware where i'm saying that i'm looking for api version one and then tasks and then i pass in my router my tasks router and then in the router effectively i have this root path which just matches whatever i pass over here so again i go with api version one and then tasks and then i set up a get route where i manually pass in my controller and here i just say res.send and i pass in a string of all items and looks about right so let me go here and we're going to go with localhost 3000 since it's a get request of course we can access it then api version 1 and then tasks and we should see a string of all items and if we do then of course we're heading in the right direction so the last thing that i want to do in this video is to first close my express tutorial one and then in the controllers we want to create a new file and we'll call this tasks.js and again just to jog your memory the whole deal why we're setting up separate routes and separate controllers because if i'll try to jam everything in app.js it's going to get messy pretty fast so what i want to do right now is take this logic and place it in a separate file because eventually of course there will be way more logic than just res dot send so i'm going to go to my controllers and effectively i want to create my function the controller function and i'm just going to go with const get all and then tasks and i'll set it up as an r function i'm looking for rec and res and functionality will be exactly the same whereas dot send and we're just going to go with all and then items and then we're going to go with module exports and since i'm going to add more functions in here i'll right away export it as an object so say get all tasks that's when i'm exporting and then back in the routes of course i want to access it so i'll say here that i wanted the structure get all tasks from and of course we need to require it and in this case we're looking in the controllers so i'm going to go two levels up i'm looking for controllers and then more specifically task so instead of hard coding this value of course i'll just pass it in and i'll say get all tasks and if i go back to my url and if i can still see all items then of course we are in good shape and let me just test it out where i'll change this around and i'll say all items from from the file and then if we go back yep we still have the correct result and with this in place now we can set up the same basic structure for rest of the routes as well beautiful and in the same fashion let's set up the rest of the controllers so we have the get one now i want to create one for the post one for get but that's going to be a single item and we also have one for patch and one for delete and pretty much in all of them the setup is going to be exactly the same as far as functionality i'll just send back and i'll say what the controller is doing since of course we haven't connected to the database or anything like that and i just need to come up with a name in my case i'm going to go with create task and again we have rack and res and then we want to copy and paste since i want to speed this up and i'll just say create task create task and why don't we change this one around and we'll say get all tasks now we want to copy and paste and we'll have three more we'll have one for getting task so get task and here we'll say get single task then we'll have one for updating and that's exactly how we'll call it we'll say update task the same is going to be over here and then the last one of course will be delete and then task and you guessed it we also need to change the text and now of course we want to place that in the same object so let's go with create task then get task and we have update task and last one is delete task and then back in the routes of course we want to import them so say here create task get task then update task and delete one and now we just need to set up the routes if we take a look at the app.js these two the get and post are gonna go to api version one and then tasks and then the rest of them are going to be wii d id params so same initial path but then we'll just add the forward slash and then id and that's of course is where we're going to pass the id of the task so where i have the get request to get all the tasks i'll chain dot post and of course which controller are we gonna use of course the create task one and then we can simply go to the next line and we'll go with router then route and like i said we'll go with forward slash and then id and then we're looking for get route and that will be equal to get the single task then we'll set up our patch and that will be equal to update task and then lastly we have delete one and now we'll be equal to delete task now since we know that we can only really test the single task and get all tasks because that's the default method the browser performs we'll stop over here and in the next video we'll spin up the postman to quickly test all of our routes because trust me you don't want to go any further without knowing that at least the basic setup works because you can set up whatever logic you have over here if there's a small bug and you cannot access these strings then you'll spend way more time later searching for that bug nice job and once we have the basic structure for all of our routes now let's test them out in a postman so i'm gonna head back to my desktop i'm looking for the postman and since in this case we'll spend way more time over here i also want to cover some configuration options so for starters i want to switch to a dark mode because i think you'll appreciate that more so if you want to do that as well just go to the cog and then you're looking for the settings here and then in the settings just look for themes and of course we have a dark theme as well so that's the first thing that i'm going to do then we want to create a collection now why would you want to do that well since we'll be setting up multiple routes and they'll reference the same application which is going to be easier as we create more and more applications and in order to create that collection we go here and click on creating the collection and for starters i just want to change the name so i'll click on these three dots over here and of course we're looking for rename and then i'm just going to go with 0 3 and we'll call this task manager now if you're not happy with this name of course pick your own one and once i have the task manager then we want to start by creating a request so we create a new request it's going to be a get request and instead of typing all the time manually here local and then host and we're going to go with 3000 and then of course api version 1 and then tasks what we want to do is set up a global variable now there's multiple ways how we can do that you can actually set up the environment so think of this as a dev environment and then you can have production environment but in our case we'll just set up this localhost and then 3000 api and version 1 simply as a variable and you can do it from here as you can see they even give you a suggestion on all that but i'm just going to go the long route where we click here on that eye and then notice i have already won for the url i have localhost 3000 and then i actually changed it later to forward slash api so now what i want to do i want to showcase how we can remove it so if i go over here and if i remove it and i set up a new one in this case again i'll call this url and then as far as this value well i'm just going to take this whole thing so i'm going to go with localhost and then 3000 and of course we're looking for api and if you want you can also include the tasks but in my case i'll stop right after the version one so let's copy that one again i'm setting this up as a global but you can set it up in the environment as well and then once we add that we should be able to right away access it so now of course we just need to save it and then in order to use it we need to go back and you know what i'll remove everything for now and if we go with these double curlies this is going to give us access to those variables and all the way in the bottom we have the url and of course as you can see it is global so in here i'm going to go with url i'll close it and then i'll go with forward slash and then tasks and once i save i should get back get all tasks and of course that means that our basic setup works and before we continue and do the same thing with the rest of the tasks now of course we want to save it and not only want to save it we want to save it in our collection so let's click over here save as and let's give it a more meaningful name and in this case again i'll say get all tasks and of course we're looking for task manager so this is going to be saved in this collection and we simply click on save so if i take a look at my task manager now of course i have get all tasks where we use the global variable and we can successfully see our string and i'll close few of these tabs because it's getting quite busy and let's do the same thing for the rest of them so in this case i'm going to be testing the create one the one for the post that's why we need to change the method that's the first thing you want to do then we'll go with our url again we'll close it out forward slash and then tasks and remember now we want to send some data correct now we're not doing anything with that data on a server but just for the kicks why don't we send it i'm going to go here with body then we're looking for the raw and of course we're not looking for text we're looking for json we just need to make sure that we use the correct syntax and in this case i'll say name and that will be equal to testing and we just click on send and if we can see create task we are in good shape now since i also want to test out whether my middleware is working i'm going to go back to my controllers i'm looking for create task and in here instead of just going with send we're gonna go with json so now i'll be sending back the json and i'll pass in reg.body so if you want of course you can log it on a server but in my case i think it's going to be faster if i just send back whatever i'm getting from the client so if we go back and if we change this around and we'll say here shake and bake and if we add a comma and then completed we set to true once we send that should be our response and of course the only thing that's left to do as far as the create route is go to save as and then we'll say create task save it and now let's continue again i'll close these ones just so it's not that busy and in this case i want to go with get route then we want to go here with the url again and of course we haven't set up the database so there's no real id but we can definitely test it out if we just go with tasks and then whatever gibberish so in this case i'm going to go with hello so that's going to be my id so we're not sending anything as far as data but we are using the params again if we take a look at the routes we can clearly see that we have forward slash and then id that is going to be our param and if we want to test it out where we have get task of course we have the request and the id is sitting in the params so in here i'll do the same thing i'll say json and we'll just say id and that one is equal to rec params and the id so if we save here and then go back and just use the get route and click send we have the key with the name of id and then the value is hello so if we'll change it around and if we'll say peter of course the value will be peter again same spiel we got save as and we'll name this update task or i'm sorry get single task my apologies get single task we'll save it and then we have two more we have one for update and one for remove and in order to speed this up i don't think i'm going to do any testing anymore we simply want to open up a new route we want to go with patch in this case and again we're going with url and then forward slash tasks whatever value you want to pass in over here so i'm going to go with one two three send and of course i have update task beautiful let's save that one and we'll write here update and task and the last one of course is delete so let's close these two and again your request we're looking for delete method the url is going to be exactly the same and then we want to go with forward slash tasks and then any of the ids that we have already used since we'll change that later anyway and once we send the response should be delete task now if you don't want to go with save as you can simply click on command s that's going to be a shortcut and we go here with delete and then task and of course we save it in the same task manager and once we can clearly see that we can access all our routes correctly then we can move on to our next topic okay and once we're done with the postman before we start setting up our database let's quickly talk about our routes more specifically why we use such structure long story short it's because we're building a rest api and since these days the term api is used pretty much for everything let's just all agree that in our case since we're building a server essentially we want to create a http interface so the other apps most likely front-end ones can interact with our data that's how we view api in the scenario and when it comes to rest it stands for representational state transfer and arguably the most popular api design pattern and essentially it's a pattern that combines http verbs route paths and our resources aka data so effectively rest determines how the api looks like now let me emphasize something it's a pattern not a strictly enforced set of rules so nothing stops you from setting your own api in totally different manner in fact if you have used apis on your front-end apps you know that some of them have totally different structure i guess the best advice i can give you is this whatever pattern you decide on stick with it or in other words be consistent otherwise it's just going to be very confusing for your users and this is a common approach where you have the main list so that could be orders that could be customers that could be items whatever and of course in our case it is tasks and in order to get all the items we go with get method and then if we want to create one it's going to be the same endpoint but we just go with different method and of course in this case it is post and not to be redundant we already discussed this before but just because they have the same url the same endpoint since the methods are different in this case we have get and of course in second scenario we have post these are two totally different requests please keep that in mind and then for individual item you have the same path pretty much so you have api and then tasks orders customers or whatever and then you just use the params to point to that one specific item and then if you want to get the item then of course it is a get method for update you'll use put or patch and then to delete one you'll use the delete method instead and since json is a common format for receiving and sending data in rest api we'll use that approach as well so even though at the moment we use send method in our routes eventually we'll switch to json method instead also i'd like to point out that rest in general is somewhat fuzzy in fact oftentimes you'll deviate a weight from straight up rest since that's what the setup will require one more thing you can probably notice something essentially our api allows our user to perform a crot operations on our data and crud stands for create read update and destroy and it's a common approach where the api interface is built around crud since those are usually or typically operations that users or apps want to perform on a given data whether it is again users orders customers or in our case of course it is going to be a task and we'll return to credit a little later when i can actually show you how it relates to our data lastly there's obviously more to rest and some of that we will discuss in later projects but since i'm not a big fan of long slide videos and i believe we covered all the major points we'll stop right here and move on to our database setup if you remember in express tutorial the route setup was extremely similar to that we have right now with one big caveat we used basic array to store some list of items on our server and based on the request we performed some kind of operation on the list and then send back the response and of course that is not very serious approach to store our data and therefore starting with this project we'll set up and connect to a proper database and pretty much for the remainder of the course we'll use nosql or non-relational database by the name of mongodb now i'm not going to dwell on differences between non-relational and relational databases as well as pros and cons for each of them but the major difference is that unlike traditional database where we have rows and columns in mango divi we can simply store everything as json and basically it doesn't care how the data relates to each other instead of tables we have collections which represent group of items and instead of rows we have documents which represent single item and a document is a set of key value pairs and as far as data types we can use strings numbers arrays objects and many more it's very easy to get started and even though you can set it up on your local machine as well we'll right away go for cloud option since that's something you'll probably end up doing anyway we'll use mongodb atlas which is a official option basically it's created by the same people who created mongodb and since they offer generous free tier you'll just have to create an account and you'll be good to go and once we're familiar with mongodb let's set up and configure mongodb atlas so we can host and manage our data in the cloud i have the account already but since i want to cover all the steps in detail i'll set up another dummy account together and remember we can set up the entire thing for free so don't worry your credit card can stay nicely tucked away in your wallet if you get stuck or confused in any of the steps we're about to take here's an awesome resource you can use just google create mongodb atlas and follow this link which actually brings us to official docs and here you'll find a checklist which we're going to use as a roadmap for the following few videos and what is the first thing they want us to do create a new account so let's do this people i'm going to open this up in new tab and then of course you can find bunch of useful info in here yadda yadda you keep on scrolling and i actually want to navigate to a login page and i'm just going to pretend that i don't have the account and we're going to go for sign up and here of course you just need to provide all the necessary info and once you have filled everything out and as i said no don't worry this is not my real phone number then of course just click on sign up and up next they're going to ask for organization and project name and in my case i'm gonna go with node and express course then i'll pick javascript we'll click on continue and we probably can actually skip this but let's just leave it there and up next they want us to set up the cluster now if you take a look at the checklist actually cluster is already second step so let's go back here and pretty much you always want to show for a free one unless of course you want to start paying them so in here we'll just go with create cluster that's going to be the free one then it's using aws okay awesome as far as region i'm going to go with this one then we have cluster tier and additional settings and we'll leave them both as default and lastly i just want to change the name and i think i'm going to go with node express and project and once we're done we just need to click on create cluster and we'll get ourselves a new cluster now as you can see over here they say that it's going to take a little bit of time which is usually the case so i'll stop the video here and i'll see your next one where we'll continue with our steps and once our cluster is ready to go before we start messing around with data so with collections and documents and all that there's a few things that i want to do first and i'm going to start by setting up the database access so effectively in here we'll set who can access our database now i'm not talking about the atlas account no i'm talking about the database and collections we're about to set up and we simply need to click on add new database user and we're gonna go with password and if you get some default values just wipe them clean and i'll simply go with john and as far as the password i'm just gonna go with one two three four please please please do not do that in your own setup the only reason why i'm doing that because you'll be able to see my password anyway and don't worry once i'm done setting up this project of course i will change my password so it's not going to be one two three four and once you're done with the user and password notice we have database user privileges and this user can read and write to any database so i'll leave it the way it is and we'll add a new user that's good i'll close this one and then we want to set up the network access so we want to set up from where we can access our database and you can already imagine that of course once we deploy the project then of course we'll set up that ip address but for time being while we work locally we might as well set up access from anywhere now if you want you can set up your own ip address here so you can just add the current one but in my case i'm going to go allow access from anywhere and i'll just click on confirm and lastly i want to get the connection string that we're going to use once we connect our database to our application and in here what you're looking for is connect so you want to go back to the cluster then connect and then you want to go with connect your application so not the compass one not the shell actually the second one here connect your application and then i'm gonna go with 3.6 or later that's about right and then you just want to copy this one and then navigate back to our project now eventually we'll set it up as the environment variable yes that's going to be the case but for the time being i'll simply create a new folder in the starter and i'll call this db and then instead of the db there's going to be a new file and we'll call this connect gis and then i want to create a new variable and i'll call this connection string and i'll set it equal to that value now we'll have to add some values over here but we'll do that later once we're actually ready to connect our application to the database so just take the string copy and paste set it up in the db and then connect js and now we can start exploring the atlas setup as a quick side note while working in local setup essentially while working on your computer you can use any of these two options so either access from anywhere or our actual ip address but once we go to production more specifically once we deploy our project to heroku you will need to use access from anywhere option otherwise you'll get an error and you won't be able to connect your app to mongodb now this is specific to heroku for example when it comes to digitalocean another popular option for hosting your node apps if you're using your local address while developing once the project is hosted you just swap the ip address from local to production but the way heroku setup works you'll need to go with allow from anywhere option otherwise you'll get an error and once we have set up database access network access as well as the connection string now let's actually explore the data part and we want to click on collections then we're going to go with our own data and then we need to come up with a database name now the first one will be a dummy one and of course once we connect to our application then we'll create a task manager one so the first one i'll just call store and then they ask us to create a collection and don't worry i'll cover what actually our collections and all that but for time being i'm just gonna go with product and then we'll create one and once we have everything in place we are ready to start creating documents so whenever we talk about mongodb we'll have the database so that essentially is going to be that application again in our case eventually this will be the task manager one and then inside of that database we'll have collections now if you're familiar with regular databases you can think of them as tables and in our collections we'll have group of mongodb documents so if i name my one products you can probably already guess that here i'll have list of products and if i'll decide that my store will also have users of course i can go here and create a new collection and as a quick side note we won't have to do this manually i'm just showing you the general setup manually of course eventually all this is going to happen automatically once we connect from our task manager so i have a list of products and then of course i can also create a list of users or list of orders and hopefully you get the gist and once we have our list now let's talk about the individual items so i can go to any of my collections and then once i'm here i can insert a document and document in mongodb effectively represents that one single item and what's really cool that just like javascript object effectively it's a set of key value pairs now by default the moment we create a new document we'll get this underscore id which is going to be that unique id so we don't need to worry about the ids and then of course we need to set up a type so what is going to be the type for our document what is going to be type for the item and if you click over here as you can see these are options we can set it up as an array binary boolean and yada yada and i'm purposely not going to spend too much time on types since eventually we'll set it up from our server anyway and at that point the setup is going to be a bit different since we'll use tool called mongoose now in our case what are we looking for well we're just looking for the string i'm just going to go here with name and then i'll set it equal as first and product so here of course i can insert and now not only i have the product collection but i also have my first item my first document and here comes the biggest gotcha in mongodb documents have a dynamic schema and what that means in plain english is the simple fact that documents in the same collection don't need to have the same set of fields or the structure so if i were to go to insert document and instead of string i'm going to go with array and i'm going to call this colors and then i'll set my first one to be red then second one blue and if i'll save it as far as mongodbe is concerned they're still the same items in this product collection so nothing stops you from doing that now just because you can does not mean you should and therefore we will use additional library by the name of mongoose which will set up that structure for us but as far as straight up mongodb yes both of these documents are still part of this product collection even though their structure might be totally different few videos ago while discussing arrest i mentioned crud create read update and destroy or delete and now i want to quickly show you how is that going to look like with our current manual setup i fully understand that some parts might look really silly especially the read one but in my opinion it's important we start with the basics and hopefully that way we'll have a better understanding of overall principles when we need to implement crud in our rest api so what does crud means in our manual setup well first we want to create an item correct so in here we just find any of the collections and in this case i'm going to stick with products since i already have some items over here and then we simply go with insert document and again we just come up with a type and then some kind of value and my case i think i'm gonna go with another name and i'll just leave it as a string and i'll say test crud i'll insert the document and i'm done so we're done with the first part where we created an item now the second one reading them well we simply stare at the screen and we can see that we have three items so i can see that i have three products again in our application that just means that we'll be able to read the documents that we have in our database when we're working with gui it's very straightforward where you're just staring at the screen then we want to update them and then with the manual approach we just look for this little pencil and we say that we want to change some values around here so in here i could go with another item and i'll say green so now of course i have successfully updated the array as well and you know what let's also add one more and i'll call this orange then i update and i'm done with that part as well so not only we can create read but we can also update and then last one delete well we simply look for another icon in this case we are looking for the trash icon so we just click here and now of course we remove the item so that's the basic approach of crud in our manual setup all right and once our database is ready to go now we need to connect to it from our server and we can definitely use the native mongodb driver and i believe the package name was just that mongodb but a very popular alternative is to use package by the name of mongoose instead which is a object data modeling library and essentially the reason why it's so popular and why we're going to use it in this and rest of our projects is because right out of the box it comes with bunch of goodies that make our development faster now i'm not going to list them in this video since you'll see them in action in all of our projects just let me repeat that yes you can set up your apps with just native mongodb package but the reason mongo's is so popular is because it has extremely straightforward api and it basically does all the heavy lifting for us when it comes to our project i already installed mongoose so we can start using it right away but if you want to use mongoose in your own future project the command is npm install and mongoose and one last thing in this project we're going to be using mongoose version 5 something so if by the time you're watching this if they have a higher version pretty much everything starting from six so if you have five point i don't know 14 15 or whatever you'll be still in good shape but if by the time you're watching this they already have version six their api might also be different and at that point you have two options install this particular mongoose version or just use the latest one and utilize their docs as a quick sign note since i recorded the course mongos did come out with new version version number six now the good news is that as far as i checked the only change that affects our project is the lack of deprecation warnings which we're going to cover in the next video rest of them don't really affect us now i still suggest using mongo's version that's already installed in the starrer while working on these projects but as far as i have tested and the current student feedback you'll have no problem implementing the knowledge in your own project

Original Description

Node.js and Express.js are popular technologies used for JavaScript backend web development. In this course, you will improve your skills by building four projects using Node and Express. 💻 Code: https://github.com/john-smilga/node-express-course 🔗 Full Node and Express Tutorial: https://www.youtube.com/watch?v=Oe421EPjeBE ✏️ Course developed by John Smilga. Check out his channel: https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA 🔗 Other projects and courses from John: https://www.johnsmilga.com/ ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba) ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:02:59) Project 1: Task Manager ⌨️ (3:07:21) Project 2: Store API ⌨️ (5:05:43) Project 3: JWT Basics ⌨️ (6:28:34) Project 4: Jobs API 🎉 Thanks to our Champion and Sponsor supporters: 👾 Wong Voon jinq 👾 hexploitation 👾 Katia Moran 👾 BlckPhantom 👾 Nick Raker 👾 Otis Morgan 👾 DeezMaster 👾 AppWrite -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 0 of 60

← Previous Next →
1 React: Production Server Setup Part 2 - Live Coding with Jesse
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
2 cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
3 Browser history tutorial - Beau teaches JavaScript
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
4 Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
5 React: Parameterized Routing with Next.js - Live Coding with Jesse
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
6 React: Dealing with jQuery Issues - Live Coding with Jesse
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
7 setInterval and setTimeout: timing events - Beau teaches JavaScript
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
8 Browser and Device Testing - Live Coding with Jesse
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
9 Last Minute Updates - Live Coding with Jesse
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
10 Post Launch Updates - Live Coding with Jesse
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
11 React: Setting Up Google Analytics - Live Coding with Jesse
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
12 React: Masonry Layout - Live Coding with Jesse
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
13 Load Balancing Digital Ocean Droplets - Live Coding with Jesse
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
14 try, catch, finally, throw - error handling in JavaScript
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
15 Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
16 Graphs: breadth-first search - Beau teaches JavaScript
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
17 React: Masonry Layout Part 2 - Live Coding with Jesse
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
18 React: WordPress API Live Search - Live Coding with Jesse
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
19 Creating WordPress Custom Post Types - Live Coding With Jesse
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
20 Dates - Beau teaches JavaScript
Dates - Beau teaches JavaScript
freeCodeCamp.org
21 Miscellaneous Front End Updates - Live Coding with Jesse
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
22 Merging a Pull Request from GitHub - Live Coding with Jesse
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
23 React + Prettier + Standard JS - Live Coding with Jesse
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
24 React: Sortable Responsive Table - Live Coding with Jesse
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
25 Geolocation Sorting by Distance - Live Coding with Jesse
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
26 Tradeoff Matrix - Agile Software Development
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
27 The Definition of Ready - Agile Software Development
The Definition of Ready - Agile Software Development
freeCodeCamp.org
28 Getting first React job without experience - Ask Preethi
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
29 React: Google Analytics Click Tracking - Live Coding with Jesse
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
30 Submitting a PR to an Open Source Project - Live Coding with Jesse
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
31 Should I go back to school to get CS degree? - Ask Preethi
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
32 Hero Section CSS Changes - Live Coding with Jesse
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
33 Working Agreement - Agile Software Development
Working Agreement - Agile Software Development
freeCodeCamp.org
34 A day at Pennybox with Co-Founder Reji Eapen
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
35 React: Sorting and Filtering Data - Live Coding with Jesse
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
36 React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
37 React: Building a New UI - Live Coding with Jesse
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
38 Definition of Done - Agile Software Development
Definition of Done - Agile Software Development
freeCodeCamp.org
39 Getting started with jQuery (tutorial) - Beau teaches JavaScript
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
40 Making a React Blog with WordPress Content - Live Coding with Jesse
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
41 React, NextJS, CSS - Live Coding with Jesse
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
42 jQuery events - Beau teaches JavaScript
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
43 React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
44 React: Working with API Data - Live Coding with Jesse
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
45 React: Refactoring Components - Live Streaming with Jesse
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
46 jQuery effects - Beau teaches JavaScript
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
47 More React Refactoring - Live Coding with Jesse
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
48 animate in jQuery - Beau teaches JavaScript
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
49 "Finishing" My React Site - Live Coding with Jesse
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
50 Starting a New React Project (P2D1) - Live Coding with Jesse
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
51 React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
52 The Agile Manifesto - Agile Software Development
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
53 jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
54 React Project 2 Day 3 - Live Coding with Jesse
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
55 The INVEST approach to product backlog items
The INVEST approach to product backlog items
freeCodeCamp.org
56 React Project 2 Day 4 - Live Coding with Jesse
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
57 Chickens and Pigs - Agile Software Development
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
58 React Project 2 Day 5 - Live Coding with Jesse
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
59 jQuery: add and remove DOM elements - Beau teaches JavaScript
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
60 React Project 2 Day 6 - Live Coding with Jesse
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org

This video course teaches Node.js and Express.js by building four projects, covering topics such as API design, cloud database integration, and task manager development. Students will learn how to set up a cloud database with MongoDB Atlas, design and implement a task manager with CRUD operations, and create API routes with Express.js.

Key Takeaways
  1. Install dependencies with npm install
  2. Set up a .env file
  3. Configure package.json with scripts and dependencies
  4. Spin up Nodemon with npm start
  5. Create a new folder for controllers and a new file for tasks controller
  6. Set up middleware to parse JSON data in request body
  7. Create API routes with Express.js
  8. Use Postman to test API routes
  9. Set up a dev environment with Node.js and Express
  10. Create a task manager with separate routes and controllers
💡 API versioning is important to avoid affecting existing functionality when making changes to the API

Related AI Lessons

Up next
This Cop Was Held Accountable For His Brutality! #police #lawyer
Hampton Law
Watch →