MERN Stack Tutorial - Book Store Project

learn how to use the mernstack by creating a bookstore application the mernstack is a powerful blend of mongodb a nosql database express.js a web framework react.js a UI building JavaScript library and node.js a server-side JavaScript environment together they provide a cohesive framework for building efficient responsive web applications Mohammed taheri is a full stack developer and he will teach you quickly and simply how to build with the myrn stack hello everybody so what is the plan we are going to create a basic bookstore project we use Mana Stacks so we will have mongodb express.js react and Dot JS just some little tips before I start you must know JavaScript and basic react for this tutorial I try to explain everything as simple as possible all quotes are available on my GitHub you can find the link on video description what do you need for this tutorial first you need to have node.js in Instagram your computer then you need a code editor and a browser I use vs code and chrome but you can use anything you want no let's go and start coding first create a new folder with name of bookestore man stack then open it in VSCO here create two separate folders for backend and front-end projects also I created that git ignore file and also a readme.md file for the GitHub repo you can ignore this now let's initialize our project make sure that you are on the backends folder and type CD backend to go to backend folder then type npm initi Y and press enter this command will add a package that Json to our project and inside of this package.json file let's add a new line with the type of module this line will allows us to use ecmascript syntax which is import keyword and Export keyword Also let's add two packets to our project express.js and not more so let's type npmi Express node mod we use express as our framework and also we use notebook for restarting server automatically unchanged now let's add to a scripts to a script section A start will run the project with node.js environment and then we learn the project with nodemon and we use this command in development now let's create a new file with name of index.js this file will be the starter of our project we need express.js framework so let's add it here then Define a new variable for it then let's make it listen to a port it is better solution to separate your codes to different files and folders so for the port I want to create another file with name of config.js and I will Define my port in this file a better way to saving this port variable is that n file but I don't want to add it to this project so let's use this config.js for this tutorial then you need to import the supporting index.js file and use it we need a function for listening to this port let's create after listen function and use our port in it after port we can pass a callback function to app.listen and let's have a single console.log with a message to be sure that everything is okay now let's run our project using Esco terminal type npm brand div this command will start the server on our selected Port no in console if you see this message it means that our server is running and we don't have any problem now we have a basic server This Server language is Javascript it uses express.js as a backend framework and you can run this server on any machine with node.js environment let's run it and see the result first I check my node.js environment with this command node.v this command must give you the version of installed node.js then I use npm from Dev to run my server using notepad well we see the success message and it's good now let's open our browser and check the result on server Port which is 5555 so we need to go to local hotspot 55555 and this message shows cannot get a slash let's open developer tools and go to network section here you can see network requests I refresh my page you can see a request to localhost and it has a status of 404 let's click on it to see more details here we have three sections click on General now you can see request URL request method status code and other data a status code of 404 means that we don't have the requested URL for each URL we need to have an HTTP route the default HTTP route of the server is a slash and you can see the message of cannot get a slash so let's make it in index.js we use Express framework to create our HTTP Roots I want to create a new road for a slash Road I use app.get the get is our HTTP method that generally used for getting a resource from server we have some other HTTP methods and we will work with them later the first parameter of get is an estring for our row so let's use a slash the second parameter is on callback function that handles this request in this callback function we receive request and response and we can manage both of them for example we can unlock the request and also we can return any message with our response also we can send an HTTP status code for example let's send 234 with any message you want and now let's check the browser okay well we have our message and also our status code is 2 3 4. now let's add a mongodb database to our project you can use a local database or an online database in this tutorial I want to use a free online database let's open mongodb.com website and in this website click on the sign in button here you can sign up if you don't have any accounts I already created an account here so I choose Google authentication to sign in here click build the database in first row we see the options I choose free and zero plan I don't change provider and region it is not important in this tutorial next I choose a name for my database like Books store map tag is optional so I don't use it and actually create here we choose the authentication with username and password I use a simple route for username and a root for password but don't forget to always have a strong password for your database and this is a local project I don't add any IP for this database then click finish and close here you can see list of your databases let's click on connect button to get connection string here click on drivers and here on first section select the last version of node.js on the third section copy this connection string we need to use it on our server so let's go to config.js and create a new variable for it and paste it here and you need to add your password here and also you can choose a collection name so here let's add a books collection please create a free database for yourself this database will be deleted after tutorial now let's go to index.js and use it I import it from config.js and for working with mongodb database we need one Goose Library let's install it using npmi mongoose then import it into our file we can use Mongoose that connect to connect database and add a URL as a parameter to it then we can have that then that cache structure to handle different situations of success and failure on Cache I simply receive the error and log it to the console and and then first I login success message to console also I want my Express server to run only if database connection is successful so I simply cut my app.listen method and paste it inside of this block now let's run our server by npm run there and check the console if we see two success messages it means that we are okay and both database and server are running now we have mongodb database and Mongoose Library Mongoose is a popular object data monitoring library for mongodb it allows us to interact with mongodb easily which our script commands let's have a quick look at mongoosejs.com here we see a simple example of using Mongoose in this example we want to save a cat to database we need a model for cat and this cat must have a schema for example a name with type of a string then we use that model to interact with database let's copy this chat model and go to our project and create our book model creating a model in index.js is not a good idea it is better to always have a folder structure let's create a new folder named models in this folder we keep all our project models first I paste the cat model here I change its name to book then I use export keywords so that I can use it in another file for a schema this book just has a name but what if you want to have other fields the better approach is to create a schema outside and use it here we have a schema method of mongoose that can help us so let's create a book schema variable and it equals to Mongoose that schema and inside of that and we can have an object of fields and each object can have some options first I want title with type of string and I want it to be required so I use required true let's copy paste it and have an author again with type string and require it off two again paste and have a publisher feed this field has type of number and this is it we don't need ID because ID will be handled automatically by database and you will see this we can have some other fields for timestamps like time of creation and time of last update in order to having them after Fields object let's have another object and add time stamps true and that's it now let's use this book schema for our model the book model is now ready to use well now we have a book model and it's time to create our first book first let's import book model from its folder for creating and saving a new book we need a new HTTP route we type of post post method usually is used to create a new resource then let's use express app and create app.post the first parameter is wrote so I use a slash books the second parameter is a callback function this function receives request and response and handled because working with Mongoose is an asynchronous process we can use async keyboard for our callback function I also use a try catch blog for handling success and failure in catch below I simply receive the error then I log that arrow to the server console then I return a response with a status of 500 and I send an object read error message in try blog first let's have a quick validation for our input which comes from request.body so I check all of required fields to be in requested body and if they are not I return a response with a status of 400 and I send a message for client then let's create a variable for new book and use our request body for title author and publisher then let's call book.create and send this for new book to it and save the result to a book variable and finally I return a status quo of 201 and send a book to the client now let's start project with npm run Dev and test it for testing a post method we cannot use browser so I use Postman it is a good tool for working with web apis to create a new book with Postman let's open a new request first choose HTTP method which is post then paste your url here my URL is a slash book so it would be HTTP localhost your Port slash books then we need to send the body to our road let's choose raw here and here choose Json and then send your data as a Json to our server I use some test data and then I click send button well we have an error because the body is not recognizing our server so let's go back to the index.js again and add a middleware for parsing our request body we can use express.json and it will allow the experts to use Json body now let's go back to postman and test again I send my data again and this time you can see that book is created and I have the status of 201 and the created book also in this book you can see that I have underline ID and timestamps well we created a book and it saved on database successfully now let's create a new row to get all books from database we use app.get because this is a get method the router of this method is again a slash books but it is different from previous roads that was a post method and this is a get method and they are different again let's have an async callback function to handle our request and on catch I receive the error log into the server console and then I return a response with a status of 500 and the error message then in try block I use book.find and pass it an empty object to get list of all books from database and save it in a books variable then we can return a status of 200 and send books to the client let's go to the postman and check it so let's create a new request and choose get for our method and type the URL I use the previous URL with the slash books and then click the send button to see the result then we receive the list of books as an array and the status is 200. that's good but let's have a better output for this route so I want to have a shape for this output let's go back to its rows and instead of sending just the books Let's create a new object and in this object I want to send two values account that would be books that land and the data that would be our books now let's go back to postman anthesis again and that's it you can see that no I have a better structure for my data we created an HTTP route for getting all books but let's say we want to have another road to see details of a single book as another example if you have a list of products you may want to show the product details to the client you can send the idea of that product to the server and ask for the details let's do this because this method is like get all books I simply copy and paste this method and edit it well this photo is for getting one book from database by ID the method is again yet but in road we need to receive an ID in order to tag and parameter in roads to use colon so the road would be books slash colon ID and we need this ID to search in database so let's de-estruction it from request.parents then use book.find by ID and send this ID and the name of return will be book and we return this book to the client now let's check it in Postman let's create a new request and use get for its method the first part of URL is same as the books list but we need an ID so let's copy an ID from the books list and paste it in the URL and then send our request well it is working and we receive the requested book now it's time to update a book well update is a little tricky because we need both requested params and request that body in fact we need an ID panel to find the book in the database then we need request that body to update it so let's implement it we need a new route for updated boot this time we need to use after output because we use put method to update a resource so the road must be a slash books a slash colon ID and we have an async callback function with a try catch again in Cache we receive the error and first log it to the server console then return a response with the surface of 500 and error message in try block first let's have an validation we check title author and publisher and if one of them are missing the return and response with the status of 400 and a message then with this structure the idfirm request.parents this time I don't create a new variable like HTTP post method of create a book I use book Dot find my ID and update and pass ideas first parameter and request that body as second parameter and I save the result in a variable then we can check the result if the result is false we return a status of 404 with a message else we return a status of 200 with a message I use any message you want no let's go to the postman and test it I create a new request the request method is put the URL is book slash ID so let's copy one book ID 10 minute body we previously sent a body on creating a book so now you are familiar with it I put some random data here and then I press send and if you see our success message it means that everything works fine and you can simply go and check that book to see if it is updated or not and also Let's test an invalid idea and check the result again so with invalid ID we'll receive 404 of it it's message now let's delete a book fourth editing a book we just need its ID and we don't need body so let's implement it we need a new route for deleting a book fourth method we use after delete delete method is the standard HTTP method to delete a resource for road we use a slash books a slash colon ID again we have an async callback function and then try catch blocks in Cache we'll receive the error first I log into the server console then I return a response with a status of 500 and error message now let's go to the tribe like ID structure the ID from request that params then I use book dot find by ID and delete and passbook ID to it and I say the result in a variable name result then I check the result if the result is false I return a status of 404 with an error message else I return a status of 200 with a success message you can use any message as you wish now let's go to the postman and test our new HTTP route I must create a new request the request method is delete the URL is again like the update so let's copy one book ID and use it here and I don't need body so I simply click Send to see the result and if you see our success message it means that everything works fine and our book deleted successfully well we created our HTTP roads now let's refactor them to have a better application our application is okay but what if we have more than one model let's say we have eight models and for each model you need five rows then we must create 40 HTTP rows in index.js is it good no this is not a good solution we always try to use code disability and folder structures like what we did for our models in this situation we can use express router let's do this first let's cut all of our HTTP roads that handle books then we must create a new folder named routes inside that we created a file for each model let's create books route for now and I paste the HTTP roads and minimize them all to see them better in this file we need Express router so let's import Express from Express then I Define a variable named router to be expressed router then instead of app you can use this router so let's change all of the apps with router and finally I export this router as a default export also we are using book model so let's import book in this file next step is to use them in index.js as a middleware so let's go to index.js and import book clouds from its Road then we use a middleware for a slash books and we can pass books route to it this will say experience that for each request with prefix of ports handle them with this middleware and because of this we must change our roads so let's go back to books road again here the slash books are redundant and we don't need them so let's delete them to be able to work with our middleware now let's go to postman and check our server again I send the request to get books list and you can see that everything is working and they are okay so I will refactor is working correctly well we refactored our server and it is working fine we tested our HTTP routes with Postman and they are working now let's talk about one of the most important topics in web development course policy in order to have a better understand of it first let's see it in a real world example on Postman and react project in Postman I send a request to the server and I received the response without any problem that's good now let's check it in a react project I created a simple react project and here you can see that I'm sending a simple request to our server to get the list of books and then log it on the server console let's go to the browser and check it here I open developer tools and console tab then I refresh my page to see a new request now you can see this error access to XML HTTP request adds this address from origin of localhost 3000 has been blocked by course policy no access control allow origin header is present under requested resource well this is the course policy error course stands for cross origin resource sharing course is a security mechanism in the browsers that restricts the ability of a web page to make requests to a different domain in fact course policy is a web security mechanism that prevents unauthorized cross-origin access to a resource or a server when a web page makes a request to a different domain the browser sends a request to the Target server the server will check that whether the request is permitted or not server can check Origins methods and headers and allow or deny the request and this is what happened in our react example but how we can fix it well it is too easy in node.js let's go back to our server and handle course policy to handle course error you need to install a new package let's open our terminal and type in PMI course after that I import course in index.js and it must be used as a middleware we have two different options to use it first we can use just course with parentheses in this way we have a default value of a star that allows everything now let's go back to browser and test it I refresh my page and wait for the result and you can see that I'm receiving a response from server without any error good let's go back to server and test another option second option is to allow custom Origins this is a better way because we have more control over it for this we can use an object in course in this object we can use origin methods and allowed headers so for origin we can use HTTP localhost 3000 for methods we can use get post put and delete for allowed headers we can use content type and that's it no only the clients with this origin can access our server let's go back to browser and check it again well again we have access to our server without any course error well we created our server now it's time to create our front-end project with react there are different solutions to create a new react project a lot of tutorials use CRA or create a package and it is not bad but we have a better solution with wheat is a build tool that works better than CRA let's use it and create a new react project using the export terminal first delete this front-end folder it was just for showing that we have another project now make sure that you are on Main folder and type npm create Veet at latest if you don't have latest version of wheat it would ask you to install it then you need to type your project name for example floor 10 then select react then select JavaScript and that's it your new react project is ready now change your directory by this command CD front-end then type npmi to install npn package after that let's add failing CSS to our project opentylink website and go to get started then on framework guide choose Veet we have done a step one already so let's go to step 2 copy this command and run it in your terminal npm install Dash detailing CSS for CSS Auto prefixer after that copy the next command and run it NP styling CSS init dashboard this command creates two files for you tailing config and post CSS config then copy this content and paste it in table and config then copy these three lines go to index.css and delete everything and paste them then delete app.css because we don't need it anymore then go to app.js6 and delete everything and create a new component using rafc I'm using an extension name es7 plus let me show you that this extension allows me to use rafc to create new components now let's use some saving classes to make sure our codes are fine for example PG rate of 400 and text white now let's run our project using npm run Dev to see it well it seems that everything works fine now we have a ready to use react project with daily CSS now we have our react project we want to have a single page application or Spa so our application would not be refreshed on Page Changing we don't have this functionality in react itself so we need to install a new package let's open Terminal and make sure to be on front-end project and type npm I react router then we need some configuration for it let's go to main.jss here we need to import from reactor to the Dom the browser router then use it and pass the app components to it as children that's it now we have access to react router now on all of our project now let's go to app.j6 here first important react rotate them two things roads and routes then in return section of our component we return these routes inside of it we can have different routes for each road we need path and element so let's create five rows for five different pages and I'll create this space to use them here create a new folder in SRC and name it as page and inside of that let's create five different components and use them as our application base one createbook.jsys to deletebook.jsies three edit book.jsx for home.j6 and 5 Showbox at j6 that's it now let's go back to after GSX and first we need to import them one by one so let's import home create watch show watch edit book delete book now let's use them in our rows a slash goes to home component a slash books slash create goes to create book component a slash books slash details slash colon ID goes to show movie a slash boobs slash edit slash colon ID goes to edit book and slash books slash delete colon ID goes to delete book and that's it so we test them one by one when we develop space now we have all of our roads let's continue I want to use two npm package so let's go to terminal and start them npmi IX use react icons we use axios for sending HTTP requests and we use react icons for its icons then let's run our server so type CD backend and then npm run div then uncomment the default course middleware and comment the second one because our IP is different in this project now let's open a new terminal for our front-end project type CD front-end and then npm round div before developing our home page I want to create a component for loading estate this is a good idea to show our user as spinner when it is a loading estate let's create a new folder called components and create a new file named spinner.js6 and inside of that let's have a division with class names of animating width of 16 height of 16 margin 8 rounded full and bgs skyr 600 that's it now let's go to home page and implement it let's import use this data and use effect from react then we import axios from axios then import a spinner from its address and then we need a link of drag router down then we need some icons like AI outline edit BS info Circle and the outline add box and in the outline delete then we want to have two different states so let's create them one state for our books with default value of an empty array then a loading HD default value or false then we need us effect to call our backend I don't talk about user State and use effect because I assume that you are familiar with basic react let's create a user effect with an empty dependency array in that first let's use set loading to true then call access.get with our backend Road for books list then we receive response and set books to response.data.data and then set loading two files response.data is the object of our response result and in that we had content data so we use this data to save it on our state on Cache block we receive error and then we log it to the console and then we set loading yesterday to false now let's work on j6 parts in main division we use P4 or padding 4. then let's have a division with class names of flags justify between items of Center then let's have an H1 with class names of text 3x large margin y of 8 and textile books list after this H1 let's have a link to a slash box slash create and for this label we use an icon up in the outline ad box with classes of text sk800 and text Forex large after the first division let's open a curly brace and check if you are unloading a state or not and if it is true let's render a spinner component else we return a table with classes of with full border separate and Border spacing two in that we must have a t head and a t-body in t-head let's have a tiro and in that I want to have a 3D with classes of Border or the estate 600 rounded MD and fixed off no then let's have another THB same classes and text of title then again another th we takes out author but with an additional class of Max MDA hidden so that this column would be hidden in Mobile and tablet sizes and again another th with same classes with title of publisher finally let's have a thp title of operations but for this one I don't use Maxim V of hidden so we have five columns and two of them would be hidden four lower sizes then let's open a curly brace and use books.map with an arrow function we receive book an index for each item of books array and we return a TR with key of book dot underline ID and class name are height 8. first item is a TD bit class names of border border estate 700 rounded MDR take Center and for its text we open equilibriage to use index plus one because index starts from zero but we need to start from one then let's have another TD bits and classes and text of book title then another TD the title of book dot author but for this one we use max mdl hidden like the top section then let's have another tdv book.publish here and again with Max and you have hidden and finally another TD for our operations in the final TD I use a division with class names of flags justify Center Gap xr4 and in this Division I want to have three different links with icons let's create a link to a slash box a slash details slash book dot underline eye I'm using the syntax to create Dynamic roads inside this link let's have a bscilling for with classes of text weeks large text screening 800. then another link to a slash books a slash edit slash book dot underline ID with edit icon and yellow color then find a link to a slash books a slash delete book dot underline ID with delete icon and a red color now let's format our document and then go to our application to see the result first let's just add then let's test book details then let's test book edit then test book delete and you can see that they are all working fine after showing all books in the table we can show one book details in another page before that I want to create a reusable component for my back button I want to have a button to go back to our books list let's create it first in components folder let's create a new file name back button.j6 inside of that first import link from recruiter down then import vs Arrow left from dragged icons we can receive a destination prop here with default value of a slash so if we don't pass it the destination will be a slash Road by default for main class I use flex and inside of that let's create a link component to destination and for class names I use bgs Sky 800 text white adding xr4 padding wire one rounded up LG and Vita fit inside the link we can use our icon with class name of text tweaks large and that's it now I go to showboat component first let's close the Explorer to have some more space then we need to import use effect and use a state from react then we need axios also we need to use params from regulator down and also we need back button component and the spinal component in our show book we need book estate for handling our book show then I use a loading state to handle the loading time then idea structure ID from use params then I use the use effect hook and in that first I set loading to true then we use axios.get with the address of this book with its ID then I receive response and I set response data to book a state then I set load into files and in catch block I receive error and I simply lock that error and then I set load into false in return section I use a padding for class 4 main div then I use back button and it has default row so we don't need to pass row to it then let's have an H1 with glasses of text 3x large margin by 4 and value of show book then let's check loading estate if it's true we can show a spinal component else we can show a division with classes of flags Flex column border 2 border Sky 400 rounded its large Vita feed and padding of four then I want to use a structure and repeat it let's create it I use the division with classes of margin y4 inside that I use a standard class names of take six large margin writer 4 takes layer 500 and the value of ID then I use another expanded value of book dot underline ID the other parts are copy paste so let's copy it and use title and book the title then another copy with author and book dot author again another copy we publish here and book.publish here and next item is create time and new data of book.ql.2s3 and final one is a copy with last update time and new data of book.updated at dot twist stream and that's it now let's go to our application and test it and here I test some of my books and you can see that it is working correctly now let's work on creating a new book in createbook.j6 we need to import user State then we need back button a spinner axios and use navigate from regular there are different solutions for controlling our form data I simply use three different states for them so let's use title author and publisher then I use a loading state after that I use navigate equals to use Navigator I need this to navigate to Main Road after creating our new book then I create a handle Save Book function for handling our book create operation here first let's make a new data object with value of title author and publisher then I set loading to true then I use access.pose to a slash books and I send data as second parameter and then block I simply start loading to files and navigate to a slash Road and on catch block I received error and I settled into files then show an alert with some text and then lock the error to console then let's work on js6 for main div let's add class time of padding 4. then I add back button component here then let's have an H1 with class names of text 3 is large margin y of 4 and value of create book then let's check the loading estate and if it is true we show a spinner else to show an empty string then let's have a division with classes of flags Flex column border 2 border Sky 400 rounded its large width of 600 pixel padding of 4 and marginally sub Auto then I want to have a structure and repeat it so let's create a division with class name of margin y4 inside that I want to have a label with class names of text 6 large margin rate of 4 takes layer of 500 and value of title then let's have an input with type of takes value of title and change we received event and set title to event.target.value and class names of Border 2 border gray 500 padding X of 4 padding by of 2 vita food then we can simply copy and paste this structure for label let's use author then change the value to Auto and change the unchanged to set author then let's copy paste this structure again and use publish here for label as well as value and for on change we use set publish here finally let's have a button with classes of padding 2 bgs5 300 and margin of 8 and on click we call under say book function and you save for its label now let's go to our application and test it here let's insert some information for our new book and after that we press save and wait for the result if it is successful we will be redirected automatically to the home page and as you can see our new book here now we can work on edit food because the structure of our edit is like create either to createbook.js6 and copy everything then I go back to edit book and paste all of them instead of current component then I change the name of our component to edit book again and I export default edit work then let's go to the H1 and change it from create book to edit book and in edit we first fetch our book with its ID from backend and we need to use effect and use product for this purpose so let's go to the top of our page and import use effect and use params then we can simply restructure the ID from use params then let's use use effect and inside of it first set loading to true then call axios.getrotub slash books slash ID then click on receive data and set auto to response.data that other set publisher to response the data.publish here and the title of response.data.title and then set loading to files and on catch below we can simply set load into files show an alert with the custom text and then log the arrow to the console now we have our book data in estate so we must be able to see it on Imports let's go to the application and check it before continue well it seems that it is working so let's continue the only change here is the handle Save Book function let's rename this function to handle edit book again we want data and set loading but for HTTP method we need put also we need the idea of book so I use template literals and I add ID after slash books and the other functionality is the same so we don't need to change them but we change the function name so let's go to the button add on on click section change the name to handle edit work now let's go to our application and test it let's click on edit button on one random book we need to wait for the loading State and then we can see the book data let's edit them to some random data and then click save the application goes to the Loading and after loading in successful response we must be redirected to home page and here we must see our updated data and the final page of our main stack project is delete book so let's work on it in this book.js6 we need to import user State back button a spinner axios use navigate and use param from drag router then let's have a loading state after that I use navigate equals to use navigate then IDs structure ID from use power arms then I create a handle delete book function here first I set load into true then I use axios.delete to slash books idea of our book and then blog I simply set loading to files and navigate to a slash Road on catch block I received error and I settled into files then show an alert with some text and then lock the error to the console in return section for main division I use last name of padding 4 then I use back button after that I use an H1 tag with classes of text 3 is large margin by a 4 and takes off delete push then let's check loading estate and if it's true we return a spinal component else we return an empty S3 then let's have a division with last names of flags Flex column item Center border 2 border scale of 400 rounded x large width of 600 pixel padding of a and margining sub Auto then let's have an H3 with class name of text 2 weeks large and takes up are you sure you want to delete this book then let's have a button with class name of padding 4 busy rate of 600 takes wide margin of 8 and Vita of full and on click we invoke handle delete book function and for its labeled use yes delete it and that's it let's go to our application and test it and here we can click on delete button of any book we want indeed page we can click on the delete button and after successful delete we must be redirected to a home page and here you can see that the book is deleted well our Cloud application is completed no let's make it more beautiful and elegant I want to have two different options to show the book's list to viewers table and cards we implemented the table so let's add cards in First Step let's go to components folder and create a new folder named home in that I create two components bookscard.jsx j6 first we need to refactor the table so let's go to home page and first let's import books table and bootcard then cut the table tag from this page and go to books table and paste it inside of return section we need books list so we receive it from props also we are using link and some icons so let's copy the link and the icons from home page and paste them here and no it is completed in order to use it in home page instead of all table tag we use this component and we pass books to it after refactoring the table we need a state to control the type of show so let's add a shorter State and use a default value of tables for it then right after the main div let's create another division with class name of flex justify center items of Center and get itself for then I use a button with class name of bgs5300 and however pgs5 of 600 padding xr4 padding wire 1 and rounded up LG and on click I said so type to table and I use table for its text then we can copy this button and reuse the classes and unclick this sensual type 2 card and I use card for its text now we have the functionality of changing the design and let's go down and change the return after loading so after loading we check that if show type equals to table we return box table else we return books car and the passbooks to it now let's check the result until knowing the application after loading we can see the table and if I choose cards we can see the cards component so let's go and complete it here we need to import link from reactor down then we need to import Pi book open text slide and we are user Circle AI outline edit and this info Circle and and the outline delete then I received the books as props for my individual let's use class names of grid and SM grade Columns of 2 on LG grid Columns of 3 and an Excel give it Columns of four so it would be responsive based on the screen size then we need to use bookstart map and receive the item and return a division with key of item that underline ID and class names are border 2 border gray of 500 run the large padding xr4 padding by of 2 margin of 4 relative and on however we have Shadow of its large instead of that first let's use an H2 tag with class names of absolute top one right of two padding X of 4 padding y of 1 BG rate of 300 and rounded up LG and for the text we can use item.publisher then let's have an H4 with class names of margin y of 2 takes area of 500 and we can use item.underline ID Inside Out is H4 then let's have a division with class name of flags justify a start align items of Center and GAP X of 2 and inside of that let's use Pi book open text slide and for the class names let's use text rate 300 and text off 2x large then we can have an H2 with class name of margin y of 1 and we use item.title for its label after that I want to have another division with class names of flags justify a start items of Center and GAP X of 2 and I use an icon of via user circle with class names of text red 300 and it takes two weeks large then I use an h2b class name of margin volume 1 and I use item.atel for its text then I want to have another division for the button so let's create a new division with class 9 of flags justify between items of Center Gap X of 2 margin top of 4 and padding R4 inside of that I want to have three links for the first one I want to have a link to a slash books slash details slash item.id and for the icon I use BS info circle with class names of text to x large text building up 800 and on however I use text black then I want to add another link to a slash books slash edit slash item that under ID and I use AI outline edit again with class names of text to is large takes yellow of 600 and on however I want to have takes off black and for the last link let's use a link to a slash books slash delete slash item.under ID and use an icon of MD alt like delete with class names of text tweaks large takes a red 600 and however we want to have text black now let's go back to our application and test it and here after loading we can choose table and we can see the table view of our books and also we can use card and we can see the cards view of our books in previous lesson we implemented book scar component now let's make it better in this components we are mapping over the books array and we return a division for each item and we use it as a single book card but a better approach is to make this division a reusable components so that we can use it in any other components we want and also it is easier to maintain refactor and also change so let's cut all of the division inside of the map and in components folder on home let's create a new component then book single carta.js6 and paste the division in return section this is a separate component so we received a book object as a prop and we change all of the item usage to book after that we need to have the link and the icons so let's copy all of them from books car and paste them here no this is a reusable component and it just need a book crop let's go back to books card here first I import the new component then in map section I return the book single card component and I pass key of items that underline ID tweet and also I pass a book equals to item prop to it and that's it no it must work let's go to the application and test it here after refresh everything must work fine and also open the console and check that you don't have any error here in console now let's add another feature to our project I want to have a model to show some information for each book in components home let's create a new file name bookmodel.jsx and inside of that first let's import AI outline clone Pi book open text slide and Via user Circle phone react icons then let's define some props so we need Bush and on close we use this book to show some data and use unclose to close the model then for main division let's use these classes fixed Digi black vgo opacity 60 top of 0 left of 0 right of zero bottom of zero Z index of 50 Flex justify of Center and items of Center and for unclick we invoke on closed prop this is the container of our model it is a fixed division that would be on the top of everything and we added Z index of 15 to be sure about this inside of that let's have another division for unclick we receive event and we call event.stop propagation and for class names we use width of 600 pixel maximum width of full height of 400 pixel these are white rounded up it's large padding of four Flags Flex column and position of relative we use a stock propagation so that with each click the parent and click would not be invoked because we need this model to be closed only in two conditions first click outside of the model white area and second click on the red close button of the model void area that will Implement soon now we have our model and we can show anything we want just for the close button I use AIO Auto and close icon with the last names of absolute write-off 6 top of 6 takes off 3x large takes rate of 600 and cursor off pointer and until I call and close props so this button will close our model then let's copy some of the single bootcard elements here to show to the viewer you can choose anything you want and for the first H2 which is published here I delete these classes absolute top one Android 2 and I use Vita fit and after them I use two optional paragraphs you can use them or you can ignore them and these are just four demonstrations now our model is completed and it's time to use it let's go to book single cards and first we need to import bi show then we import user State and book model then we need a new estate name show model with default value of files this state would control the open and close the state of our model no on links division let's add a bi show with class names of text 3x large takes up below of 800 and however let's have a tick stop black and the cursor off pointer and ankylic we call such show model with value of true this is for showing our model and before the last division of this component let's open a curly race to access JavaScript and check if show model is true then we run the book model and we pass the book to it for on kilos we call Central model with value of files and that's it now let's go to the application and check the result and here for cards view we can see the icon of model and by clicking leads we can open the model and see the data and you can see that if I click inside of the white area the model is still open but clicking on close button will close the model also clicking all side of model area will also close the model well our bookstore project has full Cloud functionality but we can make it even better when we alter our database we create update or delete we redirect our user to home page if the operation is successful but we don't give any feedback and the user can't see any details about the operations and this is not good for our user experience a good approach is to show a beautiful alert to user we can use default browser alert but it is not beautiful I want to use a npm package name not here stack in the naughty stack npm page you can see how to install and use it based on the document and female strap app component inside of a snack web provider to have access to the hook cortex so let's go to the project and use it first we need to have a terminal on front-end directory and we type npmi note your stack then let's go to main.js6 and here we import a snack bar Provider from Naughty stack then we use it so that we have access to it on all of our projects now let's use it first let's go to the createbook.js6 and here on the top section first we need to import use a snack bar from Nokia stack then with the structure and create a snack bar from use a snack bar then on hand the say book function before navigating to a slash row we can call it for example I can call it as inquiry snack bar with a message like who created successfully and we can pass some options like variant or success also on catch below we can use another example for example in queue a snack bar of error with variant of Arrow and that's it so we show a beautiful alert instead of ugly browser default colors and that's it then let's go to editbook.js6 and do the same first we need to import use a snack bar from not your stack then with the structure and create a snack bar from user snack bar and then unhandle edit book function before navigating to a slash road we can call it as and create a snack bar with message of book edited successfully and variants of success and also on catch below we can use increase snack bar with message of error and variant of error and after that I want to use it for deleting a book operation so let's go to the deletebook.js6 and here first we import use a stack bar from notice tag and then with this structure and create a snack bar from use a snack bar and after that on handle delete book function before navigating to a slash row I call it as increase snack bar of book deleted successfully with variant of success and also I call it on catch below like this and create a snack bar with message of error and variant of error now we have beautiful feedback for creating a book updating a book and also deleting a book let's go to our application and test it first let's create a new book after operation we can see beautiful green alerts with message of book created successfully and will be redirected to home page now let's edit a book and change it and after operation we can see green alerts we takes off book edited successfully and we will be redirected to home page and finally Let's test delete book again after operation we must see green alerts it takes off book deleted successfully and we must be redirected to home page and now our application has a better user experience well this is the final lesson of our book history project I hope you enjoy it let me know if it was useful or not and comments have a good time and goodbye

Channel: freeCodeCamp.org

Views: 203,018

Keywords:

Id: -42K44A1oMA

Length: 62min 0sec (3720 seconds)

Published: Thu Aug 31 2023