 Hey, welcome everyone. Today we're going to build a simple crude Mern application covering both the backend and the frontend. On the backend we'll develop 5 API endpoints for data retrieval, specific record queries, record updates and deletions. On the frontend we'll focus on displaying data, adding new records and updating existing ones. We won't cover CSS styling in this tutorial. I've also covered how to publish a Mern project on AWS Lighttail and render in previous videos. Hey, welcome everybody. I've already created a new folder called Mern and inside this folder is where we're going to be creating our server and our client project. There are going to be two different projects but we're going to store them in one folder so they're easily accessible from Visual Studio Code. We're going to create the server, so new folder server and we can open this Mern folder inside Visual Studio Code. On Windows there is a shortcut by doing left shift right click and open in terminal. Then we can do code period and this will open Visual Studio Code. On the left side we have the Explorer and as you can see we are in the Mern folder and we have the server folder that we just created. So we can either use the PowerShell from here or we can use the terminal from inside Visual Studio Code. For me because I'm zoomed in I need to press on the free dot terminal, new terminal. As you can see we're currently in the Mern folder which is correct but we need to navigate to the server folder so we can initialize a new project. In order to do this we can do cd server and from here we can initialize a new project by doing npm init dash y and the dash y flag is just going to skip all of the questions and create the package.json file press. Now let's clear this and let's install all of the packages that we need. So I'm going to do npm i for install and then we're going to do course dot env express and Mongoose. I will explain every single package as when we use it in the project. Let's clear this one more time and I'm going to install a development package called node one. So npm i for install and then this is going to be dash dash save dash def node one. Node one is going to help us restart the server every time we make a change in our project. It's just a nice way of developing in no jail. Let's minimize this and the first thing that I would like to do is go to the server folder and create a dot env file. Inside this dot env file later on in the tutorial we're going to be storing the MongoDB connection string which will contain all username and password. So we need to keep this safe and in most cases people will publish this project on github and you don't want to expose your username and password. So in order to do this, so all we can do is create a new file called dot githignore. Inside this file we can tell which files and folders to ignore. So I'm going to do dot env save this and we're good to go. Now let's open the package dot json file and have a look at it quickly. So from here we have the name version description and if we look below we have the script which I'm going to look in a second dependencies and development dependencies. Now as of currently these are the dependencies that we're going to be using today and these are the current versions. In future they're most likely going to change so note that there might be breaking changes and you might have to google the errors. Feel free to comment below if you have any problems but another way is to install exactly the same versions as the one I have. You can literally copy this and then do npm install and it's going to install those versions for you as well. And the last thing that we can look into is the development dependency which is Nodemon. Now let's focus on the scripts super quickly. Scripts where we can basically tell a server to start a project or we can tell Nodemon to listen on local changes and restart the server. So from here we need to add two more. The first one is going to be start and the start is going to be just index dot js. This is going to be kind of like the brain of our project. Index dot js which we're going to create in a second. So when you publish your project online you normally use the start script and it's going to start the file that you want. But when we develop locally we can do another one. You can call it whatever you like dev for development and then from here I want Nodemon to listen for changes. So I'm going to nodemon and then index dot js which is the same file. So essentially we're going to start a script called development and this script is going to run Nodemon and it's going to listen for changes. That's pretty much it. Save this and close it. Now let's create or index dot js file inside the server. So index dot js and from here we can start including all of the libraries that we need. So the first package that we need is going to be dot env so require and then this is going to be dot env. And as I mentioned earlier this is going to contain or MongoDB connection string. So let's do config and we're done. Now let's add the other packages that we need const course equals require and we require course. Course is cross origin resource sharing which is going to allow or react application to reach or server. Without this we won't be able to fetch any data because technically speaking there are two different websites and they won't be able to talk to each other. Now we need to do const express equals require and then we require express like so express is what we're going to be using to start or server. It makes things so much easier and there is a lot of packages that you can use with express and that's pretty much the basic. So let's create or server first of all comes up and then express and we can start this function. If you hover over express here you will see that this function creates an express application and then we can do const and put a port number for application and then this is going to be process dot env and then port. Now this is mainly used for when you upload your project on a server online and you want to use the default port number because they vary different companies use different port numbers but when we're developing locally we want to set a default one which is going to be 8000 and that needs to be different to the react one just to mention. Now let's create a super basic route and see whether we can start the server so I'm going to do app dot get and this is going to be a home route. So if we don't put anything here this is going to be home but if you wish you can put about and so on. So that's going to be it and then from here we can do request and the response. This is going to be another function and inside here we can do something like res dot json and then maybe hello mate. And now we can start our server by doing app dot listen and then we can listen on the port number here and then this is going to be another function like so and inside here we can do console log and in single slanted quotes this is very important because it allows us to add template literals. We can do server is running on port and then we can bring the port number with the dollar sign curly bracket and then port like so from here. Let's see whether we can run or server. So I'm going to go on the terminal one more time in fact I'm going to use the shortcut which is control and the hot key on my keyboard I believe and from here we can do npm run dev which is the development command that we added inside package dot json. As you can see node one has started the node index dot js file and it's running on port 80,000. If I was to come here and make a change let's say we make a space and save it you will see that node one restarts the server straight away which is exactly what we want. I'm going to go back here and let's try to visit or server in the browser. So if you open the browser and if you go to localhost of port 80,000 you should be able to see hello mate and that's the first step of creating or server. Alright let's minimize this. Our application is running which is amazing and we can also create another route for example here which can be kind of like or 404 route. So after I get and if we put stuff this means that everything else it's going to maybe do just json 404. You can also do it as dot status send status or whatever. So if I was to go on the browser refresh this is still work but if I go to slash about let's say you will see that we're getting not found which is awesome. Let's go back and let's go back to the project and now let's set up some of the middleware that we need. So first of all we've required course but we haven't used them. So somewhere around here we can set up all middlewares and to allow course the very basic we can do is app dot use and then we can just do course just like we initializing the express application here we're doing the same with course and this is what's going to allow the cross origin resource sharing. We're also going to pass json data in our body of application and in order to be able to do this we can use express and we can set up some middleware. So app dot use and then express dot URL encoded and then we need to put this setting inside here which is called extended to true like so and we want one more app dot use and inside here we can do express dot json like so and say make sure that your application is running you can just refresh the browser or you can look into your command line here and if everything is good we can continue. All right now is a good time to create our database and connect it. So let's go back to the browser go to MongoDB.com click try free if you haven't got an account yet from here you can use the form to sign up or you can use sign up with Google. I've already got an account so I'm going to click sign in. Okay once you're in your dashboard should look something similar to this if you haven't created any projects yet you might just have a big green button and all you need to do is create a new project for me I can click here on the drop down menu and click new project. Let's call this one man underscore one because I've already got a man project and I'm going to click next from here we need to select a project owner which is going to be me and we need to build a database now we can choose of where we want to deploy or database and I'm going to choose the M zero cluster here and scroll down. I'm going to leave this as default to AWS but you can choose whatever you wish and then I'm going to change the region to be the closest to me so in this case maybe so in this case maybe I can use island and for the name I'm going to leave it as default but feel free to change this and then click create. In this step we need to create all username and password and if you scroll down a little bit more you should see that they've already created a username and password that I can use so I'm going to copy the username paste it inside the dot EMV here and I'm going to copy the password as well and paste it inside here and now let's create the user after this I have my local environment selected from here into your IP address so you can connect to the database from your computer and then finish and close while the cluster is provisioning this is going to take a couple of seconds we can go to network access and I just wanted to show you that if you wish to you can delete your current IP from here and you can add another one and you can allow access from anywhere and confirm now this is going to allow me to connect to the database from anywhere. All right let's go back to the database while this is provisioning we can click on connect and then select MongoDB for VS Code from here copy the connection string copy and then go back to your dot EMV file and we need to create a name that we can use in our application so in this case I'm going to call this MongoDB underscore URI and don't make any spaces around here and then paste your connection string now if we focus super quickly on the connection string you will see that we have the username which is already added and then inside here we have the password so we need to replace this with the password that we created earlier I'm going to paste in here let's remove ready and then here at the back select a database that we want to use in this case I'm going to call my database box and save let's close the dot EMV file now and let's have a look at how we can connect to a database so let's open the explorer and inside here we can create another file called connectDB and then this is going to be a dot js file so from here in order to connect to a database we need to require Mongoose so const Mongoose equals require and then we require Mongoose and now we need to create our connection function so const we can call a connectDB and this is going to be an asynchronous function like so and then inside here we can do the logic before we do anything though I want to export this function so we can use it inside the index.js file sometimes so files get a little bit longer and then we forget to do it so module dot exports equals and then the function name which is this one here close this and now we can do the functionality so since this is a an asynchronous function we can do try catch and then inside the trial we can try to connect so the first thing I'm going to do is set a Mongoose setting which is going to remove some of the warnings inside the command line that we don't want so Mongoose set and from here we can do strict query and this needs to be set to false and now let's do our connection so const com I'm going to call it and then this is going to be await Mongoose dot connect and then we need to connect to the string here that we've added so potentially you could copy this and put it but that's not really safe you want to be using the dot tmv file instead and we can copy the name from here MongoDB or right and reuse the inside here by doing process dot env and then the name that's it and that's going to be bringing the string and now we can do console.log and then inside here we can do database connected and then we can use template one more time because I'm using these slanted quotes we can do con which is the constant here and then dot connection and then dot host that's it and now if you wish we can console log the error which comes from here from the catch statement and we can also terminate the process by doing process dot exit one and we're done okay this is all connection string created and now we can use this in or index.js file so I can go back and somewhere around here we need to bring this file first of all so I'm going to do const connect db and then this is going to be cause require and since this file is literally next to the index.js we can do dot slash and then connect db like so we don't need to specify .js or anything like that and now we can run this function so copy it I run it here by or middleware and that's it if we open the command line you should see that we have service running on port 80,000 and because I saved Nodemon refresh and now we have database connected and then the string now one thing that I wanted to show you is that if I was to make a mistake let's say let's open the .env file first of all which is a good one and if I was to change this let's say my username is wrong I'm gonna put ready and save now look that Nodemon did not refresh this is because Nodemon will not refresh when you make changes in the .env file so you would need to stop the process so control and x or now control and c to terminate the process and then y to press yes and now Nodemon is not running and I can rerun it by doing up and then npm run dead and now you should see that application crashed and this is because we're getting Mongo serverer but authentication authentication failed and obviously this is because I've messed up my username so I'm gonna remove this save and then I need to restart the server one more time and now we should be able to connect perfect let's minimize this close the .env close the connection db okay the next thing that we need to do is to create a model which is essentially going to be our first table on its fields if we go to the explorer here on the server let's create a new folder called models the model that we're going to be creating it's going to be called nodes.js we need to require mongoose so const mongoose equals require and we require mongoose then we can use the schema from mongoose by doing const schema equals mongoose.schema and now we can create a new schema by doing const node schema this is the name and then new schema and then inside here is where we can add all table fields so I'm only going to be adding two fields for this project and the first one is going to be title the type this is going to be where you can put type of array number string whatever you need so this one is going to be string and then we can set it as required quiet true like so and now if you want to create another field we can do comma and then the name of the field so description in this case and for the description I'm just going to put the type of string and that's it the last thing that we need to do is to export this module which we can do by the module dot exports equals mongoose dot model and then inside here we put the name of the model as string so node in this case and then the collection which is here node schema close this and we're done now we need to include this file in our main index.js so I'm going to close this and we are currently inside the index.js so here at the top we can do const nodes equals require and we require the file which is located under models and then nodes now we should be able to use this nodes model in order to interact with the database but before we do that let's insert some dummy data into the database and I've already prepared some which you can find inside the GitHub repo and then data.json if you copy all of this I've just created a couple of nodes here and if your server was running then if you go to the MongoDB website under collections you'll be able to see that under collections we have books and nodes so this is the database name and then we have nodes as the database table and the reason that we have books instead of nodes is because I'm actually reusing the setup of Node.js from my previous tutorial and the reason for this is because if you go to the .emv file here I have set up books we can change it to node or whatever you wish save this but we'll probably need to restart the server so if I close this super quickly yes at an npm run dev as long as this runs if we refresh our collections we should be able to see that we have node and inside the node we have nodes and now I can delete the box database table but then so now inside or nodes database we can go into insert documents click on this v here and then remove everything and paste the data that I've prepared to insert let's go back to Visual Studio Code close this minimize or terminal and let's create our first route which is essentially going to bring all nodes so what we can do is copy this one here make some space so we can focus on it I'm pasting here so this is going to be get all nodes so this is going to be a get route and you can and you can put the path as whatever you want I'm going to put an API and then nodes from here we can delete this make some space and we can make this as an asynchronous function we have request response inside here we can do try catch and then inside the try we can save the data into a const called data so const data and then we can do equals await and then we can grab the nodes model from here so await nodes dot find is the first query and by the way when I start typing you should be able to see that we have a lot of options in here such as find find by ID find by and then delete remove update and so on so we're going to be using find here and this is essentially going to find every single record in our database inside here we need to do is put curly bracket if data with exclamation mark so if we don't get the data we can throw an error so throw new error and then inside here we can type something an error occurred while fetching a note notes let's do that if we don't get an error we can do res dot status 201 on n json and then we can pass the data from here if we get an error then inside the catch here we can do res dot status of 5000 and then dot json and then inside here we can do error I'm basically using this to do to get what the error is and then we can put a message saying an error in fact we can just copy this like so and save that's going to be pretty much it for first route and now we can test it as long as your project is running and you don't have any errors in the console so now errors for me that's good and in this tutorial I'm going to be using this tool here called tender client you can go to extensions search return the client installer and it will come up in here there are also a lot of alternatives such as spaceman or insomnia if you wish to have an outside visual studio code but if I click on this essentially this is going to allow me to do different requests but first of all I'm going to click on collections and create a new collection so inside here we can click on this and new collection I'm going to give this a name of nodes and press enter here is our collection and inside nodes we can click on the free dot and do new requests and this is going to be or get or not here we go and this is going to be a get request which you can change from here so I'm going to put as get we need to put the year row in here so HTTP and in fact here it is but instead of books we put it as nodes HTTP column slash slash local host of 8000 slash api slash nodes and now if we press send we should be able to get the data from the database here it is which means that our first route is working and now we can do the next one so let's go back to the index.js and let's copy this super quickly and paste it inside here and the next one is going to be get node by ID in order to get a node by ID we can pass here the multiple ways of doing it but we can pass the actual ID of the node so for example this node has this specific ID they're all unique but we can pass in the URL and then query the database for it in order to do this inside here we can do slash and then ID you can call this pretty much whatever you like on the previous tutorial I call this slug but in this one I'm going to use the ID in this case this is going to be again a get route so we don't need to change anything else we just change the ID in here and we can grab the parameter from here by doing const node ID for example equals and then we can use rec which is the request dot params and then the ID so using the params ID this needs to match this basically if you change this to slug this needs to change the slug and then this is just a const that is holding the ID so now I can use this node ID to find the data so const data await nodes but instead of find we can do find by ID find by ID an insert here we can just put the ID from here and that's kind of like if I do right click and format super quickly that's a little bit better and now we can check for an error and if we don't have an error we can display the data and the same as before if we get an error in here we just display an error occurred while fetching it okay save this and now let's go back to or turn the client here I've got an open inside here let's have it like that and now let's copy an ID let's say from this one I'm going to copy an ID it needs to be a valid one that we have in the database and now we can create a new request here so new request this is going to be get node by ID press enter and then this is going to be a get route one more time so we don't need to change this the URL is going to be http localhost 8000 api notes and then we need to paste the ID in here so now if I press send we should be able to get a single book learn website development as you can see this works if I go to another one and copy this one here oops let's copy this and paste in here we should be able to get another one and if I make an error let's say one that doesn't exist 0 0 0 send you'll be able to see that we're getting an error occurred while fetching notes and all second route is done so we can close this let's go back to the index.js file and now let's do the next one which is going to be creating a note so for creating a note I'm going to copy this one more time and paste it inside here I'm going to paste it here and then this is going to be create a note this is going to be app.post this is very important then we're going to have api notes remove the ID just because we want to post on this route here and then instead of getting a parameter from the URL we're going to actually send the data through a body so this is going to be done from react we're going to be sending it through the body and in order to get the JSON from the body constructed by the const for example and then we're going to be sending the title so title and then we're going to be sending a description as well and this is going to be equals dot request dot body like so now we should be able to use the title and the description if we pass them obviously and insert them into the database in order to do this we need to modify our query here so const data equals await note instead of find by the this is going to be create and inside here in curly bracket we can pass the title and then with a comma we can pass the description and then we do the normal checks just like before and instead of while fetching data we can do while creating a note perfect and then that needs to be changed as well while a note if I do right click format document that's gonna make it a little bit better and now let's test it out so this is a post request let's go back to the tender client new request uh sorry inside here new request and this is gonna be create a note create a note and let's change this to post let's change the URL to localhost and then I'm gonna do notes and then to test this out we can go to body and inside here we can send title and the description adjacent we can put it like this title and then we can put new note comma and then we can do description this is a new note and close so now we can post this data to route send it and as you can see we're getting status of two one created and we have title new note this is a new note with a unique ID which MongoDB does automatically which means that if we go back to our database and refresh we should be able to see the last record here new note that we just added which is amazing so create route also works let's close this let's go back to index.js the next one that we need to do is update notes so I'm gonna copy this make a lot of space and this is going to be update a note so we're basically updating an existing note and in order to be able to do that we need to know which note we are going to be updating and in order to that we can use it through the URL so we can pass the note ID inside here just like before I'm going to put ID and now we need to grab this ID by doing const note ID equals request.params.id perfect now we also need to pass the newly updated title and description of the note so I'm going to leave this as it is and inside here where we have the query const data await notes we can define by ID by ID and update like so and now we need to paste the ID in here and then the data that we want to update so we're finding by ID which is here we're going from the URL and then we're passing the data and we're grabbing it from the body and we're inserting the new data inside here and that's pretty much it so an error occurred while updating a note and let's just change that save this and now we need to grab a note ID first of all so I'm going to go to the turn the client let's go here let's grab this let's send the first of all let's grab the one that we just created so I'm going to grab the ID of here let's create a new request this one is going to be update a note and then I'm going to change this to put oh this is very important I forgot to change it so this needs to be changed to put instead of post okay save this let's go back here so I'll change this to put locahose note and we need to pass an ID which we want to update so from body we need to put the updated information and I'm going to copy can I copy the information from here okay I'm going to copy this from the create note and I'm going to paste the inside here body json so new note I'm going to put updated and then this is a new note and it has been and it has been updated save this and now if I do send make sure that this is put send it and you will see that we're getting new note this is a new note and now to check whether this has been updated we can go to get all nodes all node by ID and let's check the one at the bottom and as you can see we have a new note updated and this is a new note and it has been updated which means that our put route is also working and we have one more so I'm going to grab this so I'm going to go back to the index.js file grab this here paste it around here and this is going to be delete a note by ID so delete a node by ID is going to be very similar we're grabbing the ID from the URL which is here then we don't really need anything else we're not going to pass any body data and we just need to change the query here so await nodes and then this is going to be delete one I don't know if there is one by ID fine by ID and delete okay maybe we can do this one actually so one by ID and delete and potentially we just need to pass the ID and this will delete the note and almost forgot one more time here instead of put this needs to be delete save it and now let's go to the tender client let's create a new request by ID delete a node by ID let's change this to delete and then local host and notes I do need to get an ID that we want to delete so I'm going to go to get our notes send this and grab the last one here which we added so I'm going to grab this ID for the test and then I'm going to paste in here and send this okay I think this is actually successful so if I go to get a note send this we should be we shouldn't see this note anymore so send them and as you can see this is gone the last note was gone which means that or delete route is also working and we have one two three four five working routes that we can use in pretty much any application so in the next step we can create or react project and interact with the data all right time to create or react project and in order to do this let's go to vid.dev and click get started scroll down a little bit and from here you'll be able to see the instructions on how you can get started so I'm going to be using npm and copy this and let's go back to Visual Studio Code and from here I'm going to open a new terminal so essentially we're going to have two terminals one which is going to be running or backend or no js server and then another one which is going to be running or react project so I'm going to right click here and by the way we are inside the main folder inside here and then I'm creating a new project by doing npm create vid at latest press enter and this is going to ask us for our project name I'm just going to call it client and press enter from here I'm going to choose react and then JavaScript and as you can see this gives us the instructions that we need to cd to our newly created client folder here so cd client install the dependencies and then run it so let's do that let's cd I hope that you can see like this okay cd client npm install and then press enter now let's do npm run dev and this should start the localhost under 5173 for me and I can do control and click on it and this will open it in the browser and as you can see we have a brand new react project in here let's go back to the project make sure that both applications are still running here and I'm just going to minimize this like so and by the way I'll minimize that with control and the add time on my keyboard let's close this let's focus on the client now which is all react project let's start by creating an environment file dot env dot local you can also have it as dot env but this is just going to be working locally for testing purposes and from here I want to create a variable that we can use through the entire application which will be also easy to update if we wish to publish a project so I'm going to vit underscore that's by the way you do need this and then your variable name and I'm going to call a server underscore URL and the server URL for us is going to be or server URL which is http slash localhost and then 80 000 perfect now we can use this variable inside the application let's close this and let's have a look at what we need to do so first of all inside the source folder we're gonna have all main dot jsx okay we don't really need anything here if we go to index dot jsx I've slightly modified the original CSS from here and I've added a couple of styles so I'm gonna remove all of this and paste my styles and I'll show you super quickly it's basically a quick modification from the original one from vit and I've made the input a little bit better and I put like super basic styles for the h1 the header the navigation footer logo and the notes they're like super simple basic stuff that's pretty much a have a look around and you see and let's close this so now that we have all styles inside here I'm not going to be using the app dot CSS and I'm going to remove it after this we can click on app dot jsx and from here we pretty much don't need anything so I'm going to remove everything except the open tags and the closed tags in here and also I'm gonna remove the app dot CSS which we could have used but it doesn't really matter and then I'm gonna remove pretty much everything from here as well we don't need we just need an empty application like so now in order to create different pages and navigate between them we're gonna need the react router DOM so let's open the terminal control and the at sign for me here where we have the client for me let's stop it so control and see to stop it and then let's do npm install and then we do react router DOM right center and we get to go now we need to rerun our project npm run dev and we get let's minimize this and let's include the react router DOM here at the top inside or app dot jsx so import and this is going to be browser router as router route and routes and I'll show you how this works in sec and this is going to be equals from react router DOM like so from here we can basically use the router route and route inside here the return router and inside the router is where we can paste all of our pages and we can put them inside routes so routes like so and then the routes are gonna be inside here which are essentially all pages and that's a route so like route like so we always need to create a route before we finalize this but also outside the router we always gonna have a header and we also gonna have a footer like so so let's start by creating our first route and we're gonna do this by going to source and then create a new folder called routes inside here we can create a new folder called home and then inside this folder we can call our file home dot jsx from here I'm going to be using an extension to save us a little bit of time and this extension is called if you go to extensions and search for ES7 react redux react native snippets then what we can do is here we can do rfce and press enter and this is gonna create the file for us so if we change this to big capital letter home like so and then change this obviously to reflect the function and or home should be working if I go back to the app dot jsx we can insert home from here so I'm gonna do import home and we can do from and then the folder is gonna be dot routes slash home slash home and now we can use this to insert it inside the routes and when we visit the path so path is going to be equals slash so slash is always the home route of our website you can for example do about and this is gonna visit the about but because we're doing the home page first of all let's do element and we pass the elements from here which is equals home but we need to open and close it like so and in fact we don't need to close the route like this we can just do it like so and that's it so now if I save this and if I go back to the browser you'll be able to see that we're getting header home and further so our home is pretty much sandwiched between them and now we can create more routes like this let's create one more just for the example I'm gonna go to routes create a new folder about and then inside here I'm gonna do about dot jsx and we can do rfce press enter this is gonna be a capital letter about like so and I can just do about we can paste some data inside here to make it look a little bit better so I'm just gonna paste an h1 and two paragraphs we also need to insert this just like we inserted the home route so I'm gonna close it let's go back to up dot jsx and duplicate this by doing all chip down let's call this about change this to about and then this needs to be about as well now we can insert the about route inside here by doing all chip down and then let's do about someone visit the slash about page we want to render the about save this to go back to the browser hopefully we should be able to see home changing to about now by doing slash about and you'll see that we're getting about and then the header and the footer stays the same let's fix the header and the footer now super quickly and in order to do them we can create them as components so inside the source folder we can create another folder called components and let's start with the header dot jsx and let's create the other one which is going to be the footer dot jsx for the header we can do something super simple rfce so it's importing react which is great we also need to import a link and nav link so import link and nav link and these come from the react router DOM so and now we can create links inside our header for this I'm gonna create a header html5 element and wrap everything inside it so this is going to be our basic header and we're going to have a link and this is going to be our logo link which is going to go to the homepage so I'm going to slash and then class name of logo which I've already created super basic on an inside here we're going to insert a logo which is actually going to be logo that was included inside the public folder so dot svg in order to include it we can do import and then logo from and then dot dot assets slash react dot svg let's insert the logo inside here by doing img and then this is going to be source we put the logo inside here and then you can put an old tag react js and then let's put some text react js and that's it for the navigation I'm going to do something basic nav and inside here we're going to do nav link instead and this nav link is going to lead to the homepage so home and then I'm going to do one more and then this is going to be for the about page let's keep it simple and let's do right click format document save this and now we need to insert our header inside app dot js but doing pretty much the same as this so import from and then we do dot slash components slash header and now we can insert the header inside here like so and that's it if you go back you will be able to see that we're getting the header and the links should be working perfect let's do the photoshop quickly because it's easy to do inside the footer let's do our fce this is it and then I'm going to change this to footer and then inside here add copy copyright and then with a little bit of javascript we can bring the date so new date we get full here yep that's looking good now let's insert the footer into app dot jsx by doing the same thing as the header import footer components for the ender tick let's insert inside here and that's it right click format document save and if you go back you'll be able to see that we're getting the footer on every single page that we have okay so our home page is going to act as our notes page this is where we're going to display our notes let's go back and open the folder routes home and the home file and we could create different components for it if you wish to just as an example so first of all let's copy and paste a little bit of text inside here you don't need to do that home and here we go just so we have something on the page and I am zoomed in quite a bit from here we can either create all the functionality inside the home page or we can separate there in a different component can do a bit of both if you wish so inside here let's create a new component which we can insert so I'm going to import notes from and this is going to be dot dot slash dot dot slash component and I'm going to call it notes we do need to create it but before we do that I'm going to insert inside here so notes and that's it so essentially we can create a component note and insert them inside here just so we can keep our home page clean so now let's create this component by going inside components and then we can maybe do it inside here and let's call it notes.jsx let's do our fce and then save hopefully if we go back we'll be able to see that we're getting a problem here notes notes so the dot dot isn't working from here and I wonder why so let's do it one more time this is going to be dot dot slash component slash note saver let's go back okay seems to be working so note is now appearing here and we can modify the code from here from the actual component notes here we go notes one two three perfect now we don't need to touch the home dot jsx everything is going to be coming from notes so let's close everything and let the fun begin so the first thing that we're going to do is insert use state and use effect so this is going to be inside here we can do comma use state and then use effect also I'm going to import link so we can link our notes or import link and this is going to be from react route to DOM and inside the function of note is where we're going to be building our logic the first thing that we need to do is to grab the get route which is get own notes which is essentially this http localhost of 80 000 api notes so we need to get grab this in order to fetch the data but if you remember if we go back to our client project we inserted this as a variable inside dot or inside or dot env the local file and we can use this URL so we don't have to repeat yourself and we have one single file where we can change the URL if we wish to upload it on a live server so let me show you how we can grab the URL from here so I'm going to do const and I'm going to do base URL and this is going to be equals in single quotes here dollar sign and then import dot meta dot env and then dot bit server URL and then from here we can add the rest that we need for example api slash note if you want to grab all the notes and that's it so this is pretty much how we can grab the URL and if you wish to you can do console dot log and check it out and you should be able to see the server URL appearing in the console I'm going to remove this and now we need to create a state where we can store the data and then display so we can do const data and then set data all data is going to be stored inside data but we're going to be using set data to push the data inside data it sounds confusing because it is and then use state is going to be an empty array like so we're also going to handle the loading and we're still going to do very basic error handling so I'm going to do const and inside here we can do is loading and then set is loading and this is going to be equals use state and then this is going to be set to true we're going to do const one more time era set era equals use state and then this is going to be set to no and now we can use use effect from here to wrap or fetch and go and grab the data so let's do use effect like so and inside here we can do or fetching now you can do fetching with third party libraries but for this shitter I'm going to be using fetch and inside here we can wrap everything inside a function so const fetch data you can name or whatever you like this needs to be an asynchronous function and then it's going to be another function like so and inside here we can do try catch and let's focus on the try to start I'm going to store everything in a response so const response equals and then this is going to be await fetch and then we need to paste the around here but we've already saved in the base URL so I'm going to paste it inside here so this is going to be where the whole URL comes in which we are fetching and now we can check for the response so if the response is not okay so we're getting the response dot okay we can throw an error and let's say you fail to fetch data like so and then if we do get the data we can do const data equals await and then we can do response we need to convert it to a JSON now when we get the data we can save the data inside this array here and to do this we can use the set data so we can do set data and then data and we can also do the same loading to false set is loading to and now we can focus on the catch here and we can just do set error which is here the set error use date and I'm going to set it to error fetching data please try again later and we need to set the loading set is loading to false so basically if we get an error we just want to display the error we want to set the loading to false because we don't want it to keep on spinning if that makes sense okay now that we have the use effect here this is all great but we need to initialize the fetch data somewhere and we can do it inside here like so but if we save this and we restart the project this is going to continuously loop and it's going to waste a lot of API calls and probably break our application so what we need to do is put an empty array in here so I'm gonna put common and empty array and this is only gonna run once now so save this so to get the data before we do anything else inside here pre just to display the data super quickly and inside here we can do json now shrinkify and then to make it look pretty we can pass the data first of all and then no and then two and then if we wrap this oh yeah we've already wrapped in pre that's all good save it to go back to the application we should be able to see all of the data kind of like nicely presented obviously we're gonna make it look a lot better than this so now that we get the data we should be all good to go and we can do the fun stuff I'm gonna comment this for you so we can have it if you wish to like so and maybe we can just leave it here that's fine all right and let's start with the loading so we can check if the loading is false and if it is we want to display something for example I'm going to display a paragraph saying loading of course you can put this as an image or whatever you like and then what we can do is if we get an error then we can set exactly the same thing we can put a paragraph or whatever you wish and we can put it as the error and this is basically if we have an error this is going to set the error to this message here so it's going to come from error but we're setting it here if that makes sense else we're going to display all data inside here okay and inside here are we're going to be on notes and I'm going to wrap them inside a unordered list with the class name of notes that's it and for each note we're going to have a list like so and then each list is going to have the class name and that's it but we need to loop through the data and I'm going to do it inside the unordered list so let's do it like this sorry about that and let's do it inside that you have so from here we can do data dot map and then we can map it as item and then this is going to be an error function like so oops open and close yep that's it and instead here is where we're going to put the list so in react each list we'll have to have a unique key we can use the id coming from here so if we do get to a route we can use this id here so I'm going to do key equals and then item dot underscore id like so and now we have unique IDs for each list and then from here we can wrap everything inside a link this link is gonna go to a page which we can create later on and in single slanted quotes we can do note and then the id of the note so in dollar sign curly brackets we can do item dot id so we can go to that URL and then obviously make sure that you close the link make sure that you close the link like so and inside the link we're going to have an h3 which is going to display the title so item dot title and then we're going to have a paragraph which is going to display the item dot description right let's see how this looks added a little bit of CSS as you can see but it's very basic but it's very basic it's basically just a box with a background color and round the boxes and when we hover over each card you will see that the link changes here on the left side the id changes and the idea is that when we click on one the id is put in here and we can use it to display the specific note all right super quickly I just wanted to show you the loading so if I was to refresh you probably won't see it because the data loads so quickly but if I do right click inspect if you go to the network tab from here we can set the note throttling to slow 3g for example and now if I refresh the page you should be able to see hopefully we should be able to see the loading almost there I guess here we go loading and now the data will appear and the same for the error if I was to mess up the error for example which does not exist and now if I go back it should refresh automatically but let's put it yep if I put it back to note throttling you will see that we're getting error fetching data please try again later and of course you can make both of those things a little bit better you can see it says this with red or something and for the loading you can make animation whatever you prefer I'm gonna go slightly out of scope super quickly but if the text is super long in here you might want to put ellipsis so dot dot dot at the moment I think I've put the perfect kind of like size of text but if I copy lower so I'm gonna copy in fact let's just do a super long copy this go to the database refresh and change one of the notes for example the this one here I'm gonna change and put a super long description and update it now if you refresh or application here you should be able to see that this has a super long text so what I'm gonna do for the description is super quickly inside the p here let's make some space and let's focus on it okay from here we can check the item description length by doing dot length and let's check if it's longer than 50 and then if it is we can display question mark and then we can display inside single slanted quotes we can display dollar sign and then item dot description and then we can do sub string 0 and then 50 so we want to kind of like trim the text to 50 characters and then we can just put dot dot dot to put the ellipsis which is great but the use needs to be just outside here if it's not bigger than 50 then we can just display the item dot description like so make sure that you close it it looks a little bit odd but hopefully if we do right click in format yeah it doesn't have that much so now if I say this you'll be able to see that we're getting dot dot dot on this here because the text was bigger than 50 characters but we are not getting on this one we're not getting on this one and we're not getting on this one but we are getting on this one here which is great now let's create a button around here just so we can click on it and create any note so we can do this just outside the loop we can create another list inside here or you can create it pretty much anyway like and to do this I'm going to create another list and this list is going to have a class name of add note button and then from here I'm going to use link to this is going to be cause curly bracket and then maybe we can put it as add note we can create this page in a second and I'm just going to put close this put a plus sign and say if you go back you'll be able to see that we're getting plus and for some reason the CSS doesn't seem to be acting right but that's fine and this is going to go to the add note page which we can create next so let's go back let's go to the route and then maybe and maybe we can create there inside the home route here or you can create a different folder it's up to you I'm going to call it add note.jsx rfce this and we should be good to go that does not look good we can do add very note like so and replace this as well and save it so this is going to be add note page we also need to add this page into our app.jsx so where we have about we can duplicate this and we can do add note and this is going to be home and then add note like so and now we can use this inside here we can do add note and then this is going to be add dash note and something is happening here so let's do dot routes dot home and then add note okay that seems to work save it and now if I go back you will see that we're getting add note and we're getting the text which is great okay that's what we need so let's close this and let's focus on the add note page to start with I'm going to set everything that we need so from here we're going to need use state and we're going to use use effect we're also going to have a link so import link and then from react bar to DOM and now we can create a link here to go back so link to and then this is going to go back to the home page and the class name for this is going to be back button so I'm going to put an icon super quickly save it and here we go and essentially here we need to create a form with two input fields so we can add some data start by doing a form and this form is going to have a non-submit add note so this is basically a function that we need to create and we can create it pretty much anywhere inside here so this is going to be const add note and then we're going to do async event and then this is going to be our function for the add note so when we submit the form that's it and we'll do the logic in a second but before we do that let's do all fields so I'm going to do a div with a class name of single note press enter and inside here we can do div and inside this div we're going to do input the type of text let's put this on another line and then the value is going to be title which we're going to put now on change we want to update the title which we're going to create in a second so event and we want to pass what's inside the input box by doing set title to event.target.value that's how we get the value from inside the box and then for the placeholder we can put title and for the class name we can put title I think that would be fine and we definitely need to create this so inside here we can do const title set title equals use state and this is going to be empty and we can do this exactly the same for the description but this needs to be const instead so let's change it so this is going to be description and then set description like so and now we can do the description inside here in fact we should be able to let's do right click format and and outside this div I'm going to create a new one and this is where all description is going to go so we're going to do text area this text area is gonna have the value of description now on change we're gonna set event set description this is how we update it and then we grab the data from the input event.target.value placeholder can be description rows we can set to form calls we can set to 50 and then class name can be set to description that's it close the text area here and we should be good to go okay it should look something similar to this if you use my classes we need to have a button to submit this form so after this div here just above the form we're gonna create an input and this input is gonna have the type of submit and and we'll come back to this a little bit later let's leave it as it is for now okay okay so now we need to do the submit logic super quickly and then we'll make it a little better so here I'm gonna bring our URL const base URL equals and from here we're gonna do in single quotes dollar sign import dot meta dot env dot bit server underscore URL and then the euro is gonna be api slash note and now we can use this euro inside all functions so when we press the input so when we submit we're gonna be triggering this function here because on submit we have it inside here and we can do the logic the first thing that you want to do on forms is to prevent the default behavior of refreshing the page and we're gonna do e dot prevent default and that's it drop them and now we're gonna do inside a try catch const response equals await fetch fetch base URL comma and then in curly bracket we can change the method because we need to change it to post so method set to post then we can change the headers and the headers can be set to content type and then application slash jason comma and then from here we can pass the body and this is going to be jason stringer fight so jason dot stringer fire and inside here we pass the data and we can pass the title and the description oh and i've missed the columns in here that's why everything is red and that's it and just for now let's do console log and then the era like so let's refresh let's go back here and let's try to submit something so so ready new note submit let's go back i know it looks bad but we got we have ready new note so this was inserted but the user experience is fairly terrible so we can fix this what we can do to make the user experience a little bit better it's not going to be amazing but we can do const and put on submit it submit it and then set submit it and we can put this as use state and this is going to be called false so what i want to achieve is when we submit some data i want to make some sort of a loader to tell you that the data was inserted and maybe we can even go back to the notes for example here when we submit some data what we can do is if the response is okay then we want to set the submitted to true like so and we can set a timeout we can do set submitted to false and then 2000 which is basically two seconds you can make a fast if you wish and that's it or else we can just say console log and then fail to submit data like so so now we can use the submitted from here and if you go back to a form on the input here we can add a value and this value is going to be submitted saving note dot dot dot or we can put it as a as a little floppy disk and then save note like so and then we can do disabled which is another input property equals submit it which is going to be true or false let's see how this works and if you wish to you don't have to do this we can also wrap everything in a paragraph with the class name of text center and inside here we can get the submitted and we can do and and so if this is true then we can do div and inside this div we can have it as a class name of success message and then inside here we can put the message note has been added save let's add a new note and now look at the button first of all the default value is save note and now if I click on it it says saving note note has been added and that's it I mean you can do all sorts of things you can maybe redirect you can clear the inputs from here if you wish to by pretty much going inside here if the response is okay you can set the title to for example empty and this should clear the title now so I'm gonna do one two three save it and as you can see this clear the title and so on and the notes have been added by the way which is great so now let's have a look at how we can click on a note so we can view it and update it so we've already got the link here which is note with the id and we can use this let's save everything right click format and save and again I'm gonna use the home page here to create this so I'm gonna create a new route code note dot jsx let's do our fce and in fact we might be able to copy pretty much everything from add note and just modify it let's do that so I'm gonna copy everything from here unpaste it inside here and instead of add note maybe we can do update and make sure that you change this here as well we do need to include this into app dot jsx so add note we're gonna do update note maybe or view note whatever and then this is gonna be I think I just called the note and now we can insert it inside here so app note and we need to pass the id so we can do it with slash id like so to grab it from the URL and now we can put the update note inside here save again hopefully if I go back and if I click on this one here we should be getting the same sort of page just like before so now more or less or page is pretty much done but let's go back to note here and let's just update a couple of things so first of all the form this time instead of adding a note we can change to update note it doesn't matter too much and now we need to change the function here of course update note oh just be careful that they don't match I guess and that's absolutely fine so if we click on this note here for example everything is good we're going to it and we're getting the id so essentially we want to be able to grab this id and when I press save I want to be able to use this id to go to or put route which is to go to put route here which accepts the id from the URL and then update the note so the first thing now we need to modify inside here is we need to grab the id and to grab the id we're passing it from app.jsx we're calling an id you can call it whatever you like and now we can grab it from here so when we have link we can put use params and now we can use use params to get the id from the URL and we can do something like cons id and then this is going to be equals use params like so and now if you were to console like this it will grab the id from the URL and we can attach it to the base URL here by doing slash dollar sign curly bracket and then put the id so now when I click on this we know which note we are saving because when I click save it goes to this specific URL with that id and it saves where is it and it updates the note here this needs to be changed to put this time and nothing else changes we are just updating the title and description but now the problem that we are having is that when we go to note we don't have the original text from here we don't have the title and the description so we can have to do another fetch to grab that data and then we can just press save any update that's pretty much the the whole idea behind it so somewhere around here we can use the use effect or use effect make sure that you have an empty array and we can just fetch the data just like we did in our notes here so in fact we can copy it so all of this can be copied the use effect and paste it inside here so we are fetching the data going to the URL with this specific id then we're checking the response which is good but instead of set data we can change this to set title so set title and the title can be set to data dot title and then we can do the same to set description to data dot description like so and now because all inputs have the values of title and description if you go back you should be able to see that we're getting learn website developments start with the basics learn html CSS we go back but click another one they all come back and the update logic does not change whatsoever because I can just do ready 123 save it and it says saving note notes have been saved and for some reason the title disappeared and this is because I showed you how to remove a forum here and we need to remove this because it's gonna make it worse actually sorry about that so if I go back yes it will refresh because it comes from the database and now I can do ready updated and then new notes updated save this everything is saved and if I go back you should be able to see ready updated in here which is great now let's jam a quick edit button around here so while we have the back button let's go to here so I'm going to wrap this into a difficult with the class name of breadcrumb nav and this is going to go on the left side because of put as flex and then I'm going to do a button and this button is going to have a non-click and this button and this is going to be a function called remove note and then it's going to have the class name of delete that's it let's add an icon in here I'm gonna add an mrg and then remove it's not gonna look great let's have a look and this is breaking because we did not create the function so I need to create the function somewhere around here so const remove note and then this is going to be because async and then event this is going to be event dot prevent the food so try catch and we can do const response equals await we're fetching fetch we're fetching the base URL with the id and inside here we just need to put the method which we want which in this case is going to be delete and that's more or less it and then if we get a response okay the couple of things that you can do you can do another use state to make your form even nicer maybe with a nice message but I'm going to show you something else now I'm going to do navigate instead so and I'm going to navigate to the home page so this is another thing that you can do navigate but I need to include it at the top so we do that we need to include it here so I'm going to do const navigate equals and then we can use use navigate from the react router dom so insert it inside here and that should also work just like we've done the submitted one you can do a note delete it use state to make it nicer but that should do the job for now and if I click on the remove so let's click on this one let's click remove and nothing seems to be happening and if I look at the console you'll see that we are not defining set error okay maybe I missed this but we need to put set error in here so I'm going to copy it from here and paste it inside here hopefully that solves the issue set is loading it's not defined as well potentially you might want to remove them if you don't use them just like I have in here but I've added them inside here now so they don't break if that makes sense and now if I go to this new node click remove nothing seems to be happening go back the note is deleted but the navigation doesn't seem to be but this doesn't seem to be working and this is because I missed the parentheses okay maybe that's the problem refresh add new note new note one two three save that again that needs to be removed from notes where we reset from add note where we reset this remove it I don't like this and now if we go back we have the new note and if I click remove here we go everything seems to be working now new save has been added let's go and that's it that's going to be everything from this tutorial I hope that you liked it I hope that you learned something new consider subscribing to my channel like this video and comment below thank you very much for watching