Complete CRUD Operation with Nodejs, MongoDB, React, Express | MERN Stack

now see first of all you want to add any data I just click on the add button and here add this data like here I will add Amit and here I will add 7 and 6 or you can add any number like here I will add admin admin and admin gmail.com here I will get the admin mobile number and click on the submit data save successfully like this now here see admin admin gmail.com and model number and this one now here you can see edit operation here you can edit this admin name like here or you can change this mobile number also like here you I you can change any mobile number and click on the submit data updated successfully like that now see a small number is changed you can delete also this data like you delete this admin data like this you can delete anything any data editor just go on the desktop section and open the terminal and just open the new terminal after first of all we create our backend part after that we create our UI part now here uh first of all I will create a one folder this name is the server and inside the let me just go CD server and inside the server folder first of all we give the npm npm init and after that this init will be create a one packet.json file here asking me the package package name just press enter I will just give the same exact all this thing think enter enter now see in the server folder here see this packet.json file is created and is inside this main file is index.js let's create this also here index Dot index dot yes like this and now here for creating a server I will use the express for creating the server and Mongoose for the connect to the our backend with a database let's install all these thick packages which are used in this backhand side now here npm I first of all we install the express after that mongoose and codes now press enter now installation is started now this see this all these packages installed for checking purpose just open the packet.json file and here in the dependency section you can see this course Express and mongoose like this subscribe and we use the node one for again I run this app for that let me just install also this one npm I node mod is a globally but here I will install the this locally you can install this node mod globally now see it will be also installed here I will give the if this will be in the deployment Center for that here I will just give the node index.js and here I will give the if this will be in the development mode then here I will use the node mod index.js like these types of a for running this my index.js5 server here I will just type npm run div and press enter now see our This Server is running now let's go on the index.js file now here let's create a server first here I will give the first of all cost and express after that here I will just export import this Express and after okay here I was given the wrong const now let's also import the course like this okay and require courses for the sharing data to to come domains for that require okay here I want to give the codes like this now here I will give the Conch and use the app Express like these types of a after that I will just give the app dot huge and inside this I will just use a course like this now after that I will just make us uh our port number let's here I will either call s and here I will give the port here eight zero eight zero and here if this is in the deployment Center then here uh has some different port number for that we can give the process dot EnV y dot port and here I will give the all logic if this port name is available in the EnV take it if not available then use this eight zero eight zero now after that I will run the my server for that app Dot listen and it will be running at a port number let's view the port and after that I will pass a one callback function here so the console DOT log and here I will give the server is running for checking this server is running or not in the browser here I will make one API app dot get or you can create anything here I was use the get method and after that here I will use the callway function and here in this call work function as a two parameter which is mostly used request and it spawns and now here I will just send the response to the API with the help of API response dot send and here I will use the Json format and inside this session I will pass message server is running now this server is done now let's go on open the browser and here I will just type localhost after that here I will give the 8080 now see here giving me the server is running you can just type any things like a server is running or card like these types of a Let me refresh see like this type of now this API part is done now let's create a all the apis for the SEO delete and update all this one and this one is a for the read first of all we connect our this backend part with our database for that let's do the this first for that now here first of all I will import cost Mongoose and from the required and after that here I will just give the mongoose now here first of all I will use the Mongoose dot connect and here I will use the URL my uh back localhost for that I will just open the my mongodb compass okay this will not once again mongodb compass for the GUI but purpose and yeah now it will be open just copy this URL this URI and after that just go here and here paste this and after this I will give you my database name here I will do the curd operation like this type of way I was given the my database name and now here let's connect this first now here see uh no data database is available like card operation because the database we will create if the model is created for that let's create our schema and model and one more thing if this Mongoose will be connected with our database for that here giving this some uh message for that here I will use the then and here I will just pass a call by function console.log and here I will give the connected to DB like this type of a and if some error then here I will use the catch and here giving the error console.log error and here I will pass the parameter error like these types of a and he like this will be done and here see once again take some time to here so let's see give me the one error here let me just check why this here right is coming here giving the server select error and here giving the connection error uh for that I think this localhost is not instead of this localhost I will just type IP address 127 .0.0.1 like these types of it now let me just check again and server is running and connected to the DB like this here giving the minute message here first of all server is running after that connect now here we just change this first of all we want to connect our database then this server is running for that here I will just cut from here and just go below this and here uh inside this let me just give the curly bracket first of all we want to connect our the server after that I will run server now here I will just paste this now see connected to the database then server is running now let's create a here schema now let's uh here again schema now here for the creating the schema create here one variable cost and here I will give the schema uh here I will give the schema data like this type of a you can give any variable name here I will do the mongoose dot schema and after the inside this I will just give the object and here first of all I will give the name name will be in the form of a string and okay here I was given the wrong constant and after that here I will give the email and this email is also in the form of page thing after that I will give the mobile and here I will give the mobile will be the number and N will be the capital yeah now this will be done and after that here here I will give the time step oh here I make object and inside this I will give the time and this will be the true here because time means that when the this data will be created and when updated all this detail will be available for that I was given that this time step after that now this schema is done now let's create a model our cost here I will give the cost user model after that here I will just give the Mongoose dot model and inside the model this first will I will give the user and second one I will give them my schema let me just copy this and here I will paste this now and this is in this time this will be singular in the mode mongodb database automatically it will be created uh users here yes now this model is created done now let's go on the our API section and here you can see this model is created then also you can go on the mongodb compass and refresh this your mongodb compass and here you can see the curd operation database created inside the database here here you can see the collection name you will be the users user here yes will be added this year with the help of a mongoose mongodb database that's why now let's go on the API section this is for the read API in the card section there is our RE stand for the read for that here I will give this get method is is used for the read for that here I will just give the uh here first of all I will make this method async async and after that here I will just give the const data and here after this data I will just use the get and give the name of this model and inside this model first of all I want to find like these types of a query and here giving me the all these data I will just send this data to the with the help of this API to the front end for that I will give the data and like this I will just paste and here I will give the uh here I will give like success proof like these types of a here and after that I will just go below this and here I will create a for the save data to create a data here I will give read for reading purpose you can go on the browser and here you can see refresh this page here in this time see no data is available that's why this array will be empty now this will be done and now let's create our next create data API or we can say the save data like in in DB like this types of it now here for that cost here I will use the app and give the post method and here I will do the like here you can do like that also but here I will give the create like this after that here I will just pass a callback function and in this call away function I will pass a two parameter first one is a request and second only response after that here I will just uh take a data from the back uh front-end side for that here I will just const here I will just console the body request dot body inside the body we pass the data for that let's open my here I will use the rapid API for checking purpose this API for that I will just go on the my vs extension section and here I will install repeat API now this rapid API let's install this you can use the postman or under client depend on your images you are most comfortable for that now this will be created uh sorry this will be installation is done and now here I will just open rapid API client like this and here you can see one type of a icon will be added here you can have us here so the rapid API like this now let me just close this and here I will go just open the new request like these types of a and here I will type my URL for that I will just go here and just copy this localhost for checking purpose get method which I was created see okay let me request this now see here showing me the success now here I will use the create like these types of answers sending now hear me give me the cannot get create okay here I want to also change this post and now sending okay here no response is coming let me just check index.js here I was not sending any response here I send the send and here I will send uh one object which will be the message Success Through message data save successfully like these types of a now let me just go here new request and again I will send this and here giving me the connection huge uh why these are coming now here you see this will be coming message success true and message will be data saved successfully but in this time I was not sending any data uh for that let me any inside the terminal section you can see which I was console the request.body in this time printing the undefined now let's send some data from the here this for that let's go on the body section and here just select the Json and after that let me just drag this any inside this I will just pass personally the name and here I will give the name amid and second only the email ID and here I will give the email at the gmail.com okay here I want to view gmail.com and after that I will just give the mobile number and this will be in the form of a number like you can give the like any number I was just type like these types of a after that I will just this three things I want to send only now when I see click on the send now here inside the terminal section you can see again it will be printing the Define why let me just check here this year for the Post method which I was created and here I was converted this okay here I was not accepting the data in the form of pages and let me just use uh Express dot Json like this now again I will send the data now click on here okay now see we got a data like a name I mean email ID and this model now I will all this data I will send in the mongodb database for that here I will just go and where is post method okay here I will just give it like that here this post method and here I will just give the const data and after that I will give the new and here I will give the model name user model and inside the user model I will just this object I will just pass my body like this I will pass a request dot body and make sure that this key name is exactly similar which you have sending from the backend a front-end side like this here I was sending the like name email and mobile number exactly similar with this schema which you have created now let me just again say check and here in the mongodb database now let me just refresh this and show you in this time no data is available now here and when I was click on the send now here you see successfully and here now let me just go here and place this my database okay here I want to replace okay no data in this time save why uh okay I understand okay I was not save the data let me just give the weird data dot Co like this and here I will make this function will be async operation like this types okay now let me just run again this request which is click on the send now see this will be successfully and here I will just refresh this ODB database now see here it will be coming name Amit email ID at the gmail.com and this mobile number and here you can see created their timestamp time is same this create ad will be has when this data will be created and update means that when any changes in the this data for that now these both are done we have create a created a two two part in the card section first one is a for the card c e stand for the create which have we have created this one and after that we have a we have a u u means that update now let's and after let's create the update any data for that here I will just give the uh update data like this Subs open now for the update method we use the put method to update any data for that here I will give the app dot put and here I will give the string and slash update after that here I will just use the async and here I will give the request dot slash response and this will be the call function and here inside the from the printer side we in the body section just take uh ID for that I will just const ID equal to request dot body like this type so first of all we check ID is coming or not uh cons ole.log and request dot body for that now let's uh just copy this update and inside the this request here I will change this and in the body section we now we will pass here you can save this also but here I will not save for the ID purpose I want to go here and just copy this ID after that I will just come here and here I will change ID and here I will just give the this ID now let me just send this ID and okay here I want to change this method this this method is put method and click and now see in the terminal section this ID is coming and here no response I was not seen in from here that's why this is not coming for that here I will just send the response will be uh cost uh here first of all I want to response send and here I will give the success true after that I will give the data will update it data updated successfully like these types of images like these types of a and here for updating the data here we can use the like cost and here I will use the data and after that I will use model and inside the model I will use update one update one is a one method uh which is provided from the Mongoose also and in the mongodb also now here this take a first argument is which data I want to update for that here I will pass like ID request underscore ID and here I view the request dot body Dot underscore ID like these types of a here coming ID only not underscore and after that I want to which things I want to upgrade which key update like here I have this name Amit now I will I will update this name for that here I will give the name and here I will just give the name will be the some other like a anything so commit 111 like these types of a now let me just come here or I will just remove from here and I will make this method will be wait now let's go on the here new request and send this request okay no response is coming and here giving me the one error unexpected token okay why these are unexpected token is coming and let's check again okay here this server is running and here give me the request dots and okay here I was given the request uh okay here I want to be there response now let's check again and when I send now here success true and message giving the data updated successfully now let's go on the mongodb database and here is instead of this name amid now see here updated the Amit one one like this and here I will just pass here study data we accept this data from the uh this front end site from the this if in the in this body for that here I will just pass uh here I will just give the const first of all I want to remove post and here I will just extract first of all ID and after that rest of the loop like this and here I will give the request request dot body like this after that I will just give them this ID will be here and this rest operator will be just copy this here and here I will paste this for checking cover this ratio operator first of all here I will just console this console Dot Lock and here I will give the rest and here in the new in the body section I will pass some new Q like a name here I'll get the name and here I will just give in the will be updated will be like a mate 555 after that here I will give the comma and now just send again now updated successfully and he now let's go on the mongodb database and check okay in this time not because I was not changed and here let me updated here I will just go this controller line number 43 and here giving me the like a name okay now it will be perfectly just copy this rash and here I will pass this like these types of it I will pass now let's check again after that here in the a rapid API and now again I will send this and here giving the updated and refresh this yeah now it will be okay done and here I will give the acknowledgment for that if this data will be updated then here giving the acknowledgment for that here I will give you the instead of that I will just give the const cost data and here just copy this I will just pass this data here and here I'll get the data operate data like these types of a and here I will just copy this data and here I will pass data dot data like these types of way now let me just go again here and here I will change this name 668 and send this now here see inside the data section see giving me the acknowledgment uh this data is updated successfully and here giving the modification count number of the count which I was updated now let's create a new data for that here I will give you the create and this will be the post method and here now I will pass name here I will pass name will be like a Raju and here I will give the email ID and here I will give the email ID will be there like a Raju at the gmail.com and after that I will just pass a mobile number and mobile number here I will do that 930796 like this type of a and here I was not giving the the ports now let's send this and now see here giving the acknowledgment uh Raju Amit and ID name all these created at updated ad like these types of a technology and giving and now in the database let's go and refresh this database you can see here these two data Raju and E and this create ad will be means that when the this data is created and when this data is updated this is a Time now this two things in three things are done in the C card section first one is a create update and for the reading purpose this API this get one and last one will either delete for deleting section any API you can use the like a simple get method or directly delete I will just use this here first of all giving the delete API like this live Chopper and after that I have Dot delete and here I will just giving the like this flat delete and after that I will just use the async operation and request request comma response and this will be the Callback function like this types of a and here we accept the ID for the editor here I will just give the colon and ID like this types of it now here let me just console ID to request params.id now after that console DOT log ID for deleting any ID you know here let me just check this ID is coming in not for that here I will just go and here this will be the delete method here and here I will just give the delete any slash after that I will give the ID let's go on the database and here I will just copy this Raju database ID and just copy this here I will paste this and after that I will click on the send okay now see here we got this ID now let's come here and for deleting the ID he in the Mongoose there is one method let me just show you here just call you can just go here delete search the delete here see if you want to delete only delete one for that just here and here see giving me the delete one and after that I want to give the which things I want to delete like uh some primary key we want to delete which data that's when we will Define here after that here I will just go and here I will just give the const data and here I will use a weird function and user dot model delete one and here I will just pass in my ID underscore once again here I give the underscore ID like this and this acknowledgment I will send to the front and side for that just copy this one and here I will paste like these types of air now let's go data deleted successfully here I will give the message now let's go here in the rapid API and just send this request and now let's remove this body and send this now here giving the acknowledgment like successfully message data related successfully and inside the data in the acknowledgment true and delete count will be one now in the database I will go and refresh this now see here in this time only one data now here this curd operation with a node.js and mongodb done now here you can see I'll just show you all these apis now see this is the first API for the read data and the second API for the create data and third API for third API for the update and last which will be the delete all these are the card operation which we have do with the back end like a node.js and our mongodb now let's go on the next part which will be the user interface we will create our user interface in the react and after that we will use this API and create data and delete data now let's go on the UI part before going on the UI part here I will just make a comment which things I want to post here for that in the uh here how we can use this API for that here I will just give the command uh for that let me just come here and just copy this first one and here I will just go here this is a simple method which will be here I will just paste this this is only for the uh get a data for that we can directly just use the save API and automatically we get this data now just go on the next part which will be the this one create for the create purpose we can use the like this URL and in the URL you want to send a request like here I will just give the uh one comment multi-line comment and inside this here we want to pass a one object in the body section first one with the name and name will be name and second one will be the email and third one is the mobile like this type of a we want to pass yeah now let's go on the next part and okay here I was in the opposite sign like that I want to give now this part is for the create and now for the deleting purpose we want to let me just copy this API end point and here I will paste this and this will be and inside this here I want to sphere delete update sorry update and after that I want to inside the update this is a put method inside body I was sending the uh ID and or rest upgrade detail instance like this we can sending first of all here I will just give the object and inside this I was sending ID and after that ID I will just sending this Eid and rest of the which things I want to update like if I want to update my name then here I will send the name and if email like this type so if you want to send the one value which I want to update like these types of a and here I will give the mobile and now let's go on the next part next next part will be the uh Delete section now here this delete API this is endpoint for the delete delete and after this delete I want to give the this ID here I want to give the ID name like this will be the API endpoint now let's go on the now go on the our py part and create this and make sure here some error is coming let me just remove this uh invalid unexpected token where is let me just check uh why this will be doing the unexpected open error in line number 23. here this one uh while these are here giving the error let me remove this then check and I'll give you okay okay now it will fine and now let's go on our uh front and side for that here let's open the new terminal here side and here I will just use the npx create react app and after that I will give the folder name will be the client and press enter you take some time to install all this react app you can use any other framework like in SCS also depend on your favorite or you are most comfortable for that and it takes some time it will be installed I will back now the installation is done now after that here I will just start this CD client up to that npm start [Music] you can see this application is running after that now here comes and let me just drag this bottom section and now just I will close all this file first of all this one and this one and this one now this collapse the server folder now open the this client and here I will just go on the SRC section and after that this app.js file here first of all I want to remove this and here create a fragment tag after that here I'll just give the react app and now let me just go on the browser and check yeah this will be running and now I will just go on the app.css and here I will just remove all this this things here first of all giving the all the element of the this jsx will be box sizing border box after that I will give the board body background color this body background color will be the hashtag F5 F6 CF like these types of a knowledge like this and after that here I will uh here in the app.js here I will make a one due tag which will be the like this due class name like one type of a container for that container due to class name here I will give the class name will be the container by these types of a and inside this this container let me just copy this container first and come in the app.c CSS here first of all I will give you this container padding approximately 5 pixel or 10 pixel is perfect and after this that I will give the this background color will be let me just give the background color will be white okay not white exact for not checking purpose I will give the red and here see it will look in here now here I will do the this container match with only approxly I think 500 a little bit more I will give the 600 7. yeah 70 perfect after that I will give the margin Auto now it will come in here now I will give the little bit space from the top and bottom for that here I will give the margin uh this will be here I will give the 20 pixel from top and bottom margin now here you can see this will be giving you can increase this depend on your users like these types of a now in this container first of all uh I will create my one button for that to add any element for that I will just create button and this will be the class name I will add BTN and here I will give the add now see here giving me the ad now let's go here and this button I will just come in the app dot CSS here I will give the BTN first of all I will get the Border none background color none depend on the we use the next class for the this background color for here I will just now this will be done and after that I will get the padding from the top and bottom side 5 pixel Left Right will be 15 pixel 10 pixel sorry I think 15 pixel is perfect and this will be 7 pixel yeah and after that I will give the font size will be approximately 20 pixel it will be more we can go 18 yeah it will be perfect after that I will give the Border radius by pixel body radance means this little bit corner now here after that I will give the this background here I will be the background background color will be the hashtag 194064 now let me just check and this text color will be White now see it will look like this and when I was uh my my mouse on this button then mouse cursor will be changed for that here I will do the cursor pointer like these types of a and here I will add one more class which you name will be the ptn add like this type so we just copy this BTN and and I will go approach CSS and here I will use multiple times this vtn class name that's why I was given and now I will just remove from here this background color and this one and I will paste inside the BTN add now see it will perfectly and this cursor pointer also from here I mean add here now this is ADD button and when I was click on this ad here uh one pop-up is display for the uh added data for that let's create this pop-up also and here uh first of all I will give uh do class name and here I will give the this pop-up will be add container like these types of iOS given and here this is a form tag here I will use the form and here first of all I will give the label and this will be the label will be HTML for possibly the name here I will give the name and below this input input type input type is here we can use the text and after that I will give the ID this ID name exactly similar to the this html4 for that I will give the name and after that I will give the its name property which I will use for the on change method for that here I will give the name like this I have created now next field will be the label HTML for and this will be the email after that let me just give the email and below this input type equal to email after this ID email and after this I will give the name property will be a name attribute email I will use this attribute for the on chain method to insert a data inside this this name will be the key name that's why I was using and after that label and this will be the HTML for mobile uh here I will give them mobile and here I will just give the mobile and input type input type is equal to number because Mobile in the form of a number that's why and here I will get the name will be the mobile after this I will give the attribute name attribute will be the mobile like this types of a iOS given all this and why this giving error okay here I was given the two times here I want to give the ID after this I want to create one button to submit for that submit like these types of now here you can see this form now let's Design This for that let me just copy the add container this one here and this is from here copy and come here and now I will remove this background color like that and here I will just go let's copy this and this container here first of all give the display uh position absolute like these types of absolute and after that I will give the background color for now I will just give the red it will like that it will be displaying for now I will give the left will be zero and right will be zero bottom will be zero and after that one more things will be top will be zero now see it will be coming here now here I will just change this color RGB 0 comma zero comma 0 and 0.5 now see it will look like this 0.1 0.2 yeah now it will perfectly now I will make this form tag in the center for that giving the display Flags justify content Center alignment item Center I this content will be coming in the center now after that this add container uh add container yeah add container now here inside add container I want to give this form tag and this form type first of all I will give the bit width will be approximately 200 uh 400 and yeah now let's give the background color first yeah it will look like this um a little bit I want to be the top for that I will either 420 and after that I will just give this form tag display Flags after that Flex I will need the flash direction will be column now all this will be displayed like that and here I will be the padding will be 10 pixel let's give the more 20 30. yeah 30 is perfect so we increases yeah we can use the from the top what a 50 pixel Left Right will be 40. a little bit more 30 yeah 30 40 is perfect and now let's uh giving this border some remove this background color white red here I will give the Y and now I will give the this box side of box shadow uh one sticking box turtle and here I will give the 10 people 5 pixel 10 pixel black RGB and like this now let me just check here see little bit Shadow is coming and now after that this this all this corner I will little bit curve for that in the Border radius 5 pixel now see this border is little bit curved and let's uh make this all this label for that add container inside this form tag and input now here I will give the font size of the inside the input I will give the 16 pixel and a little bit more 18 pixel yeah and after that I will give the padding heading will be 5 pixel yeah and let's also Design This label also for that let me just copy this and we about this I will give the label font size will be my proxy 18 pixel all this label and in between them little bit gap for that here I will use the input tag I will get the margin from the top side it will be 5 pixel now see here little bit Gap and the bottom section I will give the margin bottom 10 pixel now see little bit Gap is coming now let's Design This BTN for that first of all I will give the distribute class name will be BTN okay mdtn and like this let's see okay this will be changes it done and now I will make a little bit down and this color I will change for that I will just come here in the form tag let's give the add container form tag I have a BTN and this BTM background color I will give there uh some other like blue royal blue like this type of a and after that I will give the color this color will be white and after that giving the font weight will be 550 I think 500 is perfect yeah now little bit Gap from this top section for that here I will give the margin from the top will be 10 pixel a little bit more we give the 20. like this and here I will give the one more section for the flow section here for the closing here I will just come and here inside the add container uh here I will just create new class name here I will give the uh close BTN like these types away I will give and inside this I will give the one icon for the closing here I will use the react icon for that let's go here react icons now let's copy this and after that you go on the here and here just same now let me just uh close this application first now again I will just install the my react icons now this installation is completed and here I will just search close and where is this one just copy this and after that I will go here or something other emdm DMD okay MD close just copy this and import this icon first in the top section from the react icons slash write Library MD now I want to use this just copy this here and here I will paste where is here now see it will be coming here or not and refresh this page okay I was my application is not not running for that here I will be the npm start now here you can see uh app here this uh close icon will be displaying here I want to display inside this for that let me just come and I close the icon I want to insert in the form type let me remove from here and here I will just paste to now check and replace this page now see close icon will display here now I want to in the left side for that let me just copy this first and here I will just go in the app.css and here I will just give the add card inside the form tag here I will just do the close BTN and here I will give the margin from the left side Auto because I want to this cross mark in the here and now let's Design This first of all I'll give you the font size little bit more procreating pixel yeah and after that I will give the this little bit width it will be approximately 10 20 pixel let's check height will be 20 pixel and background color will be red not your red little bit yeah like this now let me just check okay it will be okay now here I will give the display Flex because I want to display this icon in the center that's why I want to make a center that's why I always use this alignment item sector not check now this icon will coming in the center now let's make this border radius 20 pixel you win now see this close icon will display but it will not look good that's why I will remove this background color and here I will give the border one picture solid and it will be black now see this close icon in here and this will be cursor pointer now for the closing purpose here we can click and this form and see when I was click on the submit button this form is replaced for that uh let's here come and here first of all I will create one function how much handle submit like these types of area SQ and here I will pass one parameter e okay here I want to be the equal and this here gives the E dot prevent prevent default and just copy this function name and here I will paste we can paste on the form tag or in the button also both are performing same here I will give the on submit on submit this function will be called now let me just check when I click on the submit then no refresh is done and here see when I just click on this close icon this form tag will close and when I just click on this add this form will be open for that here I will create a const one use instead const add section and I'm gonna only set add section like this after that here I will give the use state and here I will give by default I will give the false and just copy this add section and here I will just go here and here I will just wrap this with this condition for that I will just give the like that section and here inside this bracket I will just collapse this from here and cut from here here I will paste this like that and after that I will just give the this form tag here now let's check now see it will be gone and when I just click on this ad then this will be open for that this set add section just copy this and here I will just go this add button and here I will give the on click and here with the one call by function and inside this this set add section here I will give the true now just come here and when I click here now this will be display and when I click on this close icon this form tag will be gone for that let me just copy from here and where is form tag uh close button you see a due tag here I will just give the on click just paste this okay I want to remove from here to here now when I just click on here this close section okay here I was given the two here I want to be the force now see this will be gone and when I click on that this will be display and here when I just click on this close icon this will be gone now he here user type all the detail we want to send this detail to the backend side for that we want to or store all this detail for that here I will just create one use instead const data and here I'll give this set data or we can give the form data once again form data dot set form data after that I will give the huge state and here this is object first of all we give the name empty and after that we can give the email and after that I will give the mobile like this types of a field and yeah like this now this all things are done and now I will make one on gen method when a user will type something and it will be stored on this for that here I will give the cost handle on change like this types of a and after here I will just pass one parameter and here this parameter I will just extract pause the first one will be the value and second one will be the name here I will give the E dot Target like these types of a and after that I will just use this set form data let's copy this from here and here okay set form data and inside this I will pass one call by function first of all I want to grab a previous value and after that I will give the return and this previous value and after this I will give the name and here I will give the value this name will be given like this one which I was given this uh where is name this name this name will be email ID this one this is a makeup key name here which has I was given make sure that this this name email mobile number is exactly similar to the this name equal to name name equal to email name equal to mobile exactly similar now this part is done and now I will just copy this after that here come and here I will give the on-chain major on change and here I will paste this like this just copy this function here and here I will just paste this here also now paste this now here just console log this form data when I just click on the handle submit console.log like these types of in the console let me just open this and first of all I want to open the inspect also why this my aspect is not opening let me just open this and open the console this console and now let me just type commit and this will be the email ID here I will get unmitted gmail.com and here I will enter the model number uh here I'll give you the same one nine six any number you can enter here now after that I will click on the submit and here you can see it will become like a email mobile number and name all this will be stored in this state and this mobile number in the form paste string we can change it in the schema uh where is system I was created server index and very here I will give the string now we can store this mobile number also in the form of a data type will be testing you can change this number depend on U and give the sum condition also now here this part will be done now I will send all this data to the backend part uh for that here I will here use the edges for the fetching the data and all this operation for that let me just install this and here I will do the npm npm I in GEOS and press enter now this installation is completed and let's again start this npm start I will close the my previous all this section this one this one and this reactor for that let's come here and here I will just come and here first of all we set our base URL for that here I will just give the import a GEOS import GEOS second actuals from egg Dios and after that this will be done all giving Which the mirror here give me the error cannot import um let's check on the browser it will be working fine or not yeah working fine and now here I will say it OS base URL for that xgos dot take here the default dot base base URL and here I will give them my base URL will be the this one just copy from here and here I will just paste this like this and now this is error will gone and here export take GEOS import as xgos okay was not found in egg juice okay uh I think I was missed something default export I think now yeah it will perfectly now let's use this egg yours first of all I want to create save this data to the mongodb for that here I will give the and this function will be async of async for that here I will be the const res or we can use the data equal to eight GEOS after that I will use the this will be the post method and here I will give them my URI create after the here I will just pass in my data data will be the this one where is this form data just copy this and here I will paste this and here now I will just console log this data just copy this and here I will paste this now let's check this data is perfectly working or not for that first of all I will just refresh my mongodb this database and after that here let's open the inspect and go on the console section let's click on the this ad and here I will just type Amit one email ID with one at the rate gmail.com and mobile number I was just type randomly and click on the submit and here one promise is coming okay I was not given the a bit okay and again I will click ok now in this time this data is coming and inside this data giving me the uh this data information all this data will be inserted now let's go on the here mongodb and just refresh this now see here this two data two time I was click on the submit button that's why uh for that when I was click on the submit button then this box will be disappear for that here I will just go if data dot data what is the output let me just check in the inspect data.data and data Dot success okay erase the data dot success will be true then I want to give this this set add section will be disappear set add section will be false like these types of a and here giving the also message alert data Dot message yes now let me just check one more when I click on the submit okay in this time nothing is happening Let me refresh this first and click on the here and here I will give the amazing to add after that I made to at the gmail.com and this mobile number after that click on the submit and no response is coming inside of here this data okay I want to go on the data section I was not go let me just go data now let's click again okay and this time undefined okay let me just check why this will be undefined okay here I also I want to view the data click here and now here I will add Amit three after that here I will give the army 3 gmail.com here I will get the model number and click on the submit now data saved successfully click here and this will be disappear now this data save will be the database will be done now we want to display the all this data here for that let's create our this table for displaying the data first of all uh for the displaying data we want to paste the data from the API for that here I will give the pause get handle get fit data and here I will give the async and this will be like that here I will give the like let me just copy from here because only I want to get a data that's right just copy this here I will just paste and let me remove from here and this will be get data then I want to just remove this form data here and this one is also here after this post in this get method and here if data dot data dot success will be true and I will show all this data in the used state for that here I will do the punched data list our president said data list here I will give the huge State and this will be the array and now just copy this share data list just go below this and here I will give the data dot data and data.data inside this all this data will be available and just now let me remove this set section and this will be top side first of all we set in the user state uh after that we will render now let's say for checking purpose just uh I will just console.log or I will just console my this data this is coming or not console.log data now I want to first time I want to get this data for that here I will use the user huge effect and inside this huge effect I want to call this face data first time just copy this and here I will paste this and now just check this data is coming or not for that let me replace this page okay why this error is coming and where where it is coming line number 38 okay here I want to give the arrow function okay in this time I'll Define is coming undefined undefined I mean why this is two time okay the ug Factory run two time for that I already go on the index.js and here just stop this sticky mode because because of this stick mode use effective will be run twice now let me check now here I'm Define okay and here I will just go app dot JS file and here I was giving the alert let me just remove this and now let's refresh this page again and now let me just go on the inspect section and check this data is printing or not here see this this will be giving me the object and inside object we have this data and inside the data we have a data okay inside data we have a data another data like these types of a and now let me just console this console.log and data list let me replace this page again now see inside the data list all this data will be coming now here all this data I want to display here uh let's create a table and for creating a table about this here I will create one table due last name here I will be the table container like these types of iOS given and below this first of all I will give the due class name or I will give the table and first of all table head table header like this and here I will give that this value table here that TR and inside this I will give the pH first one UTS will be the name and second one will be the email ID and third one will be the mobile number try these types of video displaying and after that I want to give the this third one will be the this empty now just this one and now I will just copy this tape this container inside header I will give just give the little bit space in between there for that just copy the table container and now I will just close this file first open the app.css and here below this I will just give the table container and this table container inside this I have a table and inside table I have a uh table head an inside table here I have a TR now here I will give the this TR uh sorry inside the TR I have a TS now here I will give the minimum width of the this any of this content will be 200 200 pixel for checking purpose giving the background color red now see it will be look like this type of a and yeah and now I will just give you the space from the top side for that just copy here I will do that table container and giving the margin from the top side it will be approximately 20 pixel let me just give it a little bit more 50 pixel the 50 actually perfect and after that here I will just give the padding approximately 5 pixel 7 pixel yeah like that and this in between them this Gap is coming uh let me just say why this Gap is coming I'm going to prom I think this will be okay and here I will here just copy this TR I will just give the table color it will be gone this Gap will be fill up automatically and when I was given this background color here I will get the background color will be the this will be #f 0 e a e a remove for this and giving this background color remove now see like these types of a and below this okay instead of this TR we can give the th then showing the little bit Gap no problem now after that this will be done now below this I want to display all this data and like that I want to also give the my table uh body also for that let me just copy and here I will paste here I want to give the TD and here I want to change this will be the class here I will to be the table body yeah like that and here I was given yeah 0 e a like this and now let's display the all this data for that displaying this is a table head where is close here here now I will open t body and inside tea body first of all I want to give the use the map and this will be the data list after that I will give the map and here this will be I will pass one parameter here to access a one by one uh property name and here I will return uh this TR and this TR first will be the TD this TD will be El dot name let me just give the El dot name and second one will be the T will be El dot email and after that TD will be uh El Dot uh what is this last one El dot mobile or let me just check now see all this will be coming but it will come here I want to make all this data in the center for that in the app.css and where I was given that this TR and TD I will all will give you the text alignment center and here is not coming here I want to text alignment center yes now see all this content will be coming in the center now here I will add two button one is the for the edit section and second one one will for the delete and it is data we want to delete and here I want to display the Border also for that and just copy this or we can use some other property also like here I will use the uh here I will give the border for now border bottom one pixel solid and this color will be the we can give the c95 C2 yeah these types of a and here uh why not coming because here I was not created a where where here I was not given the one more TD let me just give the TD and yeah like that and here see this all this content I want to give the Border uh for that let me just come here and very stable uh table table okay here is not table here I will just come here I will give that add container and table after that I will give the Border one pixel solid and this will be the hashtag and this will be the C9 like this one why these are not coming why this border is not taking this table we can give the also row wise also put copy from here I will paste here I will give instead of giving the direct lead to table let's cut here here I will paste [Music] here also not taking uh why that's not taking okay here I was given that this will be the 700 pixel and our data will go above this for that we can give the where I was given the form tag container iot and the 700 here I will give them fit content like this it will uh fine yeah now after that I will just go below this and where I was given the border border let me remove and here I will just give the uh box shadow 5 pixel 5 pixel 10 pixel RGB and here it will be property will be not done here in this inside the table for that we can do here now see Power table will look like this and now little bit giving the corner for that here I will give the power border radius 5 pixel a little bit more we can give 10 pixel yeah five actually perfect now here I will add a two button for that let's add this one will be the for the edit button and second one will for the delete button now here I will give the button and first one will be for the edit here I will give the class name BTN and here will be the ptn edit and second button will be the second button will be delete and here I will either delete like this now let me just check this button is coming or not this button is not displaying here okay I was given in the heading here that's why it will be displaying here uh let me remove from here is both bottom and go below this inside this I will just paste this here like this now see here display the this button now let's design the all this button first for that this button just copy this edit B button edit and after that I will just come here CSS file here I will give the this edit button first of all I will remove uh this font size will be 16 pixel and this padding will be little bit less I will give the 5 pixel and you can fix it from left and right after that this delete also like that I will just give in the here comma and giving the BTN delete yeah and in between them I want to give the gap for that here I will directly add margin uh at 5 pixel and zero pixel from top bottom five pixel left right a little bit more 10 yeah 10 will be perfect and yeah now I will change this color for changing the color first of all I will give that this edit one just copy this and here I will give the background color this background color will be the E2 ef43 and once again why not taking yeah after that I will give the background color BT and delete and here I'll get the background color will be F a1c117 like this now let me just check now see and here I will give that this color will be the White now see or this UI you've done now let's add this logic uh for the delete section you can always click on the delete this data will be deleted and when I click on edit this data will be I am able to edit this data for that first of all we do the our delete operation for that here I will make a one function uh here let me just remove this from here I will use the const handle delete after this will be I will use the S this will be the async operation here I will be racing and inside this I will accept the ID after that let me just copy from here to here and here I will just paste this and here I will just give display the alert alert and here I will give the alert will be the data dot data Dot message like this guys okay and here I will give the delete and plus I will add ID like these types of a data will do and just copy this handle delete and here come where is here I will need to on click caller function inside this and here I will just accept ID El Dot underscore Dot underscore dot ID like this ID will be coming here now let's refresh this and when I click on the delete okay here give me the error request failed with status for 404 uh why this will be giving the error let me just console log this data list okay here I will use the once again this will be the delete method I was using the get that's why delete now let's check again when I click on the delete a data deleted successfully and again I want to render this for that again I will call this function get fetch data if data dot data Dot success will be true then here I will just call this again and display the first of all this API and the display this now just click on the delete data deleted successfully and yeah like these types of a data will be deleted yes see now no data is available let's see if no data is available then here show the no data for that if no data is available then we can show uh here I will give them one more condition uh here I will give the data data list if zero it means that if some data is available and then show the this part from here to bottom side from here if not then show this part this will be the no data here so the no data it will be coming in the center for that here I will give the uh Style and Alignment item or we can give the text alignment Center now see it will come inside the center okay no data is uploaded which means no data and we can do like that also we can remove from here this tea body we can insert here tea body and from here I will insert T body will be here where is closing here not here one more this will be the array and here this keyboard is okay now it will be perfect or some error let me just go because I want to give here also this that's why inside this again I want to give the array let me just give outside yeah now here no data it means no data now let's make the our this add data Eden get data done and let's add one more data like here I will give the image here I will give the email ID at gmail.com here I will either my and data save successfully now click here and when data save then here display the data let me just refresh this this okay when data receive then again I want to call this API for that where is get fetch data and get data then again I want to call this API like that now let me refresh again let's add one more data with one at the rate I made one at the rate gmail.com and this font size is also too much we will reduce this here I can just type randomly my number and press submit data save successfully okay and now see here display the data and I will just click on the delete this data will be deleted and now uh I want to make the edit section also when I just click on the edit then this section will be uh display for that edit section I want to create another method to update our data for that let me just come here where is here I will just post handle update AC and here I will give the inside this I first of all I want to give the ID accept the ID and I hear like that and all right here I want to pass a arrow function now we will use the same form which I was created this one what happening async operation Y is not now I will use this exactly similar form same form for that uh here I will just cut from all this section here from Cut here and here I will make a one component let me just create a one holder component and inside component I will create one component name will be the form [Music] we can create a form form Dot jsx or we can give the form data like this type of form table like that form table is perfect and Dot jsx or Js after inside this let me just give the array efce and here I will just paste this and now I want to also import the this CSS also for importing the CSS here I will give the import first of all I want to go outside this component folder and again this compo outside this component folder and here I will just type if dot CSS and here I will just give the inside the props here first of all I will pass a handle submit and the second one will be the on change and any other I want to pass this set here I want to pass a set add section like this one but here I want to pass it this true or false for that here copy this data or here I can just tap from here here I will can give the Lodge like these types of values give the close just copy this and here I will just keep come handle close handle close just copy this here I will paste now uh like this uh one form tag component is ready now let's use this component and form also I want to import this icon and any other things okay now everything is done now let's go on the app.js and here first of all first of all I want to import my this form data form table for that form table and here I want to pass all this property first let me just copy which property I want to pass just copy from here and you have dot JS here I will just paste this like that and here I enter here also enter now here I will just pass the handle submit handle handle submit and second one will be the on-chain method handle on change and after that I will just give the handle okay here I will pass here like that ah state add section will be false if now this will be done now let me just check everything is fine or something is missing now see when I click here this form is display and here click it will look on now everything is perfect now let's go under this edit section for the edit uh DC 100 submit handle on change all things I will create for the instead of creating like that uh I will just queue I want to create let's let me just give the here const edit section set edit section after that here I will give the use state and here give you the false I'll just use these edit section just copy this after the go below and here also I will just giving the paste this and here I will just use the exactly similar here I will just cut and here I will paste now here I will change this set edit set edit and here this is a handle on change uh here I will give the handle edit all on change handle edit on chain and the instead of the this will be handle submit here I will give the handle update just copy this and here I will be the handle update and this will be I want to create handle on change just copy this and here I will just come and constant and this will be the AC like these types of a now after that I will just go on the top and create a one form like these types of a edit ug state which will be stored all the edit section here form data edit here also I will give the form data edit now just I will just copy and here I want to store also ID also for the storing ID I will give the here here ID like this inside yes let me just check with our I was given uh schema appear update I was giving the ID okay like that this will be the ID I will add all this data don't worry now here just set form data when will be response coming from the update and the long change first of all I will make here I will give the exactly similar which on change method just copy from here to here and here I will just paste this here and here I will give the uh here I will change set edit section like this and here all things are properly exactly same all things are exactly same same and here I want to get if I want clicking on the uh why these are is not fine okay when I was clicking on the edit then this form will be open for that very set it set it just copy this set edit and whereas you use this here not here I want to give the set edit form set form edit set form data edit like this and when I just click on this button where is button edit then this form will be open for that here I will do the on click like these types of a I was just giving this this set here I will giving the value will be true like that when I just click on the edit this form will be open and here click will you close Okay like that it will be happening and uh here also all this all this data will be also coming for that all these data will be coming then I can just do where is berries here I will just give the set uh form data edit like this and here I will just give the year now let me just check when I click on the edit okay no data is coming inside the edit which the data is coming let me just say console DOT log here right click on the inspect and click on the console in the form tag I got El email ID underscore ID okay here I ask voting underscore ID okay here I was sending all this data not sending I was just when I just click on the edit [Music] first of all from here to here handle edit like this type of way I will make one function and just copy this function name and here I will I was just sending all this data for that here I will just give the El and like this and just go on the top section and here I will just give the DC update this is on chain here I will give the const handle edit like these types okay now here here I was give it getting the all this data which is coming from the backend side like one object and after that here this object uh I will just set this El data to set edit form just copy this set Ed form here and here I will just paste this and all it and it will be giving me the one more set edit section proof now just check and I click on the edit here all this data is not on mobile [Music] in the form tag I was not set the value okay that's why this value all this value is not sitting for the setting this value here I will give the like that here I will give the props or I will give the rest like this rest and here I will pass a very input tag here we will pass value will equal to rest dot name and after that here there is here I will pass rest Dot email and here I will pass Dot mobile now let me just check again when I click on the edit it will give in the cannot read the property of a name okay I was not sent the data that's why it was happening just copy this rest and after that I will go on the app.js and where is IOS uses the form data here I want to pass this data and here also here I will give the uh which will be this form it form data let's copy this here and various form data here I will pass the form data and here I will pass the uh form data edit now when I was click this edit section now see uh here the all this data is coming and here when I just click on the add section okay now it will be perfectly fine you can actually edit here all this data is coming here and when I click on the submit this data will be refreshed okay uh this will be where is handle update here I will give the handle update handle update here I will be the e and here give the e Dot prevent default and here this will be updating for that here I will call the apis just copy this part here I will just paste this and here I will give the update and after that here I will pass all the update data which will be coming from the here this form that I did we will remove this ID here at the underscore ID and where is where is update update bundle update and handle update here I will just give them perform data and after that here return me the console.log data like this data will be represent here I will give the alert for that copy this and here I will paste this and here giving the message data updated successfully like this and this is handle on change and this edit now everything is done now let's check everything is working properly here when I go here I was just sending the one and click on the submit uh with status code 404 status [Music] index here I was given the update update where is update okay here I was using the ID like that instead of using like that I can use the underscore ID like that now let me refresh this and this will be the update okay this will input method okay no problem let me check where I use Mr Mr okay here I was firing the delete method that's why okay here I want to give the put that's why this data is deleted now let me insert one more and here I will give the Amit deleted is not but it will be not firing that event let us save successfully and here display and when I click on the edit it will be coming here I will just click five and still and here giving the exhaust network error exhaust handle error focaloos 3000 okay why these are happening data.ngos dot put let me just check why it is okay underscore ID here is given okay here I was updated here not here I will give the underscore ID click on the edit URL with the five seven seven and click on the submit data update successfully and this will be hide for that if data updated successfully then here we can give the set edit section will be false that's the second one I will update here I will give the 555 and click on the submit data updated successfully uh this will be gone here like that it will be perfectly our card operation is done here if this video is helpful for you like this video subscribe the channel and now let's say when I was here click on the ad see here when I click on the add this data ad successfully and here see this will do display and now when I again click the now see this data is not empty for empty this I will just go here and where I use handle submit here I will just give the set uh form data set form data where is form and here I will just give the all this first of all name will be empty after that I will give the email and after that I will give the mobile number all these things you will do empty now again I will click on the submit data save successfully and here I did successfully and again I will click now see in this time this will be like that now this video here is completed now let me just show you again now see first of all you want to add any data I just click on the add button and here add this data like here I will add Amit and here I will add 7 and 6 or you can add any number like here I will add admin admin and admin gmail.com here I will get the admin number and click on the submit data save successfully like this now here see admin admin gmail.com and mobile number and this one now here you can see edit operation here you can edit the this admin name like here or you can change this mobile number also like here you I you can change any mobile number and click on the submit data updated successfully like that now see a small number is changed you can delete also this data like you delete this admin data like this you can delete anything any data now if this video is helpful for you like this video subscribe Channel thank you for watching this video

Channel: Dynamic Coding with Amit

Views: 30,818

Keywords: Dynamic Coding with Amit, crud operation in mongodb, crud opeation in nodejs mongodb reactjs express, mern nodejs reactjs mongodb crud operation, create crud app, mern stack, mern stack application, full stack crud operation, build complete mern stack application, mern, reactjs, mongodb, express, crud operation, create read update delete in mern stack, complete crud operation with mern stack, CRUD Operation in MERN | CRUD Operationn NodeJS, MongoDB, ReactJS, Expresss

Id: EUHlm0leMM0

Length: 143min 12sec (8592 seconds)

Published: Fri May 26 2023