MERN Stack Tutorial with Deployment – Beginner's Course

Key Takeaways

learn to build full stack web applications using mang Tob expressjs react and node.js aka the M Stack this course will guide you through setting up your development environment and creating Dynamic responsive applications from scratch you'll gain hands-on experience in building restful apis managing databases and developing interactive frontend interfaces by integrating these Technologies you'll be able to create seamless and efficient applications that handle both client side and server side operations Brock created this course hello and welcome to the M Stack tutorial in this video you will learn how to build and deploy your very first full stack application we're going to start by building an API where we can create products delete them update them and we're going to store all of them in our database in this video you will not only learn how to build a full stack app but also how to have a really clean codebase that is modular and maintainable let's take a look at the application that we're going to build in this tutorial so this is the web application that we're going to build and deploy today which is a product store where we can create products delete them and update them let's try to create one if we don't pass anything into this form it's just going to say please fill in all Fields let's give it a name I'll just say headphones let's give it a price as well as an image URL for the image URL I'll be grabbing it from the unsplash I'll just say copy image address and just paste it and add product so there we go it says success and product created successfully let's go to the homepage and here we can see the latest product has just been added we can update the price or the name or the image really anything let's update the price and let's say headphones 2 and once we update it it is just going to update it both in the database and in the UI we can delete any of our products and this application is going to be completely responsive so I just switched to the responsive mode here is a larger screen this is the tablets and this is the mobile phone here you can see it just works as expected and on top of it we have light and dark mode implemented if we delete all of our products let me just toggle this mode Let's see what going to happen if we delete all of them basically it's going to says no products found and you can create a product from here on this page this video will give you all the fundamental knowledge to be able to build and deploy a full stack app and after this you'll like to build a little bit more complex projects such as a realtime chat app or a full stack Twitter clone that has authentication implemented you can check out these videos on the channel to practice even more so if you are new here I always share this kind of long tutorials and if you like to get notified subscribe to the channel to not miss out and if you're ready let's get into it okay so to get started with I have created an empty folder on my desktop I call it as M crash course and then I just open it up in vs code now we're going to need two different folders let's say front end and one for the back end in the first section of this of course we're going to be focusing on the backend part where we buil an API once we build it we're going to go ahead and build the front end part but first let's just start with this one so I will just open up a new terminal as the shortcut using control J and from here I'd like to just say mpm init Dy and make sure you're running this under the root so you don't say something like CD into the back end and from there type mpm init Dy no this is not what we do we just go up under the root and this is the default place when you just open up your terminal then you would say mpm init Dy and the reason that we are doing this in the root and not in the back end is that it is going to help us to deploy this application easily so we're going to put all of our scripts here this is going to build the application and start it and this is going to make sense once we get into the deployment part so we need a couple of different packages for this application that we'll be using in the backend so whenever you install a package for the backend part you would run it uh in the roote you would say mpm install and let me just clear up the console so that you can see it clearly up here I'll say mpm install Express mongus and. EnV press enter it is going to install all these packages and put it under the dependencies in this package Json file so we'll be using Express as our web framework so that we can really build an API easily and just have the routing system and we're going to be using mongus so that we can um interact with our database which is going to be mongodb and we are installing this EnV package so that we can really uh access to our EnV I mean like environment variables and you're going to see how to use all of them as we progress in this course so we got all of our dependencies it created a note modules folder for us and a package log Json now we can create a file let's say server.js you can call this anything some people call it as index.js main.js app.js uh all of them are really conventions the one that I'd like to use is just server.js which is going to be the entry point for our API so I'll say server.js and let's try to import Express and create an Express app now the the traditional way of creating it you would say const express and say require Express but I don't really want to use this require syntax we can use a bit more modern syntax which is going to be es modules so we would say import Express from Express and to be able to use this you need to go under the package Json and create this field called type and by default it is commonjs here we can see but we'll be using module so once you make it module you can now use import export syntax let's delete this and then just say const app Express call the function and then let's listen for a port I'll say app. listen let's say 5,000 this is going to be our port and we are going to call this call back function once it is ready so we could say console log server started at Local Host and 5,000 let's try to save this and maybe try to run this file now what you can do is just say node and first see theti the back end so if you just type back and put I mean press tab it's going to just autocomplete it and you could say server and tab again it is going to select this file now you can run this file just like this and it it should say server started at Local Host 5000 if you want to you know just have a better command for this that is a little bit more short or convenient you can go here under the scripts and you could say uh let's say Dev and you would say something like node let's say backend if I can type and then server.js file now instead of typing this to the terminal let's just K this and say npm run Dev so it's just going to do the exact same thing but basically you're running the dev script and this is the convention that we do now if I go ahead and change anything here on this file let's say Local Host 5000 it maybe hello right let's save it doesn't it is not going to refresh this right it is not going to restart it what you need to do is just kill this with contrl c and rerun this now you can see the updated version but this is not really convenient what we can do is just install a package that is going to do this thing for us so I'll just kill this clear up my console and just say mpm install uh node man and we can put Dash uh D which is going to make it a Dev dependency so let's take a look at it under the package Json file there we go we got the node man and under here we could say instead of running it with node just try to run with not man let's save and if we just say mpm runev just like like this and whenever we do some update let's first see okay so this is the result that we have let's delete this save it it is going to immediately restart it for us okay so that was the really first thing that we need to do creating a script and uh just using nman so that we can listen for any change in our server file let's create a rout this is how we can do let's just listen for the get method I'll say app.get if we go into the root route which is going to be like Local Host 5,000 port and if you say you know hello or maybe users then you would update this part to be users but for now let's just visit the homepage okay then we're going to get this controller function okay this is how you type it then you would get the request and response from the response let's just say send server is ready now let's try to visit this port or this domain there we go it just says server is ready and whenever you do some changes let's say 1 2 3 save it it's going to restart it and if you refresh this page it is just going to be live and now the very first thing we would like to create is maybe the products route so we're going to say products and it is going to give us all the products that we have in the database but we don't even have a database at this point let's try to create one which is going to be mongod DP so I'll open up the Chrome and I'll just say mongod db.com if you don't have an account go ahead and create one it is free to get started with no credit card required so I have an account I'll just sign in and once we sign in it should take us to the dashboard page so I just logged in and it took me to the overview page let's say create a new project and from here it's going to ask us for a name let's say uh m course and I will say next then this is going to be the project owner in this case this is going to be you let's say create the project then it's going to take us to this page let's say create a cluster and we would like to create one for free so I'll select this one the name could be the default and we could just say create the deployment and then it's going to take you to this page just make sure you copy the password and put it into the vs code so just put it here I'll be using it in a second let's comment this out and go here to say create the user and we'll take the connect to this database from our node.js application so we will select this one and then just say close I think yep let's just say close it should give us a connection string so from here you could say get connection string and it's going to give you this connection string that you can copy and we're going to paste it in into a file called EMV let's say mongoor Ur and just paste it this is going to be the connection string which we can use to be able to connect our database now for the password placeholder what you'll be doing is cut this from here and paste it just like this and for the database name let's say this is going to be products we should be putting it before this question mark there we go let's save this file Maybe delete this and save and I think there is nothing else that we should do we can close this uh maybe one more optimization we could just go under the network access and from here you should be able to see your IP address listed now it might change so it is not going to allow you to connect to this database what you can do in the development it is just say allow access from anywhere which is going to be this access list let's say confirm this is going to take a bit time once this is active we should be good to go okay now that this is active we can go ahead and connect to this database so I'll just go into the database section uh and if we take a look at the collections we don't really have anything here because we didn't create anything so far now let's just try to connect to this one what I'll be doing is just maybe um so from here we would like to use this URI connection string and how can we use it right it is under the EnV file so if you say something like console log process. EMV and mongoor URI this is how we called it right if you save I mean if you save this you're going to see undefined in the console you cannot access to it by default that's why we installed this package called EMV so we'll go here and then just say import EnV from thatv package and we're going to call the config function so let's say that TMV config now if you save you should be able to see this content on your terminal that means you can access to it and just read it so we'll be using this to be able to connect our database I'll create a folder called config and inside I'll say db. JS let's create a function and I'll just export this let's say export con connect DB this is going to be an Asing function and here we could have a TR catch in the try we'll be using package to be able to connect our database so I will just Auto accept this and walk you through we don't really need this objects these were needed in the past but not anymore um okay so I'll go ahead and just import the mongus at the top let's say import mongus from mongus so this is the function this is basically going to be running to be able to connect to our database by using the connection string that we have um um instead of maybe using this MV here we can really copy this and put it here because I think we're not going to be using it in this file um even if you do so if you put it here you can still access to it from here so maybe this is what I'll be doing just have this file as it is and have mymv configuration in the server.js okay in the catch case we could say I don't know let's say console log the error with error message and we can just say process. exit with the status code or I mean status code of one that means there was an error so let me just put a comment one code means uh a failure right but zero means success and here since we are in the catch this is going to be uh a failure right let's say process code one means exit okay I'll just leave it for you so that you can have it in the code base this is going to be the function and we'll like to call this as soon as we listen to our application I'll just say call The Connect DB function and just make sure you put JS at the end up here so that it doesn't crash now let's try to save this file and see it from our terminal this is going to take a bit time let's just wait it should say server started at local host and mongodb connected there we can see we can also delete this um console log from here um but yeah we just make make sure that we can connect to our database which is hosted on mongodb uh Atlas okay so with this we can connect to our database and now maybe it is time to create some collections which is going to be products right because in our application we would be storing some products and before we try to write any code let's just try to understand the difference between tables and collections so you might be asking why don't we have some tables here but instead we have collections well it's because mongodb is a nosql database and something like MySQL or postgress is a SQL database that means they store data in the tables right they have rows and columns but instead in mongodb we have collections and inside each collection we have documents so just to give an example let's say we have a collection called uh let's say products and under the products we could have multiple different documents right let's just say we'll have one two and three different documents one would be a smart watch right I'll just duplicate this let's say we will have earbuds and we will have some I don't know let's say say shoes right so each of them called as a document so I'll just say document and each of these uh like let's say a product so this uh I'm sorry so what we call as products is going to be the collection right I'll just duplicate this and let's say this is going to be our collection and maybe in your application you would like to also have a collection for the users right you would say you like to have one more collection say is going to be called as users and for each user we will have a document so whenever whenever a user sign up you would store it under a document so one could be for John Jane Bob Etc so I think this makes it clear that uh the difference between uh the SQL database and nosql databases where they store the data in tables in rows and columns but instead in mongodb we have collections and you can create multiple Collections and each collection is going to have multiple documents and to get started with we'll be creating a products collection and to be able to do so we're going to create a model by using mongus this is the package that we have installed that is you know under the package Json mango package so what you would do is just create a folder called models and you can really just give it a name so you can say this is going to be the product model so you could say product. JS right this is one convention that you could use the other one is just to make it uppercased and the other one that I'd like to use is just say product. model. JS so even though logo changes this is just a regular Javascript file and nothing else um you can use any Convention as I said you could say just product. JS but what I'll be using is just going to be the product let's say product model. JS and now let's just try to create our product model I will say let's say import Mangus from Mangus then first we need to create a schema so I'll say product schema and we'll say mongus do schema and just open up this object and you can put new at the you know at the beginning or you don't it just works in either case let's in this case put it and here each product is going to have a name a price and an image so let's say name and open up an object so that we can really give our requirements let's say type is going to be string and required field is going to be true so if a user wants to create a product they should definitely provide the name otherwise it is going to give errors let's say there's going to be a price field for each product type will be number number and this is going to be required as well and then after the price lastly we'll have the image and this is again is going to be type of string and required is going to be true now one more optimization or not optimization but really an option that we could add let's say put this object you will say time stamps is going to be true so whenever you create a product this time stamps just make sure that it has the created at and updated ad fields on each do ment so this is um just something to keep in mind then maybe I can just leave it as a comment here and now that we have a schema depending on this schema we'll like to create our product model so I'll say const product and then this is going to be equal to mango. model and this is how we type it product and product schema and finally we'll just say export default this product because we'll be using it in different file FES that we'll have later in the video so basically this says to Mangus that you should create a model or a collection called Product and this is the schema that you should take a look so each product should have these fields that we have provided and one more question that you might have why don't we call this as products but instead we call it as product it is uppercased and it is singular well it's because mongus is going to take a look at it and it is is going to convert it to be something like products right this is going to make it to be uh plural and just take the first letter and make it lowercased this is the so like this is something that mongus will handle for you it just wants you to put the singular and the capitalized version of it okay so this is the entire file that we would need and once we create a product you're going to actually see in the database we going to get this products collection and I'll will mention this just in second let's save this is going to be our product model now we would like to create product models I mean like product documents right let's create an endpoint for this I will say if we visit the products with the post method right because whenever you want to create something then you would use probably use the post method so that you can really send some data along with the request I will go here and just try to uh put my function log check okay so just a quick pause here for those of you that don't know what is an API in the first place let's try to understand it pretty quickly it's actually pretty simple than you think well API stands for application programming interface that sounds really complex but basically it is just that man in the middle so let's take a look at this analogy that we have when a customer goes into the restaurant they just give a request right they just say hey give me this order and waiter takes it bring it to the chef right to the kitchen and get some response back and navigate it back to the client so this is all it does in this case we have a user with a browser let's say they want to log in or sign up in this case let's say they're trying to log in they send a request or API and API just checks for the credentials does it match with the we have in the database right it's going to take a look at the username the password if they are correct it's going to say in the response hey you can log in but else hey you cannot log in right so it is that men in the middle uh it just lets two different applications to talk with each other right we have our database application let's say or the server and we have our react application on the client it just allows it to uh like communicate with each right and in our application we'll like to build an API for the products so that users can create products delete them update them or get all of them they are going to send a request or API and this API is just going to work with our database either create it update it delete it or get it from there and send their response back to the client so this is the entire Logic for an API in the simple terms I hope this makes sense and now let's just try to move on with the video now let's go into the function body and just maybe make this function to be asnc so that we can use a keyword and first I'd like to get the product let's say product this is going to be coming from the request. body which is something that user will pass right so this is the user body uh like uh let's say user will send this data right this is what we just extracted from the request. body and we can just check for the requirements so I'll say if product do name is empty this is how we can do it or if product. price is empty or image if any of them are not provided we could say return a response with the status code of 400 here we say Json of success of false and message could be please provide all fields and if we pass this if check that means user passed everything to us we can create a new product so I will say a wait um maybe instead of saying await let's just say new product right this product is coming from the product model. JS file that we just created so it is this product object then you'll say product and put the product body that we just got from the user it has the name price and image and then we can create a try catch in the try I will say await uh new product Dove this is going to save it to the database and once we do so we can say res. status of 2011 which means something created and success of true and for the data we can just return the new product just like this and in the catch we could console log something for debugging purposes let's say console. error and let's say error in um how did we call it let's say create product and we can put the error. message right okay just like this and from here we could say res. status of 500 successful false and server error just like this and also we are using 5 100 status code because this is an internal server error right um what we can do is maybe just save it and try to test this out to be able to test this out without having a front-end application I'll be using Postman desktop application so you can go ahead and install it for free I already have it so I'll just uh maybe open this up so this is the desktop application that we have so under the workspaces I have bunch of different different workspaces for the previous tutorials let's try to create a new one I'll say blank let's say next give it the name I'll say learn crash course and let's say this is going to be only for me let's say create there we go now we can create collections let's say one collection for the products because this is what we will be testing let's say products and we can add a request into here so I'll say add request we can give it a name so I'll say create product or maybe just create doesn't really matter then let's save change the method it's going to be post method because this is how we configured it let's see okay we said this is going to be a post method to the products I'll go into the postman our URL is going to be HTTP Local Host 5000 slash products now one more uh best practice that we could do is just prefix it with API so that we know this is our API service I'll go ahead and prefix it with the API and just make sure you put the slash okay just like this save this file now we can really send our product data I'll go here under the body and under the role just make sure you select the Json now whenever you send something like some Fields let's say name is going to be smart watch let's say price is going to be I don't know let's say one 23 right N9 or maybe let's just make it like this let's give it an image and for the image I just said example.com image now to be able to grab this data we have used this request. body but to be able to make sure this works we need to use this configuration up here I'll say app. use express Json so this is a middleware that allows us to you know uh parse this request. body so let's say allows us to accept Json data in the body right in the request. body okay so this is what we call a middleware and middleware is just a function that runs before you uh send their response back to the client right so this is the function that we just used now if we save hopefully we should be able to test this out I'll go here and let's say if we didn't provide the image okay we just have name and price let's send it it should say something like success or false please provide all the fields let's put the image and send it now there we go success of true and we got the data back which is something that created in the database let's take a look at it I'll go into the mongodb to say refresh refresh this page under the collections there we go we have our products with I mean products collection with one product that is just being created it has underscore ID field this is what mongodb creates by default then we give name price image created that and updated that we got this because we said that um we'll be using this field right time stamps of true and even though we call it as product as single now we just have have it as products so these are the things that I mentioned previously and now we can see it in action now we can create a different endpoint so that we can really delete a product so in the now uh like how do I say it you might be asking uh why do we put all of our functions into this file couldn't we create a different folder and have them and just make this file a little bit more organized well you're absolutely correct and this is what we're going to be doing for now just to keep this a bit more beginner friendly I'll put everything into this file and I will have an optimiz I mean optimization uh section where we can really make this code base a bit more clean okay so this is something just to keep in mind let me just zoom in we're going to create a different endpoint sorry let's say app do delete which is going to be for the delete method let's say SL API SL products and to be able to delete a product we should pass an ID right so we're going to let's say we want to delete this one we are going to get the ID copy it and we're going to paste it to the endpoint right we just say delete this product and that's why we need to pass this ID now to be able to get this ID we're going to be using this um so like colon and ID this means this is going to be dynamic this could be any value that user can pass and let's say we're going to have a controller function for this async request and response call this function okay here we would like to just delete it so I will go into the function body and what I'd like to do is just get this ID from the URL right I will say const and destructure the ID coming from request. prems so we call this as ID because this is what we passed here if you say something like hello then you would say hello to here as well but since we're using ID this is what we called it let's say console log the ID just to see it in the terminal and let's create an endpoint for this as well I mean a request so I'll delete this this is what we had previously we can leave it for the create product um request right just save this file and say duplicate this maybe we can close these okay instead of create product copy let's say delete product let's change the endpoint or the request API products if I just put one two three save it and send it now it says like keep loading because we didn't send any response back take a look at the terminal we should be able to see the ID this is what we passed right if you say 1 2 3 4 and let's say send it we're going to just see it in the terminal so this is how we can grab it and depending on this ID we're going to check uh check for it in the database so let's say um maybe just delete this and say try and catch in the try we will say await product. find by ID and delete so we're going to pass the ID into it then let's say res. Json success of true maybe we can send a status as well let's say status call this function 200 Json of success of true and message product deleted let's save and just try to get this ID from the database and paste it here and I will just say send it okay so it says product deleted let's try to refresh this and it should be gone there we go there are zero results under the products collection now what we can do is just to handle this case if user pass something like 1 two 3 and send it so this doesn't send us any response back right maybe we can handle it under the catch let's go under the catch just say res. status4 I mean 404 product not found let's just say send there we go we just hand out this case as well under the uh you know under the catch block now let's try to create a couple of different products so that we can really get them so let's shrink this I'll say Smartwatch send it it has just been created let's say SmartWatch 2 we can update the price and let's say three just to make this work now we're going to create an endpoint or maybe a request from here let's say duplicate this one it will just say get all products okay we're going to save this make it to be get method and this is going to be our endpoint we'll just say API products with the get method it should give us all the methods that we I mean all the products that we have let's save this and save this one as well close this so we'd like to just um create this endpoint right I'll go into the vs code okay maybe up here before the create I'd like to just create create a get method let's say app.get SL API products we're going to just find all the products that we have in the database let's say try catch and the try con products which is going to be coming from our product model let's say product. find and if you pass an empty object this means basically fetch all the products that we have in the database and this is what you like to have let's say res. uh maybe status of 200 Jason of success and for the data we can return the products in the catch let's just put a console log I'll say error and uh fetching products and res that status of 500 with like server error right so we are putting this console logs just for debugging purposes in the terminal we should be able to see those let's put a console log for this as well let's say error and deleting product now we can uh just test this endpoint I'll go here just say give me the products in the database I just had three different products right so is the first one second one and the third one and the data is just the exact same thing that we put Smartwatch one the two and the third one with the related prices okay the very last Endo that we need is to just to be able to update a product so let's maybe duplicate this one as well here I'll just say update a product let's say this is going to be a put method you could also use patch for you know updating but we'll go with put in this case and to be able to update a product we'll like to pass the product ID right so we'll just go here and put some ID for the product this is the in point that you will have and if you just see this doesn't update to put method if you save this file it should update it let's try to create this endpoint pretty quickly I will shrink all these and it the uh below the post method I'll say app. put you can really put the patch as well so you would use the patch method when you just update some fields on the on the resource and if you're updating all the fields then you would put the put method this is how it known but it doesn't really matter uh that much so I think it is not really crucial to use put or patch at least in your in your personal projects right let's say SL API SL products and the id id of the product that we'll like to update we're going to have this async function let's say request and response this is what you'll like to call and from here we'll just try to first get the ID from the request. prems just like what we have done under the delete method and we can just say con give us the product uh under the request body so this is going to be the fields such as name image and price whatever the user wants to updates he might want to update all of them at once or just some of them right and to be able to update it we will just say try and catch in the try we will just say await product finded by ID and update there we go we just have an auto complete then we're going to put the ID of the product and the fields that you like to update so we're just going to put the product object that is coming from the request. body and you can put one more object called new tro and if you hover over this it says what this does well basically uh by default this method is going to return you the old document right before the update happened and if you say new is going to be true then it is going to give you the updated uh object right we can just say con this is going to be the updated product and we'll like to send this in the response I'll say res. status of 200 success of true and we can return the updated product then let's say res. status of 404 in the catch case or maybe let's say 500 Json of successful fals message server error this could be if you would like to handle the 404 case let's say user just pass an ID something like one two three which is something that you don't have in the database so you could say 404 error and we can do it before the try let's say if this is how we can do it let's say mongus do types object ID if it is not a valid ID that user is sending so you would say if it is not valid by putting this bang operator right in this case we're just going to say return rest. status or 4 44. Json success or false and we could say invalid product ID or something like product not found right you would give some kind of message that user knows the ID that you pass is not valid and I think this error handling could be a bit more better under the catch but this is also fine we just say there was an server error that we couldn't really handle but most of the time we'll be hitting this part uh probably the idea will be there because they're going to be deleting it from the front end application okay so this is going to be our endpoint I think um so they're not going to be deleting by the way we are in the updating case and the ID will be always in the front end okay so let's try to save this and just test this out I like to update the first product that we had let's take a look at it in the database the name is Smartwatch right I'd like to make it to be maybe Smartwatch one I'll get the ID and go into the postman I'll put the ID and for the body I will say the name is going to be Smartwatch one and this is the only place I'd like to update let's say send okay success of through let's refresh our database we should be able to get that update okay there we go and let's say you would like to update all these fields I will say maybe use control Z to bring this back Smartwatch update and price could be uh let's say just 99 in example.com image. one let's say it is just going to go ahead and update all these fields that you can see from here or from the database okay so Smartwatch updated the price and then the image so everything seems to be working what we can do is just maybe make this code base a bit more modular right at this point this is getting out of hand where we just have um all of our methods here what we can do is creating a routes folder and create a product route so a product you can just call it as d JS as I said I'd like to just keep this convention that's why I'll say route. JS and this is just a regular JavaScript function even though we have route as the extension it is just the name and not really the extension the extension here is Javascript okay so what I'll be saying is just import Express from Express and let's say uh con router express. Router and you would say export the default the router now we are going to have all of our endpoints in this file actually so what I can just do go here and cut all of them we have delete put post and get cut all of them and put it here and instead of app we are going to call them as router because this is what we have so I will just say contrl d twice or maybe three times so I just selected all of them I'll say router okay there we go now this should be working but we need to update this file as well so I'll say app. use let's say slash API slash products in this case we'll like to import a rod let's delete these because we're not using it let's say import product routes from the routes folder we have the product draw. JS file okay we're going to put it into here and let's also update this file we're going to delete this API part this products part as well right I'll just delete all of them and I'll explain what this means basically just follow along with me we're going to delete all of these sections oops so we should be deleting this part okay let me just put them side by side and just try to explain but before that let's try to import this product and just make sure we put JS at the end and also just import the just like this okay let's put them side by side just try to understand what we just what okay like what did just happened when we visit API SL products slash you know just nothing we're going to call this function and if we visit slash again with the post method we're going to call this function right and if we visit like sln ID we're going to call this function and same for this one but with the delete method so everything that we have in this file is going to be prefixed with/ API SL products let's say if you want to get all the products um this is how it's going to be prefixed slash API let's say slash products and now in this way our code is a lot more clean because in the server.js file this is the only thing that we need to put for the product routes so whatever you put here uh let's say you put hello then this is going to be prefixed with SL API SL products okay let me just make sure that this is completely clear I'll just say add a new request that is a get method and let's say you would like to visit SL API SL products SL hello then once you s this it is actually going to go ahead and hit this one because this is the route that we have/ API SL products SL hello with the get method and like this is what we have just done and I hope it makes sense and obviously we don't need this method so we could just say delete this one now in this way our code is a little bit more clean but not completely right this file is just getting out of hand if we have multiple different functions what we can do is just a controller for all these functions so I'll say under the back end we'll like have the controllers and the controller that we'll have is going to be product Dot controller.js and again you can delete this do controller part if you really want to um the first controller I'll have is to get products so I will cut this from here and just say export con um you know like get products which is going to be an async function that I just paste and let's try to import the product model the JS let's say create the product and we can import it by the way let's say get products from this file right let me just shrink this maybe close these okay and let's try to create this function which is to create a product right I'll cut it I'll say export con create product and equal to this value that we just had let's save this one as well then we'll go here to say create product which is coming from this file let's say update one cut this I'll just go here export const update product and we should paste the value to here right this is the function that we had previously and we also need to make sure that we imported the mongus in this file okay let's say update product and finally delete a product let's shrink all of these con delete product is going to be equal to this function that we had let's save and import this now we can delete these because we are not using them and okay I hope this makes sense at this point in our server.js we created one rout for products once we hit here we're going to be calling this function or this file we're going to check if it is a get method post method put or delete for all of them we have different uh functions right and we check for the URL and these are going to be prefixed with/ API SL products and for each of them we're calling the related function that we have created under the controllers folder right I hope at this point this makes sense and we can just test this out it is working exactly the same as before let's try to update this to be smart I mean Smartwatch updated to be 1 two 3 updated it it should update and we can take a look at it in the database it should be the latest value we just give and we can delete one let's copy this ID go here and just try to delete this okay product deleted you can take a look at the database let's just make sure that it actually worked we had three different values but now we just have only two different values right right or documents we can get all of them here we go it just works and we can also create a product I'll say instead of Smartwatch let's just say shoes can give any value and just create it it should create it in our database okay now we have three different products with the latest one being added so with this I think we have just created our backend part right this is how easy it is to create an API basically we have a rout for the API products and for each Rod we just put them under this file with their methods and their related endpoints we have the controller functions for each of them we are using mongus to be able to you know communicate with our database as well as this product model that we have created so that we can really get some products update them delete them um then other than this we have the configuration for the EnV right we have this EnV file we can read this content just because we configured this uh function or we just call this function right then we have the database file where we can connect it with this function which we are using it in this uh in this callback function and I hope all this makes sense now um um the very next thing we'll be doing is building the front end part and I'll see you in the next section okay so welcome back in this section we'd like to build our front end application but before that there is just one or two things that I just want to update quickly instead of using this port as a hardcoded value what I'd like to do is just get this value from the environment variables which is uh which is a well-known practice so let's just say Port is going to be 5,000 right let's save and here let's just grab it I will say process let me just make it like this EMV do Port which is going to be equal to this variable let's say port and if this is not available let's say you forgot to add this right if it is undefined or something like that then you can just put this hardcoded value as a fallback now we can really use this down here right and let's delete this you could just say this is going to be coming from the port variable so that was the first thing uh we haven't changed anything in terms of functionality it is still listening on the uh Port 5000 but instead this is coming from the environment variables okay now let's just try to see in the terminal I killed it let me just say mpm run Dev and we should be able to see this text with 5,000 and let's just to wait for it okay come on so maybe it tries to start okay there we go now it says 5,000 if you go make this one let's say 5,000 And1 save this save this file again it's going to restarted and it just updated that means this value is coming from the actual MV file okay now let's save this so that it is 5,000 again right there is one more thing that I just want to update under the controllers um under the delete product here we just return 404 instead what I what I would like to do is just make this 500 status code and for the message I'll just say um server error right just like this and I'll go up here and I'll get the actual this part so if the ID is not a valid ID we could just return that error so if it is invalid right we just negate it um we return 404 inv valid product ID okay this is going to be it for it let's save and now we can actually go ahead and build the front end application so I'll just open up my terminal let's create new one I will CD into the front end and I will say mpm let me just give a bit space create V at latest and I'll just put do at the end so this dot means um initialize it under the current folder which is the front end right let's say react act and JavaScript if you really want to you can go with the typescript just to keep this as beginner friendly as possible I'll go with the JavaScript option once we click it now it is going to create all these files and folders for us now it says run mpm install um which is going to give us the note modules folder that we would need and while this is installing let's take a look at the chakra UI so let me just bring my uh Chrome right here it will say chakra UI which is going to be our UI component library that we'll be using just to speed up the process so let's say get started it has a bunch of different components let's take a look at some of them um like that are accordians tabs buttons dialogues toasts and we'll be using uh a bunch of different components and it's is just going to make everything super fast for us and now let's say getting started right click to it and below here we should have the V option and once you collect it you should be able to copy this and paste it into your terminal and I don't know why this takes so long but let's just wait for it once this is done I'll just be right back okay so looks like it has just been installed I'll just paste what I have copied I'm going to press enter and it's going to install all these packages so that we can initial initialize the chakra UI let's take a look at the next step it is the provider setup so we need to wrap our application with this chakra provider I'll copy this and go into the main. jsx okay so what we have here is the app component which is the starter place right the entry point for our application um here they just want us to wrap our app component with the chakra provider so that we can use the components that are coming from this chakra uh chakra UI right okay now that we wrap it let's try to import it which is coming from here right I'll copy it paste it there we go now we just wrap our application with it we can delete the index. CSS and app.css we're not going to be using those files okay just like this and let's go into the app.jsx delete everything basically and here I'll just say uh maybe just import a button from Chakra and let's just say hello into it let's say button coming from Chakra and let's try to run this mpm run Dev which should open open up on this port I'll just control click to it there we go and we should be able to see a button okay so this is how it's going to look like maybe in your case it is uh light mode in my casa in my case it is dark but we're going to fix it now the very first thing I think we'd like to do is just going to be building the Navar component so this is how it's going to look like this is our Navar component basically uh we have one element on the left right and one thing on the right which is like two different buttons when we click to this one it is going to take us to the create page and this is going to just toggle the theme it's going to go between light and dark mode um so yeah let's just try to build this let's see here go into the vs code shink this uh maybe delete this now in our application we like to have multiple Pages such as homepage create page and maybe after this tutorial you could add more pages to be able to make that work we can install this package so I'll just open up a new terminal CD into the front end and I'll say mpm install react-router-dom Okay so to be able to make this work we should go under the main. jsx and w our application with something called browser router component right let's just w