 Hey welcome to this Mern application starter guide. In this video I'll guide you through building both the back end and the front end of the website. For the back end we'll develop five API endpoints and enable image uploads. On the front end our main focus will be displaying the data, adding new data and updating existing data. We won't cover CSS styling in this tutorial. Hey welcome everybody I've already created a new folder called Mern and inside this folder is where we're going to be creating all server and all 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. So to start with 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 three dots 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 for lack 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 Nodemon. So npm i for install and then this is going to be dash dash save dash def Nodemon. Nodemon is going to help us restart the server every time we make a change in our project. It's just nice way of developing in Node.j. 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 what we can do is create a new file called dot git ignore. Inside this file we can tell which files and folders to ignore. So I'm going to do dot env. Save this and we are 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 scripts 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 they 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.js. This is going to be kind of like the brain of our project index.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.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 is going to listen for changes. That's pretty much it. Save this and close it. Now let's create or index.js file inside the server. So index.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 .emv. So require and then this is going to be .emv and as I mentioned earlier this is going to contain all MongoDB connection string. So let's do config and we're done. Now let's add the other packages that we need. Coms, 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 they're 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 our 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 basics. 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.emv 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 one way of development 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.get and this is going to be a home route. So if we don't put anything in 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.json and then maybe hello mate and now we can start our server by doing app.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 quote 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.json. As you can see nodemon has started the node index.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 nodemon restarts the server straight away which is exactly what we want. So 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 our server. All right 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 app.get and if we put star this means that everything else it's going to maybe do just json 404. You can also do it as .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 cores but we haven't used them so somewhere around here we can set up all middlewares and to allow cores the very basic we can do is app.use and then we can just do cores just like we initializing the express application here we're doing the same with cores 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.use and then express .euro 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.use and inside here we can do express .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 mongudb.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 all database and I'm going to choose the m0 cluster here 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 .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 you need to add 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 .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 gonna 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 gonna call my database box and save let's close the .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 .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 it 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 inside the index.js file sometimes our 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 gonna 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 not 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 gonna collect and then this is gonna be await Mongoose.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 .emv file instead and we can copy the name from here MongoDB all right and reuse the inside here by doing process .emv and then the name that's it and that's gonna be bringing the string and now we can do console.log and inside here we can do database connect it and then we can use template one more time because I'm using these slanted quotes we can do com which is the constant here and then .connection and then .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 .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 gonna 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 .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 middlemen and that's if we open a command line you should see that we have service running on port 80 000 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 .tmv 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 .tmv 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 on 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 mongu serverer bad 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 .tmv close the the connection db and now let's focus on creating our model okay let's open the explorer here and let's create any folder called models and then inside here I'm gonna create one model called box not js so models is essentially or database table and the fields so we can essentially create the field inside here and this is really powerful because you can kind of like do backend validation as well and you can set all the fields super quickly so let me show you what I mean first of all we need to require mongus const mongus equals require and then we require mongus just like so and now we can use it and we also need to require schema in this case from mongus so const schema and this is gonna be equals mongus from here and then we're grabbing the schema that's it and now we can create all schema by doing const maybe we can call a book schema and this is going to be equals new schema like so and then inside here is where we define all fields now before we do this we need to export this so we can use it and again this might get a little bit longer this file and you might forget to do this and is probably going to error so module now export equals mongus dot model and then the model that we want to export is going to be called book and then we put the book schema here that's it and now we can create all field now most of our fields will be more or less the same so I'm going to do so let's start with the title and then the title is going to have a type of string and it's going to be a required field so true so in this case if we have required set to true and if you don't provide a title then it's not going to insert any data and it's going to tell you that which is great but also it's going to be annoying if we do it on every single field because when we build the application we're going to do the fields one by one and I don't want every single field to not allow me to insert data so what I'm going to do is I'm going to copy this and I'm going to leave it only on the title so slug of course like he's going to be required but I'm going to comment it out just so we don't get this error every single time slug and then later on we can only require them if that makes sense now I'm going to do one more this is going to be the description is going to be the type of string and then we can do a thumbnail for image this is going to be the type of string because we're going to be saving the files locally on our server and then just saving the URL in the database to reference it then we can have stars this can be the type of number and then we can have one more category and this is going to be the type of array and then last one is going to be created at and then this is going to be the type of date when I create a new record I want to be able to know when this record was created and we can set up a default one so this is another option and then we can do date and I'm going to use JavaScript here to do now like so I think there are a couple of different methods of doing this but this has worked for me so I'm going to leave as it is and that's it that's all model if you want to see the whole thing I will zoom out and here it is let's zoom back in close this let's go back to index.js file and we need to include this just like we included the database so around here we can do const book equals and then require and now this is going to be inside dot models and then slash book like so and that's it right since our first route is going to be getting data what I want to do is insert a little bit of data into the database so we can use it so what I'm going to do is inside the server I'm going to create a new file called data.json don't create this one by the way I'm going to copy some data that I've prepared so I'm going to copy and paste it and essentially I've created a couple of books so I've added the title the thumbnail the slug the description the stars and a couple of categories as you can see the title is a string the thumbnail is a string and essentially I have a reference to the actual image so we have dot jpeg at the end we have the slug which is kind of like a nice friendly slug we don't have any special characters and then for the description just a little bit of text and then category is an array so I can copy this and by the way I'm going to save this for you I can copy this go back to our database here in MongoDB and then if you click on browse collections you might see that we have this books database and this books table this is purely because early in this tutorial I created this dot tmv file and I added the database name of books and here in my index.js I required my model book and that's why it's actually created the books so I didn't have to do anything to do that it created it automatically and now I can insert some data into the collections you know to do this we can click insert document and then from here we can use this view here and then we can remove everything by the way and now paste the whole document insert it should take a second and now we have a couple of books that we can use now let's jump back to our main folder and server here and from here I want to create an uploads folder so I'm going to create a new folder and call it uploads so inside this folder is where I'm going to be pasting a couple of images for our books I'm going to copy and paste them they're saved from Amazon so here they are and I'm going to be using them and we can now close this okay now just for testing purposes let's do our first route and let's see whether we can retrieve the data and then we'll jump into react and we'll build the other route as when we use them just so we know what's going on so in order to create a route we can literally copy this one here and we can create a round here this can be our api slash box route and this is going to fetch all the box first or a limited amount we need to convert this into an asynchronous function like so and then from here we can do try catch and then to retrieve the data we can simply do const data equals await we can use our book model from here so book and end of find by the way you can see all of the mongu's commands here find find by id find by id and delete find one and so on so I'm gonna use finding in this case and then in order to find everything we need to put is curly brackets and leave this empty like so and now if you want to display the data we can do res dot json and then inside here we can just do data that's it and if you want to catch the error we can do res dot status 500 dot json and then we can pass the error an error cut while fetching box perfect now if we save this and if you go to this route you should be able to see that we're getting all of the books in here and now we can use this as our api inside react and when we start using this api I'm going to show you how we can do filters and for example a very easy one can be limit and then we can put two and now if I refresh you'll be able to see that I'm only getting two books which is amazing okay now is a good time to start creating or react application so we go here in the explorer and we need to be inside the mode folder open the terminal so I'm going to do control and the add symbol and this is going to open it for me and then in fact I need a new one so I believe I can press the plus sign here and this is going to open a new terminal so we have two terminals running in parallel so from here let's jump into vit j s dot dev and let's click on get started scroll down a little bit and you'll be able to see the commands from here so we can use npm create vit at latest so I'm going to copy this go back to my terminal and we're currently inside the main folder so I'm going to do paste this and then press enter this is going to ask me for the project name and I'm just going to collect client press enter choose react and then I'm going to be using JavaScript as you can see this created a client folder for me now which is my react application do the following commands in here so we need to see the client and we're now inside the client folder and now we can do npm I for install and then just like or no j s application we can do npm run dev press enter and our application should start and for me it started under the localhost of 5173 I can hold control and press enter and this should open it in the browser and as you can see we have all react application working let's jump back to visual studio code and let's go into the source super quickly and then from here we can look into the index.js file I'm going to minimize this while everything is running and I'm going to remove everything from the index.css file and I'm going to replace it with the css that I've done for this tutorial and this css will be linked in the description below we're not going to be doing any css in this tutorial so I'm going to copy and paste it and I'm going to show you super quickly it's only very basic styles in fact I've copied them from the vit default ones and I've just changed the background color and the color of the topography pretty much and then I've styled the inputs a little bit just so they look a little bit better as you can see I've styled the links the image is fully responsive and that's more or less here I've got some very basic styles here for the books and that's more or less here nothing special just very basic styles so let's save this close it let's go to app.css I remove everything from here as well and save this we can definitely remove this file as we won't need it like so and now we can jump into the app.jsx file from here and we can pretty much remove everything from here and we'll build as we go so let's remove everything and inside the return we can just remove everything as well save this let's jump into the main.jsx file let's remove the index.css as we will need that and save going back to the app.jsx file let's save this let's go back to our application and as you can see we're getting a blank screen so if I do hello save it you should be able to get hello and that's it also inside assets here we have a logo which I'm going to be reusing for application and also I'm going to drop an image which is essentially just a placeholder say no image selected and that's more or less here now let's open the terminal one more time here everything is running or back end is running and our front end is running as you can see but I want to stop the front end so we can install another package so ctrl c and then we can do npm install and the package that I want to install is called reactrouterdom this is what's going to allow us to do the routing for application and it's going to be very easy to use you'll see in a second so essentially we're going to create a couple of pages I'm going to include the router and then we'll be able to browse through them we also need to run the project one more time so if you press up up then we can do npm run def okay make sure that your project is running and let's minimize this and now we can start building application so we actually need to import this reactrouter import browse the router ask router route and routes you see how all of them work in a sec and then from here we can from reactrouterdom that's it let's minimize this this will make sense in a second so inside here we can also put our header and we can have our filter at the bottom so essentially we're gonna have the header and the filter on every page but we only want to change the route the content inside so let me show you first of all how we can let's tidy things up and let's create our first route so we can include in here if you go back and the client source inside here we need to create any folder called routes and then the first route is going to be called home so inside home is where we're going to create another file called home.jsx and now I'm going to be using an extension if you go to extension super quickly and if you look at this one here es7 plus react redux react native snippet this is going to save us a lot of time and I'm going to show you how right now so I've got this installed and then from here I can do rfct and this is going to create a react functional export component if I click on it and we're done so I'm going to put this as a capital letter and I'm going to put this home like so so this is our homepage created I'm going to copy and paste a little bit of text literally it's just going to say an h1 with home and then I'm going to say miniature byte plus react demo website it uses no js express among db as a backend that's it save this let's go back to our app.jsx and let's import so here at the top we can then import home from and then route slash home slash home and now we can use this inside the routes but doing route path and then this is the path of which way you want to navigate in order to see this page so in this case this is going to be the slash route because this is the home route and then this is going to render the element of home so it goes in curly brackets we open home and we close it like so okay I hope that you can see this and save and in fact I've made a mistake we don't need this we can just close it like so and that's it awesome and if we go back super quickly to the main.jsx and we need to also import the index.tsx I believe that I removed it so I'm going to import and then .index.tsx all right let's save this remove this and now if you go back to the website you should be able to see that we have header or home page here rendered and or filter if you go back you should see a header, filter and or home page rendered just like this we can create a couple of more routes so I'm going to create one more just so you know how it works so inside routes I'm going to create another one called about and inside the about we're going to create another file called about.jsx and then we're going to do rfce and press enter make make this a capital letter capital letter and then for the about page I'm going to copy and paste a little bit of text so pretty much exactly the same I'm going to copy and paste an h1 with a little bit of text but for this one I've prepared a table of how all routes are going to be looking like you definitely don't need this so I'm going to put a table here which is essentially a table that shows all routes you'll see in a second you don't need to do this one here and save it if we close this and if you go to up.jsx we can include about by doing would shift down to duplicate this line and then we can do about copy this paste it paste it oops this needs to be small because the file and now we can do another route inside here so control shift down and then this is going to be our about page and then this is going to be the about route save this if you go back you should see no change but if I go under slash about and press enter you'll see that we're getting the about page which also contains the header under footer and I've just got a little bit of demo text and by the way I am zoomed in quite a bit the website is kind of like tiny so I just created like a little table for myself which is kind of like shows what the all routes are going to be like now let's have a look how we can do the header under footer so we can have a working navigation this is going to be slightly different I'm going to open the explorer here and then let's create a new folder inside source called components and I want to create two files in here so the first one is going to be header dot jsx and then the second one is going to be the photo dot jsx so let's start with a header I'm going to rfce and then inside the header here we need to bring bring the route rather don't want more time because we're going to have navigation so I'm going to do import I'm going to include the link and then the nav link and then this is going to be from react router dom inside here I'm going to move the header and I'm going to wrap this into a header file like so sorry into a header HTML5 element and inside here is where I'm going to have the logo so we're going to wrap the logo in a link we can use the link from here and then this is going to be equals two and then when we press on the logo I just want to go to the home page that's pretty much it and I have a class name for it called logo and then inside here we can just put an image the source of the image is going to be called logo which I'm going to bring now and then the old text can be react jsx and then we can close this and maybe we can put a little bit of text react jsx like so the logo can be the logo from assets and then this react.svg so to import it we can do import as logo from sorry dot dot slash assets and then slash react.svg I believe it's called and say we also need to create our navigation so I'm going to do nav and then inside the nav we're going to use a nav link instead so I'm going to do nav link and the first one is going to be our home link so two equals and home and now we can duplicate this two more times and I can say this one is going to be books and this one is going to be about save this now if you tidy things up by doing right click format document we're looking good let's go back into the app dot jsx and let's include the header so let's do import header from and then we do dot slash components and then header just like so we can include the photo as well so I'm going to copy this line and do photo and then components photo that's it and now we can insert them inside here so header and then further okay I actually did not create the photo did I I didn't create the photo so I'm going to jump into the photo desks and the rfce and I'm just gonna do change the diffs to photo and let's just do ampersand copy and then copyright and then I'm just gonna do the a little bit of JavaScript to bring the date by doing new date and then get full ear like so oops remove that and that's it so we have the photo as well let's close it and let's go back to our website as you can see now we have our header and we have all photo and if I click on home it goes to home if I click about it goes to the about page and so on okay this is where things are gonna get a little bit more interesting now so we need to create a book page first of all let's go back to the project let's close everything else and let's create a new route so inside here I'm gonna create a new one called book let's call it book and then inside here we're gonna do book.jsx let's do rfce press enter and this can be book with capital letters and that's it I can paste a little bit of text in here so it's not that empty so I'm just gonna put an h1 with books and a little bit of text just like before save this let's jump into app.jsx and let's include that page as well so I'm gonna copy the about here and call it books or books sorry and this is gonna be book and then book copy this let's create another route this is gonna be slash book or books I don't know what to call it maybe books we can call it because there will be many books and then we can put the book browser save them let's go back and now if I click on box you will see that we're getting books home and about perfect all right let's look into our API super quickly and see how we can fetch some data so if I refresh super quickly you'll notice that we're getting a lot of data here and we can fetch this data and display it in application another way of doing this by the way is if you copy the URL you can use a plugin such as the tinder client here and then you can go to new request and then paste the URL and do a get query so if I put send you'll see that we're getting all the data and just like so you can test different methods for example the post put delete patch and so on or you can use a client such as postman or insomnia to do this as well let's close pretty much everything now and let's focus on the book route inside here I'm going to do one more h2 let's say and then I'm going to do fetch example and under fetch example is where we're going to be fetching all data at the top here we need to import from react so the first one being use tape and the second one being use effect hook and I'm going to show you how we can use them now and then I'm going to import link is also import link from and this is going to be react route to DOM I'm seeing some inconsistency here so I'm gonna change it and now we need to be inside the function of box here so inside here and before the return and we can start by bringing all URL so for example this URL here I can copy and I can save it into a const called base URL and this is going to be equals in double quotes or single quotes you can put to http column slash slash localhost of 8000 api box so the first thing that we're going to use is use state and this is going to be used in order to store and change the data that we're getting from the database so let me show you what I mean const and then we're going to do data and then set data and this is going to be equals use state and we're going to have an empty array like so so essentially data is where or jason is going to go this and then when we need to refresh it update we're going to be using the set data and let me show you how we can use that so now we're going to be using the use effect in order to be able to get the data and also update it if we wish to so use effect and inside here I'm going to open and close it and this is going to be an arrow function so we can do it like that and inside curly bracket we can do the logic const fetch data and this is going to be an asynchronous function and inside here we can do try catch and then inside the try we can do the logic to get the data and inside the catch we can call the log the error and handle the error later on so I'm going to do console.log and do error for now and we'll come back to it in a sec so for this project I'm going to be using fetch and we won't have to install anything else but feel free to use whatever library you wish such as act use we're going to do const response equals await fetch and now we just need to put the URL located inside base URL so I'm going to bring it like so and that's it now we can fetch data if we fetch the data successfully this response will return an object called okay so for example we can do if we don't get an response dot okay throw an error so throw new error and inside here we can do fail to fetch data just like so but if we do get the data then we can do const and we need to convert the response into json for example I can just call it json data and then equals await and then response dot json so we're getting the response from here and converting it into json and essentially now I can use use date and especially and specifically set data in order to update the data inside here so I'm going to do set data and then we bring the json data from here and that's kind of like more or less if you can also console log the data if you wish to or we can do something else I can go here where or text is and we can do something like pray and then we can do json dot shrinkify and then inside here I can put the data so in this case the data will be literally called data because we're going to be using this data no and then two and now this is going to display in a really nice format for us save this have a look at the page and you'll see that we're getting nothing this is because we have the fetch data function here but we haven't actually started it and in order to do this I can literally grab it and paste it inside here and just start the function now one thing that is very important is to do comma and then an empty array in here because if we don't do that this is going to keep fetching the data and it's going to make a turn of request so save this I'm going to right click format document just tie things up and now if we save and go back you should be able to see that we're getting the data now we can use this data to loop through and display in a nice format item okay let's wrap everything in an ordered list and this is going to have the class name of books and inside here we're going to look for the data so I'm going to copy the data let's do data dot map as item for example you can call it book whatever you wish and then do let me remove this v and then do list and each list will have to have a unique key this is how react will know whether something is being updated and in this case or database has a unique ID sorry each record has a unique ID so I can use that so we can do item in this case dot underscore ID and then inside here is where we can display the data and I'm going to link the data to equals and then the right to this is going to be under single slanted quotes slash books slash and then dollar sign curly brackets and I'm going to item dot slug in order to grab the slug from here so this is going to be the great Gatsby this is going to be all link let's see if I'm missing anything we need to close the link and I'm going to wrap everything and inside here is where we're going to bring the data so for example the image source and the image source will be oops we need to open a cloaks curly bracket single quotes and then we can do HTTP slash slash local hose slash 8000 slash upload this is where the images are located and then we can bring the thumbnail so item dot thumbnail don't forget an old text item dot maybe we can just put the title because I don't have an old text and that's it now we can put an h3 and then inside this h3 we can just do item dot title and close save this let's go back refresh and as you can see or box a loop in here and all images are broken and this is purely because our server does not know where this upload folder is if we open the explorer minimize everything go to the server go to index.js and then from here where we have one middleware we can do another one app.use and we're going to set all uploads folder here uh very uploads folder as a static folder so it's easily accessible so we're going to do slash uploads and then express static and then we put the the uploads folder as a static folder and this is also going to help us with uploading images later on so save this let's go back refresh or react application and as you can see the images are now coming up and if I hover over them you will see that here on the left side the links are changing to the slug now the slug is a little bit dangerous because you do need to have a unique slug otherwise obviously you might just pick up the first record in the database and one way of mitigating and one way of fixing this for example would be to use an ID instead of the slug but obviously it does not look pretty and that's why I'm going to use slug but I just have that in mind okay let's tidy things up so right click format document that looks a lot better and let's make this a little bit better so for example we can set a loading state here where we have the data we can create one more and this one is going to be is loading is loading and then we can put set is loading and then the use state is going to be equal set to true as default and now we can use this set is loading so when we fetch the data here so we are grabbing the data and then I can set is loading to false so we're no longer loading the data and the same here I can do set loading if we get an error to false one more time we fail to get a data so I'm going to set it to false and now we can actually wrap the entire bit here so maybe the entire url and I can wrap it like so so we can do is loading question mark open and close brackets inside here we can just do a paragraph for now obviously you can make something better than this you can put an animation or something and I'm just going to put loading that doesn't look right so I'm going to remove it and then we're going to do else show the data so I'll have to wrap everything inside here and close it okay so we shouldn't see any changes now if I refresh no changes but if I do right click inspect and if I go to network where we have no throttling we can select this and say slow slow 3g or fast 3g let's say slow 3g and now refresh hopefully we should be able to see the page rendering super slow and we should be able to see the loading here we go loading and now the data is loading and the images have loaded so all loader is working obviously if we do no throttling it will show up but it's going to be super fast so as you can see loading it's super fast cool that's all loading done let's do the same for the errors so so if I go here we can do another one and this is going to be error and we can set error the use state for the error is going to be null and now we can use the set error when we error here we can do set error and we can do something like error fetching data please try again later that rhymes as well which is cool and now I can use the error to wrap everything around here so essentially it's a little bit hard to see but here we can do error if it's loading show the loading if we get an error I want to show for example a paragraph called error so well we can bring the error actually because we're setting a we're setting some text in here so I can just bring the error or you can type something and then we can bring the box or just like so okay refresh everything is working correctly but if I break the API for some reason in fact let's just change the euro here so maybe we go under API one and save it so now you will see error fetching data please try again later which is awesome and I can remove this and see all right just to make this a little bit better I'm going to show you how to do photos super quickly so for example where we have fetch examples I'm going to do a select menu so this is going to be a diff with the class name of photos and inside here we're going to have a label of categories I'm gonna remove this and just wrap it like so sorry about that so label with categories that's pretty much it and now we can create a select all right select and let's create or select super quickly so I'm gonna add a couple of options so option one can be all and then the value the value can be empty for this but then I need to post the video super quickly and just have a look at what categories we have so we have romance science all right I've copied some of the categories and now I can put them in here so super quickly this is gonna be romance romance with capital letter and by the way make sure that the value is a smaller letter because they need to match the database and I'm gonna speed up the process here by doing one two three four five six maybe all right go all right here the categories I probably added too many to be fair but that should be fine and now if I was to save this let's go back to the browser and here we are we have a couple of categories so the idea is when I click on a category let's say science I want the books to go to the database and bring me all the science books if that makes sense all right in order to do this first of all let's go here at the top and let's create one more use date so I'm gonna copy this one here select a category and now we can do set selected category and then the use date for this can be just empty like so and that's it and now we can use this in fact let me copy and we can put it inside here so on change event and then this is gonna be another function and now we can set the event inside the set selected category by doing the event dot target and then we target the value that we've selected like so so when we selected one of those options the value will be saved into the set selected category and now we need to add this category to the URL so for example we have the base URL in here but I'm gonna modify a little bit and maybe we can do it like so so maybe we can do let URL equals base URL and then if selected category select the category which is here then we want to do URL so the current URL which is this here and we want to add a URL parameter to it but then plus equals and then essentially we can do question mark category or you can shorten if you wish and then dollar sign and then the selected category which is this here and we will need to change the base URL here to the URL which is fine and that's it essentially if I go back to the API where we have books what I want to do is put category and then the category name so for example crime and then bring the crime at the moment it's just gonna go and fetch exactly the same books and this is because we need to do this on the backend so if you go back super quickly and then if we go back to the server index and find the API box rather inside here is where we need to grab the parameters from the URL and do the query so in order to grab the query we can go here on the tribe and we can do const category equals and then we can do request dot query and then dot category like so and we will be able to capture the category from the URL we can also console of this if you wish to so category and now if I go back to the browser and let's say we press enter on the crime here let's open the command line go to the node js here and you'll be able to see that we're getting crime which is amazing now we need to bring this category into here but if you wish to create more for example you might want to create rating you do something like stars and then this is gonna be called stars for example I'm not gonna do that but if you do it let me remove this we need to put it into a filter object so we can do const filter equals and then the filter and then we can do if we have category to grab this from the URL then we can add it then we can add it to the filter so filter dot category and then equals category that's it so we are in this object of category to the filter and then the data comes from here and now we can use this filter into or find here query just like so and we then save it and if we go back and if we do crime hopefully the data should change and I'm gonna copy science for the next one all right we have two crime books and I'm gonna put science and just like that when we go to the react apps super quickly we put in category here and when we select one from here we're changing the event we're selecting one of these setting it to set selected category and then hopefully we are updating the URL if that makes sense but there is one more thing this is where we use use effect and we listen kind of like on changes so if the selected category changes which is here then we want to refresh the data for example and I can put it inside here like so and that's it save now if you go back to a react app refresh just in case and then if I go in the romance we get in one book if we go to science we're probably just getting one as well crime we're getting two food that changed adventure trailer fiction and perfect and if I press on all it sends an empty value and then it's basically kind of like this and then obviously that displays all the data awesome all right now we can do the detailed view of our books for example when I click on this one here we can grab the slug and then display the rest of the data for the book so the first thing I'm gonna do is the route so I'm gonna jump to the server and then index.js and essentially we can copy most of the stuff from here I'm gonna copy this and paste it around here so this is going to be more or less the same in this case I'm going to be removing all this and changing it a little bit so so here we have the slug and what we can do is after the books this is going to be another get route by the way and this is going to be slash and then slug as I mentioned earlier in the tutorial you can use id if you wish to but make sure that you slug so unique in order for this to work so to grab the slug in our js we can do cons and we can call it something like slug parameter params whatever and then request dot params and then slug this needs to match this basically if it's id but it has an id that's it and now you could console log this if you wish to log and then slug around like so and now for visit the new request here and if we do let's say slash rad and if I send this on error catching books did I save this by the way save this let's open the terminal oh yeah here we go as you can see rad so if I put 123 send we get rad 123 which is good okay so slug is working I can remove the console log and now instead of finding all books we need to change the query and define one instead remove the filter and the book that we want to find is the one that we pass through the slug so we can query by the slug basically and inside here we can do slug so this is in the database filled in the database and this is the data coming from the slug here in this case that's going to be pretty much if I save this and if I go back to new request I actually need to find a book so let's say this slug here the gray Gatsby copy and let's do slash gray Gatsby and here we go we only get one book the gray Gatsby and now we can use this API to display the data in react.js so if we go back to a project let's close books let's go to client source route books and then inside here we can name a single book or detailed book let's do single book.js x like so let's do rfce in fact this is going to be a big copy in page job if you go to books let's open them and let's put it to the site for a sec and let's see what we can copy so let's copy this stuff from the top we need to react use state use effect we need the link the the base URL the data we can copy so I'm gonna put the inside here I'm not gonna do the reloading and the error and the category change obviously we don't need that and then I'm gonna copy the use effect paste it inside here we'll modify it just like so we'll modify the use effect a little bit so we don't need all this we can change this to base URL the fetch it's exactly the same in this case we're not gonna set the loading we're not gonna set the error and then the loading here just to keep it short we need to remove the selected category and that's more or less the basics but we need to be able to grab the slug and send it to Node.js so in order to do this we're gonna modify the URL a little bit and we need to bring use params in order to get the parameters from the URL so inside here where we have link we can do use params and just like that just like Node.js pretty much we can get the parameters from the URL and now here we can do const URL slug equals use params like so and now I can use the params from here and just attach them to the URL which is here if we put this in single slanted quote like so we can do dollar sign and then one more dollar sign can we do that yeah that might work it looks a little bit odd but then after the URL slug we just need to grab the slug like so save and hopefully now this should get the whole URL plus the slug from all URL and get the response for us and I'm gonna go back to the book.jsx and copy and copy this here save but we didn't include this route into our main file which is inside app.jsx so we need to include that as well and I'm gonna copy the book here and let's say single book route book and then we're gonna do single book let's include it into a route and this is gonna be an important one by the way so this is gonna be booked and in order to get the parameter from the URL we need to do slash just like in Node.js slug and we also need to render the single book save this let's go back to the browser and as you can see we're getting an empty array for some reason so if I was to do box slash the great Gatsby we're getting data which is good and now we need to quickly debug the single book if we inspect this over quickly console and it says fail to fetch data okay at fetch data can I have a feeling that what we can do to simplify maybe this isn't working here so base URL I'm gonna remove and I'm gonna grab this instead and simplify and I'm gonna put the base URL to be in here inside here so we're gonna glue it to get up from here so slash and then dollar sign URL slug but that needs to be on slanted quotes and that needs to be below the URL slug use parameters all right cool save this let's have a look and that seems to work easy fix and now we can display the data in a better format if you wish to so everything is working I'm gonna do right click and format and now inside here we can do the rest so everything is wrapped into a div and I'm gonna use the link in order to have like a little breadcrumb so two equals and then we're just gonna go back to box maybe we can do an icon back like so and then books save this we have it here if I click on them we go back to books and now let's display the book data so I'm gonna do a div with the class name of book details inside here I've created two very basic columns so I'm gonna do div class of call one and then we have one more div with the class of call two so one and then two save it and as you can see this splits the layout into two inside call one is where I'm gonna have the image so I'm gonna do IMG source equals and then inside here we can put the whole URL of this slash upload and this would have been better to save into an environment variable so we can reuse it or a variable at the top but that's fine for now and then inside here we can do data dot down there like so save and don't forget to add an old tag as well so old equals data dot title it would be nice to add the height and the width but I'm gonna skip this for now and we have the image if I go to another one we have the image cool let's display the other data so let's go to column two and inside column two I'm gonna display the title in a h1 so data dot title inside the paragraph I'm gonna display the description so data dot description and then we're gonna display the stars in a second as well so let's do another paragraph stars this is gonna be a little bit special so I'm gonna show you how we can do that categories let's say category and I'm gonna do an underwater list it's not gonna look nice but it's gonna be data dot and we can put question mark just to see whether we get the data in fact we can do this on every single one otherwise if something doesn't exist we don't want to break it basically we don't want to break our page so we can do that everywhere and then data dot category we can the question mark the map and then we can set the item and we can also set an index because every single list will have to you have a unique key so index narrow function opening close inside here we're gonna do this the list is gonna have the key of index and then we can just render the items from this category but in items save this let's go back um oh and I have an error this needs to be this is not the curly bracket this needs to be open and close the bracket and then put two normal brackets in here okay sorry about that save and now we should get the category uh roman science you can uh capitalize them with tss I forgot to do that that's possible and you can make them a lot nicer than this but now let's have a look at the stars we can definitely do data dot stars and save and that should work but let's make a little bit better so in this case I'm gonna make a little component here so let's go here and create a new function and let's call this star rating this is gonna take the number of stars so like so and then inside here we're gonna do cons stars equals an empty array and then four we're just gonna do a loop so let i equals zero and then i smaller the number of stars and then we loop and when we loop we want to push the stars into this empty array so if we have five stars we want to push into here so we're gonna do stars push and then we're gonna do let's do in a span span key it's gonna have a unique key of i so it's gonna be always unique we're gonna close the span here and i'm gonna put a star you can do you can put an image or whatever you like so now we need to return this function and this is gonna be a div with the rating and then inside here we can put the stars okay and now let me show you how we can use this if i go around here we can remove the stars and inside the paragraph in fact it doesn't need to be inside the paragraph we can just put it inside here and we're gonna do star rating number of star and inside here is where we put the number of stars so i'm gonna copy this and put data is this stars yeah stars and then we close save and as you can see we have five stars on this one did i give him okay four stars on this one so i was thinking that i gave him more five stars obviously these are not real by the way it's just around the number and that's it so the next bit would be to edit a book so i didn't really prepare a nice UI for this but what i'm gonna do is just put an edit button in here under column one we're gonna do a link and this link is gonna go to and then this is gonna be slash slanted quote this is gonna be slash edit book slash and then we're gonna bring the data dot and then slug so we want to go to another page called edit book and then we're just gonna bring the slug and do exactly the same thing as here hopefully most of it will be copy and paste actually this is gonna be just called edit you can put an icon as well and so on but that's gonna be fine so if i click on this yep we're getting the orbit as you can see in the euro and we need to do the page and the api for this so far if we go back to our server and then or index.js we have the one that we can get the data so let's create the route that will allow us to update the data so i'm gonna copy this paste here and then instead of app.get we're gonna do app.post and then inside here we can put this as app.api slash books like so and i'll be fine asynchronous function that's fine instead of the slug this time we're gonna be requesting the body parameter so we can do request dot body and that's how we're gonna be getting the data from the form for example we can do console the log and then request dot body and i'm gonna console log this and just put and i'm gonna put data submitted instead just so it doesn't break like so and now if i go to turn the client and if you open the last one getting the great gatsby here i'm gonna remove the great gatsby and instead of get i'm gonna change this to post and i'm gonna send this so as you can see we have data submitted and if i was to say inside the body here we're gonna be submitting data such as the title let's try this so i'm gonna do title and then the title can be hello world and let's close this okay that works and now let some and now let's send this and if we open the command line you'll see that we're getting console log title hello world and this is how we can pass data for our form so let's build this i'm gonna minimize this let's go back to our index.js and from here inside the tribe we're gonna do const new book equals new book and inside here we can put the fields that we want so we're gonna have the title and to grab the title we can use our request dot body and then the request dot body is gonna pass the title so i'm gonna do that and then we can copy this one two three four times and this is gonna be slug this is gonna be stars this is gonna be description and then this is gonna be the category and we'll also have and they all need to i need to update them as well they all need to have comma after them and i need to add one more which is gonna be the thumbnail but we're gonna do this later on so let's do thumbnail and this is probably gonna be file instead so we'll do this later on and i'm gonna comment it out for now because otherwise it's gonna break our code all right just like that we can grab the data and if you wanted to submit the data we can do something similar to this so i'm gonna remove everything from here but we're gonna do await book and then create and then we're gonna create the new book that we've passed all right the only field that is required in this case is the title so we must put the title in otherwise it won't work so i'm gonna go to turn the client here and i'm gonna say hello world and then let's do another line and then slug hello world stars five and so on if i save this sorry if i send this data submitted which is good and if i go back to books hopefully we'll see hello world obviously it doesn't have an image and all that but we're getting hello world and it has the rating and so on so that's all working let's have a look at how we can do this in react js and then we'll bring in the image as well okay let's create a new route inside react source books i'm gonna create another one called create book jsx and this is gonna be very similar to the single book open the create book dot jsx let's do rfce and then from here we import react and we're just gonna import the use state because all input fields are going to need them because we're gonna be changing the data and then i'm gonna import a default image we're gonna do this later on from dot dot slash asset slash and then this is gonna be no image selected jpeg now we're gonna create the states for form so i'm gonna do com title and then set title this is when we change the title in the form and then we can do use state so the title is the only one required so maybe we can start with one and then the rest will be more or less the same for example we're gonna have slug and set slug all right let's leave it as it is and let's build the form super quickly now i'm gonna copy and paste some text in here so create book and then after this we're gonna create a form and inside the form we're gonna have two columns so div with the class name of call one just like before actually and then we're gonna have one more and this is gonna be called this is where we're gonna display the image so i'm gonna do a label upload thumbnail then image alt is gonna be something like preview image close the image and make sure that we put the source equals and the source is gonna be image and the source is gonna be the full image from now but we'll change it later on and we also need an input so we can upload an image so this is gonna be input the type of file and this can accept image give image jpeg image png and so on now let's focus on all fields i'm gonna do the slug and the let's focus on the fields and i'm gonna do two to start with and then the rest will be more or less the same so inside here we're gonna do div label and then this label is just gonna be title input this input is gonna have the type of text value is gonna be the type of text which we're gonna bring in sec sorry title the value is gonna be title which we're gonna create in a second and on change we want to be able to update the value of the field so we're gonna do an event and get the value by doing set title which we're gonna create which we've created and then event dot target dot value and we close the field and that's it so essentially the value is gonna be equals to title whatever that is as default is empty but when we type in the input we want to set the title to whatever is inside and this will update the title if that makes sense the same for the slug so essentially i can copy this paste in here and this is gonna be slug the type of text and then the value is gonna be slug and then set slug like so and that's it let's save this and let's put this into app.jsx so when we have single book we can copy this and this is gonna be create book and then create book like so and we need to put it into a router here so this is gonna be we can maybe we can call it create book and then we don't need anything else and this is gonna render the create book from above here save oh and we don't have a link anyway so i'm gonna go to the books page super quickly uh books maybe we can just add one around here after the paragraph so this is gonna be link two equals and then create book and i'm just gonna do it plus a new book okay save this and here is the button a click on it we go to create new book and we have the layout here the layout looks a little broken but we'll fix that let's have a look and this is because on the form we can create a class name called book details save this and here we go so this is not gonna work just yet but let's test it with the title under select let's see how this works and then we'll build the rest so where we have the form we need a button to submit the form and send the changes to no gs to do this after this i'm gonna create an input and this input is gonna have the type of submit that's it in fact that needs to be closed like so and we're good here we go here is the button it's not full width for some reason but these are things that i can always fix now we need to make sure that when we press that button the form triggers a function we can on the form here we can on submit and then we can do create book copy this and now let's create this function so inside here we can do const create book equals async get the event and then inside here we do the logic since this is a form we don't when we click on the submit button we don't want the phone to refresh we can prevent this by doing event dot prevent default like so and that's it now we can definitely console log the data just to see whether we're submitting it and i can do console dot table for example or log whatever and then inside here we can do title and slug for example and now if i go back to the website and if we do inspect and if we put console here let's do ruddy and then this is a slug submitter you will see that we're getting it doesn't say what it is but we're getting the values ruddy and this is just like maybe i could have paid them hearing uh no it doesn't say what it is but yeah we're getting the values which is the important bit here which is good and now let's have a look at how we can post this and we'll build the the rest of the form so in order to post this we can wrap everything into a try catch inside here we can do const response equals await fetch and then i'm going to speed up the process and do http localhost of eight thousand api slash books inside here we can do we can change the method as default is get but this time we're going to post data and then we can change the headers and the headers are going to be content type and then they're going to be set to application jason and also we're going to pass the body which is going to be all data so we're going to do body and then we need to jason stringer file dot jason stringify and then we can pass the object in here so for example let's do title and then this is going to be new book 2023 slug new book 2023 and so on actually this needs to come from the form you could test it like this but this needs to come from the form so i'm going to grab the title from here and change the data i'm going to grab the slug and change the data like so after we're done with the response we can check whether the response was fine and we can do if response dot okay and then if it was we can reset the form so for example we can do set title and then we can set the title to be empty and then we can do the same for the slug so set slug and this can be empty else maybe we can do console log data what else do we need of course you can handle the error here so you can just do maybe console log and then error for now and that's it so now if i go back to the website and if we do new book 2023 by the way if i open this in another tab you'll see that we don't get the book here which is good and now i can do new book 2023 submit it these fields are now gone and now if i refresh here you should see that we're getting the new book amazing now let's do the rest of the input since we know that this is working and i'm gonna start from the top here one two three four five and we're gonna do stars set stars the stars is gonna be use state set to zero as the fold then we're gonna have the description and then set description the use state can be fine for this one categories the use states for categories needs to be an empty array because we're gonna have more than one category thumbnail set thumbnail this is gonna be close no to start with and then the last one is gonna be submitted just so we know when we submit data and then set submitted potentially all right let's start with uh submitted so what i'm gonna do is if the response is okay i want to change the submitted to be true and now i can wrap the form here uh where is it so here is our form and now i can wrap this in uh if we get submitted then we can display something such as data submitted successfully we can wrap everything format it and that's it so now if i was to refresh add new book title write write submit nothing happened and this is because i've put submitted here yep set submitted is what i need to put sorry about that let's try one more time right right one two three submitted data submitted successfully we go back to books and then we have right right okay cool so add new book let's finish the rest so here while we have slick we're gonna add one more so i'm gonna copy this this is gonna be stars text stars set stars that's it copy this description this is gonna be description and then set description technically speaking this needs to be a text area so let's do it text area i can have rows of four calls can be 50 type can be removed the value can be the description yep and that's absolutely fine i think save it yep so i can get let's do the categories i'm gonna do an input so i'm gonna grab this one here and i'm gonna do i'm gonna cheat here and do comma separate this is gonna be because of type of text value categories and instead of on change this is gonna be a little bit more complex and i'm gonna do it as a function so i'm gonna do handle category change copy this and let's create this function so maybe around here we're gonna do const handle category change get the event and then this is gonna be set categories and then what i'm gonna do is event dot target and then i'm gonna do value so we're getting the value and i want to split the value so split and we're gonna split by column so we can add more categories and then i'm gonna do map categories sorry cut map category it's gonna be another function and we're gonna do category trim so i think that should work now if i go back super quickly or refresh and what are the categories let's do science romance i think that's working okay cool now let's have a look at how we can submit the data and that would be exactly the same as before so where we have the title and the slick we can do exactly the same thing and the thumbnail i'm gonna leave now let's test this first so a description submit okay successfully submitted let's go to books and then your book here um we're getting the new book we're getting this is the description the stars are coming up the category does not seem to come off so let me refresh the API the category did not work and this is most likely because of this category it should be category let's try one more time let's refresh the database and as you can see this one works okay so it was just the category we can definitely visit it here and yeah everything works except the thumbnail so this is where it gets a little bit more complicated and we're gonna have to bring in a delivery in order to submit the image and this is not gonna work but the reason i showed you this is because in most cases this is what you're gonna do and in this case where we're gonna browse the image we're gonna have to do something else how should i do this i'm gonna say copy this and just save it here so you can have it and now in this case i'm gonna do exactly the same thing but remove the body and the head is and in fact the body can be set to to a form data that we're gonna create now so form data like so this is because we can't really send the image as application jason there is an easier way from here by doing form data so i'm gonna do exactly the same thing pretty much const form data equals new form data and then in this case we can just append the data so form data dot append and we can start appending all the data that we had essentially here i'm gonna paste in here so i can see it and we're gonna do title comma title append one more time slug comma slug then the last one is gonna be the term now like so and now we've passed this data to the body here cool now we need to do the back end step if we save this everything should be working as before yep everything is looking good and now if you go back to our server here i'm gonna make a copy of this so you have an example okay i'm gonna have to open the command line stop node j s and then we need to install one more package called motor let's run node j s one more time so we turn it in the background and we can hide this right let's include motor at the top here so i'm gonna const motor equals require and then we're gonna require motor like so in order to be able to upload the images you will need to add this which we added earlier and i'm gonna show you super quickly how we can use motor by doing it inside here so if you go back to the browser and you can go to the official package here and the code that i need basically they give you a really good example here and the code that i need super quickly is going to be this so i'm gonna copy the whole thing and paste in here and from a push out here i need to have a middleware inside so i'm gonna do upload the single and then thumbnail so this is what we are sending from the form it's called thumbnail and this is what we also have in our database as well and now just to explain how this works basically here we have the storage which is essentially where we upload the images and in this case i'm gonna remove this and do upload slash and then here is the file name now this is pretty cool because this is gonna give your images a unique file name he's gonna get the date now and he's gonna do a random number and then this unique suffix is gonna be added to the file name but i'm gonna change this a little bit all the way around so i'm gonna put the unique suffix in here and you don't have to have that but then it is nice and then i'm gonna glue it with the file name with the original file name so i'm gonna do plus and then we can grab the original file name by the file dot original file name original name and i can show you how this works because where we do console log body we can do console log file if i open the command line i'll show you in a second how this works now everything stays the same in here but we also add the thumbnail that's absolutely fine and if you go back to the react application sorry about that sorry about the jump in but uh if you go back here where we have the input we're gonna have to change this as well so i'm gonna do on change and we're gonna do on image change and we can now create this function and we can swap this to image so we have the default image and then if you upload a new one it swaps around so somewhere around here const image set image equals u state and this is gonna be no image selected basically we're creating a state for this image the default state is gonna be this image but if we upload a new one we want to replace it so inside here we're gonna do const on image change event if event dot target dot files and and event dot target dot files zero then these are here we can set the image so we can replace it to url dot create object url event dot target dot files so we're basically getting the image and then we can set a thumbnail to the event dot target dot files and then zero yep we need to change this to event event event that's much better and i spoiled a mistake here files and this needs to be capitalized okay save this and now we go back refresh and then choose file the cat as you can see the image changes technically speaking now cat cat five stars this is a cat cat agori submit felt submit data all right and one thing that i noticed super quickly it's here where we have form data this needs to be form data like so otherwise it won't send okay try cat cat submit data submitted successfully books i don't see or cat here is a cat here everything is worked actually except damage okay that's not too bad so if we look at the console log server quickly you will see that we're getting the titles like stars description that's no gs by the way and then we have the file name so file name is thumbnail original name is cat dot jpeg encoding destination file name and so on so i need to check whether we save this into the database so where cat is we have we don't have thumbnail okay we're gonna go back to the no gs and this needs to be instead of thumbnail this needs to be the file name yep okay so the picture was probably uploaded in fact we need to check that if you go here uploads so yeah here is the cat image it has been uploaded let's do one more time now books add new book dog dog five this dog let's choose the cat submit successfully submitted books and now we have all cat here so well it's a dog but yeah you know so everything is working here which is amazing and now we can look into how we can edit this all right the next thing that i'm gonna do is the update route or the edit route so we can edit a book so i'm gonna go back to the server here and then let's open the index.js and i'm going to copy this here which is the app.post so i'm gonna copy them and paste around here and instead of post i'm gonna add put like so and everything else stays the same so let's remove all this and since we're passing a body full of data we're gonna need to grab a specific book id in order to query the database and update it so what i'm gonna do in this case here i'm gonna create a const and i'm gonna call it book id and this is gonna be equals request dot body and then book id that's how we're gonna know which book we are going to update and instead of new book i'm gonna remove all of this like so and this is gonna be called update book like so i can remove this and now instead of automatically updating the term now sometimes an item might already have a term now as you can see in here so we've already got this term now and you might not want to update it so what i'm gonna do is i'm gonna put a new statement here and i'm gonna say if we get a new request with a file then we want to update the term now and in order to do this i'm gonna do update book and then dot term now and then this is gonna be equals the request file and then file name like so now from here we need to change the query a little bit instead of await book create we're gonna do await book find by id and update like so and inside here we need to pass the first parameter is gonna be the id of the book so i'm gonna grab it from here this is gonna be this id here and then we can pass the object of updated book inside here so all the parameters the title slug stars and so on can go inside here and that's it so this is gonna be our route and we can close this let's go back to our client and go to source routes book and now let's create a new one maybe we can call it edit or update let's go for edit book dot jsx because we've already created a link with edit somewhere i think so this one here edit book and now we can pretty much copy the create book jsx before we do that let's do rfc rfce edit book let's do that and then let's go to the app dot jsx and let's make sure that we add it so inside here we import edit book edit book like so and then inside here we need to add it so instead of create this is gonna be edit book and then we need to put a slug in this case and we replace it cool now if i click on the edit you should be able to see that we're getting the the euro parameter here and we are on the edit book which is great so we can pretty much close this we can pretty much copy most of the stuff from create book in fact i'm thinking of copying the entire thing pasting it here and instead of create book let's call it or edit book change it here cool save this let's go back refresh and we broke it it's this one here that we need to change so edit book like so and here we go now we have the edit book page we need to change the title first of all let's remove all this as well so the title will be edit book like so so the idea is to use the normal get route which is this one here so the read one api books and then the id in this case we're using slug but the idea is to use this grab a specific book unpopulate the fields inside here so let's do that we've pretty much already done this but let's do it around here and i'll show you how we can do it again in order to fetch the data we will need you state here but we also need use effect like so and then we also need to grab the parameter from the euro so i'm gonna do import we can import the link just in case we might need it later on and use param like so and then from and this is gonna be because react router react router dom like so and inside here we can use the use params to get the slug so i'm gonna do const euro slug equals use params like so and now i can do a base URL const euro equals and this is gonna be equals hp lurker host of eight thousand slash api slash books and then we bring the euro slug from here just like so and we get to go if i was to console like this do base euro you are oh sorry about this if i do it like that now we should be able to see that we're getting object object in this because i forgot to do the slug here the bottom and that's it so we're getting api books the great gatsby so now we should be able to fetch the data and populate the fields so to do this i'm gonna create a new function here const fetch data acing and then from here we can do try catch inside the try we can do const response equals await fetch and we can get the base euro from here and then we can check if the response is not okay then we can throw an error to fetch data like so and then if it's successful we can do const data equals and then we can await the response and then we can convert the response to jason like so and now because all fields have for example we have title in here and we have the same title which we can use to update the title but each input has this value for example the title has a value of title the slug has a value of slug we can update them so we get in the data from the database here and now i can do set title and then we can do title no data dot title which comes from the database and now if i go back and refresh you will see that we it's not working and this is because i forgot to invoke the function so i'm gonna do use effect here like so and then we can invoke the function and don't forget to put the comma and then empty array otherwise this is gonna live forever and use all your data and now as you can see we have the great gatsby which comes from the database if i go to another book for example harry potter edit you'll see that we get harry potter and so on so we need to do the same for the rest of the data so we're gonna have one two three four five potentially so set slug set stars stars set category this is gonna be set description and then data dot description maybe set thumbnail thumbnail data dot thumbnail like so okay so everything seems to be working fine so we get in the title the slug the stars but we're not getting the image so put image we can use the thumbnail here and let's have a look at what happens so put image we can use the thumbnail in here potentially but also this thumbnail comes the actual image comes from the server so we're gonna have to do yeah wrap everything in curly bracket and now in single slanted quotes we can do dollar sign to bring the thumbnail but then before this we need to do HTTP and put the server a euro okay now we have harry potter which is cool i think that could be it the last thing that we need to do is when we submit the data so where we have the form so where we have the form we have create book in this case you can update this to be update book of course but i'm gonna leave as it is for now and now inside here we also need to append the id because all server needs to know the id in order to update the specific book so i'm gonna have to do this by coming in here we're gonna create one more so the title can be changed to book id maybe strange way of doing this i think but uh should work so book id and i set book id that's cool and now i can use set book id to update it by getting it from the database so data dot underscore id and we were getting basically this updating the book id value and now i'm hoping that we can put this in the top here and i'm hoping that we can append the inside here now and pass it through the body so form data append book id and then book id like so all right hopefully we come back to harry potter refresh and if i do harry potter one submit i should have inspected this and comes along fail to submit data okay so this might be because we didn't submit a new image at the moment is thinking that we're not submitting a new image and here where we have form data append we can grab this and we can append it so if we have a thumbnail already set then we can do form data and we can attempt a thumbnail but if we don't have one if we haven't added one then we won't leave the default one so in this case the harry potter one let's refresh one more time inspect console this time and now if by the harry potter one submit fail to submit data yep this is also because inside here we need to change this to put and save let's have a look at whether this works now sorry about this harry potter 12 submit and here we go we have data submitted successfully and then if you go to books and if we go to harry potter you will see that harry potter is now 12 i can do this update it maybe we can give it three stars and we can put this new fiction and then fantasy submit successful cool where is it harry potter you will see that we have fiction fantasy new updated and if i wanted to update the image as well as i'm gonna add the cat here it's breaking the preview which we can potentially fix but now if i submit it submit it successfully and now as you can see harry potter has updated the cover here it does break it when i choose any file yep and this is because potentially let's have a look potentially we can check if we have the image let's have a look i'm not so sure about this one so now i am thinking that potentially we can check if we have the image and that needs to be that needs to be set to empty okay and if we have an image question mark inside here let's see this let's try this basically what's breaking is this URL here okay let's see choose cat yes okay so we're updating um i don't have another picture but we can update in our book so this one here the gray gatsby editor new i'm gonna add my cat update submit okay awesome uh that's it and as you can see this is now updated the last thing that i'm gonna do is inside here inside the edit i'm gonna add somewhere a delete button and then we're gonna do the delete route so for the delete let's save this and let's go back to our server index.js and somewhere here somewhere around here it doesn't really matter let's focus on this one we can do app.delete and then from here we can do api slash books slash and then the id of the book that we want to delete and this is going to be an asynchronous function we're gonna have the request and the response and then inside here we can do const book id to grab the book id and then we can grab from the params so request dot params and then dot id which is this one here and now we can do try catch and then inside here we can do await book dot delete one and in order to delete one we need to pass we can use the id and then we can pass the id from here like so and for the catch we can just do rest dot json error for now and then for the response here we also need the response here so rest dot json and then i'm gonna do how they plus and then we can do plus request dot body dot book id if you want to see the book id that you deleted cool that's it that's the delete route obviously i'm gonna tidy all this up later i just wanted us to focus on one route at a time save this let's go back to react and we're gonna do this in the edit book maybe we can add it around here so i'm gonna do button and then this button is gonna have an on click and we're gonna create a function called remove book and then inside here i'm gonna actually i need a class name for this class name delete i think i just made a button right that's pretty much here and then this is gonna say delete book okay let's see how it looks you might break actually yeah it will because this function does not exist so let's create this function here const const remove book and then this is gonna be async event and then we need to prevent the default so e.prevent the fault like so and say let's see it's not very pretty but i should do the job so delete book when we press it we want to go to the route and delete a specific book a try catching here and then inside the try we can do const response await equals sorry response equals await fetch and then we fetch the URL which is going to be hcdp localhost of 8000 api slash books and then slash and then we need to pass the book id so i'm gonna do plus book id because we have it already in here set where is it book id we've already got in here and we update in it from here we're setting it from the database when we go on our page so we can reuse it and now we need to change the fetch method by doing curly brackets and inside here method delete like so and now we can do the usual around here we can do if response dot okay then we want to navigate and then i'm just gonna navigate to books when we delete the record we also need to add the navigate function so we're gonna go here to the top and maybe add around here this can be const navigate equals and this is gonna be use navigate press enter and if it doesn't add in here from react route to dom add in manually like so and now we can use the navigate copy and where were we where were we here navigate oh did i misspell this okay navigate slash book that's absolutely fine and maybe we can do console.log book book removed okay for the let's do right click and format and for the catch error we can just do console.error for now okay save this and now we're on the great Gatsby and it's gone if i click on all of these that we added earlier when we're testing edit gone should be gone edit gone yep as you can see there oops as you can see they are deleted now gone and let's remove this one here as well final one edit delete book and the hope it is gone i think that's gonna be pretty much everything from this tutorial it was supposed to be a very simple one and he ended up being a full-on react tutorial if you learned something from here make sure that you hit the like button consider subscribing and hopefully i'll see you in the next one