MERN Stack CRUD Operations | Full Stack CRUD Operations | React, Node, Express & MongoDB

hello everyone this video is about crowd operation using Maron stack okay mongodb Express reactors energies so we will create this current operation so this is the demo that we will perform okay let's first of all create a new regard holy like gmail.com and also let's assign any age for example 10 let's press the submit button so the memory card has created okay successfully so now let's update it Asif changes to a safe and H is for example 14 so let's update it see the record has updated successfully and also if you would like to delete it so let's press the delete button so the record has deleted successfully so this is the cloud operation that we will perform in this video so let's get started before starting if you are new to my YouTube Channel please like the video and also subscribe our YouTube channel so let's get started so for this correct operations I will open this create a folder which is an empty folder okay inside it I will create two folders one for front end and the second one for the server side so first of all I will just create the react up okay the front-end side then I will move to the backend side to write the backend code okay so let's first of all create reactor so for that let's move to the backend to the terminal yeah in the card let's write npm in it hyphen y so it will just oh sorry it will I'm really sorry delete it it was just for the server side but I wrote it I will write npm uh in it wait okay which is used to create act up okay so let's assign a name for example client okay and we would like to use the react selected act in JavaScript select the JavaScript and just move to the client CD client and after that write npm install it will install all the packages here that has installed so now let's write npm run due okay it will run the server so let's move to this URL see it so the react app is running now okay so now let's install a few packages uh the first package will be in PM install bootstrap and also we should install axis for HTTP request and response and also we should install react router damn so let's press enter and install these packages installed both surface for Designing access HTTP for HTTP requesting Sports react total done for routing okay so now let's run again and VM run due hour server so let's close this yeah let's come here to the SRC and here we will just remove all those unnecessary things remove this index.css and also let's come here remove that the path of that and come here to the update G6 and remove all this code yeah now we will start our coding from this up Dot jsx so now let's import first of all the reactivator down import browser and routes and also route from react router done and it's import bootstrap bootstrap CS I have imported them so now let's use the reactor down just come here let's use browser router and inside this I will use routes the path would be a for example slash okay this would be for the home component for the home component to use and the element would be here I will just create a new component and I will write that here here okay but before that let's copy this for create and also update okay these routes also for create a user I'm using for the users this will be for the users so let's create the component for all these routes just come here and create a new user searches sex and also create user.j6 create date user GSX just come here to the user yes I wrote this code and just for the users okay and let's copy this code and write it for create also and this would be for create user just change it create user and copy this paste it here and also for update one yes it is okay now so now let's assign those components so first let's come here I'll assign use the users here yes and the create user in the update user here these are the routes which will be this route is just this route will you move to the user component and this route would move to the create user component and this route will use to the update user component so let's move to the user component and here we will display the records so for that come here I will just assign some classes bootstrap classes here so I have just created these two div elements and I added these four stuff classes for design so now I will create a table here inside this and we will display records the data in that table yeah this is the table which I have created okay so this is the header of the table and here in the tea body we will dynamically display the data so to display the data dynamically so for that first I will create a variable here a state here const users sit users is equal to use statehook I will use your state hook and this is an array type with us okay so let's just add a record manually now then we will switch from my database later so here I will just add a record m is equal to user paint foreign and here I will display the record in the table row table row and table data and inside this user Dot name and age and for the action we will display two buttons when the first one will be for the edit and the second one would be for the delete let's save it and let's display plate how it looks like come here see we have this data that we have display this is the header but the data didn't display it so let's come here and user.name.ebl here so let's just add a return here return statement okay if we use parentheses then we don't need a return but if you use curly braces then we need this return statement let's save it yeah it looks like this so that that is the record that we displayed so now I will create a button on the top of the table whenever we press that we should move to the create user okay to create a new user so for that I will just create a button a link okay I will use this route this route okay I will move to this route button yes I wrote this code okay this link code link and two it will move to this route and this is the design okay to this route it will move to this create route and this will go to create user so now let's check it okay the link is we imported that from the actor down here okay so let's come here and let's paste it see we came to the create user so now let's create the design for the create user let's come here and here I will create the design further create I will just create a forum okay a forum should have a name field and email and the H field this is the code for the the create user okay I passed the video because this is simple HTML code okay this is the design that I have created okay input field for name for email and date and I submit button just this is this was the code nothing else okay so now uh whenever we press the submit button so we will write the code in for the to create this user trying to insert this user to the database that is that we will perform the task later so now let's move to the update okay so one thing else let's come back to the home page here whenever we press this edit button we should move to the edit Tempo networking so in the edit component let's update company in Turkey so here to the user and we never replace this edit we should move to the so for this gadget also I will use Link okay as I have used for create so I will use it for the update just simply copy this and paste it here instead of create you just try to update and also we will pass ID to this update okay I will do that later okay to pass the ID and one further delete the delete I will perform that later okay so when you replace this we should move to the update user okay for the update user I will create the same form as I created for the create user okay the Forum is the same okay whenever we come to the create the update user so we should see that is the values that we would like to update in the Forum then we will update them simply just copy this foreign user okay the same okay whenever we came to this input field we should have the values that you would like to update in these input Fields already okay let me just show to you save it and just come here okay we should have the value that we would like to update in this pool then we should update them so it was it is end up just for the front end okay so now we will move to our server side coding first of all we will just configure the mongodb database then we will create database and fetch the records from that and also insert in do perform these tasks so for the server side so first of all I will create a folder by the name of server and after that I will just move to the command line and it's separated and in the second one I will move to the CD server folder inside that I will write in frame init hyphen y so it will just create a package.json file inside this package a server folder okay that has created so now let's install a few packages so inside it I will install npm install first Express which is the framework of note.js to create a rest API through this and also Mongoose which is used for mongodatabase and cars the cards are used to access our backend side in the front end okay so the card is used for that in Northmont this is used to refresh our server side could automatically whenever we make change so it will make changes in that automatically so let's install first of all these yes those packages has installed so now I will create one another a file inside this button here for example index start GS okay so here I will like my apis code first come to the package.json file and here I will just try to add something else how to use the node one so to use another one I will write here start another one server we will light our server side code here so let's first of all import the express is equal to require space in const Mongols is equal to require one goes okay and also const cars is equal to require cars and Let's Straighten Up const is equal to express we will call the Express method and after that let's use up that use cars videos cars for the cross origin okay to access our server side in our front end and also let's use up dot use express.json this is for whenever we pass data from our front end to the button so it will force that to the Json format if we don't try this so it will give us any error thing and also to run our server so far that we will light up that lesson and we will assign a port number here for example three double zero one and a callback function and let's write console.log [Music] server is running so now let's run our server so to run the server let's move to the This Server folder in here write npm start let's see it C server is running so now we will create a connection with the mongodb database yeah so for the mongodatabase I have installed the community server of the mongodatabase okay I have downloaded that and install that locally okay it is the mongodb compass which is a GUI for that to manage the data the databases so now let's create a database before database this is the offline mode you have the link in the description for how to download it and how to install it okay and also if you would like to use the online mongodb Atlas okay to online interact with them and create the database so for that also you have the link in the description how to create connection with that okay so now I'm using this one so let's create a database first of all the name of the database would be cried and collection name the collection name would be for example users okay I would like to create for the users the table yeah it has created this collection the users so now let's move back back to our code and we will create connection with this database so first of all let's write mongoose dot connect and here I will write the connection string so the connection string just come here and press this one and copy the connection string and paste it here and just change it to um one two seven find zero find zero find one okay to local IP addresses okay sometimes that localhost is not working but it is it will work so now let's write here at the end the database name the database name was correct yeah the connection has created so now let's move and create first of all we will just create a new record okay we will insert a new record so for that first of all I will create a model for this collection okay for this users I will create a model here just come here and I will create a new folder by the name of models and inside that I will create users.js a new model OKAY in this model I will specify the fields for the users table so let's write first I will import const mongoose is equal to require mongoose and after that let's create const the user schema is equal to new mongoose dot schema and inside that now I will specify the fields so the first one would be the name that is string for example and the second one the email which is trained again and the edge which is number we can specify more properties like required are not required and other validations and this okay for now it is okay simply and now let's see create the model const user model is equal to uh mongoose dot model and here it has two properties the first one is the collection name okay this one okay this is the users I will specify that just as a string users and the second one is the schema that we have created right now let's export it module that exports is equal to a user model yeah so now let's move and import it inside the index.js this file so let's import it const user model is equal to require models and users it has exported us so now let's create API for and to create a new record so for that let's first of all and just specify up dot um post okay this is suppose The Meta method is post and here we will specify the route that would be like create user and here we will have the Callback function which has request and response the request is the data that we are sending from front end and the response we will send back to the front end and here now I will use the user model dot create I will use the create method and here I will specify the fields okay the fields are the request dot body or I can just specify request that body dot um name okay nothing is wrong so instead of this I will just specify the body requested body okay the data that I am sending from front end that will be attached with this request.body okay so after that dot come here that pin and we will get the users and just I will cancel them console or I will return back to the front end result adjacent users okay chip here was any error console or result adjacent let's save it and now let's move and to test it okay to test it let's move to the front end so just come here to the front end and here come here to the create user and inside create whenever we press the submit button okay so let's come here to The Forum so first we should store these details okay the data that we are entering in these name and email and age field we should store them somewhere so for that let's come here create three states const name our icon yeah I just name use city name is equal to use State hook and just copy this and come here this is bar h and this one is for email this one for City email okay and now let's use them and store the value in these variables so let's come here is coming down and change and just call the um create a callback in a row function and just calls it I will just try it like C2 name either Target dot value just copy this one and paste it here for email instead of sit name just write email and also for Edge yeah The Village has stored there and now let's whenever we say press the submit button just come here to The Forum and submit create a function with the name of submit just come here increase that function const submit is equal to an arrow function e dot prevent default prevent the default submission and after that just now we will call use the access okay the axis which we have installed at the start I will import first of all that import access from axis and now let's use that access that post we will use post method and the URL would be M and let's write the URL but that would be a localhost just come here and write http localhost and the port number is 3001 and Route name is create user and let's pass the data to that name email and Edge and after that dot thing we will get a result let's cancel the result console dot block result dot cage here cancel the error so let's save it and now let's move to Chrome browser and just run the localhost 300 no we should run the um front-end server so just come here to the terminal and create a new one and just a CD client move to the client directory client folder and after that just write npm run do press enter so let's move to this URL yeah we came here let's press add so now let's add a new record and also let's move to the console what we are getting from the server side come here and just come here write any sup .com and age 23 press submit button so we got this result okay it means the record has inserted successfully so now let's get our check our database so let's refresh it see the record has added okay this is the new record which we have added so it was the create functionality so now let's come here whenever we insert a new record so we should move back to the home page okay so just let's come here and just write code for that and instead of this console we will write yeah we should write the console also and with console I will write for another sentence which is I will use use Navigate Okay so let's come here and const navigate is equal to use navigate I install the actual program I think try to use navigate think it is like this get so let's import it import use navigate from reaction to them okay so now let's use it after consoling we will use navigate to move back to the route to this route okay let's come here to the update G6 we will move back to this home route here that is okay so let's save it and now let's create a new record what happened so we just came here 20 press submit button so we came back to home page okay so now we will pitch the data the records and we will display them here here on the Chrome and the browser okay so for that let's come here to the home one to this users and here instead of the manually which we have written This Record instead of that we will pitch the records and we will display them on the screen so let's say we will use use effect hook for that which we learned at the start use effect yeah let's write a dependency and here we will use axis now let's import it here that has imported dot git we will get the records um and that would be just by default the home page this one would be the route and the sorry we should write here the localhost http localhost in the route is three double zero one and this would be the route from where we exist very cards dot in result and we've stored the result somewhere and let's store the result this is an array we will show the result in this users set users result dot data okay when we are accessed the result and console them so we will see something like result or data all the cards would behave dot cage if there was any error console.log here that's okay okay so now let's write the API um so whenever we access them so we will display them on the screen okay yes this is the method that we will display the users email name email and H so this is just name in email and this is H and also let's assign this class name to this delete one tool C 82 and this would be Danger so now let's write API in the server side so to write the API for git method let's write up that git and that this is the URL stain response and just come here and we will use user model dot find we will use file method to get all the array cards and then we will leave it empty Dot you will get the users and I will return them result.json to the front end users gauge if there is any error so just take console and return that okay result.json here and now let's try it okay it will work I hope yeah it will work so now let's appreciate what happened see we got the regards okay the first one but we didn't get the names so let's check what happened with names let's come here and just user that name we have written the rank spelling save it and let's see it see we got the regards user opened array these are the two records so now let's move to the to write the average functionality okay we did the creation and we picked the data so now let's update the area card okay when you replace it we should move to the update and here we should get the record okay that we would like to update so just come here and here when we press the button so we should move to the update let's come here to the update one and here um we should see first of all the record okay so to pitch that record that we would like to update so first of all we should pass the ID of the ticket so let's come here to the users and here when you press this update button we should pass the ID of that to that link okay so to pass the ID I will just write here I like this okay let's try it quotation and and also let's wrap them in these curly braces and here inside this I will just write the ID okay and the ID would be user Dot underscore ID okay this ID let's come here to the compass this is the idea okay that we have so before that let's first of all yeah that's that would be the ID okay so now we never replace the update so the ID should be passed to that so before that let's come here and we will update this route we'll have the ID here and just let's write this slide slash here and after that sorry this is create and we should write that with the update ID and now let's move to the update one yeah here I will use use Forum Hook from react Auto Port use firearms from reactive to them okay so now let's distract the ID const extract the ID from is equal to use forums okay it will distract the ID from the URL and store that in the ID and now let's create three Fields as we have created here in the create section okay just copy all of these copy them and just paste them here okay all of them just let's import the navigate use navigate and after that let's use the use effect hooked so first of all we should pitch the record that we would like to update okay so for that let's write use effect hook same to this okay we should not just we will use the use effect hook you use that here okay I'm doing it because do not waste the time okay simply sit copy this and just come here and paste it here it is the same code okay just instead of um this I will pass the ID here okay just I will light slash plus I will attach the ID with it okay and it will get the result and we will just here I will just first of all update the record cancel that okay console.log the result I will cancel the result so now let's check first of all the to get the record by ID okay let's come here to the server side and here I will use yeah one thing else here I will use the git user get user and just come here after git user and also we should get the ID okay so to get the ID for that I will use the um you the forearms requested forums okay so let's just write ID here and here request and response first I will get the id const id is equal to request start forums dot ID okay it will give the ID from the URL and after that let's now give the record so to fix the record we will use user model dot git dot find by ID okay I will just pass the ID to it okay ID to that and other methods would be the same like this copy them and paste them here result.json dot users okay save it and now just move to the Chrome browser and here and let's move to the console and here let's just try press the update button we paste within error where is the error so let's check that yeah I used it is not defined just come here to the update and just import the used it used it from react just come here where is back and just appreciate press the update button one card user bit is not defined so sorry save it again where is the error just just appreciate and just press the update access is not different sorry based with too many error import CS from axis nothing else is there okay everything is okay yeah we came to the update and we got this result okay this is the record that we got from uh axis either so we didn't fix the record so let's check where is the hero so let's come back depreciate button and the record has not pitched successfully the error request field with status code 404 so let's just come here yeah we should add a slash here okay just add a slash here and come back depreciate back and press the update button see we got the data okay we pitched that record okay the record that we wanted the data and this is the record let's check it see where the values yeah the error is that here casting the aid okay instead of just simply writing the ID we should add the underscore because here in the compass this is the idea we can underscore ID and we should assign now the ID to this this idea okay that we have pitched from the URL so now it is okay so it is working perfectly okay back update and let's check the data see this is the data that we got okay so now let's display the data here and then by pressing update we should update the ticket so let's move here and then state of just come here to the update instead of console log I will just try it something extra and that would be um to update these fields okay name email and Edge sit first of all set name is equal to the result that I got result dot data dot name and also do it for same per email and H and here just write the age and here write the email okay we updated the field so now let's come here and just try it here value is equal to with the name okay value is equal to with name and here for this the value is equal to the email and here the value is equal to with h so let's come here now CHC we got the data back so now whenever we update it so we should see the records okay so to update it let's write here and change we will call the unchanged as we did here in the create one okay I will simply copy this one copy this one the same method we will use okay unchangeable intensity name either Target dot value and here instead of set name I will write set email and here I will write set Edge okay let's check it now so now whenever we are updating the data so when we update the data by pressing the update button we should update the records so let's stick it over whenever we fix the update button I will just call here on submit and submit update okay update button I will create let's create the update Button cast it is equal to in Array function e dot prevent default so just let's try to copy the method that we did in the here in the submit button just copy this one okay copy this one and just come here paste that here instead of post I will write put because you would like to update and here and I will just pass the ID also the ID that I would like to update so let's attach ID with this okay with the route so let's write this in plus ID okay we have already the ID yeah this is the ID okay so now whenever we submit it so it will goes to this route create let's change this critical user to update okay date user so it will go to this route update user and also with the ID we will be pass name email and age also to that and then we will get the result and we will go back to the home page so save it and let's move back to the server side and here we will create a new route up that put and here we will write update user this is the route and also the ID we will get the ID let's create request in response so here first I will get the ID as I have got here the ID copy this one same to that okay after that just we will use use model user model Dot point end update occupied by ID and update okay so we will just call this method and to this first I will pass the id id is equal to with the ID that I have and also we will pass the data the data is first the name the name is equal to request.body dot name and after that email which is equal to with the request dot body dot email and also the um age breakage dot body dot h dot thing we will just do the same thing as we did here copy this and just paste it here and let's just bring these down here so yes it was about the update user so let's save it and let's try it just come here and we will just write usup turn and also let's add it here and let's press the update button what happened see the record as updated okay this is the regard which has updated let's update this one and age would be for example 18 okay restart update see the H has updated and also the name has updated so now let's perform the delete functionality okay so just come here for the delete we will come here to the user and whenever we press this button so the record should be deleted so whenever we press this button let's call on click event and click we will call handle let's create an arrow function and we will just call handle delete and we will pass the data the ID user Dot ID okay we will pass the ID to this function so now let's create this function copy this and just come here const paste it here and we will get to the ID and after that let's call Access Dot delete and we will create a route that would be delete user and also let's attach the ID with this and after that we will get for result console.log result cage here yeah but yeah let's check it now we will move to this delete URL so just come here and let's write for the delete up dot delete the URL is delete user and also we have the ID request and response let's get first of all the ID copy this and paste it here and after that now let's call the user model dot find by the end delete okay find Value ID and delete so now let's pass the ID is equal to with the ID dot then we will get a result result.json result the gauge yeah it is okay now so just come here now to the front end delete user okay everything is okay so let's press the delete button so I think it need so let's appreciate that ecard has not deleted just come here to the inspect and come here to the console so let's press this delete button uh axis error 8404 so just come here to the front end where I wrote the code of delete button so yeah that is here button on click handle delete copy this okay user.id [Music] Le delete and we got the ID here oh sorry we should write this URL copy this and paste it in front of this and to replace the page back so let's write one thing else just come here right here window dot location reload to reload the page and refresh that so let's come here to the Chrome let's press the delete button see the record has deleted successfully okay so now let's create a new record Jamal 30 submitted we came here let's press the delete one see that has deleted so it was all about card operation using a merge stack mongodb expressed react and node.js so I hope this video was helpful for you so if you like this video don't forget to subscribe our YouTube channel and like this video and thanks for watching

Channel: Code With Yousaf

Views: 22,356

Keywords: mern stack, mern stack tutorial, mern stack project, full stack, crud operations in mern stack, crud operation in mern | crud operationn nodejs, mern stack crud application, mern stack projects, express, react js crud operation, react full stack, crud operation in react js, crud operation, crud application mern stack, react, mern stack tutorial for beginners, mean stack crud operations, mern stack crud operations, crud operation in node js, full stack crud operation

Id: enOsPhp2Z6Q

Length: 55min 15sec (3315 seconds)

Published: Sun Jun 04 2023