React + Node js + Express js - CRUD Operations | CRUD Rest API with Node & Express

hey guys what's up what's going on welcome to my youtube channel and in today's video we are going to create a card restful api with the help of node and express yes so guys in this video we are not going to use any kind of database like mongodb or mysql to store our data we are going to follow a very simple approach to create all this crud api with node and express here and this video is just for a beginner who just wanted to create a rest api quickly without configuring any kind of database in their backend and perform all kind of cred operation with rest api and guys in next month probably i will bring more application not just with the crud functionality but it will have more complex feature in that application so guys stay tuned on this channel in this video first we will initially create all this api and we will validate each api with the postman so you are also going to require a postman in this application and you can download and install the postman on your system through their official website and once we have created all this different api at our backend then we will start working on our front-end react application and we will integrate our all direct api and will enable all crud functionality in this application so let's quickly perform all crud functionality in this application so as you can see that we are rendering or user record in our table component that we have in our back end now let's add one new user by clicking on add user in the header so i am going to give here name like james james at the red gmail dot com and let's keep some random contact and let's click on add now you can see that we have got this toast message which saying that user added successfully and recently added user record is also displaying in our table component now let's perform the delete operation so i am going to delete the second record so let's click on this delete button we have got this pop-up confirm message to one user before they delete this user record so if you click ok record will get removed from our table component and we have got this toast message as well and we have got this toast message as well which saying that user deleted successfully now all the existing data getting populated on each input field so i am going to update the name so the name will be like james bond and let's update the email as well james bond and now let's click on the update button now here we have got this toast message that saying that user updated successfully and in our table component that this record is now updated successfully so you can see that name and email got changed you can also see the specific user detail if you wanted so if you click on view button you will navigate toward the view page and we have got this specific user detail like id name email and contact and here we have a go back button and if you click on this button then you will basically navigate back to the home page we have also simple about page which is just a brief information about this application so this is the application we are going to build with react once we have created our all rest api in our backend so before getting started if you haven't subscribed this channel then please do i will keep bringing the content from the world of react and like the video as well if you like my work so let's start working on this application so guys first we are going to create all this different rest api at our back end and with the help of node and express there and you can see that we are going to create a five rest api in this video so i will explain each api one by one so the first api we are going to create with the user and basically it will face all the user record the second api is used to create a new user record in our backend with the post request the third api basically fetch the single user detail based on the id the fourth api that is is used to delete a user based on the id and last api is used to update a user detail based on the id using the put request and guys you have also noticed that the last three api have the same route okay so in node and express js you can keep the same route if you have a different request method so here you can see that we have a different different request method so we can keep the same rest api okay so let's start first working on our backend so guys i have opened an empty project in my visual studio code you can see that we have one server folder here so i am just going to open it terminal here inside my visual studio code so let's just open this terminal and we will start everything from scratch so i will generate some files here so npm init so this will generate a package.json file so let's give enter enter enter enter enter and give yes and now we have got this package.json file and we need some packages in our server so the package will be like and then install dashed as save and the package will be course express to create the api and we need here uuid to generate a unique id for each user that we receive from our front end so let's install this dependency first and i'll be back once all the dependencies get installed so guys our three package got installed now and we need to install one more dependency and that will goes as a dev dependency so the dependency will be nodemon so node one is is required in order to restart the server whenever changes detect in our file so this package is required to restart our node server and let's wait for the installation so guys this package also got installed so now first we will basically create one script here to start our server so the script will be like server okay and we can give here like nodemon nodemon index.js so this file we will create just now so let's create the file here so i will create the file in root index.js so now let's setup our express server here so i'm going to import express from express and we need to bring body parts okay and we also need to bring course because whenever we are accessing the api through our front end so we need to use this course as a middleware otherwise you will not able to access the api in our react front end let's initialize the express here so cost app is equal to express and i'm going to define the port so cost port is equal to 5000 so i'll be running my server on 5000 and let's use app dot use body parser dot json okay and app dot use course and we can verify whether our server is running or not so let's give one route here so app.gate and this will be the like home only and we can have here like request response and we can simply pass like response dot send hello from express so i'm just going to test here okay and we can give here like app.listen sorry app.listen and we can specify the port here so port and we can have a callback here function so this will basically just do a console log and we can write one message like server is listening on port on port http localhost so our server will be run on localhost only so localhost and we can provide the port number so this is the port number we are using that is a 5000 and let's save this one and let's run the command like npm run server okay so we have some issue so guys it's saying that can't use import statement outside module so usually in node.js we cannot import this way okay but there is a way you can basically use this import statement in node.js as well so what you can do here you can come here and give a type here so type and we can give your module okay okay and now let's save this one okay and let's go into the browser and see whether we are getting this message or not like hello from express so as you can see that we have got this message that we have here hello from express in our browser so we have successfully able to set up our server here so now we are going to create some folder here so first folder i am going to create here like controller so the controller will hold all the business logic to basically perform all the red operation for our react front-end web application and we will have route one folder with route so let's give that one routes okay and first i will create here file so the file will have like users dot js and here i'm going to give this same file name user dot js okay so in route i need to import express from express okay and i need to create the router here so cost router is equal to express dot router and the first route we are going to create like router dot get so this route basically return all the user that we have in our server so let's give that route name and here we have to provide the controller so in controller we haven't created the logic here so this will be like get users okay and we need to basically specify that we are getting this get user method from our controller so let's import that one so we need to go to first controller and we have the file user users and let's just specify the gate user so we haven't write any logic in our controller so let's write the logic here first and in controller first we need to import the uuid because we are also going to create the user with with their details so uuid and v4 as uuid okay so we have to import like this way only and we'll create one empty array with users because here we are not maintaining any kind of database like mongodb or sql so we have to basically store all the information in the array and let's import that method like export cost get user so this is the method that we have passed in our route get users okay so let's define the logic here so what it will do basically so it will have request and response and it will basically simply send the user that we have in our users array so it will just simply send the users okay users okay that's it and let's go into the users.js file okay so now we don't have issue here but at the moment we don't have in any users so we have to also define the api for creating the new user wisdom detail so let's just copy this one and this will be like post only so route router dot post and this will be user only and we can specify the method here like create user okay and let's define that it will be coming from this file only and we have to define the logic here in our controller so export cost create user okay and again this will have like request response and so whatever we will have in the body so i'm just going to receive everything from the body and we are going to push inside this array so user dot push user so i am just going to spread out whatever the information we are receiving from our front end and we have to specify the id as well so uuid and after that i can send a response here like user added successfully okay so now we have created who route here okay so we have to do some adjustment in our index.js file in order to validate this route so let's come here index.js file and here what we have to do so here basically we need to bring all our user routes import user routes from routes folder users okay and after that we can use like this app dot use and we can pass this user route okay and we have to specify one more thing here so if there is no api match here so means user is accessing some api that i haven't defined in our users.js file in the route folder so i'm just going to give one message like that route does not exist so request response and i can give a message like send and the message will be like that route does not exist okay so let's have this one and we have some issue so let's see what is the issue so it's saying can't find the module so we have we have forgotten to export here so let's export this router export default router so we need to provide the extension here user.js let's save this file again it's crashing and let's save here as well user.js in our routes.js file so now we don't have any issue so now let's verify this route whether it's working or not so i'm going to open my postman here so i am going to basically make a post request here so post and i am going to give the route here live users so this is the route i am going to use body and we have select the raw here and i am just going to paste it here some data that we are going to use that we are going to post so the data will be like name email and contact and let's click on send that route is does not exist okay so it will be user okay so we have got this message that we have that we have provided in our index.js file so so you can see that this is the message we are displaying in our postman so this one is verify if there is no route match so now let's send it after updating the api and now we have got this message like user added successfully in order to verify whether user is added or not so we have also defined this route so if you go back to visual studio code so this route basically return all the users that we have in our users area so let's go back to postman and let's click on the send and we have got only the id not the entire data so guys issue was like when whenever you are making a host request so you have to select here json okay so that's why we are just getting the id so now let's just hand the data so i'm just going to click here send we have got this message like user added successfully and now let's go to this route and let's just click on send now we have got this data that we have just added from here so we have got this data okay and this data will basically get erased if you just restart the server so so if i just restart the server by just doing like control as so if you go to again postman so you won't get this data because we are not storing in database like mongodb or sql so this project is just for the beginner okay so if you wanted to basically create a rest api very quickly so this is the only project for those people and you can again get back that data by just clicking on send so we have just added again from here and we have received the data from here and let's go and create other route as well so other routes like getting the specific user detail with the id so i'm just going to define that out like route dot get and here i can pass the id and this will be like get user okay so don't get confused with this one and this one so this will be the gate user and this will be the get user it will return all the users that we have in our array and it will return only the single user with based on the id and this will also come from the controller so let's define here get user and now let's define the logic in controller so it's throwing the error because we haven't defined in our controller so let's define that one so export commas get user request response and const single user is sell to users dot filter user and i am going to write basic logic here user dot id if that match then we have to return that data okay so request dot params so we are passing the id in the params so we can get this id like this way and we can just hand this single user as a response so response dot send single user okay so we have just restarted again and we have to add again the data from here so let's add this data and let's get the id here so now we have got this id so i'm just going to copy this id and i'm just going to create i'm just going to open one more route here so let's the route will be like user and we can specify the id here so i have just copy the id here and let's just click on send and now we have got this data based on the id okay and if you add one more record like let's add one more record so this time will be like john let's give john here let's give number let's click on send and from this tab we will get all the users that we have in our array so now this time we have two user okay so james bond and john and here we are just getting the data of james bond only because we have the id of that james bond and you can also get the data for john as well so if you copy this id so you can get the specific data for this user as well so let's paste it here and if you click on send we have got the john detail here okay so this route is also done the next shot we are going to work on the delete okay so first i am going to define the route here and this will be router dot delete and again we have to specify the id only in express js basically you can keep the you can keep the same route if you have a different request okay if you have a different api request then you can keep the same route okay so you can do that one with the express and we can specify here like delete delete user okay and we have to specify this method in our controller again so let's go into the controller and you will get this error message because we haven't defined the logic in our controller so let's define the logic here export cost delete user request response and we will have all the user so again i'm just going to copy this one this this is the same logic i'm going to use here and this time we can just modify this one like if it's not equal then we want all that user okay so we wanted all that user if the id is not match so basically it will return all the user whose id is not match so that's why uh certain so that's the way you can delete the user so now we can just hand the message here like respond dot send user deleted successfully okay and again we have to add the data so i'm just going to add one more data again and now we need the id for this user so let's go so let's come here and let's click on send now we have got this id let's just copy this id and let's just paste it here and we can change this request so this time i'm going to make a delete request and let's click on send and now we have got this message like user deleted successfully and if you go back to this request so we don't get data okay so the array will be the empty so we are successfully able to delete the record from our array as well so the last route we are going to define for the update so let's just copy this one so router dot put and we can keep the same api because our api request is different here so we can keep the same api here and this will be update user okay and let's define here as well and let's define the logic in our controller so in controller we will have export on update user update user request response and i will have that user user and i'm going to use here user dot find method so i need that specific user so i can use your find method user user dot id if that match then we can get that specific id a specific user request.param.id because we are passing in the parameter as well so we can get that id so we can get that specific user detail here and we can use here user dot name and request dot body dot name and user dot email so we will have email so request dot body dot email so this way basically we will able to update the update the specific user detail and this will be the content user dot contact is equal to request dot body dot contact and we can send the message like we can send the method like user updated successfully and let's add the data again in in order to verify whether this update route is working or not now i am going to add this data john okay user is added successfully now let's get this id so now we have got this id and let's update this as specific user detail so i'm just going to make a request here put and this time we have to select the raw data and this this will be the json and i'm just going to copy this entire thing and this time i'm just going to update the name here so this will be like john doe and let's update the email as well john doe and update the contact as well in order to make sure that every field is updated or not every field is getting updated or not so now let's click on send so we got this message like user updated successfully and we can also verify from this route whether this record is getting updated or not so let's click on send that means record is successfully updated here we got this we we have got the updated name email and contact here so now guys we are successfully able to create our all right api with node and express okay and we have successfully able to verify all those api in our postman so now it's time to work on our react frontend web application so i am going into my directory so this is the directory where i have my server folder so i am going to open one amd terminal here and i am going to create one react application using the command npx create react app and i am going to give the project name like front-end only so this will install some dependency and based on your internet connection and os performance it will take around five to ten minutes to install to install all those necessary dependencies so i'll be back once all the dependencies so i'll be back once all the dependency got installed so i'll be back once all the dependency got installed look like our all dependency got installed and our and our react project got set up here so first i am going into this folder cd front end and before i do npm start i need to install some packages so npm install dash save and the package will be like react router dom in order to enable the routing in our application react router dom react twistify and also we need to install the axis for making the api request so let's install all this three dependency and let's wait for the package installation and meanwhile the project is already open in my visual studio code so guys you can see that project is open in my visual studio code so this is the front end and this is the server like back end you can assume that one what we can do here so first i am going to create some folder here so the folder will be like component okay and we will have pages folder so in pages folder we we will have some couple of files like home.js dot js you will have add edit.js so for adding the user or updating the existing user we are going to use the same page so that's why i have given the name like add edit and the last file will be like view dot here so you can also view the specific user detail based on the id so overall we are going to have five route so now we have got our about page edit page home and view okay so let's generate some snippet here first i will add the content latest so first let's keep the heading light about let's say generate and let's generate snippet again here and this will be the heading like add edit let's keep the let's generate the snippet here also so this will be like home and in view also we need that heading so is to view okay and let's also quickly set up the react router down i am going to my app.js and i am going to remove this unwanted content that we have here so lets first give here hello world whether this is working or not we need to verify that one and let's also verify whether our package got installed or not so look like our all package got installed here so i'm just going to do a npm start here and let's wait for the application load into the browser so guys we have got this message like hello world so let's work on our routing functionality so we need to enable the route so we need to bring some component from our react router dom so let's bring those component so we need like browser router switch and route from our react router dom so let's bring that browser router switch and the route okay and let's also setup the react questify in our project so this is the official and pimp package of react 45 and you have to copy this to import statement and just paste it here and we don't need toast here we only need to container and we can remove this hello world we don't need this one we can use your browser router and we can pass and we can paste this div inside here and now we can have our dos container okay and we can have switch here and that's which we will have route different different route we can keep exactly here for the first round for the first round that is the home page and we have to render the component here for this route so vs could automatically suggest me that component from our pages folder so it's automatically import that component and we also need to define other route as well so other route will have like for adding the user so for that i'm going to give the path like add and the component i'm going to give add edit okay and we could again import this page automatically from the pages folder and for i did we're gonna have a different route like update and it will update based on the id so i i so i can provide the id here and and the page we are going to load the same page here and the next round will have like view so user also can view the specific user detail based on the id so again we need to provide the id and the component will be like view component so vs code again automatically import that component and the last round will be about so about just hold the basic information about the application so let's import that about as well so vs code again import automatically this component and we are done with this routing setup in our application and we can verify whether and we can verify whether this routing is working or not so let's go into the browser and look the home is already working and now let's adjust this route let's give add so now we are in add edit page and if you give update here with some id so again it's gonna load the same page added it and for view also we need to we need to give the id so it will it will load the view page and let's see about which is working or not so about about page is also working so the next thing i wanted to work on the header part because we don't want it to navigate manually through our browser so we need to first work on our header component so that we can easily navigate in our application so let's first work on the header component so we need to create the file here header dot js i need to generate a snippet here and we need to bring some hooks here like huge effect and use state okay and we also need to bring link and the use location from our react router dom so bring that link use location and we also need to bring the ess file css file for this header component so i'm just going to create a file here header dot css and let's bring that file here import header dot css and here i am going to define the state for the active tab so the active tab active tab set active tab and by default our home page will be the active okay because whenever you reload the app so it will load the home page only so by default home tab will be the active now let's work on this return path so i'll have the class name with the header okay and we'll have one p tag with the class name logo and the item will be like user management system okay user management system this will be the title and will have another class name with div with div header right okay and inside that and i will have link so we'll have it three tab overall home add user and about let's give here tweeted and the class name i'm going to give here like so we need to define here like if the active tab is a home then we need to apply the class name active here okay so home if this is active then apply the class name here active else just leave as it is okay and we can give the tab name here like home okay and the next shot we are going to have like add user okay so we can give here live add user and we can give here add user if add user if user click on add user then this tab will gonna be active and the same way we are going to have for the about page as well so let's just copy this one and let's just paste it here and let's also adjust this route so this will be the ad this will be the about and here acting here active tab will be the about okay and this will be the about okay and we also need to provide the on click method here so let's provide the on click method so on click and we can provide that set active tab and this will be the home okay and we can just copy this one okay and we can paste it here and this will be the add user make sure this will be the capital okay add user and this will be the about okay and what else left here and let's bring this component in our app.js file so we can bring that header component here so visual studio code automatically suggested me that component from the component folder so it's automatically import that header component for me and we can go to the browser so now this is not looking good at the moment so we can paste this css file here in our header.css so i'm going to grab this css code for this file and i'm just going to paste it here the code which i have got so this is the css required and guys you can copy this code by pausing this video so you can copy this code so you can just pause this video and and copy the whole css code okay so i hope you have now copy all this faces code for this file and let's go into the browser let's refresh it and now it's looking good okay so let's click on home but the active tab say type is not a function okay so we got some issue okay no problem let's go into the header.js file okay i haven't used the use state here that's my bad use state and this will be the home okay and let's go into the browser so now this is working let's click on add user let's click on about so now we are smoothly able to navigate in our application we have to also work on one more thing if user modify the route manually in the browser so like this way so you can see that this way this this tab is not getting active so i wanted that functionality as well in my application so that's why i bring this use location and the use effect so let's do that one as well so use effect and this use direct only run if there is a change in the location so first we need to store the reference of use location into a location variable use location and we can pass the location in the dependent here and here we can check the path like location dot path name is this route so that means user on home page so we can use like set active tab home okay and else if if location dot pass name is add that means user is adding the new user so set active tab and this will be the like add user make sure to capital this one user and the last shot we have like about okay so if location dot path name is match with the about that means user is on about page set active tab and the about okay so let's save this file we have some issue type or something so this will be the else f okay so this will be the lsa now let's verify in the browser so it's not applying okay so there might be some spelling mistake yes of course let's remove this in small u let's save this file let's go back in browser and let's navigate to our tab page so this way also the tab is getting active okay and let's go to add so you can see that this way also our active style got apply on our tab okay so both way it's working now so now here we are done with the header component the next thing i wanted to work on our home page so you can see that in our postman i have already got some data so overall i have two data and i wanted to display this two data in our table component on home page so first i am going to work on our home page so we have this pages folder and said that we have home.js file so let's work on this file so in home page we need to bring some hooks from react that is use state and use effect so let's bring that one and we need link from react router dom so from react router dom we need link and we also need essays file for this home.js so let's create this css file here om.css and let's bring that css file here home dot css and we also need access to make the api request so access import access from axis okay so first we need to restore all this data that we have in our array into a data array so that will be like data and set data okay and i'm going to use state here and this will be the error and i'm going to run a use effect here and this will be the empty and we need to define function here like git user so it will return all the users that we have in our error okay so let's define this method here outside this effect get user so this will be the a thing so i am going to use here async await so that's why i have used a method here inside this use effect so now we are going to have like response and await xcs dot get and we can just copy this api and we can paste it here and we can check here first if response dot status is 200 and then set the data okay response dot data so we can verify whether we are getting this the data or not first so let's put a console here and we can give here like data data and let's go into the browser refresh this application and go to console go to home okay so now we have got this data so this is the same data that we have in our area so we have just posted through our postman while creating the api okay so we have john doe and james bond and in our browser we have a james bond and john doe okay so let's render this data in the table component in our home page so let's go into the visual studio code and what we can do here inside return so we can provide some here margin top so i'm going to give inline margin top this will be the 150 pixel we can remove this heading and we can use here table with the class name style table okay and inside that we will have t head and we will have table and that table row will have t head okay so this will be the column only so we are going to give this style here in line style like text align enter and this will be the number okay and let's just copy couple of time so this will be the number this will be the name this will be the email this will be the contact okay and this will be the action okay so inside that we will have three button for editing deleting or being the user okay so we got this column now we need to define the table data inside the table body so this will close here and now we'll have the t body that is a table body and inside we have to check if we have the data then data dot map item index and we can return here like tr table row with the key the key we can give here index so inside table row we are going to have the so the first one will have ts okay so i wanted in like a little bit bold later that serial number so that's why i have given here th and we can specify the scope the scope will be the row and we can give here index so index plus one so i wanted to start the serial number from one because the array index start with the zero so i wanted that i wanted that to start from one so that's the reason i have given index plus one and now we will have a table data so now we are going to have a item dot name okay and others will have like item dot email and item dot contact okay let's go into the browser so now it's not looking good at the moment because we haven't applied this styling so am just going to paste the css code for this home dot css file so i have just grabbed this kt port for this file and i have just pasted here so guys you can copy this style by pausing this video so you can copy all this css code styling by pausing this video okay so i hope you have copied all this styling okay so let's go into the browser first so now it's looking a little bit nice okay so the next thing we have to add those button so let's add those button first so for button we will again need this td and inside this td we are going to have a link and we will have the button so button with the class name btn btn edit and this will be the edit and we have to define the route actually here so this is going to be the update and we have to provide the id so i id we can give here like item dot id so this way basically we will able to navigate toward the update page so let's give here like edit button name and now we will have for delete as well so we can give so we can just copy this button and we can paste it here so this will be the delete and we can give here the class name like btn delete okay and for view also we are going to have the same way so i'm just cop so i have just copy that one and this will be the view so all this route is already registered in our app.js file so you can see that update and view route is registered now in home.js so this will be the view and this will be the btn view so let's go into the browser so now we have got this nice button for edit delete and view okay so now we are done with this table component in our home page so the next thing i wanted to work on the add user so basically we have to work on the home component in our add user page so let's work on this added file so in additive page we need to bring some hook again from react like use state and use effect and we need to bring use history and use param as well from react router dom but that will require letters once we start working on our updating the existing user details so i am just bringing here and we need here access as well so import that access so it's imported and now we have to also bring the css file for this add edit so first i am going to create the file add edit dot css and let's bring this file here as well import add edit dot css and let's define the initial state of our home component outside this functional component so initial state equal to so this will be the like name will be empty initially email will be the empty and the contact will be the empty okay and we will define the state here so state set state use state and we can pass this initial state and i'm going to restructure from initial state that is name email and contact so we don't have to write like this state dot email state dot name say dot contact so we can just restructure first here name email contact okay and let's first work on our form okay so here what we can have here so style margin top margin top with 100 pixel and we can have a form and again we have to and again we have to provide the inline style here and the margin we can give here auto so margin auto padding i am giving 15 pixel and max width i am giving here like 400 pixels and align content this will be the center and inside this form will have first level okay so define the label here the first will be the name then html for filter name after that we will have the input for name so the type will be the text id gonna be name and we're gonna have a name filled here as well which will be the name only placeholder will be like enter name okay dot dot dot and we are gonna have on change method okay on change handle input change so we haven't defined this one we'll define later and we'll have the value filled as well and this will be like name so now what i'm going to do i'm just going to copy this one and i'm going to just paste it and i'm just going to paste it couple of time okay so this will be the email this will be the email type will be also email id will be the email let's just copy this one this will be the email this will be like enter email and this will be the email value okay and this will be the contact okay and this will be also contact let's just copy this one id will be the contact name will be the contact this will be like enter contact number okay and type will be the number here and value will be the contact okay contact so on submit so let's define this on submit so this will be like handle submit and let's define this handle submit and handle input change outside this return method so we are going to have a handle submit this will be having an event and first we are going to prevent the default behavior of browser and let's define the handle input change as well so handle input change this will also receive an event okay and let's destructure the name and value from the e dot target and we have to d structure name and value so that user can type in the input field so we have to set the state so i'm just going to spread out here state and the name this way okay so this way basically user will able to type in the input field okay and let's go into the browser so the form is not looking good because we haven't provided the css code inside this add edit.css files so i'm just going to grab this css code for this file i have got the css code for this file and i'm just going to paste it here and guys you can copy this all styling code for this add edit file so you can copy this installing by pausing this video so i hope you have copy all this styling and let's go into the browser first so this is looking nice and we have to add the button as well at the below so let's add that button also so here we are going to have one input and the type will be submit okay and the value will be value will be add okay and let's go into the browser so now we have got this button as well add button and our form is looking nice okay so now let's work on adding the new user detail okay so in handle submit we can define one method here like add contact okay and add contact will have the state okay so this is state basically holding all the user detail information so let's define this method so this method will gonna be asynchronous that's why i have used this way separate way so let's define this method add contact and this will be the you think of it so let's define async here and now we are going to have like respawn so i'm just going to copy from home.js file because this is all gonna be the similar okay so let's copy this one and paste it here okay so for adding the record we have to point to the user okay not users okay and this will receive the state as a data so you can see that we have we are passing this state so we can name the argument here whatever you wanted so i can give here the argument like data okay and we can pass this data here and this will be the post okay and we can first check if response dot status is equal to 200 then we will get our access methods so toast dot success and we can pass this response dot data because if you look at our back end so if you go to our backend users.js controller so you can see that so we are sending the message in the form of data so this is the data actually user added successfully so we are just sending the message okay in the data so that's why i have given here response dot data so basically while adding the user detail you will get the access message like you will get the method like user edits successfully okay so what we can do here we can and we have to also basically navigate towards the home page after successful addition of new user record so history dot push so i think we haven't restored the reference of use into ht variable so first we need to store the reference of use into history variable okay and we can give here like history dot push okay so we can navigate toward the home page and guys we have to also do some very basic validation here so i don't want it to submit the empty form value in our array so if there is no name or there is no email so it's just a basic validation i'm doing here and if there is no contact so we can give the message like toast error and the message will be like please provide value into each input build okay and in else part we are going to have this one okay and let's go into the browser let's first refresh this one so i'm just going to first verify that validation so validation is working here so i wanted this message basically here okay not at the not at the top right so what we can do here we can go to the app.js file and here we can pass one props like position and we can give the position like top center okay and let's go into the browser and verify this one working or not let's replace and let's click on add so now we have got our toast message in the top center okay so validation is working here so now let's add one user detail here and let's type something okay so this one is working okay so let's add one record so i'm going to add record like twitter parker peter parker gmail.com and let's keep some random contact and let's click on add so our table component is not updated that newly added record but we have got this message like user edits successfully okay let's refresh this one okay after refreshing we have got this updated data in our table component so what we can do here we can use set timeout here okay so set timeout and we can make a little bit delay while navigating towards the home page and we can give the delay around 500 millisecond okay and let's give one more try in our browser so let's go into the browser and let's click on add and refresh it again and now i am going to give the name like like wind diesel okay win diesel at the rate gmail.com some random contact and let's click on add so now our table component is updated with the recently added user contact recently so now our table component is showing the updated user detail which which we have just now added okay and we have got this and we have got this toast method that saying that that's saying user added successfully so our table component is also updated with that recently added user detail the next operation we are going to perform the delete operation so let's do that so first we have to go to our home.js file and we have to provide one method here on button like on delete so on click will have and we can have one method here like on delete user okay and we can pass this id item dot id and let's create this one here const delete user on delete user sorry this will receive an id and this will also async of it okay so i am going to provide here a thing so first i'm going to show that window confirm pop-up message to the user window.confirm and the message will be like are you sure that you wanted to delete that user record okay something like that and if user click ok so it will come inside this if condition and now we can use here like const response equal to await axis dot delete and we can just pass this url so we need to use your template literal because we need to provide the id and this will be the user not users and id okay and that's it and if response dot status is equal to 200 then we are going to throw that access method like user deleted successfully so we can just simply pass a response dot data because we are receiving the message in the form of data from our back end and we have to also run this method again get user so it will paste the updated user data okay so let's go into the browser and try to delete one record so let's refresh this one and i'm going to delete the second record so let's click on this delete button we have got this message like are you sure that you wanted to delete that user record and if you click ok the record will get deleted and we have got this message like user deleted successfully so we are able to perform this delete operation as well so the next operation i wanted to perform the update operation so if you click on edit so first initially all the existing value will get populated into each respective input field so first we have to work on that one and we have to also update the value of button so in case of update the value of button will be the submit so let's work on this one first so in added.js file what we have to do so let's go to top here and first we need to grab the id using the use param so id use params okay and we have to run one effect okay so use effect and this huge effect run based on the id so if there is id mean user is basically updating the existing user detail so if there is id so i am going to check first here if there is an id then i am going to run one method here so that method will be like get single user okay so first we need to populate that existing user detail on each respective input field so first we need to get that one and we can pass the id here so first define the method here outside this use effect so get single user and this will be the a thing of it and we can pass this id here okay and we can grab this one entire thing which we have here in our delete section so let's grab this one let's come to added it and let's paste it here okay and this will be the just get okay so it will face the single user detail okay and in case of we we don't want to show any kind of message here we just want to set the state here okay so set state and here response dot data so you will always get the single data in the form of array of object so you have to basically always point to the zeroth index okay and it will only hold the single user record in the array of object so you can basically do like this way and we can also verify this one whether we are able to populate the existing value on each input field or not so let's go into the browser and we are successfully able to populate the each value into their respective input field okay so let's update this button value as well so if there is a id that means user is updating the existing user record so we can do here like if there is an id that means the button value will be the update and this will be the add okay let's verify this one as well so now button value now update here and what we have to do here so in s condition we have to check here if there is no id okay that means user is adding the record for the first time so we can put inside okay and in case of and if there is an id that means here is updating the contact basically so you can give like add contact or update you can give here like add user or add contact i am giving here contact so better to give your ad user only so let's rename this one and this will be the update user okay sorry something is imported okay this file is getting imported from this one we don't need this one okay so this this will have the state and id also so let's define this update user as well so i'm just going to copy this one and paste it here this will be the update user and it will receive the state so it states nothing but the data and it will also receive the id so for which you so for which id we are updating the date for which id we are basically updating the existing details so we have to provide the id here and this will be in the backtick now backtick and let's pass this id and we are passing the data and we we will get the success message like user updated successfully so i think we are done with this added page and let's go and verify whether we are able to update the existing user record or not so first let's go to the home page let's click on this edit so i just wanted here peter parker one two three four okay and let's click on update so record is not getting updated here so this will be the put okay not post so make sure to update this method here so let's update again the existing user record so let's click on this edit and let's give again one two three four and let's click on update and now this time we are successfully able to update the user record and we have got the message like the user updated successfully and you can see that in our table component that that email is updated now for the second record so the next thing we have to work on the view page hour okay so let's work on this view page as well so again we have to bring some hooks here like use state and use effect okay we have to also bring some components from react auto dom that is use param for grabbing that id from the url and we also need link and access also we need here xcs and we also need this css file for this space as well so view dot gss and let's just create that file here view dot css and let's defined here one state here so user that user okay and use state and this will be the null let's put null here and we can just copy this logic from added page so we can copy this entire logic actually up to this okay and let's just paste it in our view.js file so this will basically grab that single user detail and we have to set the state so here we have to use this that user okay and it will hold the single user detail in the array of object and we can access that object with the zeroth index so it will be always in the zero index because it will have only one user okay so now let's work on our ui part so first we are going to have inline style so margin top i'm going to give here 150 pixel 150 pixel let's remove this heading heading is not required and we have one class name with card inside card we will have one class name with card header card header and we'll have one t tag and it will have like user contact detail okay and after that this div will get close here and will have a container class name container class name and we are going to have strong tag here so i am going to use strong tag and id and here i'm going to show that id so we can grab that id like user dot id okay and we are going to have a couple of break here okay break this will be the small okay and let's just copy this one couple of time because we also need to show the name email and contact so let's just copy this one and this will be the name this will be the name okay this will be the email this will be the email and this will be the contact and this will be the contact okay and we are also going to have one go back button so let's use that link here and we can basically navigate back to the home page after clicking on that go back button so button and go back and i'm going to use your class name with btn btn you did so i am going to use the same style for the edit button for go back okay and let's paste this css code for this view dot css file so i'm just going to grab this thesis code for this file so i have got the thesis code for this file and i'm just going to paste it here so this is the code for this view page and guy you can just pause this video and copy the whole css code and let's go into the browser and let's refresh first and let's click on view so view is not working okay so it's saying can't read property id of null okay guys we can do one thing here first we don't have to use like user dot id because we have already got this id here okay from our use params and first we have to use here spam tag okay so expand tag we have to use and here we can use like this way user ampersand user dot name the user and user dot name so we can do like this way also okay and let's give this span tag this will be the span tag and this will be the span tag and this will be the like user and and okay so let's update this one and let's go into the browser and now we are able to render this user contact detail okay so we have got this id name email and contact for that specific user and if you click on go back you will navigate towards the home page and you can also view the detail for this record as well let's click on view so we have got this detail for that user so let's quickly work on this about page as well so i am just going to grab the content for this about page so about page will just have some description about this application so like what all about this application so i have just provided some brief description about this application like this is react to your content management system application using node and expressed here along with routing okay so this is just have a basic information about this application so guys we have to perform all the thread operation with the help of node and express in our react application and i hope you guys have learned a lot from this video and if you find that video is useful so you can press the like button and you can also subscribe the channel if you like my work so thank you so much guys for watching this video bye

Channel: CodeWithVishal

Views: 97,730

Keywords: Build CRUD App using Node Express and React, Rest API with Node & Express, CRUD app with react node express, App using react node express, Full stack react app, react node js project, full stack react and node js project, crud with react, react express crud, CRUD Operation, react express node js, crud in react js, react node express

Id: qrxTyDDfp0I

Length: 88min 14sec (5294 seconds)

Published: Thu Sep 09 2021