Build and Deploy MERN Stack App | Redux-Toolkit | JWT-Auth, CRUD, Like, Pagination, Search & Comment

hi everyone welcome to my youtube channel today in this video we will build and deploy this awesome mar stat tour application with the help of mongodb express react and node and we are also going to use here reader toolkit for managing our application state so this application include all essential features like email authentication google sign in user can add tour along with image we have a detail page for a specific tour under detail page we have related tools section and we have also included here discuss comment section in order to post comment user can update or delete any tour from dashboard section so we have created dashboard section from there user can perform deleting the tour or updating the existing tool we have also included search functionality in this application you can see that we have also implemented the pagination you can also get to by clicking on tag we have also implemented live functionality in this application as well and this application is also going to be fully responsive you can see that each page in this application is fully responsive and once we implement all the functionality in this application then we are going to deploy our backend to heroku and front end to netlify so this is the overall application that we are going to build and deploy in today video and before we start working on this application please don't forget to subscribe my channel and please like the video as well if you like the content so let's start working on this application without wasting any time so as you can see that i am in this directory and inside this directory we are going to set up our folder for backend and front-end so for back-end i have already created a folder that is server and for front-end we will create later so i have already opened this directory into my visual studio code so let's go into the vs code so you can see that this directory is open in my vs code and here what i'm going to do first so i'm going to do inside this directory and i am going to open one command prompt so we are going to start everything from scratch so first i am going to do npm init so you can give hit enter enter enter okay so here you can give yes now if you go back to your vs code so you can see that here we have got our one package.json file okay so first we have to do some adjustment here in our package.json file so in our backend we are going to use module so here we need to provide the type okay and that will be the module because we are going to use import statement to bring the package from our node model we are not going to use require here so that's why i'm using your module now after that what we have to do so first i'm going to install some packages here inside our package.json file so let's open the cmd let's just do a clear first and i'm going to install the package like the package first i'm going to install bcrypt to secure the password so be crypt b c r y p d j s b crypt js so the next package we are going to install course so course help us to access api in our front end that we have created in our back end so we need to install this one the next one we need to install express the next package we are going to install json web token then we need to install mongoose here after that morgan so morgan is a http request logger so whenever you make api request we can easily see in our console so this package is required so let's install this package first so it will take around one to two minutes to install all these packages so let's wait for the package installation now we need to also install one more package that is nodemon so this package we are going to install as a dev dependency so we need this package so whenever you do changes in any files so you don't need to start server manually so node mod automatically restart server every time whenever you make any changes in file so let's install this package as a dev dependency and let's wait for the package installation so our node 1 package got installed you can see that here and it installed as dev dependency now we are going to create one file inside the server folder that is index.js where we are going to set up our express server so first i'm going to set up a very basic server so what i'm going to do so import express from express i'm going to define your port so cost port equal to 5000 so our backend will run on the 5000 port and after that let's initialize our express server so constable to express and here we can have our first route and this route i will remove later so first i'm checking over here like our express server is running or not so let's do here like request response and we can do like rest.send okay after that we can do like app dot listen we can specify port we can have one callback in which we can give message like server running port five okay so i have just put here port variable and we need to write one script here so inside this we can give here like div and i'm going to give here like node 1 and index.js so this is our file now let's verify this one so before verify we need to give your like hello express okay now let's open the command prompt let's clear out this one and let's do npm run dev so node 1 is running here now we can verify this one in browser so you can see that we have got our console as well that is server running on port 5000 so let's verify this one in browser as well so you can see that we have got our hello express message that we are sending from our index.js file so we have successfully able to set up our basic express server so the next thing we are going to setup our mongodb so first we need to create a database in mongodb so let's go into the browser and i have already logged into my mongodb account so you must have a mongodb account in order to create a database in mongodb so here what i'm going to do so i'm going to create a new project and i'm going to give a project name here like tour app okay now click on next create project after that we have to build a database so we are going to use here free version so let's click on this one create and you can use any cluster here so i'm not going to touch here anything so i'm just going to click on create cluster now i'm going to give here username so username i'm just going to give you like code code with vishal okay and the password will be the simple one two three four five six and i'm going to create here user so it's saying password provided is two weeks so i'm going to generate your password so let's generate here and let's see what is the password so i'm going to save this one in my vs code so let's save here for now let's click on create user so user is created here now the next thing i am going to add my ip address here so i have just added my current ip address now we can click on this finish and close go to database so it will take two to three minutes to create a cluster so guys collector is created now so we need to click on this connect so we have to establish mongodb connection in our application so i'm going to choose here connect your application that is second option so here we have got our mongodb string so we need to copy this one and let's go to the vs code and i'm going to paste here now we can close this one now let's go back to vs code again so now we are going to establish a connection with mongodb so what we can do here so first we need to bring mongoose import mongoose from mongoose okay then we need to bring course from course okay then we also need to bring morgan to log our http request so let's bring the morgan as well after that what we have to do so we can put this one here for now and after this line we are going to have our app.use so morgan is a middleware so it will so it will help us to log our http request in a console that is command prompt only so we need to give your dev now app dot use and here i'm going to use express dot json and here we can give the limit so i'm going to give your limit like 30 mb and extended true okay extended will be the true now let's copy this one and this will be the url encoded and again limit will be the 30 nb and extend it will be the true only after that what we have to do so now here we are going to have one variable that is db url okay and i'm going to put whatever the string we have copied from our mongodb so let's copy this one and paste it over here and here we have to provide the password so password we have already copied this one and don't use this credential because i'm going to change the password so it won't work for you so i have given the password here now this thing also we need to change so this is our db name so i wanted to give the db name like to db okay so this will be our database name and the rest of the thing will stay as it is now after that so we can remove this one no we don't need this one so we can have here mongoose mongoose and inside this we can pass our mongodb url and after that we have to use here then okay and inside this we are going to have one function so that will be like app dot listen okay and here we can give port and one callback function and we can have console log and we can give you like server running on port 5000 and in case if we have any kind of error so we can handle here itself so catch error and we can give here live console dot log and whatever the error we are getting from our mongodb we can specify here and we can give myself did not connect since it is in one line so we can get rid of this curly bracket okay and we have forget to use course so let's use the course as well so after this url encoded we have to use app.use course okay so let's save this file and let's open the terminal so it's saying mongoose is not a function so here we are missing one method like connect okay so it will be mongol.connect let's save this file okay and let's open the command prompt so now you can see that we are not getting any error so we have successfully able to set up our mongodb in our back end so the next thing we are going to structure our backend project so i am going to create some folder here so the first folder will be like models okay then we are going to have routes folder then we are going to have folder like middleware and another folder we are going to have like controllers in which we are going to have our business logic so first i am going to start with the models so first i'm going to implement the authentication so user.js let's create this one file user.js so before we create api so we need to create a model here with the help of mongoose first i'm going to start with the model or the user so we need to bring mongoose so let's bring the mongoose from our mongoose and it will be like const user schema dot schema and the first will be like name so it will be type so the type will be the string okay and required will be the true so now we have to create the same thing for other field as well that is email password google id okay so okay so the second will be the email and this will be also true this will be the password so we are also going to store the password if user is registered with normal email and password and this will be the false because we are also going to implement the google sign-in so in case of google sign-in we will not able to store the password for that user so that's the reason it will be the false and this field will be the google id so we are also going to store the google id and this will also false because it depends on user whether he is going to register with normal email or password or just login with the google so in that case google id will not be stored if user is registered with the normal email and password so that's the reason this field will be also false the next will be the id and here we are just going to give type as a string so this will be our model for user then we have to do like export default mongoose dot model and here we can give like user and it will be user schema so our model is ready now we have to work on our controller so let's create one file with the same name that is user dot js now here what we have to do so first we need to bring b crypt here so we crypt from decrypt js then we need to bring jwt from json web token and we have to also bring the user model that we have created so user model from models folder then user dot js after that we have to specify one secret so secret we can give here like test okay test okay now we are going to write a controller for sign up so we can define one function here export cost sign up and this will be the async and it will have request and response and after that what we have to do so from request body we are going to receive first name last name password and email during the registration so let's bring this email password so we are going to receive from our front end so once we start working on our react application we are going to send all this detail in the body so let's first destructure here all this thing that we are going to pass from our react application and this will be the last name after that we are going to use try catch and inside try first we are going to check like if the same user is try to sign up then we are going to avoid that one so cost old user is equal to await and user model dot find one and here we are going to check with the email because email will be the unique and if you find out and if you find out that it is the same user that is try to sign up again then what we can do here so we can just put a return here so the below code don't get execute so return response dot status we can return the status like 400 if user is already existing and we can give message like user already exists so we can give here message like user already exist okay so whatever the code we are going to return below this if condition is not going to execute if the user is already existed after that we are going to protect our password so cost hash password and here we are going to use a weight decrypt dot hash and password and we can give the length here 12. after that we are going to have our result so result equal to await user model dot create and you can pass your email password so password will be the hash password only and name so in case of name we are just going to combine this first name and last name so first name and last name okay like this way then then we have to generate a token here so cost token jwt dot sign and here we are going to have our like email so it will be like result dot email then id so it will be like result dot underscore id and after that what we are going to do so we can pass here secret and we can also specify like expiry time of this token so we can give your expire in and our token is going to expire in one hour so we can specify this one okay now after that we can just send here like response dot status 201 dot json and we are going to send the result along with token okay and let's handle the cache block as well so inside this we are going to handle the error part in case of error we can just give like response dot status and we can give here 500 and with json response so message we can give here like something went wrong and we can also do a console log so let's do that one as well now let's format this one so our first controller is ready now we have to register our api so i'm going to create a route here so again i'm going to create a file with the user.js only and here what we have to do so here we need to bring express so express from express and here we are going to define our router so router equal to express so router is inbuilt with the express so express dot router and then we have to bring our controller that we have defined in our user.js file inside controller folder so let's first go into this folder that is controllers and the file is user dot js and we need to bring sign up okay after that router dot post and we have to specify the route here so it will be like sign up and we have to specify here our controller so sign up after that we have to export this router so export default router now let's go into the index.js file and here we can bring our and here we have to bring the user router so user router com so we have to go to the routes folder and the file is user.js after that we have to use like app dot use and we can specify the initial api endpoint so it will be like user okay and and after that we can specify here user router so our api will become like this okay so http slash local host 5000 and it will start with the users then sign up okay so we are done with our first api so we can verify this api in our postman so i'm going to open postman first here so you can see that i have already pasted the url here and make sure to select post here and in the body we have to select draw and it will be json so let's select json and i'm going to provide your first name so first name it will be john last name i'm going to give do email i'm going to give here john doe gmail.com and the last one is password so you can give your password one two three four five six okay and let's click on send so now you can see that we have got two thing from our response that is the result and token so in result we have a name email and password you can see that password is now hashed so this is hashed password and we have got one id unique id from our mongodb and we have got this token now you can also verify this one in our mongodb so let's go into the mongodb and here you have to click on browse collection so let's click on that one and now you can see that we have got our user model here and inside that we have stored our first user that is john doe with name email and password so we have successfully able to store our first user in mongodb with the help of signup api now the next thing i'm going to create api for sign in as well so we have already one user in our mongodb so we can perform the sign-in operation with the same user so guys we have created our first endpoint that is sign up now it's time to create the sign in api as well because we have already one user in our mongodb so let's do that one as well so we need to go back to our user.js file and here i'm going to create one more function here so export cost sign in this will be also async it will having request response and we are going to receive email and password from our request body so request dot body and we can restructure email and password that we are going to receive so we got this email and password so again we are going to use here try catch block and try so first we have to check here like if user is exist or not so old user can't old user and await you can give your like user model dot find one and we are going to check with the email so if this user is exist then only we can allow user to sign in so if user is not exist so if we check here like if user is not exist then we can simply return like response dot status four not four and we can send one json response like user and we can send message like user does not exist so we can give here like user does not exist so whatever the below code we are going to write is not going to execute we have to first and after that we have to check if password is correct or not so each password correct then each password is correct or not so update decrypt dot compare so the password that we are going to receive we have to pass here and we have to check with the password that we have inside this old user so old user dot password okay so again we have to do like if password is not correct so if password is not correct then we are going to send a status with the 400 so 400 and again we can send here json response like with the message invalid credential so let's keep the message here now if everything is okay then we can allow user to login with the token so cons token equal to dwt dot sign and here we can give you like email old user dot email id old user dot id we can pass here secret we have to pass your secret and again we have to specify the expiry time of this token so it will be one hour and then we can send here status response dot status and status we can send here 200 with the json response like result and we can give here like old user and we are also going to send the token okay now let's handle the cache block as well so if you got any kind of error so inside this we can just copy this two line of code again so let's copy this 2 line of code and we can paste it over here so we have completed our business logic in our controller so let's register this route as well in our user.js file under route folder so i'm just going to copy this one and this route will be the sign in and we have to bring our controller as well for sign in and we have to specify here sign in okay so guys now let's go into the postman whether user is able to login or not so we have already one user in our mongodb so we are going to use the same email and password so i'm going to open one tab here and here let's just copy this url okay and this will be the post and the route will be the sign in i'm in our api endpoint and the body you have to select raw and it will be the json so i'm going to give here email so email i'm going to login with the john doe that we have in our mongodb so it will be john.gmail.com and i'm going to give your password so the password was one two three four five six so let's try with the wrong password first so let's click on send so now you can see that we have got json response like invalid credential now let's login with the user that is not exist so let's give here one two three let's click on send so now this time you can see that user does not exist because we don't have user with this email in our mongodb so let's remove this one and this time we are going to login with the correct credential so that is six so our path so our password was one two three four five six now let's click on send so now you can see that we have got our result here which contain id name email password along with the token so we have created two endpoints so far now that is sign up and sign it so at this stage we have enough endpoint to start working on our front end that is react so let's go into the directory and inside this i'm going to create a react project so i'm going to open one command prompt and i'm going to create a react project with the command npx create react app and the project name i'm going to give your client okay so it will take around two to three minutes to install all the necessary dependency so i'll be back once all the dependency got installed so look like our project setup is now complete so first let's go into this directory that is client and before we do npm start i wanted to install some dependency that is required to build our front end application so i am going to install the package like uh redux toolkit so we are going to use reader toolkit here to deal with the asynchronous stuff so let's install this redux toolkit package after that we are going to install react router dom router is important here and after that we are going to install the package mdb react ui kit okay so in this project we are going to use material design bootstrap and we need to install movement as well movement we need to install react file base 64 because we are going to upload the image as well so we need this one then we need to install react google login after that we have to install react redux then we need to install react 25 then we need to install material ui core as well because we are going to use one component that is chip component that is not available in material design bootstrap so we need to install this package as well and we need to also install material ui chip input because we are going to provide tags while creating a tool so we need this one we also need access to make a api request with our backend so i think this much package is required to build our application so let's install this package and let's wait for the package installation so i'll be back once all the package get installed so our all dependency got installed now so let's do npm start okay so let's wait for the application load into the browser so guys our react application is successfully loaded into the browser so here you can see that a client folder is created so inside this we have our source and we have our package.json files so we have installed this many packages in our front end now let's do some cleanup so i'm going to app.js file and i'm going to remove all this content okay and i'm going to give here like hello react okay let's remove the logo file as well and let's go to the browser so now you can see that we have got our hello react the next thing i wanted to configure material design bootstrap in our react application so i am going to the official website of material design bootstrap and i have selected this bootstrap 5 version okay so we need to configure this material design bootstrap in our front end so first we need to bring the css file from material design bootstrap so i'm just copying the import statement and in index.js file we can paste it here after that we need to go back again material design bootstrap and here i'm going to copy this this style sheet because we are also going to use some icon in this application and that styles it i'm going to paste inside this index.html file and the next thing we have to copy this is stylesheet as well for the font and we have to paste it here as well in index.html file and we have to copy this fund family as well from body and we have to paste in our index.css file so it will be this okay so this fun family we are going to use now if you go back to the browser so you can see that our font got changed so that means we have successfully configured material design bootstrap in our react application now the next thing what i wanted to do so first i wanted to structure our project so i'm going to create some folder here under the source only so the folder will be component okay the second folder will be the pages and again we are going to have one more folder that is redux so only this much folder is required so after that i am going to configure react 25 as well in our application so let's go to the app.js file and here i am going to bring and here i am going to paste to import the statement from react 265 let's remove this one we don't need and here i'm just going to paste this towards container so we have also configured react testify in our application so guys now i'm going to enable routing in this application so first i'm going to create some file in this pages folder so we are going to have login dot js we are going to have one register page okay register.js and then we are going to have home.js okay so for now i'm going to rejected three route only so here i'm just going to generate some snippet using rfce so let's generate this snippet first and here we can give search home okay and let's generate snippet in login.js file as well and for now let's just give login okay and same thing i'm going to do in register dot js file and this will be register okay now let's come to app.js file and here from react router dom we need to bring some components to enable routing so we are going to bring browser router routes and route okay so we are using here react auto dom version 6 so switch is no longer available in updated version of react auto dom so we have to use routes here now let's remove this one and we are going to have routes here so it will be routes and inside that we are going to have our different different route so first route we are going to have our home page and we have to provide element and here we have to bring our home component okay likewise i am going to register rest of the route that is login and that is login and register so it will be login and the component will be the login and this will be the register okay and this will be register component okay now let's save this one and we have to also provide the browser router wrapper so let's provide that one as well otherwise routing will not work let's cut this one and put it inside browser router and let's go into the browser refresh this one so still compiling i guess so now we have got our home page here and if i go to login so login page will get rendered and if i give you a register so register will get render so first i am going to start with the login page because we have already one data is stored in our mongodb so first we are going to implement the login functionality so let's go to the vs code first so first i'm going to bring couple of hooks from react that is use state use effect we need to bring some component from our mdb react ui kit to build the form so mdb reactivate and we need the component like mdb card so we need card component we need mdb card body we need mdb input we need mdb card footer we need mdb validation we need mdb btn we need mdb icon we need mdb spinner okay so these many component is required from our material design booster to build the form component now we also need link from our react router dom so let's bring the link as well so for now that much import is required to build the form now we are going to define the initial state of the form so let's define the initial state of the form so it's gonna having a email which will be the empty and we are going to have password which will be the empty okay and inside this we are going to have our form value so form value set form value it gonna having a huge state now first i am going to destructure this email and password from the form value so we need to provide the initial state inside here and here we can restructure our email and password and after that we are going to work on our form components so you have to work inside this return part so i'm going to have davier some inline styling so the line styling i'm going to give here like margin auto and padding i'm going to give here 15 pixel max width i am going to give here 450 pixel align content it's gonna be center and let's keep the margin top as well little bit okay so that will be 120 pixel okay now inside this div we are going to have our card component so mdb card and i'm going to give here alignment center then i'm going to have some db icon okay then it will be fs so font awesome icon we are going to use icon will be user circle okay and we can give your class name fa hyphen 2x so basically we are increasing the size of icon after that we can have an h5 tag in which we can give sign in okay now we are going to have mdb card body okay and inside that we are going to use mdb validation okay and inside this we are going to have on submit and let's define the method handle submit and let's define this method outside this return so that we don't get any error okay so we will add the logic later so i have just defined after that we have to provide one profs that is no validate and we have to give one class name like row g hyphen three now i'm going to use one div with the class name cool hyphen md fn 12 okay inside that i'm going to use mdb input component so level i'm going to give here email type i'm going to give here email value will be the email that we have in our state name we have to give here so name will be the email on change method we have to give here that will be like on input change so this method also we have to define outside the return so i'm just going to copy this one and this will be on input change okay after that what we have to do so this field will be the mandatory so i'm just making it required and if it's fail then we have to provide invalid and then we have to provide the validation so i'm going to give here message error message like please provide your email okay now so for so far password i have just copied this one this entire div and i'm just going to paste it over here and i'm going to change the label so this time it will be the password this will be the password type also will become password only value will be the password name will be the password and on change method will stay as it is and the message will get changed here so it will be please provide your password okay now after that we are going to have one more div with the class name call hyphen 12 and inside this we are going to have one button okay and this button i'm going to give some inline styling so width i'm going to give here 100 and let's give class name here empty hyphen 2 that is margin top okay and here i'm just going to give login okay so so after this mdb card body we are going to have mdb card footer component so mdv card footer and inside that i'm going to use link and inside this link i'm going to have one p tag okay inside that we can have something like if you don't have account then please sign up something like that we can give message so don't have an account then do sign up okay and it will navigate towards the register page so we can give here like slash register okay so let's first see whether we are able to see our form component or not on login page so let's go to the login page so guys our form component looking nice over here and let's click on this one don't have account so it will navigate towards our sign up page that is register page now let's give some logic inside that on input change and for now this handle submit will receive event and we can just give like e dot prevent default okay so basically to prevent the default behavior of browser and here it will also receive event and i am going to first restructure from e dot target like name and value and then i'm going to set the form value so form value and it's gonna be name value okay so let's go into the browser and see whether we are able to type something or not so we are able to type here now let's click on login so that we can able to see the error message for each respective input field so now we are getting the message as well for each respective input field and if you type something the message will go on so this is working so here it is the email field so you have to give email proper email then only error message will get disappear so our login form is ready so the next thing we wanted to first configure redux toolkit in this react application so first i am going to do that one then only we will able to integrate our backend api with our front end so let's do that one so inside this redux folder we are going to have couple of files so first we are going to have our store store.js then we are going to have our api file one so api.js and then we are going to have one folder that is feature okay and since we are performing the authentication process in this react application so first i'm going to create a auth slice so auth slash dot js okay and first we are going to work little bit on this or slice only so next thing what we have to do so we have to bring create slice and create a synthetic from our reader toolkit so let's bring that one create slice and create async thunk okay after that what we have to do so i am going to define auth slice first here so auth slice is equal to create slice then i am going to define the slice name here so slice name will be the auth and let's define the initial state of our application so the initial state will be the user and it will be the null initially then if you're going to have some kind of error for that also i'm going to define the error property inside this initial state and then we are going to have loading okay so we have defined our initial state now let's do like export default auth slice dot reducer okay now we have to configure our restore after that so let's go to the store.js file and here we need to bring configure store from our redux toolkit okay so let's bring that one configure store after that we have to bring that auth slice so we are going to bring like auth reducer so slice nothing but here it's acting as a reducer only so import so import auth reducer from features folder from our slice after that we have to do like export default configure reducer and here we have to give reducer and after that we have to register our auth reducer with the key so we are going to use key here auth to this auth reducer so we will able to access the state with the value of key auth in our component so we have successfully configured our store in this application now the next thing we have to do one last configuration in our index.js file so here we need to bring provider from our react redux so from react redux we need to bring provider so that we can provide our so that we can provide a store to our app component and let's bring the store as well now i'm going to wrap this app component with the provider let's put app inside this provider and let's provide the store so we have provided store to our app component now let's go into the browser and verify whether we have successfully able to configure redux toolkit or not and refresh this one and let's open the redux tab tool so i'm going to open this one and you can see in our reductive tool we have got our this auth okay so we have got user error and loading so this initial state we have defined in our auth slice so you can see that in vs code so here in our slash dot js file we have defined our initial state of our application so if you are able to see this state value in your redux tab tool that means you have successfully able to configure redux toolkit in your react application okay so let's put the vs code first so we have successfully configured the redux toolkit in our application so the next thing we are going to work on our first action so that user can able to login in our application so first i'm going to start with our api.js file so here what we have to do so here first we need to bring axis okay from axis after that what we have to do so here i'm going to define api cost here and xcs.create and i'm going to define here base url so here i'm just going to provide the backend endpoint so our backend is running on localhost 5000 so local post 5000 and off and after that we have to do export cost sign in okay sign in and we are going to receive our form data then api and this is a post request so it will be post and we have to give here end point so users slash sign in okay and here we have to provide our own data now we have created this endpoint so now we have to work on this odd slide.js file and first i'm going to create an action so it will be like export cost so it will be like login okay and we are going to use your create async to make our asynchronous request so first we have to provide the action type which will be the string so auth slash login and the second argument will be the callback function here so it will be async and here we are going to make a asynchronous call so here we are going to use try cache block okay and if you get any error then we can do console.log okay i will show you how you can read the error message as well so for now just do console log okay and first let's do little bit work on our login page okay otherwise you will get confused what i'm doing over here so first let's go to the login dot js file okay and here we have to bring couple of things so we need to bring from react redux so we need to bring here huge dispatch okay and let's save this file as well and let's also bring the use selector as well and we also going to require to use navigate let's bring the toast as well from our react twistify okay so let's bring the toast after that what i'm going to do so so first i will store the reference of use dispatch into a dispatch variable so const dispatch is going to use dispatch so with that so with this way we will able to dispatch our action that we have created in our slash dot js file okay so in handle submit what we have to do so first i'm checking here if you have the email and password then only user allowed to login so then only we are going to dispatch our action so dispatch login so vs code automatically import that login action from auth slice and here i am going to provide couple of things okay so first we have to provide the form value so this is mandatory in which we have our email and password the next thing i wanted to provide the navigate so we have bring use navigate so let's store the reference of use navigate into a navigate variable so after successful login i wanted to navigate towards the home page so first we have to store the reference into a navigate variable of use navigate then we can pass this navigate into our action okay and we have and we have also bring the toast so also i'm going to pass it to because i wanted to show some kind of message like login successfully so so let's save this file and let's first go to the login action here now since here we can only accept one argument okay and from our login.js we have sent in the object if we are sending one argument then we can simply send like this way like form value but if you wanted to send navigate then it won't allow okay so you cannot pass the argument more than one so if you wanted to pass the argument more than one then you have to pass in the object form that's the reason i am doing this way so if you have only one value then you can simply pass without object but if you wanted to pass more than one values so you have to pass in the form of the object so now how we are going to receive this value in our this action so what we have to do so here i am going to destructure those values so form value we can destructure like this way here we can also destructure the navigate because after successful login i wanted to navigate towards the home page and i wanted to show the message so we can also destructure the toast as well and after that so first i wanted to bring the api from our api.js file so import as api from api okay now in try what we have to do so here we are going to have response the cost response is equal to await api dot sign in okay and here we have to provide the form value form value okay after that i wanted to show the success message so toast dot success and we can give the method here like login successfully okay now after that i wanted to navigate towards the home page so i can specify the route here and then we can return response dot data so this creating thing basically generate a three promise life cycle that we are going to deal inside our extra reducer object so it's generate a promised life cycle like pending fulfill and rejected so those life cycle we are going to evaluate in our extra reducer so here we are going to have like login dot pending okay and we are going to have a state and action and here state dot loading will become true okay likewise we are going to have another life cycle that is login dot fulfilled okay so in that case what i wanted to do so first this state dot loading will become false okay that means we have got our data from our back end so loading so loading will become false after that what we have to do so here we are going to set our all the data like so we are going to save our all the data like id email password and token in local storage first so i'm going to use your local storage dot set item and i'm going to provide the key here profile and i'm going to give here json.stringify okay and here whatever the payload we are receiving from our backend i'm just going to restore in our local storage so action dot payload now the same thing i also wanted to do for the user state okay so state dot user is equal to action dot payload and we are going to have rejected as well and here we have to give comma otherwise we will get error and the last live circuit is rejected so login dot rejected okay and inside that state dot loading will false we can give here like state dot error equal to action dot payload dot message area here we have to give message okay why because if you go back to our server folder so in so if you go to the user controller so if user login with that email that doesn't exist so we are sending this message so we have to so we have to do like this in our auth slide.js okay so with that way you will able to store the message in this error property that we have defined in our initial state okay and before we do login so here i have done a small mistake so it will be navigate okay so let's give here let's change over here as well so it will be navigate otherwise you will not able to navigate towards the home page after successful login so let's try this one whether it's working or not so we need to go to browser and refresh this one first and i'm going to login with the correct email and password so john doe and the rate gmail.com and the password is one two three four five six now let's click on login now you can see that we have got the message like login successfully and if you check the dev tool so we have got the user with result and token so it has name email password okay along with the token and let's also verify whether we are able to store in local storage or not so you can see that in local storage also we have able to store our resultant token with the profile key so both places we are able to store the result and token so let's close this one now let's uh go to login again and let's open this one as well okay and let's open this network tab now let's try to login with the user that is not exist okay so let's give something random user so it is not exist in our mongodb let's give some random password and if you click on login you will get message here okay in the response so we are getting a message like user does user does not exist but if you open the redux tab tool so you can see that error state is still empty but we are getting the message here user does not exist so this thing we are going to handle now okay so we need to go to vs code and what i can do here so here i can destructure the result with value okay so this u is basically to capture any error message that is coming from our back end so we can simply here return reset with value so it will be like error dot response dot data okay and our error message is coming with the message property if you look at in our controller so we are sending all the error message in the message that is user does not exist or invalid credential okay so let's go to this hot slice so this change we have to do and in order to show the error message in the form of toast notification so we have to do some adjustment in our login page so here what we have to do so we need to extract the state value from our store so use selector i'm going to use and our auth slice is registered with the auth key now we can do structure here loading and error okay now i am going to utilize one react hook that is use effect to show the error so use effect and this huge effect only run once we have error okay and here we can do like if we have the error then do like toast dot error and we have to provide the error that is coming from our back end and let's also use this loading as well so i'm going to use loading in our login button okay so if we have the loading then i wanted to show the spinner okay so here i'm going to use mdb spinner and size will be the small role i'm going to give here status okay and tag let's give span and class name and class name let's see here sm me hyphen 2 and let's keep the class name here me hyphen 2. we will verify this one later first we are going to verify whether error is coming or not in in the form of course notification so let's go into the browser refresh this one let's try to log in with the user that is does not exist in our mongodb so let's give some random email random password click on login so now you can see that we got the message like user does not exist now let's try the user that we have okay like john doe gmail.com and let's keep the incorrect password now let's click on login so we are getting here invalid credential so we are successfully able to read the error message that is coming from our backend okay and let's refresh this one and let's try to log in john doe at the rate gmail dot com and with the correct password so i wanted to show the loading on the button so let's click on login so you can see that we have got that loading in our login button as well so we have successfully implemented the login functionality in our application so now we are going to work on our register functionality so first i am going to start working on our form component for the register page so let's work on this one so for this what i'm going to do so i'm just going to copy entire thing and i'm just going to paste it over here and let's change from login to register okay and this will be the register okay and let's comment this one for now and we have to add some more initial state to our register form field so we need to add here like first name it will be empty last name it will be also empty and we have already email password and we have to also add one more field like confirm password okay so confirm password okay and here we have to restructure first name last name and confirm password handle submit let's uh comment this one for now on put chain will as it is this styling will be as it is and this will become sign up okay and here we have got some additional field as well like first name last name and confirm password so first i'm just going to copy this div okay let's paste it here and this will be call md6 and level will be the first name okay type will be the text value will be the first name name will be the first name required invalid will stay as it is and in case of field is empty so message will be like please provide your first name okay now let's copy this one let's paste it here and this will be the last name and this will be the last name only okay let's copy this one paste it here and here we can give please provide your last name if field is empty now we have email password now let's add one more field for confirm password so let's copy this one paste it over here level will be like password confirm okay type will be the password and this will be confirm password okay name will be the confirm password okay and here we are going to have the message like please provide your confirm password okay and the value of button will be the register okay and here i'm going to give a message like already have account then please sign in already already have an account then sign in okay and this time i'm going to change this route so it will be navigate towards the login page let's first verify whether our form is showing or not on the register page so let's go into the browser let's go to the register page so we have got our beautiful signup form here which contain first name last name email password and password confirm and if you click on already have an account so you will able to navigate towards the sign in page and from here you will be able to navigate towards the register page so this is working so we have completed our form now the next thing we have to work on our redux part so first i'm going to start with the api so here it will be signed up okay it will receive the form data and the route is sign up and the api endpoint is sign up okay now let's go to the or slice and here we have to just do copy paste okay so i'm just going to copy entire create asyncthem function and i'm just going to paste it over here and this will be register okay and action type will be the register and this will be the sign up and after successful register i wanted to navigate towards the home page so this will stay as it is and and the message will get changed from login successfully to register successfully and now we have to resolve the promise that is returned from this created sing thunk into extra reducer that is pending fulfilled and rejected so again i'm just going to copy this three life cycle okay and i'm just going to paste it over here and make sure to change this one from login to register okay and rest of the thing will stay as it is now let's come back to our register.js file and here already we have dispatch navigate okay let's uncomment this line of code and we have to bring register and here first i'm going to check if our password is matching or not with password confirm field so if password is not matching with confirm with confirm password fill so i'm just going to return a toast message like return toast dot error and the message will be like password password password should match so whatever the code we are going to return below this if condition is not going to execute if we fill this conditions so the rest of the code will be similar to the login so let's uncomment this one and here we have to check other field as well like along with email and password you have to also check if user has provided the first name if user has provided the last name or not and the confirm password okay so it will send form value navigate and post and this will become registered and i think everything is correct here now let's go into the browser and try to register one new user in our mongodb so refresh this one first and try to check first error messages displaying or not so we got the error message but it is overlapping here so what we can do here either you can increase this max width or you can just keep the message like please provide first name so you can just shorten the error message okay let's do the same thing for this one as well you can always increase the max width if you wanted and we have to also do the same thing for confirm password field as well so let's let's do that one now let's go into the browser and just and just click on register now we got our proper error message without overlapping into the below input field now let's register one new user here so i'm going to register with the user like john wick okay email will be john wick at the rate gmail.com and let's keep the password one two three four five six and here let's just give only one two three four five so password is not matching over here so we should get the error notification like password should match so we are getting this error notification let's close this one now let's give here six this time and let's open network tab as well okay now let's click on register so here it's still saying passwords will not match so let's give here one two three four five six this will be one two three four five six now let's click on register so we got the message like register successfully and let's see in our dev tool so we have successfully able to store our user as well in our store with result and token and let's verify in the application whether it's getting a store in local storage or not and here we have successfully able to register our result and token of newly registered user in our local storage also let's verify this user is getting stored in our mongodb or not so let's verify this one so let's so let's refresh this one so we should get two user so guys this is our new user that we have created so it's getting stored in our mongodb so guys we are successfully able to perform login and registration in this application and let's also verify if you try to register with the existing user so let's give some random name random last name and let's give the same email that we have in our mongodb so we should get an error message like user is already exist okay so let's try to register with the same email that we have in our mongodb so now you can see that we have got the message like user already exist so guys we have completed our login and registration functionality in this application so the next thing we wanted to implement the google sign-in so let's go into the vs code and we are going to allow google sign-in from our login page so if he does not want it to login with normal email and password so he can log in with the google as well so from react google we need to bring google login so from react google login we need to bring google login and after mdb validation i am going to have one break here okay and after that i'm going to have google login okay and inside that we have to provide the client id which we will generate later okay and then we have to pass here render okay and inside that i'm going to have render props okay and inside this render profs we are going to have button mdb we are going to have button mdb btn and the width of button will be the 100 percent and the color will be the danger so i wanted a red button for google sign in then i'm going to have one click so it will be like render profs dot on click ok and disable we are going to have so [Music] render props dot disabled let's format this one and inside this i'm going to have icon so mdb icon and i'm going to have class name here so me iphone 2 fab icon and the icon will be the google after that we can give the label of button so google sign in okay now after that what we have to do so we have to provide on success method so it will be like google success and we are going to have failure as well so on failure we are going to have google failure okay and we are going to have one cookie policy so let's define this one as well so single host origin okay now let's save this one and let's define this one outside this return so i'm going to have google success and i'm going to have google failure as well so we have defined this two method outside this return so we have created this two function we will add the logic later so first let's go into the browser whether our google sign-in button is displaying or not so our google in button is displaying here we have some spelling mistake so it will be google okay so now we have got our google sign in button so now the next thing we need this client id in order to log in with the google so guys we need this client id so we need to go to our google console developer so you need to go to this screen and i have already created the oauth client id for google and you can see that i have created this test react your screen will be different little bit so you might see this screen okay then you have to then you have to create a project here okay after that you can give name okay your project name and once you click on create then you will get this screen okay oauth constant screen and you have to select external here then you can click on create so once you click on the create then you are going to get this screen okay you will get this screen so you can give any name as per your convenience so i have given test react and you can give email here whatever the email you wanted to give here you can also give the same email address the email address i have given over here and then you have to click on save and continue then save and continue then save and continue so it will get created and after that you have to click on back to dashboard the next step what you have to do so you have to click on this credential sidebar okay then you have to click on create credential and here you have to select oauth client id and here you need to select web application so you can give any name so you can give your tour app okay something like that you can add uri so it will be like http localhost 3000 and same thing also you can add here as well and you can click on create so it will get created and you will get one client id okay so you will get this client id okay you can copy this one and paste it in vs code okay so i'm going to paste over here in this client id okay and here in google success it will get response so first i am going to do a console log of this response and here we will get some error so whatever the error we are going to get we can just do like toast dot error and we are going to show the message that is coming from our oauth client now we can verify this one whether it's working or not and here let's refresh this one and let's click on google sign in so it's got sign in let's open the console and here we got some response so as you can see that here we have got our google id and in profile object we have email name and token id here so our work is not completed over here because we need to save some information from this response into our mongodb so we need to store information like name email and google id so in order to store the google information that we have over here we need to create one api in our controller file okay that is user.js so here what we can do so here we can have export cost google sign-in request response after that in request body we have to restructure few thing so from our react application we are going to send email name and we are also going to send the token and then google id because here we are not generating token google already already providing us token id you can see that over here so we have to also get from our react application only we also need google id as well because in future it will become handy for us so first i'm going to use a try catch so in try i will check here for so try first i'll check here if you have the old user so cost old user await user model okay find one and email so if you have the same user then what i will do so if you have the same user then cost result is equal to so i'm just going to send the result and token so result will be like underscore id so we need to provide id to our front end so old user dot underscore id because in mongodb id is stored with the underscore only you can see that here and you have to do here like two string after that we have to pass email as it is and name then return response status 200 json and we are just going to pass the result and token okay after this if condition if user is logging for the first time then we are going to store his information in mongodb so here we are going to have again one the result so count result is equal to await user model dot create okay and here i'm going to provide email name name and google id okay then after that i will send the status after that i will send the json response here it will be 201 okay you can also it will be 200 only okay and zero and we have to send here result and token okay now let's handle the cache block as well inside that we can give here the same thing that we have over here so we can just copy this one and we can just paste it over here now after that and you can also give here console log if you wanted okay now after that we need to register our endpoint in our routes folder under user.js file so here i can give like route dot post google sign in okay so this will be our api to save the google information in mongodb and here we have to bring our newly created controller that is google sign in let's paste it here so our backend work is completed over here now we have to start working on our front end so we have already created this api so first i am going to start with the redux part so here first we need to create api so it will be a result which we are going to receive from our login page and this time endpoint will be google sign in okay so we have to give the same endpoint that we have defined over here so let's go to the api.js and here it will be result okay now after that let's go to the auth slice.js file and here it will be you can give here like google sign okay google sign in so basically it will store the information that we are receiving from our google into mongodb and the accent type will be the google sign in and here we are going to receive couple of thing so we are going to receive result not form value and the rest of the two thing i am also going to pass from our login page and here we are going to pass result and it will be like message like google sign in successfully okay and after successful sign-in and after successful sign-in i wanted to navigate towards the home page now this creating thing will generate three promise life cycle that we are going to again evaluate in the extra reducer object so i can just copy this one okay and i can just paste it here make sure to change this one to google sign-in okay and i think the rest of the thing will be stay as it is okay now let's go to the login.js file so here what we have to do so here we are going to need some information from this google response so first we need email so email we can get like this way response dot profile object so in profile object we have our email and if you're wondering like what is this syntax so it is it is equivalent to this one like uh response dot profile object and okay so it is equivalent to this okay and here also it will be the question mark so in case if you are not getting value so in this way our app won't get crash okay so that's the reason i'm using this sorter syntax now we also need the name so i'm just going to copy this one and we are going to have name and here it will be name so if you look at our google response so you will get some error now don't worry about that one so in profile object we have email and name okay so let's go to the vs code and after this we have token and after this we need token so token we can simply get like this a token id so if you look at response the token id is here okay and the last thing we need here google id so google id is equal to response dot google id then we are going to have one array with a result inside that i am going to put all the information like email name token and google id then i am going to dispatch that google sign in action that we have created so we need to bring this one from our auth slice and here we are going to pass result then let's pass and navigate as well along with the toast okay let's see whether our google information is getting stored in mongodb or not with this with this approach so let's go into the browser and refresh this one so in api.js file we have issue so i think we have to change this one so it will be google sign in okay and this will be and inside our slice it will be google sign-in only okay now let's go into the browser refresh this one so let's click on this google sign-in so now you can see that we have successfully able to log in with the google as well in our application let's verify whether we are able to store the google information in our mongodb or not so let's refresh this one so you can see that we are also able to store the google information in our mongodb so you can see that we are able to register name email and google id and let's also verify here as well in our application in local storage so let's go to the local storage and here you can see that we are successfully able to store our result that is in which content email name okay and we are also able to store the token as well so our google sign-in is completed in this application so before we start working on other api part like creating tool deleting tool or updating the tool so first i am going to start working on our header part so i will first work on the header section so let us start working on our header part so let's create a file inside this component folder so header dot js and here i am going to generate a snippet and here we need to bring use state as well and we need to bring some component from our material design bootstrap to build this header so from mdb react ui kit i'm going to paste the component here that is required from our material design bootstrap to build the header component so this much component is required to build this header now after that we have to define one state so so set so because this header will be the responsive so if you decrease the size so it will become a hamburger so we need to provide this one set so and initially it will be the false after that what we have to do so inside return we are going to have mdb navbar and here we can have some props like fixed so i wanted to fix the header to the top expand lg it will be dark and after that we can give some inline style okay and i'm going to give here background color so background color i'm going to use here like f 0 e 6 e a okay and mdb container then mdb navbar brand and here i'm going to have our app name so that is tour pdf okay and inside that i'm going to define some inline style so color i'm going to use 6060 80 i'm going to give some font weight here so it will be 600 after that font size i am going to give 22 pixel okay and if you click on this navbar brand so you will navigate towards the home page only and here we have to use hr because 2 is not supported with the mdb navbar brand so here we have to use hrf and after that so let's see how it look like so we can use our header component in our app.js and here we can use header that is coming from component folder so vs code automatically import that component so let's go into the browser so you can see that we have got our nice header here after that what we have to do so let's go to this header component and this after mdb navbar brand we are going to have mdb navbar toggler so mdb navbar toggler and inside that we have to pass some props like type so it will be button only and area expanded we have to provide expanded and it will be false okay then let's provide area label so it will be like toggle navigation that so and it will be just reverse of the show variable so basically we are doing a toggling here okay and after that we have to provide the icon so mdb icon and we can provide here icon as a bars okay and it will be font awesome icon so we so we have to provide fish and here we have to also provide this color okay so let's copy this one let's paste it here okay let's save this file and we can verify this one in browser so if you reduce the screen size so you will so you will get this toggler like hamburger or bar you can say and you won't see any changes over here until we add some link in our header so let's add those link in our vs code so after this mdb network toggler we are going to have one more component like mdb collapse okay mdp collapse we have to use here and here we are going to do like show scroll to show and nav bar inside that i'm going to have mdb nav bar nav okay and here we have to provide like write full width so it will be false class name mb hyphen 2 mb hyphen lg hyphen zero okay after that we can define like mdb navbar item okay and inside that we are going to have mdb navbar link so first link we are going to have our home page and we have to specify here route so it will be the slash only and inside that i am going to use one p tag with the class name header text so we have to specify the css styling for this class name in our into our index.css file so it will be home okay now let's save this one and let's define the styling in our index.css file so here we can have this one and i'm going to paste the css code for this class name so i have just pasted the css code for this class name and we can verify this one in browser now you can see that we have got our home and if you reduce the size now you can see that it now you can see that it is working and if you click it will hide so our toggler is working now let's define the other link as well so i'm just going to copy this mdb navbar item part other link we are going to have like add tool okay and then we are going to have one more i navbar item with dashboard okay and we will navigate towards the add tour only so let's specify the route and this route is not yet registered in our app.js file so we will register later and this will be the dashboard and after that we are going to have one more navbar item that is log that is log out our login so based on the user logged in it will get changed so if so if user login into our application so it will be log out and if you click on logout then it will become login so we are going to have so we have to define two link here so this will be the log out so if you click on log out so he will navigate towards the login page okay and we are going to have one more link so we will write the condition for this one first let's register all this link and if you click on login so you will basically navigate towards the login page only now let's see how it's look like so let's go into the browser so you can see that we have got our link in our header that is home add tour dashboard logout and login so now we have to basically customize this header link because this logout and login should not be together and also this add tour and dashboard link will be only visible once the user logged in okay and this login will also be not there if user is logged in so once you click on log out so this will become login so we have to implement this one so let's login with one user okay so let's click on this one and let's login with one user that is john wick and then gmail.com and let's click on login so user is logging successfully and you can also verify in our redux dev tool okay so we have got our user with the result and token now in header.js file we can customize this route based on the user logged in so first we have to import use selector from our react redux and after that what we have to do so here we have to destructure the user that we have in our store with the help of use selector okay so we can get our user with the help of state.org and here we can check like this particular item so we can check like if user dot result result dot underscore id and if we have this thing then we are going to display this to link okay so let's cut this one and we have to also adjust this one based on the user logged in okay so again what we have to do so if user has the id that means user is logged in okay and here we have to use this one so if user is logged in then we have to show the log out okay so i have just cut this one and i'm just going to put here and if user is not logging then we have to show the login link okay so let's cut this one and paste it here let's format this one so if we have the id in the result that means user is logged in so in that case so in that case we have to show the logout and if user is not logged in then we have to show the login button so let's verify this one whether it's working or not so let's go into the browser now you can see that we have got our home add to dashboard and logout so login is gone okay so if you refresh this application now you can see that we have got our home login but here you have noticed one thing like user is not getting persist okay so users should be perfect even if you refresh the application so to implement the persist functionality in our application we have to write one redux action in our auth slice.js file so now we have to persist our user in this application so we have to write a redux section in our slack.js file so what we can do here so we are going to have reducer and inside that i am going to have set user okay and state action and after that it will be like state dot user is equal to action dot payload okay and let's provide here comma so that we don't face any issue now we are going to dispatch this action from our app component so first we need to export this action so export const auth slice dot actions and the action is set user now we are going to dispatch this action from our app.js file because this is our root component so we need to bring here use dispatch from our react redux okay and here first let's store the reference of use dispatch into a dispatch variable and here we are going to get our user from our local storage because user information will be available in local storage so we can pass that one that we have in our local storage so local storage dot get item and we have restored the information with the profile key so we can give the same key here to get the data from our local storage so we need to bring first use effect here from our react so use effect we need to bring use effect and here it will be the empty so whenever you refresh that so it will get fired okay so dispatch set user so vs code automatically import that one and we have to pass the user okay so it will check if we have the user information in our local storage that means user is logged in and then it will fire the set user with the user information and our store will get updated with the user so we can try this one so so let's go into the browser so now you can see that we have got our user and this time even after refreshing the application we are not getting logged out and if you click on logged out so you can see that we are still getting this home add tour dashboard and log out so why it is happening because we are not updating our restore state value so we have to define one more redux action like set logout in our slide.js file so let's define that set logout function in our slide.js file so it will be similar kind of so set logout it will be and it will be like a state action and in that case state dot user will be null okay let's save this one and let's go to the header.js file and first we have to bring the use dispatch from our react redux and we are going to store the reference of use dispatch into a dispatch variable so let's do that one and after that i'm going to define one function like cost handle logout we can dispatch like set logout okay so i think we have forgot to export this one so we need to export this one this newly created action let's go to the header.js file and let's give here set logout so vs code automatically import this function and you have to just do like set logout and let's use this function here okay so in log out we can have one on click ok and we can pass this handle log out let's save this file and let's go into the browser okay now let's click on log out so now so it's still getting this logged in okay so let me see what is happening so why it is happening so we have to also clear the information from our local storage as well so let's do that one so we have to also clear our local storage here so here what we can do so local storage dot clear okay now let's save this file and let's go to the browser now let's click on log out so this time we are able to see that we are able to successfully log out and this getting change now let's log in like john doe gmail.com and let's click on login so we are successfully able to login now we also wanted to show the name of the person that logged in in our application so let's do that one as well so let's go to the header.js file and here before this home route what we can do like we can check here also if you have the user so user dot result dot id okay and if you have that mean user is logged in and here i'm going to use as 5 tag and we can give like logged in as and i'm going to give here username so user dot result dot name okay and here i'm going to do some styling inline styling so margin right i'm going to give here 30 pixel margin top i'm going to give here 17 pixel okay now let's save this file and see whether we are able to see the name or not so now you can see that we have got the name that is logged in as john doe so we are able to display the name that logged in in our application and if you decrease the screen size and if you click on this one so here also we have got our header link that is home editor dashboard logout and logged in name and guys let's try with the google login as well so let's log out from this application and let's log in with the google sign-in in order to see whether we are able to name of that person or not if user is login with the google so let's click on this one so now here we have got message like google sign successfully and we have got the name as well so you can see that it login as a code with vishal so this time i have login with the google so guys we have completed the header part in this application so the next thing we wanted to implement adding new tool in our application okay so let's do that one so we need to go back to vs code so in order to add a new tool in our application first we are going to work on our backend so we will start with creating model okay so let's create model here model folder tour dot js okay so first we are going to do a data modeling for our new tool okay so we need to create a schema with the help of mongoose so import mongoose okay from mongoose and we are going to have two schema cons tour schema is equal to mongoose dot schema so this tool will have title okay and it will be string now it will have it will have description okay so it will be also a string description and then it's gonna be having a name like string creator so that means uh which person is creating this tool so we also need to store that id as well and tags okay it's gonna be having string in array okay and after that we are also going to have image file okay image file then string after that we are going to have like created at okay created at and here it will be object and inside this we are going to specify type will be the date and default is gonna be new date okay and later we are also going to have like functionality so let's define that one as well like count okay and after that we are going to have this type as a number and the default value will be the zero okay and let's give here comma export this now let's export this store model so const to model okay cons to model is equal to mongoose start model it will be tour and tour schema then export default to model so data modeling is completed over here now the next thing we have to start working in our controller part so let's create one more file inside this controller folder so tour.js okay and here we need to bring first express okay from express and then we need to bring our tour model that we have created after that so after that we are going to define our first controller for creating new tour so export cons create tour okay so it will be create tour okay async request response okay cons tour is equal to request start body okay cost new tool is equal to new to model and we are going to having all the tour that is coming from our front end and after that create it at okay created that and we have to specify new date to iso string okay now after that we are going to use try cache block here so in try we are going to have like a wait new tour dot save okay and we are going to do like response dot status 201 so we are going to send the newly created tool as a json response so it will be new tool and after that we are going to also handle the catch error response status okay and that will be 404 and we are going to send a message like and we are going to send a message like something went wrong okay and let's also create one more controller which is responsible for getting all the tools that we have in our mongodb so let's create that controller as well so export cost get tours so it will basically fetch all the tour that we have in our mongodb so async request response and here i'm going to use try catch okay and inside try i'm going to have my all tools called tools on stores is equal to await tour model dot find so it will basically return all the tools that we have in our mongodb and i am just going to send all this store as a json response so response.status.json and tours okay in else we can give the same message okay so let's copy this one and let's paste it over here so we have created two controller and we know and we don't need this express so let's remove this one we need to register our endpoint so again we are going to create one file inside this routes folder so tour dot js and here let's just copy this one for now let's copy this one and the file name will be 2.js let's remove all these things okay let's bring the controller that we have created so we have created like create tool and get tours now router dot post and it's gonna having create tool okay and we can use the same route for getting the tour as well so if you're using the same route then this this method should be different if methods are different then route can be same okay so this will be like get tours okay now let's go into our index.js file and here i'm just going to copy this one it will be tour router and it is coming from 2.js okay and i'm just going to copy this one and i'm going to create an endpoint like tour okay and it will be tour router so let's save this file and see the command prompt whether we have any issue or not so we have some issue okay in router.js we have some issue let's go to the tool.js and it will be two dot js only okay let's see the command prompt and i think we have one more issue in our controller file that is 2.js under controller folder so here also it will be the tour dot js let's save this one let's see our command prompt so now this time we don't have any issue okay so we have completed our api part over here now we have to start working on our front end so first we will create a form for adding a new door okay so in this application we are going to first create a form to add it to once user click on this add tool okay and this route is also not registered so let's first register this route so first i'm going to create a page okay so add edit tool so i am going to use the same page for adding a new tool or updating a existing tool okay and let's generate a snippet here okay and here let's first give add edit to title okay and let's register this route in our app.js file so i'm just going to copy this one so it will be add tool okay and the component we are going to use here add tour okay added it to now for now for updating the existing tool also we need to register route so let's do that one also so it will be edit tour and we are going to edit the tour based on the id okay and the component will be the same okay now let's go into the browser and refresh this one okay so it's getting hide inside this header okay so no issue so you can give here little bit margin i will remove this one later so let's give 100 pixels so now you can see that this route is registered successfully in our application so first we need to bring some component from our material design bootstrap to start building this form component for adding new so we need to bring some component from our material design bootstrap to build this ohm okay for adding new tour so we need to bring mdb card then we need mdb card body then we are going to use mdb card footer mdb validation mdb btn and mdb spinner okay now let's remove this one and we don't need this one okay and first and we need to bring some more stuff like file base cheap input from other package so we need to bring that one so let's bring first chip input chip input chip input from material from material ui chip input then we need to bring file base to upload image so import file base from react file base 64. let's bring also toast as well because later it's required to show the success message like if you add the tube like if you add a new tool so we will show the message like to read it successfully so let's bring the text as well after that let's also bring the use navigate from our react router dom so after successful creating a new tool we wanted to navigate towards our home page okay so from react router dom we need to bring use navigate and let's define the state for our form field so call initial state equal to so we are going to have title description okay then we are going to have tags okay and for image we don't need to specify any kind of state okay now from react also we need hooks so let's bring use state and here we are going to have like cons to data set tour data use state and let's pass here initial state okay let's restructure this all value from our initial state so title description and tags okay and after that so let's start working on our form component so we are going to have one div with some inline styling so i'm just going to copy this inline styling because it will be almost similar so let's copy this one and let's paste it over here okay and i'm going to give class name here container okay and inside this div i'm going to have mdb card okay card component and this will be the alloying center so let us specify the center and after that i am going to have one h5 tag that will having like add to after that i'm going to have mdb validation okay and inside this i'm going to have a class name with call iphone md iphone 12 and here i am going to use html input tag element so input and placeholder i can give here title and type i'm going to give here text and after that value will be the title then name will be the title we are going to have one change so let's give like on input change we haven't defined this function so we will define in a moment after that we are going to have a class name with the form control okay then required then required because we are doing a form validation over here invalid and this will be the validation so we need to give the message like please provide title okay now the next thing what we have to do so let's copy this one let's paste it here okay and placeholder let's do a caps here and you can give it like enter title okay and it will be enter description description okay it will be also text value will be the description then it will be the name so name will be description only form control and the validation will be like please provide description okay and this will be not an input field so it will be text area okay and we have to also increase the height of this text area by providing some inline styling so i am going to increase this height up to 100 pixel and after that i am going to have my tags filled so for tag we are going to use chip input component from material design bootstrap so it's going to be having inside this class name and i am going to use here chip input okay and names i'm going to give here tags okay variant we need to specify so it will be outlined placeholder let's give enter tag it will be having full width value we can give here like tags we are going to have two method here like on add and on delete so so it will be like tag and it will be like handle add tag and we can pass here tag okay same thing will goes for on delete so [Applause] you can also delete the tag inside this chip input field so it will be handle delete tag okay and after that we are going to have our image upload so for image upload we are using file based component from react file base 64. so here first we are going to use one class name d hyphen flex justify content content start okay and inside this we are going to have our file base so type will be gonna be file only and multiple will be false okay and here we are going to have one method like on done okay and we can restructure here base 64. and we can have like set tour data and we can spread out tour data and we can have like image file base 64 okay so this file base component basically convert image file into base64 so for that purpose we are using this file based component after this tip we are going to have one more class name with the call hyphen 12 and inside this we are going to have button okay so mdb btn okay and the button width it's going to be 100 width 100 and let's copy one more time for and let's copy one more time because we are going to have two button first one will be the submit and the second one will be the clear okay so this will be submit and this will be a clear and here i'm going to give class name like empty iphone 2 and color i'm going to give here danger and we are going to have on click and it's gonna having like handle clear and before this mdb validation we are going to have mdb card body okay so don't forget to add this one as well and this will be getting close below this mdb validation so our form is almost completed we just need to define this function okay and this mdb validation also going to have on submit so let's define this one handle submit and let's keep the class name here row g hyphen 3 and no validate okay so let's define all this function first outside this return otherwise we will get error so const handle submit we have one function we have okay and let's copy this one so other function we have like on input change okay then we have handle add tag okay then we have handle delete tag and then we have a handle and then we have a handle clear okay handle clear we will add the logic later first let's see whether our form is displaying or not so let's go into the browser and here we have got our nice form component for adding new tool in our application okay so let's first work on this on input change so this will receive an event and i am going to destructure that name and value from e.target so name and value and i'm just going to do like set to data let's just spread out this to data name and value let's define the logic here as well inside our handle add tag so it's gonna receive tag and here we can have like set tour data and i am going to spread out two data and tags and inside that i'm going to have this array so two data dot tags so it's gonna append our tag okay and let's also define the logic here inside our handle delete tag so delete tag is going to receive the argument and again we are going to have set tool data and i'm going to spread out two data and here i'm going to have tags okay and here i have to do like filter okay the tour data dot tags dot filter okay and gonna having a tag and here i'm going to define simple logic like tag not equal to delete tag okay so it's gonna remove those tag if user wanted to remove from our chip component so we have defined the logic here in handle delete tag now now let's define the logic inside this handle clear okay so here we just wanted to clear out the input field so title will be empty description will be empty and tags will be the empty okay and here in handle submit it's gonna receive an event so for now let's just do e dot prevent default okay so let's see whether we have any issue or not so here i found one small issue so it will be two data not initially state so let's go into the browser and and refresh this one let's give it like title like test test some tags you can give your like test test one test okay and if you click on this cross mark it will get remove and we can also select file here image file so i'm going to select one image so this is also working okay so now we have to add this tool with the help of api that we have created in our back end so first we are going to work on our redux part so let's do that one so in readers folder first i'm going to add that api so here i'm going to have api like export construct create tour okay it's gonna receive two data then api dot post and here we are going to have the api endpoint like tour okay and then we can pass to data so we have created this endpoint in our front end now in features folder we have to create one file like tour slice so we have to create the file like tour slice dot j okay and from our slice i am going to copy this to import because we gonna need this one and let's copy one create a singtank function okay and this will be like tour and this will be like create tour okay and it will receive a tour data it's gonna also receive navigate and toast from our component so that after successful creation of two we wanted to navigate towards home page and we also wanted to show some kind of success message so we can give here like two added successfully okay and we also create a slice here so we can copy so here i'm just going to copy this entire stuff let's just copy for now let's come over here let's paste it here and this will be two slice and the slice name will be the tour and so first let's remove this thing and let's remove this other life cycle i will just keep this one okay so before we start adjusting this initial state first let's modify this api so it will be create tool okay and here we are going to pass to data and now let's define the initial state for our tool slice so [Applause] the error loading will stay as it is so so we are going to have single tour as well so we will define that route later so single tour will store in an object then we are going to have the tours in which we are going to have all the tours that we have in our mongodb so for that we have already created the end point in our back end and after that we are going to have one more state like user tool so so in this state we are going to store only those tour which is created by our logged in user so in our home page we are going to have many tools but in our dashboard we we are going to show only those tool which is created by this user so from dashboard only you can perform delete and update operation and here we need to adjust this life cycle so it will be create tour okay this will be create tour this will be create tour and this will be create tour okay and we have to also modify this value as well so let's remove this one instead we are going to have state dot tools equal to action dot payload and this will stay as it is now we have to export this one so export default to slice dot reducer okay now come to our store and here we have to bring our reducer that is we have created inside our tool slide so tour reducer and it will be coming from two slice and we have to add that key so that we can access the state that we have defined in our initial state with this tour key so tour reducer okay so i think we are done with this basic configuration for two slice and now we can use this action inside our added tour page so let's go to the added tour page so inside this handle submit we are going to dispatch that create two direction so first we need to bring use dispatch okay from react redux and let's also bring the huge selector okay and here also we need use effect as well so for some cases if we got any errors so we can also show that error method in form of the token notification so let's use a use selector and we have already registered our tour reducer with the tour key and we can restructure like error and loading also we need now we are going to use a use effect here and this use effect will only run if we have error okay so if we have error then toast dot error and we can just pass the error whatever is coming from our back end now we have to work on this handle submit so if you look at our data model for tour in our back end so if you look at this model okay so it receiving title description name creator tags image file created at and like count so all the thing we are not going to provide as of now so we are going to provide from our front end like title description name okay tags image file okay so this thing first we are going to provide from our react application so first we need the name as well so to get the name we can get the name from our auth because user is logged in we are going to have user because inside user if you look at our redux tab tool so inside user we have result and inside that we have got our name okay we need this user from our auth slice and before we dispatch that action first we need to store the reference of user dispatch into a dispatch variable and here in handle submit what we have to do so first i'm going to check like if you have the title and description and tags okay then it's gonna dispatch that create two reaction so before dispatching that create two reaction we have to basically define one variable like updated to data okay so here first we are going to provide our all the two data that is filled by our user in form component then we have to give the name as well so name we can get from our user slide so user and i can give you like user question mark dot result dot name okay so you can see that in our reductive tool our name is present inside this result object let's format this one and after that we can describe that create tool action okay so create tour so we need to bring from our two slides okay and here and here we have to pass more than one argument so we are going to pass in the object so updated to data then we have to pass navigate and we have to also store the reference of use navigate into a navigate variable then only we will able to pass so use navigate and now you have to also pass the toast okay and here you have notice like we have given the name like updated to data because we have append name that is coming from our user reducer so we have to do some changes here in our action so it will be updated to data only so so let's copy this one and let's give here like updated to data only so we have updated this create tour action and let's go to this file added tool and after that we wanted to clear each input field in our form component so we can simply run this one handle clear okay now we can test this one so let's go into the browser and i'm going to give here test for now okay and i'm going to paste some long description over here and let's give tag here like testing okay and tour you can give here and you can select one image file let's select this one and let's click on submit so we got the message like two added successfully and let's verify this one in our mongodb as well whether it's getting added or not and here you can see that we have successfully able to store our first tour in mongodb so you can see that we have got title description name tags image file created so we have successfully added one tool in this mongodb now i wanted to add one more tool with the different id so let's log out and let's login with the john doe and then it gmail.com let's keep password and i wanted to add one more tool with this id so let's keep here like let test and i'm going to paste description tag i'm going to give a like latest tour okay and i'm going to select on file image file let's select this one and let's hit submit now our tour is added successfully and let's go to the mongodb and here we have got our second tour in mongodb so first it is created with the name code with vishal and second it is created with john doe and you might have noticed that there is one field is missing here so if i go to the vs code and if i go to the model so you can see that we have one field is missing in our mongodb that is this one creator one okay so this creator field is missing in our mongodb so why because we need to provide the user id as well so which user is created this all tour so we have to provide the user id and you can see that we have three user in our mongodb and and each user have some id you can see that so this id we have to basically store here in our mongodb so we are going to store this id with the help of passing the token from our front end to backend okay so we have to create some kind of middleware in our back end so that it will determine which user is created this particular tour so let's do that one so guys here we have to create one middleware to determine which user is created this particular tool and we have to also work on little bit on our front end so first we will work on our back end then we will move and work on front end so here i am going to have one middleware that is auth middleware so the file name will be like auth.js and here we have to write some logic okay so inside our auth.js file what we have to do so import jwt from our json web token and here we have to define some kind of secret key so cost secret and you can give anything here so i'm just giving a test okay and after that i'm going to have like const auth async and it's gonna having like request response okay and next also i am going to have try cache here and i am going to get the token from our front end from request header so request dot headers dot authorization okay request dot headers dot authorization and i'm going to split this one so in authorization we are going to have this token and once you split this one so it's gonna store in the array and once you store in the array like this way so basically it will get splited into two index so in the first index we are going to have token and in the second index we are going to have this long token value and we can get this token value like this way split and it will present at the second index so we can give you like first and here we have to also determine like if it is a custom auth so if it is a customer so normally the token generated by google it is mostly more than 500 length so here we are going to check if if token.length is less than 500 that means user is login with normal email and password okay and here let's define one variable like let decoded data okay and we can check like token and each customer so if user is logging with normal email and password so this will become true okay so after that we are going to have like decoded data equal to jwt dot verify okay and here you we have to give token and secret and after that we have like request dot user id and decoded data and we can get the id so this id is basically going to store inside this user id okay so this is for those users who log in with normal email and password and if user is login with the google then we have to write different logic so in health condition if you usually log in with the google so in that case token length will be greater than 500 so we have to bring here user model okay so let's bring user model from modus folder okay and it will be user.js now here what we have to do so again we have to define this decoder data and jwt dot decode and token okay and now we need google id so with the help of google id we are going to determine which id we have to store inside this user id so that's the reason i have stored the google id so here you can see that for this user i have stored google id so with the help of this id we will find this user and whatever the id is there here inside this object id we are going to place inside our creator okay and here first we have to find that user so call google id and whatever the token is generated by our google it will basically decode and we will get the id so at the end we will get this id once the jwt decode that token that is generated by our google so at the end we will get this google id okay this google id we are going to get over here okay now so google id is equal to decoded data and this data is going to present inside sub object okay and then we can do like two string here and then here we got our google id okay now after that we have to find that user which have this google id okay so user is going to await user model find one and here we can pass this google id okay so once you pass this google id then we will get this entire user information and then with the help of this logic we will store this id so at the end we need this id okay we're gonna be stored in our tour model at the creator property so after this it will having like request dot user id and user dot underscore id okay i hope you are getting this logic here and after that if everything is correct then we can just do like next and let's handle the catch as well so error and here we can just do simply console.log let export this middleware so export default path okay now we are going to use this middleware inside our routes so here we need to bring the auth middleware before we create tour okay so we have got this auth and here we can specify auth so first it will run the middleware okay then it will create a tour and forget to it's not required so this auth middleware is required whenever user create a new tour or delete the tour or update the existing tour and in other scenario this auth middleware will be also useful so our work is done over here now we have to little bit adjust our the logic in our controller we have to also specify the creator so creator and this time we can give like request dot user id because in our auth middleware we have already append this user id okay by decoding our token okay now now we have done most of the part here and we have to modify little bit code in our front end as well so let's go to the api file so now our front end we need to pass the token in request header so here we have to adjust some logic so api dot interceptor dot request dot use request then we have to check in our local storage so local storage dot get item profile so our token is stored in a local storage with the profile key so if we have this thing in our local storage then we want to add that token in our request header so request dot address dot authorization so dot authorization is equal to bearer and here we have to pass that token that we have in our local storage so json dot parse local storage get item with the profile e and here we can get our token okay so we have adjust this logic in our front end to basically provide this token in our request header so that our auth middleware that we have created in our back end it received the token under this authorization okay so we have added this authorization under the headers as you can see that in our api.js file okay and here we have to also do like return request okay now let's try this one so let's go into the browser and now let's log in with the normal email password so john doe at the rate gmail.com let's keep the password let's click on login user is logged in now let's add one new tour let's keep the title like new tour again let's keep description let's add tags like new tour okay and let's select one image file and let's click on submit so you can see that our tour is added successfully and let's verify now and let's verify in our mongodb whether we are getting the creator or not so let's refresh this one so overall we have three tool in our mongodb so now you can see that here we have got our the creator in which we have stored the user id okay so this is the same user id that we have in this user model so you can see that with john doe we have this id so we are storing this id under the creator okay so with the help of this creator we will basically determine which user is created this particular tool and that tool we are going to display in our dashboard section okay so i hope you are getting my point here so now this to tour which we have created previously i am going to delete because we don't have the creator property so i'm just going to delete this one and i will create one more tour with the google sign-in okay so first i will delete those two which don't have the creator property so this tool also don't have the creator property so let's delete this one so let's add one more tour with the google sign in so first i'm going to log out and let's login with the google let's create one more tour so i'm going to give it like google okay let's give tag here like tour let's attach this image let's hit submit so now to reset it successfully let's verify in our mongodb let's refresh this one so now we have two document in this file and you can see that this is the second tool that we have created with the google login so here we have also able to store the creator id so inside this 2db we have restored the id that is created by our google user okay so adding new tool in our application is done now so guys next thing we are going to display all the tools that we have in our mongodb so as you can see that in our mongodb we have two tools so first we are going to display all the tools on our homepage and we have already created the route in our backend so you can see that in our routes folder this route is responsible for getting all the tools that we have in our mongodb so we have already created this route at our back end now we have to use this route and get all the tour in our front end so we are going to start working on our front end so first i am going to start with the redux part so first i am going to create the api so lets just copy this one and this will be get tours okay so get tours remove this one and it will be a get method so api dot get okay and here we don't need to pass any kind of body now we have to work on our tour slide.js file so here i'm just going to create a action and this will be a get tours then this will be a gate tour okay and we can remove this one we don't need all this thing and but we need this one rejected with value so you can see that we are getting this error if this action doesn't receive any kind of parameter from our ui component so you can simply give your underscore and comma then only you will able to destructure this reject with value so you have to do this if you are not providing any kind of parameter from our ui component during dispatching this action okay and here it will be like remove okay and here it will be empty and the api we are using here like get tools okay no need to give any kind of toast or navigate so remove this one now this creating thing generate three promise so we are going to handle three promise lifecycle in our extra reducer so let's just copy this one paste it here and this will be get tours okay this will be get tours and we can remove this one this array part okay so it will be just only action dot payload and let's change this one as well get tools okay i think we are done with this file so we have done the respective changes in this file in order to get all the tools that we have that we have in our mongodb now we have to work on our pages okay so we are going to display all the tools that we have in our mongodb in our home.js file so here what we have to do so first let's bring some component from material design bootstrap okay and here we are going to have mdb call that that means mdb column mdb container then mdb row then mdb typography okay and we also need to bring use dispatch and use selector from react redux so we need to bring that one use dispatch and use selector after that we also need to bring link from react router dom okay from react auto dom we need link and here let's remove this one let's give one divs and inside that i'm going to provide some inline styling okay so in line styling it will be like margin so margin will be the auto then padding i'm going to give here 15 pixel max with i am going to give here 1000 pixel for now and align content it will be center okay and above that first i am going to store the reference of use dispatch into a dispatch variable okay and we have to also bring use effect from our react so we wanted to basically dispatch an action whenever this home page get reload so so we are going to dispatch an action that is get tours so vs code automatically suggesting me some import okay so you can see that we have to bring the get to reaction from this tour slice okay and after that we also need to extract the state from our store so we have to use your use selector and here we have to just spread out this one so state dot tool because our tour slice is registered with the tour key so we need to do structure like tours and loading okay and after that what we have to do so if you have the loading so we are going to show some kind of spinner okay so for now i'm just giving here like h2 loading okay dot dot dot so later we are going to have our spinner component so we will work on that later now let's work on this return part so after that we are going to have mdb row and i'm going to give here class name empty 5 and here i am checking like if you don't have any tour in our mongodb so i just wanted to show some message to user like no tools found okay so mdb typography and here i'm going to give some class name like text hyphen center mb hyphen zero after that this will be tag we can give here so tag will be h2 and i'm going to give you like no tools found so so this message i wanted to show to the user now this is for if you don't have any touring or mongodb after that if you have a tour so we are going to display all the tour in a card so first i am going to define mdb call here and this mdb row will get close here okay and here it will be zero okay now in that mdb call we are going to use mdb container and i'm going to use mdb row so mdb row with the class name like row hyphen call one dot row calls iphone md hyphen 3 dot g hyphen 2 and inside that we are going to show all the tours in a card component so first let's check if you have the tools so tools dot map and here it will be index and i'm going to have like let's for now let's give here like two cards okay two card so basically we are going to display all the tour in a card component so for now let's just see whether it's showing two h2 tag with tour card or not so let's go to the browser so now you can see that we are getting two heading with the tour card because we have two tours in our mongodb so the next thing we are going to work on our card component so here i am going to create one file like card tour okay dot yes let's generate some snippet so here we need some mdb react ui component to build our card component so let's bring first those component from our material design booth trap so we need card mdb card then mdb card body then mdb card title not text title mdb card text mdb card image and mdp card group and here we also need to bring link from our react router dom so let's bring that one as well and i think link is not required in our home.js file so let's remove this one we don't need this link import let's go to the our component card tool now this card door basically is going to receive some props from our home.js file so it's going to receive a props like image file okay description then it will be received title so all the fields that we have in our moon of db like title description name tags image file okay all this thing is going to receive here okay so image file description title tags also id we need and name okay and after that we have to work on this return part now inside this return we are going to have mdb card group then we are going to have mdb card component so mdb card and we are going to use class name h 100 mt hyphen 2 d hyphen sm hyphen flex okay and we are going to have inline style so it's gonna having like max width 20 ram okay inside this mdb card we are going to use mdb card image to show the image so we are going to give your image file source alternate we are going to give here title if you don't have any image then position it will be top style i'm going to give here like max width again 100 and height i'm going to give 180 pixel okay now after that we are going to have div with the class name top left so we are going to define this styling in our index.css file and here i am going to have name and here i'm going to use here span tag with the class name text hyphen start tag hyphen card and again here i have to define the styling for this class name that is tag hyphen card in our index.css file and we are going to have tag here and here tags in the form of the array so i'm going to use map okay and item scroll to hash and percent item okay and i'm going to give your space let's format this one now after this scan tag we are going to have mdb card body so mdb card body then we are going to have mdb card title okay and here i'm going to have title of that tour and we have to also specify bootstrap class name here so it will be text start now i'm going to have mdb card text so i'm just going to copy and this will mdb card text okay so let's change this one and here we are going to have description so usually description is long so here we are going to use excerpt so i am going to define one function here outside the return so basically excerpt reduce the content of description on our card component so that's why we are using excerpt here so [Applause] [Music] it will receive any string and here we are going to check like if string dot length greater than 45 and then here we are just going to do a sub string so str is string dot sub string so we just wanted to show the first 45 word of the description and after that we can just give here like three dots so basically it will tell us that we have more content to read okay so we are going to also have a read more link to read the more detail about the specific tool after that we are going to return this one str so we are going to use our excerpt that we have created and inside it i am going to pass the description after that we are going to have a link so the link is going to be inside this mdb card text only so we are going to have link and it's going to basically navigate toward the single tour page so tour and here i'm going to specify the id so this route is not registered yet so we will register later once we start working on our single tour page so here we can give here like read more so if you wanted to read this specific tour so he can just click on the read more and he will navigate toward the single tour page so i think we are almost done here so let's use this component in our home.js file so let's use this component in our home.js file so instead of showing tour card so we can simply remove this one and we can use here poor card okay sorry card tour so vs could automatically import that component and first here we have to provide the key so we can give here index and we are just going to spread out all the item like this way let's save this one and let's go into the browser so now you can see that we have got all the tools that we have in our mongodb in our card component so it's looking good so we have to just do some few adjustment because we have added this extra class that we have to define the styling in our inductor.css file like top left and tag hyphen card so let's go to the index.css file and i'm going to paste the styling for that to class name so guys you can see that i have pasted the css code for this two class name that i have added in our card to dot gs file that is top left and tag hyphen card so you have to add this to class name in your index.css file so i have added the styling here you can see that now let's go into the browser now it's looking nice you can see that over here so if you click on read more so you will basically navigate towards the single tour page so till now we haven't registered that route so the next thing we are going to work on our this single tour page only so first we will create the route in our controller part because we are going to get the tour based on the id so we have to work on our controller then we have to register the route so first we are going to work on that part so now we have to work on our controller to get the single tool based on the id so let's go to the controller folder and here we are going to have one more controller to get the tool based on the id so i'm just going to copy this one and let's paste it here and this will be get tour and here we are going to receive an id in the request parameter so request dot params and we are going to have the id okay and here we are going to use like find by id and we can pass the id and we will get the single tool based on the id from our mongodb then we can pass this single tour as a json response so we are passing this one and the rest of the thing will be stay as it is so our work is done on our controller part to get the single tool based on the id now after that we have to register a api in our routes folder so let's go to the two dot js file and here i'm just going to copy this one and this will be a colon id because we are going to get that single tool based on the id and here we have to import the get to controller okay and again we are not going to use your auth because anybody can read the single tool so user login is not required in order to read more about the specific tool so this part we have completed now let's work on our ui part so first i'm going to work on our redux part so inside this so inside this redux folder first we have to work on our api so it will be as it is and here it will be get tour and we are going to get the id from our component and here it will be template literal so i'm just going to give here backtick okay now let's work on two slice.js file so again i'm just going to copy this one and let's paste it over here so we are fetching the single tour based on the id so this will be get tour only and this time we are going to receive only one argument that is id so we don't need to use here object so we can just keep your id and this will be get to not get tours and here it will be get to and we can pass the id okay now in this creating thing we'll generate three promise lifecycle that we are going to handle inside this extra reducer so let's copy this one let's paste it over here and it will be as it is almost so we need to remove this s because we are working on getting the single tool based on the id and here we are not going to use this state that is tours we are going to use this this one so single tour we are going to store in an object so let's remove this one and i think that's it so we have completed the logic in our tool slide.js file now let's go to the pages folder and here we have to create one more page to show the single tour so let's give you like single tour dot yes and first i'm going to generate a snippet here and i'm going to give here some kind of heading like single tour and let's register the route and here i'm just going to copy this one and it will be tour with the id and we are going to render the component single tool page okay now let's first go into the browser and test this one first let's go to the home page so we are getting this tours in our homepage let's click on read more so it is getting hired inside this header so we can give here some margin let's give here like class name empty iphone 5 now let's see so now you can see that we have got our single tool so it's getting higher here inside our header so don't worry about that one so this is working so now we are going to work on our this single tour page so we need to import some components from our material design bootstrap so we need component like mdb card mdb card body mdb card text then mdb card image mdb card container sorry mdb container not card container then mdb icon okay and from react also we need use effect so let's bring that one as well now from react redux we need that use selector and use dispatch okay after that we also need use param because we are going to capture the id from the url so we need use param as well after that we also need to use here movement because we are going to show date here so let's bring moment from moment so we have already created uh action as you can see that in our feature tour slice.js file that is get tour okay so gate 2 is responsible for fetching the single tool with id so here first we are going to store the reference of use dispatch into a dispatch variable okay so cause dispatch equal to use dispatch after that we also need that single tool that is stored in our slice okay so once you face the single tour from the back end then it will get stored in the tour object okay we also need to extract this tool from our store okay so use selector we can get like state dot tool okay we also need id so from use param we need id after that so let's remove this one and i'm going to use here fragment and we have to use here use effect so this huge effect will run once we have the id okay so if you have the id then dispatch that get to okay so we need to use this get to from our two slides okay so from here we need to get so vs code automatically import this get to reaction from our toolslide and here we have to pass the id because this get to accept a id okay you can see that and we are passing this id to our end point so let's go back to single tool so this is so this huge effect will run once we have the id in our url so now we have the single tool in our tour object after that i'm going to use here mdb container and inside that i'm going to use mdb card okay with the class name mb iphone 3 empty hyphen 2 okay after that i am going to use mdb card image and here i'm going to have like position so it will be top then style so i'm going to give here width 100 and max height i'm going to give here 600 pixel okay and source so i'm going to have like two dot image file okay and in case alt so we are going to have title if image is not available or if image is broken so in alternate i am providing the title after that i am going to use mdb card body okay not self closing it will be opening and closing tag and inside that first i'm going to have h3 tag in which i'm going to show like 2 dot title after that i'm going to have a span tag inside that i'm going to have p with the class name text hyphen start and here i need to add one more class name so i will add the styling in the index.css file and here i'm going to give like created by and here it will be like two dot name so after this expand tag i am going to have div okay and i'm going to provide inline styling that is float that is float left okay and inside that i am having span tag with the class name text hyphen start okay and i am going to map the tags that i have okay so tags basically present in the array so we need to do like two dot tags dot map item then hash then i am going to give here item okay i am going to give here break okay and here i am going to have mdb card text okay and here i'm going to give one class name bootstrap class name so it will be like text hyphen start empty iphone 2 then mdb icon and here i'm going to have inline styling so i'm going to give your float left margin 5 pixel then far then icon so i can i'm going to use here calendar so basically here we are going to show the date so calendar hyphen alt and the size will be the large and here i am going to use a small tag with the class name text muted okay and here i'm going to use movement so to dot created at okay from now now after this mdb text next thing we have to show the description of the tool so mdb card text again i'm going to use here and i'm going to use here class name like lead mb hyphen zero text start okay and here i can show the description of the tour okay so let's save this one and let's go to the browser so refresh this one so we are not getting let's so guys uh let's do one thing here so so let's remove this question mark here okay because it's taking some time so let's remove this one and here we can use like 2 amperes ampersand two dot tags dot map okay and here we can use simply two dot created and two dot description now let's go into the browser refresh this one okay again we are getting this issue so here what we can do we can do one more level like tour dot tax dot map okay now let's go into the browser so guys let's click on read more so now we are able to successfully show the single tour on this page okay so now we have to add some styling for this title that is created by okay so let's go into the vs code and in index.css file we have to add one styling so we have added this class name in this file that is tour name here so i have added the styling for that class name let's go into the browser refresh this one okay so now it's looking little bit good so we have completed this part so if you here wanted to read more about this specific tool so either click on read more and he will navigate towards the single tour page so this is complete now so the next thing we are going to work on our dashboard page so from dashboard we are going to perform the delete or update operation so user can either delete the tool or update the existing tool and in the dashboard we are going to show only those two which is created by this logged in user so first we have to work on our backend so we will create an api which is responsible for fetching those tool which is created by this logged in user so let's go into the vs code and first create an endpoint then we will integrate that endpoint in our front end then we will able to display those two which is created by this logged in user under the dashboard section so let's go into the vs code so guys first we are going to work on our controller to get the tool by our logged in user so here i am going to create one controller so export cons get tools get tools by user okay and this will be async request response then we are going to get the user id from our front end so we are going to pass this user id in the request parameter so we need this id and based on the user id we are going to provide all the tour as a json to our front end so first here we are going to check like if mongoose so here what we have to do first so we need to bring mongoose okay and after that here we have to check mongoose dot types dot object id if it's valid so if it's not valid because here we are checking like if it's not valid this id response dot status or 404 dot json and we can give message like if this id is not valid that means user is not exist in our mongodb so we can give message like user does not exist okay after that con store and await here and we are going to use tour model dot find and here i am going to get the tour based on the creator so easter have a id okay with the creator so with the help of this creator property we are going to get all the tool that is created by our logged in user so here we have got our alter so response dot status and it will be 200 dot json and tools okay here you can also specify like user tool so you won't get confused so here basically we are sending the response of the tours that is created by our logged in user and here i am going to add one more endpoint so it will be get only but this time the endpoint will be like user tools okay and this will be the odds okay because logged in user can only access this endpoint so and and here we have to give like get to by user okay so endpoint is created for getting those two which is created by our user now we have to use this endpoint in our front end so let's go to the front end that is client and first we are going to work on our redux part and we are going to start with our api.js file and here we are going to just copy this one and we are going to give like get tools by user and we are going to get the id from our component and the endpoints now it will be user tools okay user tools and here we are going to provide the id that is user id not a tool ready okay so this id basically it's a user id not a tool ready so don't get confused here now we have to basically work on our tour slide.js file and here again i'm going to create one action and this will be like get tours by user okay and again it will receive an user id from our component so let's make let's make here like user id okay so you won't get confused and if you wanted to change the parameter here as well so you can also change this one okay so this will be user id not a tour id so let's give your user id only so that you won't get confused and we don't need here this comment okay so let's put the toolslide.js file and here it will be get tours by user and the rest of the thing will be stay as it is and this will be the get tours by user now this create async basically generate a three promise lifecycle that we are going to resolve in our extra reducer and here you can see that we have already defined the initial state for storing those two which is created by our logged in user okay so all those store is going to store in this user tools so first i'm going to just copy this one three life cycle let's paste it here and this will be get tours by user okay and this will be user tools okay so guys our redux toolkit part is completed over here so let's go to the dashboard page so i think dashboard page is not created so first let's create one dashboard page here dashboard dot js and i am going to generate a react snippet here okay and i'm going to register this dashboard page on our app.js file so let's go to the app.js file so we have to basically register a route here and this will be dashboard okay and we are going to place our component dashboard so let's start working on this page to show all the tool that is created by our logged in user so overall we have two tools as you can see that in our home page so this tool is created by code with vishal and this tool is created by john doe so under dashboard section we are going to see only this tool okay which is created by our john doe not this tool so under dashboard you will see only one tour which is created by our john doe because john doe is logged in in our application so let's work on our dashboard page so first we need to bring some component from our material design booth trap so let's bring those component and and here we need first we are going to use card component then we need card title then we need mdb card text okay mdb card body mdb card image mdb row mdb column and we also need mdb btn and mdb icon and last mdb card group so all this component we need from our material design bootstrap now we also need use selector and use dispatch from react redux so let's bring that one use dispatch and use selector and we also need link as well from our react router dom so link component is required now after that what we have to do so you can see that in redux tip tool so in auth we have a user property in which we have our id of that user so we need this id okay so with the help of this id we are going to display only those two which is created by this id okay so this id is registered with john doe so first what we have to do over here so we need that user state okay so we are going to extract that user state with the help of use selector and we are going to access this state with help of state dot auth and then we are going to have our user okay now and we also need the user tools so if you look at this redux toolkit so inside this we have user tools so inside this we will have only those two which is created by our logged in user so we also need this one so so let's extract those state as well so to target those state we need to target state dot tour so we will get our users store user tools okay user tours so you can also verify this one here in two slice so our initial state is user tools so we need user tools and loading okay now we need the id of that logged in user so let's give you like user id and user result and id okay now now we also need here use effect okay so this hook is required and let's first store the reference of use dispatch into a dispatch variable and the use effect will only run once we have the user id okay so once we have this user id then only this huge effect will run so user id if you have then let's dispatch that get user get tools by user so we need to bring from our tour slice and here we can pass this user id okay okay and for now let's save this file and here you have to also give this question mark so don't forget to put that one now let's save this file and let's go to the browser and let's open the reader tab tool so we are not getting anything over here because the action is not fired from our dashboard page so we have issue here like no route match location with dashboard so we have some issue in our app.js file so the route will be dashboard okay so let's save this file and let's go to the browser now let's refresh this one now let's open the redux tab tool now you can see that action get fired here that is get tours by user and let's open this object so now you can see that in user tools we have one object okay so so far now we have two tools in our application and both tools is created by different user so we have successfully able to store this tool which is created by our john doe user so now we have to display those two which is created by john doe so after that what we have to do so let's go to the dashboard.js file and now we are going to work on our return part okay so let's remove this one and i'm going to have one div and i'm going to have some inline styling now inside this div we are going to have h4 tag with the class name text center okay and i'm just going to show the logged in username here okay so we can show those detail like this way user dot result dot name okay so we can also verify this one so let's go to the browser now you can see that we have got our name here john doe after that what we have to do so i am going to give a chart tag here so here i'm just going to give some milani style that is max width 570 pixel okay after that if you have the user tools okay then i'm just going to do a map here so user tools dot map i'm going to have the item and inside that i'm going to use mdb card group okay and here i'm going to have mdb card and with some inline styling so style i'm going to give here like max width so it will be around 600 pixel and key is going to be like item dot underscore id and class name i'm going to give margin top hyphen 2 inside this class i'm going to have mdb row with the class name g hyphen 0 okay now inside this i'm going to have mdb column and i'm going to give your md so md will be 4 after that i'm going to have my card image okay so class name i'm going to give here rounded then we have to provide the source of image so we can give you like item dot image file okay in alternate we are going to give item dot title and i'm going to pass a prop here like fluid so for now let's just format this one okay now after this mdb column i'm going to have one more column okay with the md 8 okay so we have divided the 12 column so four column is used for image and eight column is used for the content okay like sort description delete icon or update icon so all this is going to contain inside the eight column now after that i'm going to have mdb card body and after that mdb card title then i'm going to give your class name text start then item dot title after that i am going to use here mdb card text okay and here i'm going to use class name with the text hyphen start and i'm going to use your small tag with the class name text muted so it will be muted okay text muted and again i'm going to use here excerpt so excerpt so we need to bring the logic for this excerpt from our home.js file so let's go to the home.js file so xr project is present inside this card tour so let's go to this component and let's just copy this one let's go to the dashboard.js file and let's paste it here and this time i'm just going to reduce this to 40 okay okay after that what we have to do so i'm going to have one div okay and i'm going to have some inline styling here so margin left so margin left i'm going to give here 5 pixel float i'm going to give here right margin top i need to give here minus 60 pixel okay now i'm going to use here button okay so button and with the class name so i'm going to give class name here empty hyphen one let's give tag so a i'm going to give here color none and we will have on a clip method but we will write those logic later so for now inside this button we are going to have icon okay so mdb mdb icon and it will be a font awesome icon now we are going to have icon with the trash style i am going to give here so i am going to use some color here hash dd 4b 3 9 okay and icon size will be the large okay now we are going to have icon for update as well so let's format this one first and i can just copy this one entire thing okay and i can just paste it over here and we don't need to use your btn because update is gonna take place on the form page so here we have to use link okay and let's just cut this one and paste inside this and here we can use two and it will navigate towards the edit tool page so edit tour and we can give the idea so item dot underscore id and the icon will be here edit and the color will be the different for this edit icon so it will be like double five ac double e okay and we have to give some margin left as well so margin left i'm going to give here around 10 pixel let's save this one and this route is already registered so if you go back to app.js file so for editing tool it's already registered because we are using the same page to add the new tool or update the existing tool so let's first go to the browser okay so this is working and if you click on edit icon so you will never get towards the add tool page okay and let's go to the dashboard so our dashboard page is completed about 50 percent so i'm going to add one more tour over here so let's first select the image that we are going to add so i'm going to select this taj mahal okay and let's keep the title like tasman and i'm going to paste some content over here so let's add some tag over here like india up it is present in agra so let's add this tag and let's submit this one and now let's go to the dashboard so now we have a two tools okay you can see that so this store is created by our john doe user and this is also responsive so if you decrease the screen size so let's decrease this one so you can see that this is also a responsive okay so the next functionality we will be working on deleting the tour and updating the existing tool so before implementing this functionality we have to work on some more stuff like we have to work on our spinner component and we have to also protect our route as well because if you log out from this application so now user is log out and from the header section user can not able to navigate towards the add tool page but he can easily navigate towards the add tool page by just modifying this url okay so if you modify this url to add a tour so now you can see that he is able to navigate towards this add to page which is we don't want in this application so we are also going to protect this route this way as well so first we are going to start working on our spinner component which is required on our home page as well as on dashboard page so first let's log into this application with the john doe so john john.gmail.com one two three four five six so let's go to the vs code and in component folder we are going to have our spinner component so spinner dot js and let's generate a react snippet over here so after that we need to bring a spinner component from our material design bootstrap so we need to bring this mdb spinner and inside that i'm going to use that one mdb spinner and i'm going to give here class name m e hyphen 2 and style i'm going to give here width 3 ram height let's give here 3 ram margin top i am going to give here around 100 pixel and inside this mdb spinner i'm going to have span type with the class name visually hidden okay and let's just keep here loading with three dot okay let's save this file and use this spinner component in our home.js so you can see that here for now we are just simply showing loading in h2 tag so let's remove this one and we can use here our spinner component okay and the same thing i'm going to use here in dashboard page as well because we have already bring the loading from our state dot tool so let's use here let's save this file and verify whether this loading is working or not so we have to bring this spinner component so let's just go to the home.js file let's copy this import statement let's go to dashboard.js file put it here now let's go to the browser refresh this one so we got spinner okay so there is issue with this spinner so let's go to the spinner dot yes and here we are missing okay so it will be hidden so and was missing now let's go to the browser verify this one so now we have got our proper spinner let's go to the dashboard here we also got the spinner component so spinner component is completed over here now we are going to work on our protected route now let's start working on the protecting our route in this application so first we need to create couple of components here so first we are going to have like loading to redirect so if user is not logged in he will basically navigate towards the login page and then we are going to have one component with the private route okay private route dot j so basically we are going to create our own route component over here so first we are going to start with this loading to redirect and let's generate a snippet here and let's bring here huge state and use effect and we also need use navigate from our react router dom so from react.org we need to use navigate and first let's define one state so count set count use state so initial value will be the five and i need one use effect here okay and in the dependency we are going to pass the count as well as navigate okay so here we have to store the reference of use navigate into a navigate variable now after that here inside this use effect we are going to have interval so cos interval equal to set interval and inside that i'm just going to use set count current count so the counter will start from the five and it will get down to the zero so current count so here we are decreasing the count so after five seconds basically you will navigate towards the login page if you if user is not authorized and once the count reached to the zero then we wanted to basically navigate towards the login page okay and then and here we have to also clear the interval so return clear interval and we can pass here interval okay now inside this div so so inside this return we are going to have one h5 tag and we can give a message like redirecting you in so each second this counter will get decreased okay so here we have to pass the count value and let's just give like seconds okay so you will get a message like redirecting you in five four three two one like this way you will get the message so let's save this file and let's go to the private route here so let's first generate a snippet over here so first we need to bring the use selector from our react redux okay then we need that user state value with the help of use selector from our state dot auth so let's first get the logged in user okay so with the help of this way we will determine whether user is logged in or not so here what we can do and this private route is going to accept children so if user is logged in so we are just going to render the children whatever that route is rendering and else we are going to just show the loading to redirect component okay now let's use this private route in our app.js file okay so so home is not a private route login is not a private router the register is not a private route so i added it to will be the private route so what we can do here so we can have here our private route so vsport automatically imports that private route component and we can just copy this one and we can just paste it here and the same thing we are going to apply for the edit tour as well because only authorized user can edit the tool or add a new tour and single to route anybody can access so no need to wrap with the private route and this dashboard is also required because only logged in user can accept the dashboard page so let's adjust this so let's remove this one and it will be the dashboard so let's verify this one whether it's working or not let's go to the browser first refresh this application so we don't have any issue let's log out so now user is logged out and let's try to access the add tool so let's go to the add tool so we are not able to see the message because it's get hidden inside this header component so what we can do over here so let's go to the loading to redirect and we can give some million styling like margin top 100 pixel okay now let's verify this one again let's go to the add tour page again so now you can see that now you can see that user will redirect to the login page in five seconds so we have also protected the route this way as well in this application so this thing we have completed now the next thing we are going to work on deleting the tool and updating the existing tool so first we are going to work on our back end because we need to create an endpoint and we need to add the logic in controller so first we are going to start with our back end only then we will work on our front end so first let's go to the controllers file for our tour okay and here i am going to create one controller for deleting the tool so export cost delete tour this will be the async it will receive request and response and we are going to get the id in the request parameter so we need a id to delete a tour now first i am going to verify whether this 2 id is varied or not and we can give a message here like no tour exist with id and we can give the id here as well so we can use here template literally and you can just keep the id here okay after that we are going to await and tour model find by id and remove and we can pass the id and we can give here response like something tour deleted successfully okay and we can also put inside this try catch okay try catch blog so inside this try we are going to put all this content and here in case of error we can use here like first let's give your error and we can just copy this one okay so for delete tool is completed now let's now let's write the logic for updating the existing tool as well so here i'm just going to copy this one and this will be update tour and this time we are going to receive some more stuff in our request body so request dot body and we are going to receive like title description okay title description creator image file and tags okay and first here we are validating whether this id is exist or not so this is done already now what we have to do so const updated to and here you can just give here like creator dot create tour creator title description tags image file and id it will be this id okay after that here we have to use the method like find by id and update so we can pass the id updated tour we can pass here and we can give a new to true okay so with the help of this query it will update the existing tool with the new details okay and here we have to pass updated to not update tour and in the json response we can pass the updated tour okay and i think we are done with the logic for deleting the tour and updating the existing tool now we have to register our endpoint so let's go to the route we can just copy this one two times because we are going to delete the tour and update the existing tour based on the id so first we have to provide the auth middleware and this will be delete tool okay and it will be delete and for update we are going to use patch and here also we have to provide the auth middleware and it will be the update tool so vs code automatically import all this controller from our controller file so we are done with the backend logic part now let's work on our front end so first we are going to start with our redux part so first let's perform the delete operation so i'm going to start working on our api.js file so we can just copy this one and this will be like delete tool it will receive an id from our component and this will be api dot delete so we are done with our api part let's go to the toolslide.js file and here we have to write our action so first i'm just going to copy this one let's paste it over here and this time we are deleting the tour so let's keep the name here delete tour and the action type will be the delete tool and here we are going to receive id as well as toast so we are receiving here more than two parameter from our component so we are going to pass this two parameter in the form of object so we are going to get id and toast and we can use here delete to appear okay and we can pass id you can give here like post dot success so the message will be like tour deleted successfully okay now we need to resolve the three life cycle that is generated by this create a think tank in our extra reducer so i'm just going to copy this one let's paste it over here so this will be like delete delete tour okay now once you make api request for deleting the tour so it will get delete from our mongodb but we have to also update our ui part as well so here we have to write some more logic in our extra reducer so here what we have to do first so first what we have to do so first we have to destructure from action.meta and from action.meta we need argument okay that is argument so this property we will have inside our this action dot meta and i will explain this one everything so let's just put here console log okay so you might get wondering over here like what is like what is argument so argument nothing but it will contain the two id okay so here i'm just putting the action okay you will understand later once we delete one tour from our application so if you have this property so this property basically contain the id of that tour so we have to update our user tools now here what we have to do so state dot user tool is equal to state dot user tools dot filter so here you have to use filter method item item dot underscore id item dot underscore id if it is not matching with this argument property so argument is containing our two ready so we have to filter out the tour so we have to write this additional logic so this way it will get updated from both end okay the same thing you can also do for the tours array because this tours array contain all the tour that we have in our mongodb so you can also update this one as well so what i can do here i can just copy this one and this time i can do like state dot tools so it will get updated from both screen so you can do this one as well now we are done with the logic in our redux for deleting the tour so let's go to the dashboard because from dashboard only user can delete the tool so here we have a trash icon and inside that we are going to have our on click method okay and we can have one method like handle delete and we can just pass the id let's define this function outside this return so pause handle delete it will receive an id and first i wanted to prompt a user confirm dialog box like i reserved that you wanted to delete that tool so window dot confirm so we can give a message like are you sure you want to delete this store so if you click ok then he will get inside this if condition and he and from here we can dispatch an action so delete tool so we need to bring this delete to direction from our tool slide and we have to pass the id as well as toast so toast we have to bring from our react 25 so from react twistify we need to bring toast okay now let's go to this action first whether everything is correct or not so we are getting id and tools from our dashboard page so this is all look good now let's go into the browser and let's go to the dashboard page let's open the console as well okay let's let's clear out this one now let's delete this first tool let's click on ok so here we got the message like to deleted successfully but it's not getting deleted so we will fix this problem so first let's focus on this console log so here you can see that in our meta we have a argument property and inside that we have the id so that's the reason it's not getting updated from our ui part so if you refresh this application it might get deleted already so you can see that from mongodb it's getting deleted successfully but from our ui it's not getting reflected okay so what we can do here so let's first add one tool so i'm just going to give a test test test let's add one image here let's give you a test let's hit submit let's go to the dashboard okay now what we have to do so first let's go to the vs code so from ui we have to update the data so so here we have to go one more level so we have to destructure the id and if you have the id then we can do like this way okay so let's give your id instead of argument let's try this way now once again refresh this one let's delete this one so now this time if deleted successfully from our ui as well so delete operation is working now the next operation we are going to work on are updating the existing tool so first i am going to start working on our redux part because we have already write the controller part for updating the existing tool in our backend so we have to work on our front end only so i am going to start with the redux part only so we are going to update the tour so i am going to start with the api.js file so i'm just going to copy this one this will be like update tour okay so this will receive two argument that is updated to data okay and we can pass this one in the body and this will be the patch okay now let's work on our toolslide.js file so you can just copy this one and we can just paste it over here and this will update to action will be the update tool this will be the update tool so our action type will be the update tool and this will receive id along with updated tour data okay it will also receive navigate as well okay so after updating the tour we wanted to navigate towards the home page as well so first update this api so it will be update tool and we have to pass updated tour data along with the id message will be like to update it successfully and you can also give your deleted okay and after successfully updating the tool we wanted to navigate towards the home page so we can also do this one as well now this creating thing will generate three from its life cycle so again we are going to handle inside our extra reducer so i'm just going to copy this one because it will be exactly same so we have to update this one first so this will be update tour update tour so this api will update in our mongodb but we have to also update in our ui as well so we have to add the additional logic in our extra reducer so this time we are going to use map okay so map if it's match with the id so here we are going to give like action dot payload okay else item so this will be the map same thing will goes for the tours array as well so if it's match with the id then it will be the action dot payload else it will be the item so we wanted to update from both end that is that is backend and front end so this will update in our front end and once you dispatch an action then it will get also updated from the mongodb as well so we have to update from the both end so i think we are done with the logic over here now the next thing what we have to do so let's first go to the ui so let's first go to the dashboard because from only dashboard user can update the existing tool so if you click on this edit icon you will navigate towards the edit tour route and we have to update few thing like we have to update the title so it will be update tour and we have to also populate the existing value of this store into each respective input field and we have to also update the value of button so the button value get change from submit to update the title will update to and we have to populate the existing data into each respective input field so first we have to do all this thing then we will perform the update operation so first let's go to the add edit tool because from this page we are adding the new tool or updating the existing tool so first we need to bring here use param from our react auto dom because we need the id that we have in our url you can see that so we need to grab this id with the help of use para so let's first have the id with the help of use params so now we have the id okay after that what we have to do so first we have to populate the data of 2 into each respective input field so let's see whether we have use effect so so we are going to have one use effect here and this use effect will only run once we have the id okay so if you have the id then we are going to get our single tour okay so single tour we can get from our tours okay so we need to bring the tours as well here okay so tours dot find okay and tour you can give your tour and tour dot id if it's match with that id that that means we have got our single tour and then we can do like set to data single tour okay so let's first see whether we are able to populate the existing tour value or not into its respective input field so first let's go to the dashboard let's click on this one so it's not populating so let me see what is happening okay the problem is since we are navigating from our dashboard page so we have to get from our user tools okay not tools so it will be user tools so let's put it here user tools because we are navigating from our dashboard page not home page so now let's go into the browser let's go to the dashboard first let's click on edit icon so we are successfully able to populate the existing data of tour into each respective input field and you cannot populate the image file here so you can only update the title description tags and you can also add a new image as well so first we are going to update the title and the value of button so what we can do here so if you have the id that means the user is updating the existing tool so the title will be like update to okay and if you don't have id that means user is adding a new tool the same thing will go for the button as well so if you have the id that means user is updating the value of button will be the update and if you don't have id that mean user is adding the new tool so submit so it will be submit okay now let's go into the browser and verify this one first so now title is getting updated from update tour and the button value is also getting updated now after that what we have to do so here we have to adjust our existing logic in our handle submit so first we have to check here like if you don't have the id that means user is adding the new tour so we can dispatch like this way okay else that means user is updating the existing tool so this time i wanted to dispatch a different action that is update to so we have to bring this update to action from our tour slice.js file and here we have to pass the argument like if you check the action so we are passing id updated to data toast and navigate so we have to pass four thing so id updated tour data and toast okay then navigate okay and handle clear will be the common for both action so we wanted to basically clear out the each input field after submitting the form so we can give it try okay so let's go into the browser so let's first click on this edit icon and let's update the title only and let's click on update so now you can see that we have got the two notification that is tour updated successfully and here also it's got updated you can see that title is got updated and if you refresh that means it also get updated in our mongodb so if you look at mongodb so let's refresh this one so you can see that it's getting updated in our mongodb as well so we are done with the update operation in this application as well the next thing we are going to work on our not font page so if user provided some random url in the browser then we have to show some kind of message like not found okay so let's go to the vs code first and here you can see that in an image folder i have one image okay four not four if url is not matching then we have to show that page okay so in pages i'm going to have one file that is not found dot js and rfc so let's generate a react snippet and inside this diff i am going to have one image tag okay so i'm going to give your source image 404 dot jpg and held so it will be not pound okay let's add this route if there is no route match in our application so i am going to have route path so it will be star element so let's bring the not found component now let's go into the browser refresh this one first let's keep some random route okay so now we are showing that p is not found so we don't have any route register with this name in our app.js file so we have to show some kind of error message like ph not found so this is also completed in our application now before wrapping this video so we have some issue in this current application so let's look into those issue first before wrapping this video so let's see all the issue one by one so i have opened my console log here okay and if i go to this add tour you will notice that we are getting this some kind of warning in our console log so let's fix this one so in our added to js file what we have to do so we have used here html input tag so instead we can use your mdb input okay and here also we can use mdb input and since we are using here material design input so we don't need to provide this style okay instead we can pass here props like text area and to increase the height of input field we can give here like rows okay so we can give here four so let's first see this issue is resolved or not so refresh this one so now this issue is gone so warning is gone from our console log now we have to also work on little bit validation so if you click on submit so you can see that we are not getting the error message for this tag component because we are not using material design bootstrap component so that's the reason we are not getting any kind of error message when the tag failed is empty so here we are using material ui core component so we have to provide our own custom error message for this tag component so what we can do over here so i'm going to define one state for that tag component so let's give you like tag error message and tag error message and initially it will be the null now what we have to do so in handle submit we have to also check one more thing like if tag is empty so like if tags dot length so if it's empty because tag is array you can see that we have defined the initial state of tag is array so we can use this one tags dot length then we can do like set tag error message and we can give message like please provide some tags okay now we have got our tags and we can display over and we can display that error message below this chip input component so first we are going to check like if you have the tag error message and i'm going to use one class name with a tag error message and inside that i am going to show the error message for tag now we need to specify the styling for this class name in our index.css file so let's go to the index.css file and here i am going to paste the styling for that class name so guys i have pasted the css styling for this class name tag error message okay and one more thing we have to do in our edit 2.js file so the error will get disappear once user provide the tags so in handle add tag we can give here like set tag error message so it will be set to null so let's go into the browser refresh this one and if you don't provide any value in each input field so you will get the error message so so this is working so let's give here tag like test okay so error now gone and let's give you a test let's skip title here test let's upload one image so everything is working as expected now we have one more issue in this application so if you navigate towards the dashboard page we have one more warning message in our console so let's fix this one as well so let's go to the dashboard.js and here what we can do so instead of providing key in this we can provide key here okay let's save this file let's go to the browser now refresh this one so now we don't have that warning message in our console law so this issue is also gone now let's go to added it to dot js and let's remove this unused component let's check other file as well whether we have any unused component or not so i think it's fine for other file let's verify each file one by one so i don't think we have any unused component that we have left in any file so guys now i am going to start with the search functionality in our current application so first i am going to work on our back end so first i will create api so let's work on this controller so i will have one controller whenever user want to search any tool so let's export const gate tours by search okay so it will be a thing okay and it's one having request response so we are going to receive a search query from request.query so from request.query we are going to receive our search query okay first query and after that let's use a try catch and inside try we wanted to search the tour based on the title so cons title equal to here i'm going to use regular expression so new regular expression and i'm going to pass the search query that i'm receiving in the query and it will be i here so we wanted to send all the tools that have user search with the title so here we can use a weight and tour model dot find and here we can pass the title so we are implementing the search functionality in our application with title so whenever user search with any title so it will send the tour when the title match so basically in search query we are receiving the title from our ui and user can only search the tour with title so here we are going to send all those to whenever we have matched the title so response dot json and we can send the tools okay now what we have to do so in cash if we have any kind of error so we can send this one as well so in cash block we can send status 404 if something went wrong so response dot status or not for json and we can give here message like something went wrong thing went wrong okay so this is completed i guess so i have created this gate tour by search inside this controller that is update tool so let's so let's cut this one okay and paste it outside okay so our controller is ready so let's register the api in our two dot js file and here we can have that one like router dot get it will be search okay and we have to pass the controller here get tours by search and guys i wanted to separate api here which have auth and which don't have auth so let's cut this one and let's paste here okay and let's put it here okay so so for this api we required authentication and for this api we don't require any kind of authentication okay so we are done with our backend now let's work on the front end so first we have to create a search input field over here in our header so we have to start working in our header component so let's go into the vs code and i'm going into the header first okay and here we have to add that search input field so first we have to define a state for our search input field so cost search set search and it will be empty initially now let's define our search input field so our search input field will be here after this mdb never nav so i'm going to have one form okay and i'm going to have one class name with d hyphen flex and input group w hyphen auto and we are going to have one submit method which will be having a method like handle submit now after that what we have to do so i'm going to use here html input component and let's give here type so it will be text only and class name i'm going to give here form control it's a bootstrap class name placeholder i'm going to give here search to value let's give your value so we have already define a state value for this input field and we are going to have one change method so it's gonna having a event and we can do like set search dot value and after this we are going to have one icon for search icon so let's give here div and i'm going to provide your inline style so it will be like margin top 5 pixel then margin left it will be 5 pixel and inside this div i am going to have icons imdb icon and i am going to use font awesome icon and it will be search okay so let's first define this handle submit before we go into the browser so const handle submit and this will receiving a event and let's do e dot prevent default to prevent the default behavior of browser and we can go into the browser and verify whether we are able to see this search input field or not so now we have got our search input field but we have to adjust some styling in our application for this link okay so what we have to do here so let's go into the vs code first and i'm going to increase little bit margin top for this logged in as user so it will be 27 and we have to also adjust the styling for this class name that is header hyphen text so let's go into the index.css file and it will be 17 only okay now let's go into the browser refresh this one so now it's all looks good so we don't have any issue with the styling now in our header so we have placed this search input field in our header component now we have to start working on enabling the search functionality in our application so we have to first register a route for searching the tour and after that we are going to start work on our redux part so we have to register a route in our app.js file for implementing the search functionality so in app.js what we have to do first so i am just going to copy this one and it will be search and we are going to render the same home component okay now after that what we have to do so we have to start work on our redux part so i'm going to start with the api part and let's create one api here so we are going to have a api for search here like export cons get tours by search and we are going to receive a search query from our header component and api dot get so our endpoint is like tour search with search query okay and here we have to pass the search query okay so let's forward this one and now we have to work on our tour slice okay so let's go to the features folder and here in two slides we have to create an action here so i'm just going to copy this one and let's paste it over here and it will be like search tool okay and it will be search tools and we are going to receive only one argument from our header component so we can just we can just mention like this search query because we are receiving only one argument from our header component so search query we are going to receive and it will be get tours by search and here we can pass our search query and we have to remove this two line we don't need here now we are going to handle the three life cycle in our extra reducer which is get generated by this create a synth so in extra reducer object what i can do here so i can just copy this life cycle okay and i can just paste it over here and it will be search tool so make sure to change this one so it will be search tools search tools search tools and the rest of the thing will stay as it is so we have created this action now we have to dispatch this action from our header component so let's go into the header component and here what we have to do so in our handle submit we have to check here like if you have the search okay so if you have the search then dispatch it will be like search tours which is coming from our tours life and we can pass here our search query okay and after that we wanted to navigate towards the search page that we have already registered the route in our app.js file you can see that here so here what we have to do first so we have to bring use navigate from our react router dom so from react router dom we have to bring use navigate click on navigate scroll to use navigate and here we can use that navigate so we wanted to navigate slash tools search and we can pass here like search query scroll to search okay and in else it will basically navigate back to the home page only and we have to also adjust our route in our app.js file so it will be tours okay not just with search so it will be tours slash search so let's see whether search functionality is working or not in our application so let's go into the browser refresh this one so i'm going to search the tour with the mention so search functionality is working in our application and we also wanted to clear the search input field once you press the enter button so let's do that one as well so here what we can do so it will be like set search will be the empty okay let's go into the browser so now let's go to the home page and again search with the mention so search functionality is working now in our application and the search input field also got clear after pressing the enter button so the next functionality we are going to implement in this application like getting the tour by particular tag so once you click on any tag you will navigate towards different page in which we are going to show all the tools with respective tags that we are looking for so i am going to start with our backend so lets go into the vs code and we have to go to our controller file that is 2.js and here what we have to do so i'm going to just copy this one and i'm going to paste it over here and this time we have to get all the tools by the particular tag so it will be get to by tag and we are going to receive a tag in the request parameter okay so request parameter it will be request dot params and let's remove all this thing okay and here what we have to do so cost tools equal to await tour model dot find and we wanted to find all the tools that we are looking with a particular tag so here we have to write a mongodb query to get all the tool with that particular tag so we have to write this query and after that we can send a json response so response.json and we can send all those stores so let's format this one and this one will stay as it is now we have to register our endpoint so let's go to this routes folder and here so we can just copy this one and it will be something like this tag tag okay and the controller we have to put here like get tours by tag and for this also authentication is not required so we have done our backend part now let's work on the front end part so i'm going to start with the redux only so first i'm going to start with api.js file and here what we have to do so we can just copy this one first okay let's copy this one let's paste it here and it will be like get tagged tours okay and we are going to receive a tag from our component and the api is like tour tag and we have to pass the tag that we are receiving from our component so now after that we have to work on our to slice.js file so here what we have to do so let's just copy this one let's just paste it over here and it will be tag tools tag tours and we are going to receive a tag and here the api will be like tag to get tag tools and we can pass here tag and now we have to define a initial state for this tag tool so we are not going to store inside this tours array so it will having a separate state so that will be like tag tools and initially it will be the empty array and again i am going to just copy this one and i am going to paste it here because creating thing will generate three promise cycle so we have to handle in our extra reducer object so it will be like tag tools and here it will be state dot tag tools only okay so our redux part is completed over here so we need to create a separate page for getting the tour by a particular tags so first inside this pages folder you have to create one file like tag tools and let's generate a snippet for now now we have to register it out for this page as well so let's just copy this one and it will be tours so it will be tours tag with tag okay colon tag and this time we are going to render a page tag tours okay and we have to also adjust some code for this uh card component because we have to convert this tag into a link so we have to do some adjustment in our card to component so let's go into the vs code and this tag is going to be converted into a link and we have already registered our page for tag tools in our app.js file so we can remove this one and we can use here link so we have all we have already bring the link from our react router down so we can use your link okay so it's going to navigate towards tours tag and we have to specify our tag so let's give a tag only and here we can use like hash with tag so let's save this file and verify this one in browser so let's go into the browser refresh this one so you can see that our tags got converted into the link and if you click on any tag you will navigate towards the tag tools page so you can see that we are able to navigate towards this route and this route is already registered in our wrap.js file so let's work on this tag tools page so we need to go back to our vs code and here let's first go to that tag tools page so here we have to bring use effect and we have to bring couple of component from our material design bootstrap to work on this tag tool space so i'm going to paste the material design bootstrap component over here so this many component is required in this page now after that we need to bring use param and use navigate from our react router dom so use param use navigate and we also need our spinner component so let's bring that one as well and here first what we have to do so first i am going to store the reference of use dispatch into a dispatch variable because we need to dispatch an action once we get the tag in our url and we have to also store the reference of use navigate into a navigate variable so use navigate and from react redux you also need use selector so let's bring this one and we have already defined the state for tag tools so we can use here like use selector state dot tour and what we need here so we need tag tools so we need here tag tools from our store and loading okay and let's use here use param so use sperum and we are going to get our tag and then we can use here use effect okay and so this huge effect will run once we have our tag so if we have the tag then dispatch an action so get so tag tools okay so let's see what action we have created in our tour slice so it is a tag tour only so here let's change this one so i'm going to give the name here like get tours by tag so get tours by tag let's change this one and let's update here as well and let's update in our tag tools.js file and get tours by tag remove this one let's save this file so here is everything is okay i think now let's go into the browser okay so refresh this one let's open our dev tool to the bottom and let's open this one so for agra tag we have only one tour so let's go to the home page and find the common tag so you can see that test is common in this store as well as in this tour okay so let's click on this test tag now let's open dev tool now we should have two tools in our tag tools so you can see that in tag tools we have got two tools because this test is common in both tools okay so now the next thing we have to show all the tools with the tag on this page so let's go to the vs code and let's go to this tag tools.js file so here what we have to do so here first i have to do like if we have the loading so i wanted to show the spinner component so return spinner okay so let's save this one and after that let's remove this one and inside this tip i'm going to have some inline styling so i'm just going to paste the styling for this div so this is so this is styling i'm going to use and inside this div i'm going to have s3 tag with the class name text hyphen center and we can have like tours with tag and we can give here tag okay heading now we are going to have one hr tag and i'm going to give an inline styling here and max width i can give for this horizontal line like 570 pixel after that we are going to receive a tag tools from our store so we can check like tag tools if you have dot map and here we can use mdb card group we are going to have mdb card this with some inline style again i have to specify the max width so i'm just going to copy this one paste it over here and it will be 600 pixels and i'm going to specify the key so here key will be like item dot underscore id and class name let's give here empty hyphen 2 so some margin top i'm going to give over here then i can use your mdb row with class name g hyphen 0 then i'm going to use your mdb column with md for inside that i'm going to use mdb card image and i'm going to use your class name like rounded source i am going to use here so it will be like item dot image file in alternate i am going to provide title so item dot title and it will be fluid so for now let's format this one and let's go into the browser whether we are able to see the image or not so now you can see that we have got our with this particular tag that is test and we have to show some more detail here in our card so let's do that one as well so after this what we have to do so after this mdp column i am going to have one more mdb column and i am going to have md8 and here i'm going to use mdp card body then i'm going to use mdb card title it will be having a class name text hyphen start item dot title after mdb card title i'm going to use mdb card text okay and here i'm going to use class name text start and again here i have to use the excerpt so i can just copy the excerpt from our singletwo.js file so here i don't think we have that one so it will be present inside this card tour so let's just copy this one and since we are using this excerpt in most of the components and pages so let's just put inside the utility folder so let's quickly create one utility folder over here so utility and here i'm going to have index file index.js and let's just paste over here and it will be export on and we are going to receive a string as well as count value and here it will be the count we will replace from other component as well where we are using this excerpt so first let's use this one inside our tag tools so we have to bring that except from this utility folder except and we can use here excerpt straight away so excerpt we can pass here item dot description and we can pass the count so it will be 40. now after this mdb card text we are going to have div and here i'm going to have some inline styling so float i'm going to give here left and margin top i'm going to give here minus 10 pixel okay and i'm going to use here btn mdb btn so it will be like read more so here i'm going to pass some props like size so size will be small it will be rounded then color i'm going to give here info and on click method we have to provide so once user click on this read more button so he will navigate towards a single tour page so let's so let's provide the path here so tour slash item dot underscore id let's forward this one and i think for now we are done so let's save this file and let's go to the browser so now you can see that we are able to see the title sort description and read more button and if you click on read more you will navigate towards a single tour page so from there also we are able to navigate towards this specific tour page so this test tag is common in both tour and if you click on this store so you will get only one tool okay because we don't have any common tag between this tool so we are done with the functionality getting the tool by tag in a separate page the next thing we are going to work on our related tool so if you click on read more so i wanted to show the related tool with this tag so whatever the tag we have over here like india up agra so i wanted to show the related tool below this description and it will be only 3 2 okay so we are not going to show more than three tour we are only going to show three tours below this description so the api may return more than three tours when you combine this tag okay but we are going to show only three tours below this description okay so we are just going to show the three tour under the related to section so first we are going to work on our backend part then we will work on our front end so let's go into the vs code and let's go to the controller file for the 2.js and i'm going to create a controller for getting the related tool with the combined tags so i'm just going to copy this controller okay so let's copy this one let's paste it over here and it will be like get related tours and we are going to receive a tags from request body so it will be request.body and it will be like cost tax okay and here we have to pass tax and that's it for getting the related tool with the tax that we are going to receive from our request body so now we have to register a route so let's go to the routes folder and here what we have to do so here i can just copy this one and let's modify the endpoint so it will be like related tools okay and it will be get related tools so our endpoint is registered now we have to start work on our front end so i'm going to start with the api part only first and you can just copy this one and it will be like get related tools okay get related tools and we can we are going to receive a tags and it's going to be post request so api dot post and let's edit this end point so it will be related tools and we can pass the tags in the request body like this way and next thing what we have to do so we have to work on our tour slice.js file and here first we can copy this one this action and we can just change this one so it will be get related tools and this will be get related to it so action type will be the get related tour only and we are going to receive a tax and it will be tagged and point will become get related to and we have to also define the state for this one as well so related tools and it will be the empty array and let's copy this one let's paste it over here get related tools it will be and this will be state dot related tools so we have completed our redux part now we have to work on our this single tour page so in the pages folder we have single tour page in which we are displaying the more information about the particular tool so below description we are going to show the related tour so here first we need that tax okay so cost tax and we can get the tax from here to dot tags so if you open the dev tool so you can see that we have tags over here inside this store object which hold the information about the single tool so so here we can get the tags with this way and we can use here one use effect again so here i'm going to use one use effect this huge effect will run monthly once we have the tags and we can use like this way tax if you have the tax then dispatch get related to action from our tour slice.js file and we can pass this tags so we can verify this one first so let's go into the browser and refresh this one let's open the dev tool and let's open this one tour and here we have related tools so it's got rejected you can see that here it's got rejected so something so i'm going to refresh this one again so something going wrong cannot make post request open so i think something wrong with our endpoint so let's go back to the vs code and let's put the routes so so it will be post okay not get so let's go to the browser again and refresh this one open the dev tool so now you can see that it got fulfilled and let's open this one so now we have got one tool okay related to this tag so we have tags india up so it's returning only one tour under the related tour so the next thing what i'm going to do so let's go to the home page and now click on this read more okay this tool so now you will get some more tour inside the related tour let's open this dev tool so now we have two tours inside the related tour so it's returning the current tour as well as the other tour as well so under the related tour section we don't want it to show this current tour okay because we are already on this page so we are going to show the different tour under the related tour section and from there also we can navigate towards the single toolbar and you will understand more once we create that component so let's go into the vs code and let's go to this single tour so we are going to show the related tour below this card body so here we are going to have our related tours so now i'm going to create a component inside this component folder so so let's create a component like related tools dot yes and let's generate a snippet over here and after that what we have to do so here first i am going to paste the component that we are going to need from our material design booster so this many component we are going to use some more material design bootstrap and we also need link from our react router dom so let's bring link and we also going to need here excerpt so let's bring excerpt as well from that utility folder okay and we are going to receive two thing from that single tour page that is related tools and tour id so this two ready is a current id and here we can remove this one and i'm going to use fragment over here and first we are going to check if we have the related tools then only we are going to show the related to section so this is the first level of checking so related to dot length greater than zero that means we have some related tools after that we have to check like if the related tools have the length greater than 1 that means the api returning more than one tool and if api returned the one tool that means that meant it returned the same tool so if i go to the browser so if api returned the one tool that means it returned the same tour that is mentioned so this api will always return at least one tour if you are in single tour page so we don't want it to show this tour we always wanted to show the different tour under the related tour section so if the length is greater than 1 then only we are going to show the related to section so here what we have to do then i am going to show the related to sections it will be related tools okay so we are getting one error here so here again i'm going to use fragment so that we don't get any issue so let's cut this out and paste it over here now what we have to do so related to i'm going to use here filter so first i don't want it to show this menthine tool under the related tour section because we are already on this page okay so under the related tour section we are going to show the different different tours if it match with this tag okay that we have over here so that's why i have bring this to ready so we have to check with the current tour id as well to restrict this one so here what we can do so here we are just doing a filtering so item dot underscore id if it's not matching with the current tool id then we can basically remove all those two okay so if item dot id is not match with the tool id then we are displaying the different different tour under the related tour section after that i wanted to show only the three tour okay so the api returned more than three tours so we just wanted to display the three tour under the related tour section so we can use your splice method and after that we can use your map item after that we have to use mdb column okay and here we have to use mdb card and here we are going to use link by clicking on card you can also navigate to our specific tool page so here i'm using link and we can give the path here and we can specify a tour slash item dot underscore id okay and here i'm going to use mdb card image okay now in the source we have image file so item dot image file then in alt we have item dot title and position we can give here top okay so if you click on image you will navigate towards that single tool page okay now after this link we are going to use here span with the class name text hyphen start tag hyphen card okay and inside this span tag we are going to display tag so tag again i'm going to use here link okay so what i can do here item dot tags and here we are going to have tag single tag and here again i am going to use link so basically by clicking on the tag you will navigate towards that tag page where you can see all the tool with respect to that particular tag so here i am going to have the path like tour slash tag and we can give here tag and here i am going to use hash and inside the stack okay so after this fan tag i'm going to have mdb card body okay and here i'm going to have item dot title and this item.title will be having inside uh mdb card title okay so let's have mdb card title and inside that i'm going to have item.title and i'm going to have one class name here like text hyphen start and i'm going to have description as well so for description i'm going to use mdb card text so let's use your mdb card text and here i'm going to use item dot description so i'm going to use your first excerpt to sort the description so we can give here like item dot and description and we can give count here five okay and here we have to add that mdb rule as well that we have bring so we can use mdb row here okay and we can use your class name like row hyphen calls iphone one pro column hyphen md hyphen 3 g iphone 4 and we can just cut this one entire thing okay and we can paste inside this mdb hero so let's save this file and let's go into the browser refresh this one so i am going to click on this one uh this mentioned tool because it has the common tags like test okay so test is common in both tool so i'm going to click on this read more so we are not able to see the related tour because we have to do some more adjustment so related to we are using uh inside this component so inside this page we are using the related tool so first we have to bring this one okay related tour and we are passing the props here like related to run tour id so we need to pass this thing related to and let's and let's make sure that we are getting the related tools so we are not getting the related tool from the store so we need related tools so you can see that in in-depth tool so we have so inside tour we have related tools okay in which we have two tools because this tag is common in both tour so related tour is here and we have the current id so we can pass this one so first let's pass here related tools and we have to also pass the tour id and two radi nothing but the current id which we are getting with the help of huge params okay and this will be the self closing and we have to also verify one more thing so we are using this related tool component so we have to add the styling for this h4 tag inside this index.css file so i am going to paste a css file for the h4 tag so this is styling we have to paste for the h4 tag so you can copy this styling by pausing this video so i hope you have copy all the styling that we are going to use for the h4 tag now let's go into the browser refresh this one now you can see that we are able to see the related tool under this single tour page and if you click on card you will navigate towards single toolbar only and the mention will display over here so you can also switch from here as well under this related tour so we have completed this related to section uh in this application and you can see that in our code so in our code we are displaying only three tools under the related tour so if you keep adding the tour with the same tag then it will get flooded over here so i have just restricted over here with the three tour so no matter how many tours we have with the particular tag under the related tour section i am going to show only three tour so we have completed this related tour feature in our application so before implementing other features like likes and pagination in this application first i wanted to handle the token expiry in our front end as well so if you look at our code so if i go to the tool.js in controller and not in two dot js uh user.js so here basically we are basically setting the token expiry one hour so token will get expired in one hour so here we are handling the token expiry in our back end but we are not checking in front end whether our token get expired or not so once the token get expire in our frontend we wanted to basically log out from this application so if i go to the browser and let me login so let's log in with the john doe so now you can see that at the moment our user is successfully logging in there in this application so the token is going to expire in one hour so to test this functionality what i can do so i'm going to adjust the time in my system so what i'm going to do i'm going to increase time by one hour so i am just going to increase the time by one hour let's give here so i am going to select the month here merge and the date i'm going to select here one and i'm going to set the time to this okay and i'm going to change the time on my system okay so current time is 11 20 but i have changed the time on my system so let's see whether it's working or not so we wanted to test whether our jwt token got expired or not so first refresh this application and let's click on this dashboard now you can see that we are getting this loader okay so if you look at the command prompt you can see that we are getting jwt expired and if i open the network tab and if i refresh this one so now you can see that it's pending and we don't have any much information from this network tab like what's going on but in the terminal you can see that our jwt token got expired okay and in dashboard page we are showing only those two which is created by this logged in user so john doe has created one tool so it should be display but our jwt token got expired by changing the time on my machine what we have to do here to fix this issue so i am going into my vs code and i am going into the header file so header.js and here what i have to do so we have to bring the token from the user so we have already this one use selected so item i'm just going to cut this one and it should be here ideally and now i need token okay so cons token and i'm going to check like if you have the token inside this user then let's have it the token and here we can check like if you have the token okay so first i need to decode the token so here i have to install one package like jwt decode so let's go to the client folder and here i have to install one package like npm install jwt decode okay so let's install this package so guys our package got installed now so let's close this one and here we have to first decode the token so decoded token and here we have to bring the d code from jwt token so import the code from jwt decode and we can decode our token and we can pass here token and if decode token dot expire into 100 so we are checking with the current time here so new date so here you are going to get some millisecond here so we are comparing with this one with our current time and if it's greater than that means our token got expired so here we can dispatch uh this one set logout okay set logout let's save this one and if you go to the application now you will automatically redirect to login page in five second okay so you can see that this is working so we have handled the token expiry in our front end as well so this is done in our application so guys now we are going to work on pagination in this application so as you can see that i have already added some tour in this application so overall i have added 14 tool in this application and we have to show six store per page so we have to start working on our back end then we will work on our front end so we are going to adjust our existing api so let's go back to the vs code so this controller is basically responsible for getting all the tools that we have in our mongodb so we are going to modify this our existing controller so here we are going to receive a page from our front end in the form of query parameters so request.query and i am just going to put a comment in this two line so here first we have to define the limit so we wanted to show 6 store per page so limit will be 6 here and here we have to define our start index so start index equal to so we are going to receive a page number from our front end and initially it will be string so once you pass a page in the form of a query parameter so this page will become into a string so we have to again convert back into number so i am going to use your number so it will convert into a number and here i have to give minus 1 into limit okay so we have to get the starting index of every page now we have to find the total so cost total equal to await and it will be tour model dot count documents so basically it will return the total count of the document that we have in our mongodb and after that we have to send the json response of 6 to per page so cons tours is going to await tour model dot find and let's have a limit and we are going to pass the limit here so we are going to send six store per page and here we have to also do a skip so we always wanted to send six new tour on each page so on page one we have to send a sec store then on page two we have to send six new tour so that's why we have to skip this one so we don't want it to send the old tour when the page number get changed and after that we have to send a json response so response.json and we are going to send a data inside this we are going to send the tours and we have to also send the current page okay so we are converting this page into a number because it is receiving as a string in the in the query parameter and you can also send the total tours okay so it will be like total and we have to also send the number of pages at the moment we have a 14 tour in our current application so it's going to show a number of pages as a 3 because we are displaying 6 store per page so number of pages we have to also calculate so number of pages and we are going to calculate with simple logic like math dot cell and here here we have to get like total divided by limit so basically we are doing here round off and we are done with this changes in our controller so we haven't had any new api we have just modify our existing controller so the same thing we have to do in our front end as well so let's minimize this one and i'm going to start with our api part so so this is the api that is responsible for getting all the tour from our back end so this time it's going to receive a page okay and this endpoint will become now this way okay so page and we have to pass this page and and we are going to receive this page from our component and the same thing we have to also adjust in our slide.js file so let's go to this get to reaction so this is our get 2 action ok so initially it was not receiving any kind of argument from our component now it's going to receive a page okay and we have to pass this page here in this api and we have to also define one new state in our initial state so let's define this one current state not current state it will be the current page so by default it will be the one okay and we have to also define a new action so new action we are going to create inside our reducer and we are going to have a action like set current page okay it will be state action and then what we have to do here so state dot current page is equal to action dot payload now we have to export this newly created action so what we can do over here so export cost tool slice dot action and it will be set current page now we have to also define number of pages as well in our initial state so here number of pages it will be null and we are going to update here in our gate tours and this going to be modify little bit because if you look at our controller so we are receiving now tours in the data so likewise we have to adjust this one in our toolslide.js file so now it will become action.payload.data and we have to also update the state for this number of pages so action dot payload dot number of pages okay and the same thing we have to also do for the current page as well okay so let's save this file and i'm going to the home.js file from where we are dispatching that get to action so in home.js file we are dispatching this action to get all the tools that we have in our back end so at the moment it's not going to work so we have to extract the current page okay so make sure this is the state we have defined in our tool slice dot js file so this is the current page we have to extract from our store and here we have to pause and this will get dispatch whenever this current page will get changed so this way we will get new tools on each page whenever user changing the page so we have to pass this current page as a dependency inside this array so let's save this file and let's go into browser and verify whether we are getting the 6 2 or not on our first page so if i refresh this one so now you can see that we are only able to see the sixth store in our home page so this is our first page and the rest of the two you will only able to see once we implement the pagination and if you look at our dev tool so you can see that in our tour object we have current page and we have a number of page 3 because we have a 14 tour in this application and we are showing six store per page so the number of page will become three and the current page is one so now we are going to work on our pagination component so let's go into the vs code and inside this component folder i am going to have my pagination okay so pagination yes and let's generate a snippet for now so we are going to bring some component from our material design bootstrap so far material design booster we need some component to build the pagination so mdb pagination mdb pagination item mdb btn okay and after that this pagination component going to receive some props from our home page so it's going to receive a props like set current page current page then number of pages and it's also going to receive dispatch okay now here i am going to have a method render pagination okay and here first i need to check like if the current page is matching with the number of page so that means we have overall six store or less than six store so in that case i don't want it to show the pagination and we have to also make sure that we are on the first page then in that case i don't want it to show the pagination so the number of pages is matched with the current page that means overall we have 6 2 or less than 6 2 in our mongodb so there is no need to display the pagination now after that if you have the current page equal to 1 then we are going to show the next button along with the ph number and inside that we are going to have mdb pagination and it's going to be in center and i'm going to use class name here mb hyphen 0 and inside this mdb pg nation i am going to have mdb pagination item and inside that i'm going to have p tag with the class name f hyphen bold empty hyphen one okay and initially it will be the one only so i'm just going to hard coded this one and after that we are going to have a button so again i am going to have this mdb pagination item and inside that i am going to have button so inside that we are going to have next button so i'm going to pass some props like rounded class name i'm going to give mx hyphen 2 and i'm going to have one click so non-click i am going to dispatch a set current page okay so basically it's going to increase the page number and the value of button will be the next let's format this one and after this mdb pagination so it's going to be closed here only and we have to write one more condition so we are going to have one lsf so if current page is not match with the number of pages that means we have some more tour in our backend that we have to display once user click on the next button so here what i have to do so i'm just going to copy this one and we have to put inside the return and now this time this will go above okay so let's cut this mdb pagination item and it will be here because now this will become previous if you click on the next and here we have to show the current page okay so it will be the current page and we have to reduce so we have to give here like minus 1 because we are going to back and we are going to have one more pagination item so i am just going to copy and paste it here so this will be the next and in that case it will going to increase if you have some more tool so user can click on next button again if we have some more to run our mongodb after that what we have to do so we are going to have one else part as well so elsewhat that means the user has reached towards the last page so in that case we just wanted to show the previous button along with the page number so for that what i'm going to do so i'm just going to copy this one so let's copy this one and i'm going to paste it over here and i need one closing bracket for this mdb pagination let's format this one so in es condition that means a user has reached towards the last page and we don't have and we don't have any tour after this page so we just have a previous button and the page value so i think we have completed our pagination component now the last thing we have left here like we can just render the pagination inside this div okay and we can give here one class name empty iphone 2 so let's save this file for now and let's go into our home page and we are going to display a pagination after this mdb grow so we are going to have pagination component hour and we have to pass some prof so set current page we have to pass so we need to bring this action so i think vs code automatically is going to import if it's not imported that means we have to import that set current page action now we have to pass number of pages and i think we have already brought from our store so i don't think we have brought from our store so let's bring that one as well number of page from our store so let's provide here number of page we have to also pass the current page and we have to also pass the dispatch here let's save this file and let's go into the browser refresh this one scroll down so now you can see that we have got our pagination and i wanted to give some more styling to this pagination so let's go to the pagination.js and we can and we can give little bit some more margin at the top so it will be let's give empty iphone 4 so now we have little bit margin in our pagination component from this card component okay now let's refresh this one again and let's click on next so now you can see that we are getting a different tour on this second page and you can see that page number is also getting changed and we have also previous buttons so you can also go back let's click on next so now on this page we are going to see only two tours so you can see that we are only able to see the two tours but we are not able to see the previous button along with the tour so let me check what's going wrong so let's go into the vs code and we have to put inside this into return so we forget to put inside this return that's why we are not getting so let's cut this one and paste it over here format this one now let's go back to browser so now you can see that we have got our previous button along with the page number and we don't have any tools so we don't have any next button here so overall we have 14 tor in this application so according to that we have three page and if you click on previous you will navigate back to the second page you can verify here at the below and you can also go back to the first page so now pagination part is completed in this current application so the next thing we are going to implement the like functionality in our current application so user can like any tool so only authorized user can like a particular tool and if user and feature is not logged in so he can only see the like count uh before we implement like functionality in our application so we have to adjust some of the things in our mongodb so basically we are going to adjust a tour model in our code so before that we have to just remove this like count from every tour so far we have created so i'm going to remove this live count property from each tool so you can remove this one by clicking on this edit icon and you have to just click on this one and you have to update so likewise you have to update this one in each tour that we have created in our mongodb so i will do that one then we will start working on our backend part so guys i have removed that live count property from each tour that we have in our mongodb manually so make sure to remove that one so let's go back to vs code and first we have to adjust our tour model that we have in our backend so it will be likes okay and type will be the array with the string so basically here we are storing the user id and default will be the empty array so only this must change we have to do in our tour model and we have to write a new controller to like a particular tour so at the bottom we are going to write that one so here i am going to have export const like tour it will be async okay i'm going to have request response and so here first we need the tour id so which tour is going to like so which tour is going to like by the user so we need this id some more request parameter and here we have to first check if the user is not authorized so in that case we won't have user id so if you don't have authorized user so we can give a json response like response.json and we can give a message like user is not authenticated okay after that we have to also check if the id is valid or not that is to ready that we are receiving from this request parameter so we can copy this line of code so we can copy this one so this is the same code is required here as well so we can just paste it over here so here basically we are checking if this id is valid or not after that what we can do over here so we can have like cos 2 equal to a weight tour model so we can find that particular tour with the id that we are receiving in the request parameter and then we need to find here index so two [Music] dots likes find index string request dot user id so in the likes basically we are storing the user id so first we have to find this index okay and here we are basically checking if you don't have the same user okay then we have to push that user into that likes array okay so tour dot likes dot push request dot user id and if user click again on the like button that means we have to decrease the like count so we don't want it to insert a duplicate user id in the likes array so we have to basically reduce the count from the like if user click again on the like button so in that case what we can do tour dot likes equal to tour dot likes we have to filter here id and again we have to convert your id into a string so we are checking the user id here so basically we are inserting user id only when the user press the like button okay now we have to do here like cost updated tour so we can use your await tour model dot find by id and update so we can pass the id to and we can give here new with the true so only it's going to update the like property so after that we can send here response dot status 200 and we can send a json response like updated tour okay now here we can use a try catch so let put everything inside try block so let's cut this one and paste it inside try block and we are going to have patch error and we can simply just copy this one and you can also throw the mongodb error message as well so what you have to do so you can just do like error dot message okay so in that case you will able to see the mongodb error message so you can also do this way so we are done with our controller part for liking the tool now the next thing what we have to do so we have to register api for this like tour so let's go to the route folder and let's go to the tour.js file and here we have to add the endpoint so we are going to have the endpoint like router dot patch and we are going to have live like with the tour id and only authorized user can like the tour and it's going to have a like tour controller so backend part is completed over here now let's work on the front end so again i'm going to start with the redux part only so let's minimize this one and i'm going to start work with the api part so here i'm going to have a api for lagging tool so [Applause] we can have like export cons like tour okay and it's going to receive a id and api dot patch and the end point we have like two slash like with the tour id now we have to work on our toolslash.js file as well so here we can just copy this one let's copy this one because it's almost going to be the same so we can just paste it over here and it will be like light tour only it will be like tour and we are going to receive a tour id and the api will be here like tour okay now this creating thing will generate a three promise lifecycle that we are going to handle in extra reducer object so what we can do over here so it will be pretty similar with the update tour because we have to also show the updated value of like on our front end as well so we can copy this whole line of code okay and we can just paste it here and this will be like tour and this will be also like tour this will be also like tour and for pending state i'm basically i'm going to remove this one because whenever you click on like button so it will get reload each time so i'm just going to remove this part and just left it empty and here i just wanted to update this state dot tools not state dot user tools okay so we can remove this one because because user will only able to like the particular tool from home page only so this is not required over here and we can also remove this one straight dot loading files so with this it's going to update on front end and by calling this api it's going to update in our mongodb okay so by calling this like to api it's going to update in our mongodb and with this changes it's going to update in our front end so basically we wanted to change both on backend as well as front end and we can remove this console log now it's not required so let's remove this one let's save this file and first let's check whether we have any issue or not in our current application refresh this one and if you look at the dev tool and if you open any tour so now i don't have that live count okay if i scroll down so i don't have like count property and if i go to the top you can see that i don't have like on property let's implement the live functionality now in our ui so i'm going to have a like button on the right hand side on each card component so let's go to the vs code and implement this like functionality we have to go to our this card tool.js file and here we are going to have our like button okay so we need to bring mdb btn and first i am going to give some props here so i am going to start with the styling so float and it will be right and here i'm going to give a tag so tag will be inside this okay so it will be a color will be none and we are going to have here on click method so let's define this one handle clip and inside that i am going to have a like so it will be a small component that we are going to define here only okay call likes and initially i just wanted to return a like here okay so i'm going to use here fragment and i'm going to use here mdb icon so vs could automatically import that one and here i am going to use far icon and thumbs up and let also defined the handle like otherwise we will get an error handle click so it will be handle like not handle click so it will be handle like so i just wanted to give your meaningful name so it will be handle like and for now just it will be empty and here also we have to adjust so i'm just going to give here space using the standard html so nvsp and like we can give here and first we can verify this one whether it's showing or not so now you can see that we have got the like button on each card component and once the user click on the like button so this icon will get filled okay that means user is already like this tour so what we have to do over here so first we have to basically dispatch an action to like the tour so in handle like we can dispatch that one we have to bring a huge dispatch and use selector as well from our react redux in order to dispatch an action or access the state that we have in our store we use selector use dispatch and we also need a user so which user is basically liking this particular tool so we need to bring that user as well from our huge selector so we can get the user like state dot auth okay and we can have user okay so our auth slices register with the auth key you can see that in dev tool if i minimize this one okay so we have user here okay so at the moment it's null so we have to login in our application to perform the like functionality so first let's extract this user now in our application we have a two way of login either user can login with normal email and password or user can login with the google so here we have to first identify the user id so either user will be login with the normal email password or with google sign in so we need the user id so call user id and we have to like do user result dot underscore id and we have to also check here if user is login with the google id then we need that id okay so result dot google id now we have here user id and in handle like we have to dispatch that action so first let's store the reference of use dispatch into a dispatch variable and we can dispatch that action that we have created in our tour slice to dispatch like tour and here we can pass the id now what we have to do here so first we can perform this one whether it's working or not so let's go into the browser so let's refresh this one and let's login with the user so i'm going to login with john doe okay and let's open the dev tool as well so our dev tool is opened and let's click on like so you won't get the light count as of now so i have just click on this like button and let's see whether action is fired or not so like tourists so like to reaction got fire and it's got fulfilled over here and we can verify this one so we have like the third tour okay the third one so let's open the third one so let's open this one so like array is empty for this one so let me check what is the issue so the issue is here like we are sending the id directly okay if you can see that here in our like tour so we are sending the id as a normal argument okay so what we have to do here so we have to receive this id in the form of object from our component okay so let's change this one at our car2.js file and let's send this id as a object let's save this file and here we have to also do some small adjustment so you can see that from our card tour component we are passing the id as the underscore id so we are receiving this id and we can pass the id like this way only okay and we can pass the id like this way so now it should work so here we have to do one more small adjustment since we are passing id as a underscore id so what we can do over here so [Applause] where is like tour lifecycle so it will be underscore id okay so make sure to change this one to underscore id now we won't have any issues so let's verify this one so we need to go back to browser okay and let's click on the second one okay i'm going to like this tool and let's open redux dev tool so like so like to reaction got fire let's open this one so we have like the second tour let's expand this one so now you can see that we are able to store the user id in this likes array so our redux is also getting updated whenever user click on the like button so now what we have to do so we have to show the like count and whenever user click the like button so we have to fill this like icon so let's go into the vs code and complete rest of the feature for this live functionality so let's go to the card tour dot js okay so here what we have to do we also need to bring the lights as well so now this car tour is also going to accept the likes okay and here we can check like if likes dot length is greater than zero so at least we have one like on this tour and we have to also check one thing over here like if user is already like this tour so we have to fill the like icon that means we are showing to the user like you have already like the particular tool here first we are going to check like likes dot find and we are going to have like and we can check here like like equal to user id so we are matching with the user id okay so in that case what we have to do so we are going to use first fragment here and i am going to use the same icon but this time actually we have to use font awesome so basically it will fill the like icon because the user has already liked the particular tool and we have to also bring one component from our material design bootstrap that is mdb tooltip and here what we have to do next thing so first i am going to provide the space some space so nv sp and it will be ampersand and here we are also going to check like if the likes dot length greater than 2 okay so here basically we are showing like you and two other or three other people already like this particular tool so here i'm going to use mdb tooltip and inside that i'm going to provide tag it will be a and i'm going to give title okay and we can give a message like you and we have to show the length of life so like likes dot length and i'm just going to minus so basically i am reducing the current user because this user is already like this particular tool so if we have more than two like from different different user then we are going to show this message in the tooltip and inside this i am going to have the length of light that means how many users like this particular tour so like dot length and we can give it likes okay and we are going to have else part as well so in the else part we are going to show the like count and we are also going to basically use different icon for this like because uh in the l spot basically and in the else part basically we are showing the only like count so here again i am going to check like in the likes dot length so first we are going to count the like and so it's gonna having some count and it will be like and here also we have to determine like if the likes dot length greater than one that means we have more than one like so in that case i just wanted to append the as keyword so it will become likes so in l part it will be just empty screen that means only we have one like for this particular tour so we have write the else condition for this scenario okay now we have to also write the else condition for this scenario so here what we have to mention so here basically we are checking like a current logged in user has like this particular tool so we are showing all this thing and in elsewhere if this store is not liked by the current logged in user then what we have to do here so we are going to use first fragment and we are going to have mdb icon and it will be self closing so it will be fair icon thumbs up okay and again i'm going to use here space so nbsp and here i'm going to show the like count like likes dot length and like dot length is equal to 1 that means we have only one like and if we have more than that means we have more likes on the particular tour so it will be likes and if you don't have any light on the particular tour then we are going to show this part okay and here it will be the lights okay so let's save this file and verify this one whether it's working or not so let's go into the browser so now you can see that this store is already liked by the current logged in user that is john doe okay and if you like this one it will get increased and if you click again on like then it will get decreased okay so you can see that it's getting filled out when the current logged in user like this particular tool and if you log in with that different user then you will see the like count but this will not get filled so icon will not get filled so basically here it is representing like you have already like this particular tool so now let's log out and i'm going to log in with the google so let's log out from this current application and i'm going to log in with the google sign-in so now you can see that we have logged in in our application now we are able to see the like count which is liked by the other user and if you click on again this one so now you can see that we are able to update the like count as well for this different user okay and if you click on this one you will get one like count okay so you can see that this like icon got filled once you click on this icon now i am also going to show that tooltip message so i am going to login with the different user so lets log out and i'm going to login this time with the test user so overall we have three user in our mongodb so let's log in with this user now again you can see that this like icon is not filled okay and if you click on this like it will get filled and the live count will get increasing and if you click on this one so it will get increased and if you hover on this one you will see like you and two other live so we can modify this message like two other people like okay so it will be little bit meaningful so let's over on this one now you will see like you and two other people likes and it will not show here okay so it will only so once we have more than two like for the particular tour and we have to also restrict this like functionality if the user is not authorized so let's go back to the vs code so in onclip method we can disable this one based on the user logged in so we can check here like if you don't have any user inside this result it doesn't matter it doesn't matter whether he is login with normal email password or with google so we are going to check if you don't have any user inside this result object that means the user is not authorized in that case it will be null and in else part we are going to write this handle like and we have to also adjust this one as well so we also wanted to show message something like please login to like tool so again we can check here like if user is not authorized so i am going to show a tooltip message and debut tooltip and we can give the title like please login so it will be in double quotes so we can give like please login to life tour okay and tag will be a and we can give here our like component and in else we can just have our likes okay so let's save this file and verify this one whether it's working or not so let's go into the browser so we haven't break with these changes now let's log out from the application and let's go to the home page and let's click on this one so you can see that we are able to see the message like please login to like tour and you can also verify this one whether action got fired or not so our action got not fired that is like two reaction so we are also able to restrict the user if user is not logged in so guys we have implemented the live functionality in our current application so the next feature we are going to implement in our current application that is comment section so we are going to use discuss commenting system in our application so we will integrate discuss in this current application so now we are going to integrate discuss comment system on the single tour page so if you click on read more so basically we are going to show a discuss comment section below this related to section okay so for integrating the discuss comment system in this application so first we have to go to the official website of discuss so to integrate the discuss you have to go to this official website and you have to create a account here so i'm going to create a new account so let's click on get started and i'm going to give name here like code with all okay i'm going to give your email and i'm going to give a password let's click on sign up and i want to install discuss on my site so i'm going to click on this one and i'm going to give you a site name like door pdf so let's copy this one and let's give a tour pd only and category let's give here style okay let's click on create site and we have to select this one basic one so i'm going to click on subscribe now and if you have already working on any existing platform so you can select this one but we don't have any existing platform so we are going to select this one and for now let's keep open this one and to integrate to discuss in our application we have to use on this code which already have in this github link so i will provide this github link so it will be easy to integrate discuss with this code in our application so what i'm going to do here so i am just going to copy this one and don't worry i will provide this link in the description so you can easily have this one so i'm just going to copy this one and let's go to the vs code and here we have to create one component like discuss thread dot js and i'm just going to paste this one okay and in sort name we have to give this name so whatever it's generated over here so we have to give this name only so it will be this one and for now we don't have website url so i'm just going to give here localhost okay and it will be this okay and we need to install this prop types so let's open terminal in vs code so let's install this prop types so guys our package got installed so let's close this one so you can see that here uh it's going to receive id title path as a props from our single tour page so we need to provide this three thing and then it will render the discuss on our single tour page okay so we are done here and let's save this file and let's use this discuss thread component in our single tool page that is this one so below this card i am going to show that discuss thread okay so vs could automatically import that component and now we have to pass the id so let's keep the id we have to pass the title so title we can pass like tour dot title okay so tour dot title and we have to also provide the path the path we can give here like tour this id okay so let's save this file and let's go into the browser let's refresh this one so now you can see that we have got our nice discus comment section on our single tour page okay and let's click on this one and guys you have to also verify your discuss account so i'm going to verify my discuss account okay so now i have verified my account so now i can post a comment here so i can give a comment here like uh this is a nice tour post okay something like i can give here okay so anybody can post a comment here to particular tour so we are using third party commenting system over here so anybody can comment to this post and in order to post a comment either you can log in with the tutor or facebook so with that way also you can post a comment and if i logged in so let's login with the john doe so i think we have posted a comment on this tour so let's click on read more so you can see that yes we have posted a comment on this tour so user can login with a different different way like twitter or facebook in order to post a comment on this particular tool so guys we have added the comment feature in this current application with the help of discuss so guys now we have to work on some small small feature and issue that we have in our current application so on this single tour page we don't have any kind of back button so i just wanted to implement one back button so if you wanted to navigate back to home page so you can easily navigate towards the home page if you have the bad button so let's add one back button here so i'm going to vs code and here inside the singletool.js file i am going to add one back button so inside this mdb card body i am going to have mdb btn and inside this it will be having a tag a color none and style i'm going to give some inline style like float so it will be left color i'm going to give here as triple zero and we are going to have a non-click method so we need to bring use navigate from our react router dom so use navigate and we have to store the reference of use navigate into a navigate variable and once user click on this back icon so we wanted to basically navigate towards the home page so let's give here home route and inside this button i am going to use mdb icon and here it will be front awesome icon then size i am going to give here large i am going to use your icon so icon will be long iphone arrow iphone held hyphen left okay and i am going to have a style so it will be float left okay now let's save this file and let's go into the browser refresh this one so now our page get re-rendered and you can see that we have got and you can see that we have got one arrow here left arrow okay so if you click on this one you will never get back to the home page so we have introduced this one in our single tour page the next thing we have to work on our dashboard page so let's login so i'm going to create one new account here and it will be john smith let's keep email like john smith at the rate gmail.com one two three four five six one two three four five six so we have added a new user in our current application and if you click on this dashboard now you can see that we are getting this dashboard john speed so if new user don't have any tour so we wanted to show a different message on this dashboard page so let's go to the dashboard file in our vs code so we need to go to our dashboard.js file and here what we have to do first so first i'm going to check like if user tours dot length equal to zero that means we don't have any tour with our current logged in user so in that case i wanted to show like no tour available no tour available with the user so i'm just going to show the user name here so i'm just going to copy this one and let's paste it over here so this is one scenario now if user tours dot length is greater than zero that means we have some tool for our current logged in user so i'm just going to cut this two line ok and i am going to use your fragment lets save this file and lets go to the browser so now you can see that we have got message like no two available with the user john smith and you can also make it small this one okay so this is the message i wanted to display if the current logged in user haven't create any tool so this is done and other thing also i have to work on this current application so let's go to the home page first now let's search the tour so let's search with some random stuff so you can see that we are seeing this method and also we are seeing this pagination component so i wanted to change the message as well as this pagination component also should not display so let's work on this one as well so we need to go back to our vs code and we have to go to our home.js file so first we need to bring a huge location from our react router dom so let's bring huge location now we have to define one function to get the query so we need this query so this query we need okay so we have to find one function here to get that query so use query and return new url search params so we can use here use location dot search okay now after that what we have to do so first we need this like query so called query so we have to first store the reference of use query into a query variable then we need search query so const search query is equal to query dot get and we have to pass this value so with the help of this value we can get this search query value so we have to use this one so now we have got this search query and we have to also store the reference of huge location into a location variable so let's do that one as well okay so after that what we have to do so we have to basically modify our existing logic so first we are checking like if mongodb doesn't return any kind of tour so in that case we are going to show like no tours found and here also we have to do one more level of check so we have to check the path as well so if if we are in home page so if you are in home page then only we are going to show this message okay now i am going to copy this one and i am going to paste it over here and if you are not in home page that means we are on in search page okay so in that case message will be like we couldn't find any match or and we can specify our search query okay we couldn't find any match for our search query and we have to also restrict our pagination so here we can just simply check like if stores start length then only so this pagination okay so let's cut this one and paste over here now let's save this file and let's go to the browser now let's search with some random stuff that doesn't exist in our mongodb so now you can see that we are getting like we couldn't find any match for this g y e g f okay but we are getting this 0 as well so what we have to do over here so first let's remove one extra double quote and here we can do something like this okay now let's save this file and let's search with some random stuff so now you can see that we are getting like we couldn't find any match for this search query so this is working now we have some more issue in our app so if i open the console so you can see that first we are getting this warning so we haven't provided the key actually so that's the reason we are getting this warning so let's first add a key in order to identify uniquely each card component so we are going to use the id that we are receiving from our mongodb so let's go to the vs code and here what we have to do and here we can remove this one and here we can give the key like item dot underscore id okay let's save this file we have to provide the key here as well or for this map function and here we can use index okay so we can use here key and index okay okay so let's go to the browser refresh this application let's open the console so now we don't have any warning and let's go to this tags component so here also we don't have any warning let's go to the add tour so here also we don't have any warning okay now if you open the terminal so let's open the terminal so now you can see that we are getting some warning like use effect has missing dependency either include it or remove so we can remove this warning so what we have to do so we need to go back to our vs code and let's check where it's coming so it's coming so it's coming inside our dashboard.js file so what we can do inside this use effect so we can give this one this is a quick fix for this warning okay there are other fix also available for this type of warning but i am doing here quick fix okay so if you save the file and if you open the terminal now you can see that warning is gone at that line now we can do the same thing in other place as well so let's go to the home.js file so here also we can do the same thing and let's check this one so in single tour also we have so let's do that one let's open the terminal so now we don't have any kind of warning in our terminal so our app is clean now and all the functionality is working as expected now it's time for our app deployment so we are going to deploy our backend on heroku and the front end we are going to deploy on netlify so first we are going to deploy our backend to the heroku server then we will deploy our ui code to netlify so let's work on the backend part first so let's go to the vs code so before deployment we have to do some adjustment so first minimize our client folder and here we have to create one environment variable so dot tnv because this mongodb url should be in environment variable so in dot enb file what we can do we can just copy this one whole thing and we can have a key like db url okay so this one we have to add so we can just delete this one entire thing and here it will be like process dot env dot mongodb url okay and this port also we have to adjust so it will be like process dot env dot port and if it's not found then it will turn on 5000 and we don't have to add this port variable inside our dot enb file because heroku will add this support from their end so we don't have to add this port inside our environment variable and to access the value from our environment variable we have to add one package in our back end so let's add that package that is dot env so we have to go to the server and we have to install a package and install dot tnv so our package got installed let's close this one and what we have to do so let's also remove this one and we have to bring like dot env from dot enb okay and we have to do like dot env dot config so this way you will able to access the value that we have defined in our environment file okay after that what we have to do so we have to add git ignore file as well so let's add that one git ignore because we don't want it to push our node module so we need to define here node modules so you have to add this one now we have to add one proc file so proc file and here we have to add one script so this one we have to add so this proc file is going to enable haruku to start our app as soon as it is deployed so we have to add this one line of script after that what we have to do so we have to do one small adjustment in our package.json file so now we are deploying our backend code to heroku so since it is a dev dependency so it will become node okay not nodemon so we have to remove this one before deploying our code to heroku so we have to make these changes before we deploy our code to heroku now we are good to deploy our backend code to hiroku so first let's go to the heroku website so i am logging into my heroku account so let's click on this new and click on create new app and let's keep our app name like door pdf so so it is available so let's click on create app so before you deploy your code on heroku you have to install heroku cli so you have to install this one on your machine before you deploy any code on heroku so you can install this way so based on operating system you can install this heroku cli on your machine okay so you can install either this way if you are using mac or you can install this way if you are using window okay so both option is available here so let's close this one now we have to follow this step so i'm going to open a terminal here and i'm going to kill our server okay and we have to also do one more thing before we deploy our code so we have to register one route here because i don't want our app get crashed okay once you load into the browser so we can have like request response and response dot send and we can give your message like welcome welcome to tour api okay something like this we can give here now let's save this file okay now we can proceed with our deployment so let's go into the browser and we have to follow this step so let's open the terminal so first i'm going to clear this one so let's minimize this one little bit so it will be like heroku and you have to press any key so let's press any key here and it will open one new window and let's click on login button so now we are logged in so let's close this tab and let's open the terminal so now i'm going to clear this one again so now after that what we have to do so we don't have to follow this step because because we are already on this server folder now the next step what we have to do so git init after that let's copy this command let's paste it over here hit enter now let's do git add dot so it will add all the file now git commit and we can give a message like deploying to api okay now let's copy this command the last one and let's wait for the deployment process complete so you can see that is installing dependency node module and it will deploy within one minute so you can see that it's added the package and now we have got the message like build succeeded and it's going to launch very soon so our app got deployed here so you can see that on this url we can access our backend api so let's copy this one and we can verify this one in new tab so now you can see that we are able to see like welcome to tour api and you can also access your data and that we have in our backend so if you are giving like slash 2 so you will get all the data that we have in our mongodb that means we have successfully able to deploy our backend code to hiroku now it's time for our front-end deployment on netlify and before we do deploy our ui code to netlify we have to do some adjustment in our front-end code as well so let's go to the vs code and let's minimize this one let's open this one and first i'm going to create a one env file okay so inside this environment file we are going to have couple of key and value so we have to specify our dev url and prod url so react tab dev url so our backend is running on localhost 5000 so we have to specify this one localhost 5000 and now we are also going to have prod url you can give here like api react app dev api and react app prod api okay so for prod we have to use this one so you can copy this one and you can paste it over here after that we are also going to use react app sort name for our discuss comment section so react app sort name and it will be this one so let's go to the discuss thread and it will be turopedia let's copy this one let's paste it over here we are also going to have website url for our discuss comment system so react tab website url since we don't have any domain name till now so we can just give here http localhost 3000 okay so let's save this file and here we have to do some adjustment in our redux folder so here what we have to do so first we have to verify whether we are in development environment or production environment so we can define one variable so this will check like if you are in dev environment or production environment so if process dot tnv dot node env is not equal to production that means we are in development environment okay and from process dot env we have to restructure our prod api and dev api so let's go to the dot env file and we can just copy this one we can just paste it over here okay now this base url we need to change so based on the environment we have to decide whether we are in dev environment or in production environment so we have to choose the api here so if we are in dev environment so we have to use our dev api else we have to use prod api okay okay so let's save this file and we have to also do one more adjustment in our login.js file so for signing with google we are going to use a different client id so let's create a separate client id for our production environment so i'm going to create a credential for google login in our app so now i am going to create a separate credential for our production environment so let's click on create credential oauth client id and i'm going to choose web application and the name i'm going to give you like tour app prod okay and rest of the thing i will add later once we have a site name from our netlify so let's just click on create so our client is created and we can copy this one client id okay and let's go to the vs code so for now i'm just going to paste it over here okay so here also we have to determine whether we are in broad or dev environment and unfortunately we cannot paste our this google id in environment variable so it will have issue if you try to paste the separate client id for dev environment and production environment the way we have done for this our backend api and production api so it won't work in case of the client id so we have to do it on the login page itself so let's go to the login.js file and here i'm just going to copy this line of code from api.js file so we can just copy this line of code and we can just paste it over here okay and we can have here like cons client id okay and if you're in dev environment then we are going to use this client id that we have used so far okay this one so let's cut this one and if you're in prod then we are going to use this one that we have just created now now after that what we have to do so let's just copy this one and paste it here where is google login so here we have to put okay okay and we have to also adjust in our discus thread component so let's go to this file and so now we have to adjust in this component as well that is discussed thread so let's remove this two line we don't need this two line and we can use here like process dot tnv dot short name okay here also it's going to be process dot env dot short name and for website url also it will be process dot env dot website url so let's check the terminal whether we have missed anything or not so since we have this environment file in our ui code so we have to restart our react development server in order to get the value from environment file so let's kill the server and we have to also verify whether the functionality is working or not after making changes in our ui code so let's restart the server and let's wait for the application load into the browser so our application successfully load into the browser and it look like we haven't break anything because we are able to render the data from our mongodb on our home page okay so let's try to login so i'm going to login with google because we have changed some logic related to google sign-in in our code so let's see whether it's work or not so this is working as usual and let's go to the dashboard and let's delete one tour okay so this is working okay let's update one tour okay india let's give delhi let's click on update so it seems like everything is working we haven't broke anything with our latest changes on our ui code so now it's good to deploy so what we have to do here so let's open the terminal and we have got some more warning so let's fix this warning okay so what we can do here so again we can use the same thing like we did earlier so we can just put this comment and let's do here as well and that tools let's verify whether we have some other place or not so we have also in our add edit tour okay so here also we have use effect let's remove this one loading now let's open the terminal now we don't have any warning in our terminal so it's good to deploy our ui code to netlify so i'm going to kill the server and we need to generate a build file in order to deploy on netlify so i'm going to do like npm run build and let's wait for the build folder that is going to generate so it will be a optimized production build only so it will take around one minute to generate that build folder so let's wait for that one so it looked like our build folder got generated over here so we can check this one so you can see that our build folder got generated over here so now we are good to deploy on netlify so let's go to the netlify so you have to create a account on netlify so i have already create account on netlify and you have to click on this one site okay so i am going to drag and drop our build folder here and this is our build folder so i'm just going to drag and drop this build folder okay so it will take around 10 seconds to deploy our code so you can see that it's got deployed okay so we have got this url now let's open the link in new tab so we have successfully able to deploy our ui code to netlify and if you click on login then you can see that we are getting this message so in order to deploy a react application with router so we have to do some small adjustment in our code so before we do that so let's first change the site name here so we can change the site name okay so let's give here two pedia okay and let's click on save so we have this site name okay now let's close this one okay so we have our site name so let's first copy this one and i'm going to paste it here in our environment file on client side so let's remove this one and in order to deploy our react application with router so we have to do some small adjustment so we have to create one file here and it will be like redirects okay and i'm going to paste something over here so you have to add this one then only routing base react application work on netlify so let's do this changes and let's redeploy our application on netlify so let's generate again build folder npm run build so our build folder got generated over here so let's minimize this one and let's go to the netlife first and we wanted to deploy this one so we can click on this one deploy okay and we can again drag and drop this build folder and let's wait for some time so it's uploading you can see that here so our deployment is progress so now i think it's deployed you can see that it's got published so let's close this one and let's reopen this link and let's click on login so now you can see that this time we are able to navigate in our application okay and let's verify whether this functionality is working or not i'm going to log in with john doe so login functionality is working in this current application after deploying our app on netlify and you can add a new tool so let's add new to rear file new tour let's add some description let's give some tag like test new let's add one image let's click on submit so we are successfully able to add our tour so it will add at the end so let's click on next so pagination is also working let's click on next because it added at the last so you can see that this store got added successfully in our application after deployment so pagination is working let's see dashboard page so our dashboard page is also working after deployment and let's go to the home page and let's click on read more so we are getting some issue so our discuss commenting system is not working after deployment so i'll fix this one and let's perform the search operation as well i'm going to search with the new here so this is also working you can see that but we have issue with our pagination so i will also fix this one okay and let's log out from this application so now let's try to login with the google in our application so you won't be able to log in with the google so you are going to get this error message so to fix this one what we can do so this is our url okay and let's go to the google credential okay so we have already created our new credential for our production environment so let's click on this one and we can add uri here so it will be just dot app and for redirect uri you can add that one okay and we can save this one so it might take some time to reflect okay so guys now i'm going to login with google so let's click on this one so you can see that we are successfully able to login with google as well in our current application so let's solve those two issues that we have in our application the first one is like we have to display the discuss comment section in the single tour page and the second issue we have like if we search any specific tool so we don't have to show the pagination so let's fix this two issue and redeploy our ui code on netlify so if you look at our environment file so we have to use here react app sort name okay so so this thing we are missing here so it will be react app sort name same thing will goes for here as well and same thing will goes for this one as well okay react app underscore website url now we have to solve the pagination problem when user is searching the tool so in case of searching the tool we are not going to show the pagination so let's go to the home.js file and what we have to do so so we can use this variable that is search query so if you have any value inside the search query that means user is performing the search operation in our application if there is no search query then only you show the pagination okay let's verify this one first so let's open the local host 3000 so now let's search the tour so now we are not showing pagination in case of searching the tour so let's also verify whether our discuss command system is working or not so let's click on read more so this is working so now let's generate a optimize build folder so our build folder got generated over here so now i'm going to redeploy our ui code on netlify so let's deploy this application on netlify and let's drag this one and i'm going to drop here so you can see the progress here so you can see that this is the build folder that i have deployed and deployment in progress so currently there are some issues going on netlify so i'll be back once our code get deployed so guys our deployment is complete over here so i had to cancel my last deployment so i have redeployed again so you can see that it got published and let's click on this link so we are able to load all the tool that we have in our mongodb so let's click on read more so now we have here discuss commenting system and you can log in with either facebook google or sign in in order to reply any post and you can also post a comment here so let's give here like this is nice post so i think you have to login in order to post any comment let's log in here with google plus only so now let's click on post as this all so we are able to post the comment on the tour and let's also verify the search functionality so we don't want it to show the pagination in case of searching the tour so so this is also working so in case of searching the tour we are not displaying the pagination so we don't have to show the pagination if usually trying to search the tour so guys we have completed this full stack month project using react mongodb express and node.js along with redux toolkit and i hope you have really enjoyed building this man project with me so if you like my work then please like this video and share this content with your friend and colleague and don't forget to subscribe this channel i will see you in other video till then good bye and take care

Channel: CodeWithVishal

Views: 88,794

Keywords: Build and Deploy MERN Stack App, Redux-Toolkit, mern stack project with redux, mern stack authentication, build and deploy mern, mern project, mern stack project, mern stack project with redux toolkit, mern stack project jwt, mern stack project login, mern stack crud, react node mongodb project, react node express mongodb, mern blog project, blog mern stack, Build and Deploy MERN, redux mern project

Id: XqpkptgOrtE

Length: 474min 42sec (28482 seconds)

Published: Mon Apr 25 2022