Build a Full Stack User CRUD Web App in Bun.js & React.js With MongoDB Database in TypeScript

uh hello guys welcome to this video so in this video we will be building a full full stack web application user C kind of application in bnjs and reactjs so bnjs as you all know it's a great alternative to nodejs it is used to build out my backend API server where we will be storing these user details in the mongod DB database and in the reactjs front end we are actually using reactjs to actually make to display these data and making request to the backend API which is hosted by banjs and we are displaying this using Tailwind CSS in the front end you will see we have the username email address we have added option we can even delete the users as well and let me show you in mongodb right here we have the database right here of bunar app inside this we have a table of users where we are storing the user information such as ID is the primary key it is automatically inserted name email address so currently if I refresh now there will be a single record because we deleted that record so there is a single record in the table and also if I refresh the application there is a single record it uh as I click the delete button without page refresh it automatically deletes it now the data is deleted from the table as well nothing is present so I can basically type the name and then I can provide the email address what it will do it will make a request to the backend API it will actually insert this record in the table and we are using bnjs in our server. TS file we using typescript along with the bnjs to actually build out this backend API it is uh the server is listening on Local Host 3000 and our back uh front end server is running you will see post request is created with body name email address and also if you check the browser console we also get a message if I type the name right here and the email click on the create option you will see two records will be inserted so in this way you can see that two records are there we can now click the edit options if you want to update the details so automatically pre-filled it will have the name right here and the email address of whichever record you want to edit it simply I can change the name one botom 1 2 3 and change the email as well click on update and now the inserted values will be get updated instantly if I refresh the database this entry will also get updated similarly we have the delete button as you click the delete button that entry will be deleted from the interface and also from the backend API the table as well you'll see that so we will try to build this user current application create read update delete all these four operations we will perform I will show you step by step how to build this for this tutorial we are using bnjs as I told you it's a fast allinone JavaScript runtime environment similar to nodejs it's a great alternative to it and it is growing popular day by day so you should invest time in bungs as well so lot more developers are using it it's a great alternative to nodejs and also Doo JS Dino is not that popular but BJs is very much so now let's get started I have given the full source code in the description of the video you can directly purchase it with full documentation and support I will support you once you purchase it if you have any sort of problem you will get this full directory structure full documentation as well so the link is given you can directly purchase it from Google Drive you will actually get a zip file after you make the payment from Pro Cod store.com so the link is given in the description to purchase the full source code so now let's get started guys by building this project so what I will do I will simply close this project and I will simply close this as well I will navigate into my projects directory and here I will simply make a new brand new bungs project so for this what we need to do we will navigate to our project directory and right here we need to Simply invoke a command which is bun create react because we are uh using react JS as the front end if you are using a different front end view JS you will write like this but we are using react so I will simply type react and then the followed by the name of the app my bun crud I can just to it so this is actually the command bun followed by the create command then react and Then followed by my bankat so in this way you just need to this is your name of the project so if you just enter it so it will simply say to you to create a project using Create reactor run BN create react app or if you want to create a react CH using wheat engine wheat is slightly faster guys if you don't want to use the buil-in create react app V if you don't know about it it's a similar to webpack but it's very fast it's a development environment to actually build your projects so this is their documentation official website you can build out UJS uh SW reactjs all these front end apps using V so I will be building it using V so simply I will simply say I will modify this command bun create vat simply I will type this command bun create vat simply type this command and now it will ask you some options what is your project name so you can modify the project name let me give a different name bun user crud app and then here you need to select your framework either you are using vanilla JavaScript or VJs react preact lit SW solid quick so I will be using our react so here you need to spell typescript you're using or JavaScript I will be using typescript and then I will be it has you can see it has scaffold a sample project I will CD into the directory and then I will say bun install so now it will not use npm it will install the bun right here it will install all these packages so once it is installed it will give you a notification message you will see that so it is really fast as compared to npm so now we can simply open it inside vs code so this will look something like this it has created this app. TSS file this is the react Chase project now to run this it's very simple we run bun we run the command npm run Dev this will start the vat development engine which is Local Host 5173 if you see that so we are actually invoking this command if you see package.json this is actually the command that we are running npm run Dev so this will actually start the V development velopment engine so it is now running this so you can simply open Local Host 5173 you can see this is actually your sample react CHS app running on this so what we need to do guys we also need to create a server. TS folder right in the root directory so just I will create this file server. TS so we will using typescript for building our backend API so just make this dots this is extension now to actually build your bungs server it's very easy we will be importing the serve method from the base package bun and then after that we just need to say we need to import client and object ID from the package mongod DB so both these packages we do need to install so what we need to do we need to invoke this command which is uh right inside this we will say bun add add theate types node and mongodb so mongodb is actually the package in bnjs to actually interact with the mongodb database and just add this bun add followed by the package so these two packages we need simply enter and it is actually installing these packages so just wait for the installation to finish so once it is installed it will actually install this you will see that so now it has successfully installed this so now we can start our basically a Asing function start server and we will basically call this function right here so inside this function what we need to do we just need to start a basic server so you'll use this serve method and uh right here inside this it takes two arguments first is the actual function we will call this function as Fetch and the second argument it takes is the port number we'll be running this server on port number 3,000 so this is actually it takes I think uh uh just let me cross check sorry is equal to is not there because we using typescript support colon 3,000 So This Server will start on Port 3,000 and we can actually make a simple get request right here so we can actually make inside this fetch method we can simply say if condition if the method triple equal to get so if the method is get then in that case this method here will be passed right here if you see uh we first of all need to get the request whatever the request has come the URL so we can say new URL and then we can say request. URL so after that we can extract the path and the search params from this URL we are using destructuring and based upon that we can actually check is simple path so if the user let's suppose the user write a path for starting application so I make this path / API SL users if this is the path right here then we can simply make a simple get request if this is a get request in that case we can simply return a message back to the user so we can even get this method as well right here you can get the method by using the request. method property request. method property so here we can simply check if the method is get if if it's a get request then in that case we can simp simply return a response back to the user so you can use the return new response and here we can simply return an object to the user simply a object hello world and we need to json. stringify whenever you are returning any object we do need to actually use json. stringify that's all so we have simply made a simple backend server guys using bnjs it's very simple it is slightly complicated if you're using nodejs but it's I think it's very easy if you have the syntax we just made a Simple Start server Asing function and it takes we using this serve method which comes from the bun JS Base Library and here it is taking the first function as a fetch function here and the second argument is the actual port number on which the back end API will run and in this fetch function we actually get the URL which the user writes and then we check if the method is a get request or Port request by using request. method property and this is actually the path here we are configuring it/ API users if I want to run this bnjs you can simply run Bun Run followed by the file name so here the file name is server. TS so if you just type just enter it so now the server is listening on Local Host 3000 if I go to that/ API SL users you will see that a backend server will be returning this message hello world so this message is returned to us whenever we visit Local Host 3,000 API users so we have successfully made a backend API route using bnjs so in this way you can do this and now we will simply delete this we don't need to return hello world instead for the time being I just make this and write some more things right here so first of all we do need to inside the start server method we need to make the connection to the database mongodb database so right here so we are actually using the mongodb compass software which actually allows you to configure your mongodb tables so it's a guy kind of a software it's completely free just type mongodb compass and simply download this so this comes with this uh UI GUI Library graphical user interface so install this and simply click on the connect option so you will be granted so this will be the connection string that you will get the typically mongod DP database runs on 27017 port number so click on the connect option you're connected now you need to create a new database so we simply create a database for this application which will be bun cored app this will be the database we create and here we need to Simply create a test collection this is required whenever you create a database so simply click the the database is created now you'll simply write this inside our code now to connect it so we'll make a simple client we'll use the client we are simply using client which comes with mongod DB and here you need to specify the string so here you specify the string Right Here mongodb Local Host 27017 and also here we need to specify the database name as well client. DB and whatever database name that you have given so mine is bun user CR you can cross verify this bun C app sorry bun C app after you specify this now we can simply create the collection the table this will automatically get created users this user table will get created automatically whenever you run this code and uh so after this guys what we need to do we also need to write here let me delete this for now so right here after you get this information from the fetch method whatever URL the user has hidden and the path name and the search parameter we also need to add our course headers which is really necessary because if you don't write these headers in the backend dat you will get a cross origin resource sharing error whenever you call these methods from the react front end you will get a cross origion resource sharing error in the browser console so it's necessary that you add this so it's mandatory so need to add these headers object so in no in nodejs Express also we do this by it has a built-in course module but in BJs we do need to manually do this these headers excess control allow origin star and access you can even this star means that you are allowing request from all the front end so anybody anybody can make request to your backend API so if you only want to allow a specific URL you can just type here I will be calling it from 5173 so I can only provide the specific URL will only make request to my backend API so we restricting the access this is really good practice to actually just allow the access to a simple only applications that you are on so here we are allowing the methods get post put delete and options these are the five methods we are allowing the access the third header is Access Control allow headers so we are allowing the headers which will be content type and the last one is Access Control maximum AG so what is the maximum age of these headers so I will say 36 86,4 400 seconds which typically is 24 hours so these are the headers object right here and right here we'll simply have a if condition right here if request method is set to options then in that case we need to return the response as uh null and we need to pass these headers we just need to write this configuration Cod guys this is just done for course origin prevent that error from happening now we are here inside our / API SL users so if if the user hits let's suppose if the user hits / API SL users so here we will simply make a simple request to actually return all the users which are currently present in the table so we will make this uh code we will write the code for this so for doing this it's very easy so if this is a get request so for doing this we will be console logging a message as well on the console that get request for retrieving all users from the table and now to get this users we can simply say all users await so just make sure this method is async that's why we put async function right here you can use a weit here and then you can simply say await the users and it contains this method mongodb uh find method and it will find all these users convert them into a array and then we can return this as a response back to the user as Json so return new response json. stringify and uh all users and the second parameter will be the status property status is 200 for a successful response and the we'll pass the headers as well this is really important you need to pass these headers that you configured which is the course errors so if you don't pass these headers you will get a course issue so if you directly write this inside the browser / AP / users you need to restart the application just restart it whenever you make any sort of change Bun Run server. TS so now you will see currently if you go to Local Host 3000 API user currently it actually returns empty because nothing is present in the database if you refresh Bard app you can see a console log request is also being made get request for retrieving all these users from the table so we have this database if you see bun app and now we just need to retrieve these users so how we can do that let me just uh insert some test users uh now guys for the time being what we will do I will just inside this get request I will simply insert a sample user just to show you in the table so now what we do basically we insert a sample user we can simply Define a user and we do have a method to actually insert a user so we can simply write here await followed by the table name collection name which is user and mongodb does contain this method which is insert one one record and here we will provide our object which will contain two Fields the first is the name of the person and the second one is the email so here you don't need to provide the schema you can directly insert it automatically mongodb will create the table and insert this record and automatically the primary key will will be automatically added so here we are not providing the primary key you can see that we Define the user that's all we using this insert one method which is provided by mongod DB package that we imported early on client it has this now after that it will find this and return this as an array if I now restart the server and navigate to/ API / users now it will create one record right here you will see automatically this primary key will be returned to us this is a name that we provided email address as well if I show you basically if I refresh a table will be created a collection user currently there is a single record available so that's why again if I refresh it will again create the same record and now there are two records available in the database you will see that so if I refresh now now there will be two records so we are actually inserting it and we are getting these records right here from the table using bnjs now we'll be doing it programmatically using react Chas so right inside of react Chas project just go to app. TSX and you can just remove everything from here you can just have a simple heading hello world we can delete everything from here we don't need this and now one module guys we do need to install here which is concurrently if you don't know about this module it allows to run multiple commands as at once so if you have a different front end and different back end then concurrently makes it very much easy to run commands concurrently at the same time this is the package 4 million weekly downloads are there so you can just install it as a Dev dependency npmi D- sa- Dev concurrently this is a command npmi D- save Dev current currently so simply install this so it will actually install it and there is actually a library sorry command that you can use in concurrently to actually to actually run the project so this is actually the command so this is a script that you need to write a start script so just after it installs go to your package.json file and uh just add the start script paste it so what this it is doing it is concurrently followed by it is running this command Bun Run server. TS and npm runev it is running these two commands at the same time so I can just now need to just say npm Run start it will start my react Chase application and also the bun run server. TS it will start the back end and the front end at the same time you can see that so it makes it very much easy now we can navigate to the react Chase project so this is app. TXS you will see that so hello world is say you can see that so if I navigate to the API this also will be running so now the API is also running at the same time and the front end application is also running so just install that module so now guys coming back to the react ch right in the app level component we will simply Define a interface as we are using typescript so this interface will include three properties first is the actual ID primary key of the table the name which will be of type string again and the email address as well so these three fields we will be storing it in the table so we are simply defining a simple interface in typescript so after we do this we need to declare a state variable which will be user set user and here we'll be using the UST State hook which is provided by react it automatically imported and here we just need to define the here we need to pass the user interface that we find right here and this will be a array right here like this and in the parenthesis we just need to say the initial value will be an empty object so not this one square brackets so here we are defining this we are passing this interface which contains these three properties ID name and email to this U State hook so the default value will be empty object so after you do this we need to also have a use effect hook use effect so if you don't know about use effect guys it actually runs every time runs for the very first time when the component mounts it's a life cycle method so here we in the argument here we need to write here square bracket so this simply means that the it runs for the very first time when the component mounts so right here we need to actually execute a function right here fetch user so right here in the you'll Define this function fetch users so this will be a Asing function and right here you'll make a backend request to the bungs API your fetch request HTTP Local Host 3000 SL API SL users making a simple fetch request and then we will getting this data response. Json very simple and then we set set users whatever the data is coming so we can simply say console of data just to check so if you just refresh your application make a request it will run and you will see a array will come right here so total eight records are present we'll see that so all these records will have properties name and email right here so now to display them on the screen it's very simple what we need to do right here in the components we need to make a components folder right here and just make a first component as user list. typescript and just make it functional component so here we'll be using the we'll be including this component right here user list just import this at the very top VSS code will automatically do us so user list is showing right here if you see so now here we need to Loop through all the users which are there and show it so how to do this it's very simple we got this set user right here if you see we have initialize the state by using the set users now what we need to do when we are calling this user list we just need to pass this users object as a prop like this so now we need to as we Define the component we do need to actually expect this argument so right here we will be AC accepting this uh to be we'll be destructuring it users so we will be accepting this users to be passed as a prop so I think you can just write like this so users is declared but its value is not used you can even write the first way as it is this is this is perfectly fine you can write this you need just need to use this value so now to use this inside the jsx what we can do we can have our div tag and here we can use our map function to actually Loop through the user so right here we can Define the key parameter so this will be the id user. id and uh user doore ID sorry user implicitly has any type okay just make it any right here just write doore any because we are in types script so we just need to make sure we Define the type as well of the variable so right here after we do this uh we can Define it inside the paragraph user.name and in the second here we can Define user. email so if you see now we are actually displaying these values like this so we also need to use Tailwind guys so what I can do is that go to Tailwind CSS and include the CDN for this so just directly include this play CDM copy this and just go to your react public HTML file like index.html just after the title paste the CDM and right here we can actually give classes to it so give these class name uh which will be padding for so these are all Tailwind classes shadow SM and to this if you just refresh it will allow these classes uh now it has some Shadow as well you'll see that so we also need to give this class which is text large font medium and also to this also text small text Gray 600 so now you can see that uh we are actually whatever is there in the table right here these much of records are there we also need to add two more buttons to these which is the addit button and the delete button so for each one so after this paragraph We just need to add these two buttons first button will be responsible for edit the second one will be for delete so we need to give it the classes class name is uh MR2 PX4 py2 and background will be yellow 500 text White and the button will be rounded it will also have the shadow when we hover onto this the background will change to 600 and similarly if you just see we have the edit button ready similarly we need to give it the classes to the delete button as well so just the background color will change to red color apart from that all the things are constant so background color we have changed to red color so you will now see we are actually uh displaying all the details all the decord from the table in our react CH front end now we just need to add a simple user form where we actually allow the user to do this to add a user so for doing this we need to go to app. TXS and right here we need to actually make another component in the components folder so just make this component as user form. TSX so again this will be a functional component and inside this component I just need to write uh before this user form it will be imported like this so now inside this component guys we need to pass uh three methods fetch users as properties as props so these three props will be first one for fetching the number of users editing user for actually updating the deals for now I am just uh uh fetching the user we are just providing this method name fetch user like this so now we need to Define this component so here we'll be defining a simple interface user form props and it will actually contains three properties first is the fetch users method which will be passed as a function and editing user which will also be passed as a function which is will be of type user if it is not defined then it will value will be null and set editing user so these are all used for update process and here we'll Define the user to be type if the user is not present then null this is all types script guys we do need to Define the types of the variable that's why you are it is saying that cannot find the name user so again we need to again Define this interface of user so inside this we have the ID field of typee string name of string and email of string you can see we have defined these interfaces so right here whenever we actually are getting inside this we are having these three properties past fetch users editing user and uh set editing user as properties so whenever you passing it for now we are simply passing fetch user so I will simply delete this so you're passing this fetch users and right here we need to declare some state for our application so first will be the name field set name use State again we use it initial value will be null and the second variable will be for storing the email address email set email use state will be nothing so we have declared two two variables name and email for storing it use state is imported from react again you'll be using the same hook use effect so here we will simply say uh we will basically mod just uh set name set email we will just uh reset the values set name to set email to as it is for now we will not write this when when it comes to update operation then our we will write the use effect for now we just need a simple form inside jsx to actually allow the user to enter a brand new entry in the form so we will have a form and inside this we will have the on submit handle submit this function will execute when we submit the form so we need to Define this function const handle submit e parameter will be passed right here so e will be of type any so for clearer thing you can simply write react. form event so this is the react. form event and just make this function as async so now inside the jsx we just need to have a d section margin bottom two and here we'll be having a label to actually allow the user to enter the name so block text SM font medium text Gray 700 these are all Tailwind classes so the label will be simply named and after this we will have a simple input field where we are allowing the user to enter the name the value will be simply whatever is the name and we'll be giving a class to it mt1 block W full PX3 py2 border gray 300 let it make it rounded as well Shadow on small devices Focus outline none outline none Focus ring Indico 500 Focus border Indigo so this tutorial is not about Tailwind guys so what I will do these are lot of classes but I will all the source code you will get I will simply pasted the classes you will see you will get this nice little name input field where you will allow the user to enter the name similarly we will do we simply copy paste to Simply Save some some time paste it I will simply change it to email and here we will simply allow the user to write email address so now we'll here write name and email and after this we have a simple button to actually add user and uh you will simply bind a this button will be of type submit and PX4 py2 these are all Tailwind classes once again BG blue 500 text white rounded medium devices Shadow SM devices small devices hover you will change it to this color this is actually the interface which is is ready guys we have simple form we will now to if you see we can't enter anything inside this form this is because we need to actually set a onchange event handler to this input field so we have this attribute inside the react Chas on change so here we need to attach these so e and then we say uh set name to be whatever the value written e. target. value same thing we need to do it for the email field as well so this will be input type email so on change so set email e. target. value now we can write anything right here you will see this validation please include at theate symbol so as we click this uh nothing will happen but we now need to Define this function which we handle submit this function will execute which is handle submit so e parameter first of all we do need to prevent the auto submission of the form we can say e. prevent default and then we need to make a simple backend request to actually add a new user to the backend table so for doing this we can say await fetch request HTTP Local Host 3000 SL API users and here the method here will be post and here we need to pass the headers so headers will be simply content type application SL Json and here we need to provide the body so body will include actually json. stringify the object whatever object that you are passing so we are actually passing the name and the email so this is there in the these two variables we are setting it using the set email function and set name function right here on change so when the value is changed so everything will be there just format the document and Then followed by after this after this is done we can just uh this is my function right here if you see fetch request after this we can reset the values after the form is values are submitted so we can simply say set name to be nothing set email to be also nothing that's all so if you just refresh now type the details but you will see nothing will happen as I click add user it will make this request but uh it is saying that uh has been blocked by course because we haven't written this request in the backend API of BJs so go to your server. TS file and just need to make this request post request because we only have this uh only a get request is there so here we are if you see in the user form we are actually making a post request in this route /i/ users so we do need to Define this request so we will have a simple if condition once again for the method this time we will be checking for a post request which will be coming so right outside this if condition we will have another if condition if the method comes out to be Post in that case we need to destructure the uh the body request or Json like this and then we can simply simply console log message post request uh with body this is actual body which is coming now we just need to insert the data so we can say that cons result and await users. insert one body and then we can simply return a response return new response uh json. stringify result and then the status status here will be 2011 for successful insertion and we also need to pass headers as well that's all uh that's all that we need to do guys and what I will do is that I will simply delete this table to start from scratch drop collection so now there is no table present if you refresh your browser in the front end nothing will be present if you just go to okay I think we uh forgot to do one thing uh in the get request I am still having this line which is inserting these records I will delete this line we don't need this now we can delete this so again you can drop the collection so now there is no table present guys so as you refresh now nothing is present in the application okay I I get the point I need to restart the server whenever I make changes to our bungs server file so just you need to restart that so now we do need to drop this collection so if you refresh now there will be no data present this will be the thing right here if you now enter the name email address click on add user now if you refresh there will be one record added and if you check the table as well refresh it table will be created and one record will be inserted you will see that so we are now actually able to insert records using this form field that we provided in the react front end and we are calling it The bnjs backend API so one problem is this guys if you see have as you actually submit the record click on this button it is not automatically instantly adding or reflecting it the UI we need to refresh the page for tackling this it's uh very easy go to your user list uh sorry user form component so right here we need to call the fetch user function right here call this function fetch user function this will instantly update the UI without having to refresh the page so it will actually call this fetch user function so here we are if you see we here we are calling this component app. TSS we are passing this fetch user function now we just need to Define this we have already defined this function we are passing this as a property to this component user form fetch user we are calling it this will actually call this function it will actually return all the records from this database if you refresh now if I add the record here brand new record let me add my own name goam and Gotham gmail.com click on add user you will see that now this record is successfully added without refreshing the page we are adding it so now guys in the next section what we will do we will tackle the process for handling the edit operation and the delete operation so when we click these buttons nothing is happening in the next section we will tell you how to tackle this uh now guys in this section we will be tackling about uh first of all I will show show you the delete operation delete operation is little bit easy you need to go to the user form component user form. TS6 and here you'll simply bind a click Handler to the delete button so if you see not in the user form user list component in the user list component if you see we have a delete button right here and we will simply bind a on click listener to this button so we will be giving a on click so whenever you click this this function will execute handle delete and this function guys user you will be passing the current user the ID property underscore ID as an argument to this function so this function is not defined we need to whenever we are calling this user list component right here we just need to pass this as a function handle delete so right here whenever we are calling the user list component we need to pass this handle delete as a prop this function handle delete so now we just need to Define this handle delete function right here at the very top so here we are defining this handle delete function guys if you see this is a function that we are passing right here handle delete and we need to get this function right here so just pass it handle delete like this so just make sure while you are calling this make this interface make interface right here once again interface user this will actually contain three prop properties name will be of typ string email will be of typ string so here we'll be simply inside this component user list component we will have this user list props component and uh we will have this uh I think this is user list component we haven't made this that's why the error is happening we just need to repeat the same process we did this inside the user form component if you see we made this user form props some user same thing you need to do this for this also so I just made this you'll see that after you do this you just need to pass it as a property so you just need to write like this simply let me let me write it and explain to you what is happening right here you will see that this is a user list prop it is taking it is taking this user interface that we defined user option handle edit we haven't passed so at this moment of time we are only passing handle delete so whenever the this function will get automatically called handle delete so right here whenever we are calling it handle delete so here we need to add the missing attribute handle delete so user list component right here let me just delete it for now handle edit so now this error will not take place so we just need to Define this function right here handle delete so what this function will do it will actually make a simple fetch request to the backend bnjs API here we'll be passing the ID as a string to the you make a simple await request fetch HTTP Local Host 3000 SL API users and here you say question mark ID is equal to we pass the ID just make this as a back symbol so that we can pass the dynamic variables so inside this object we will pass the method to be delete and after that we can simply fetch again call this fetch users method to actually update the UI after we delete the user so now we need to actually make this request in the back end so just open your server. TS file and write in inside this we will actually make a another if if block this time it will be for the delete request so we have this get request you have the post request and now you'll simply make the method for if the method is equal to Triple equal to delete so in this way you will compare if uh the ID is not there then we will simply return a response back to the user that uh ID is required for deleting and here you'll pass the status to be 400 and pass also pass the headers this ID that you see we will be getting this ID right at the top so we can actually get this ID using this uh search params and get ID you'll get this ID by using search params so we'll be getting search params and part name from the URL which is submitted by the user and then we'll get this ID parameter and here we are simply checking if ID is not defined then we are simply returning this message to the user that ID is required for deleting so after you do this we just need to if the ID is is passed by the user in that case we will simply make a console request delete request doing so after this we can simply in TR catch block so in the tri block we can simply say await users and it contains a method delete one and here we'll passing the ID parameter to be new object ID so object ID is basically available in mongodb we have imported this from this mongodb package so it converts your ID into object ID like this and after you delete this you can simply return back the response to the user return new response you use the json. stringy file pass the result and the status property to be 200 and headers also that's all this is all for the delete request and if you now refresh your application click on delete uh I think you need to restart your server that's why you are saying expected a response object okay just need to restart so now you can see that as I'm clicking the delete button the users is deleted and we are actually getting delete delete request doing and it returns a Json response to us so only one record is present first was two records so we are one by one deleting the request so if you check your table there will only be a single record available you will see this is a single record now we are fetching the records from the table we are can add a new record by providing name and email address we can even delete them as well just put dot here we can addit addit functionality is remaining we can delete this add this or read this from the table now in the next section guys we will be tackling the how to update a record if I click the edit button prepopulate the values and then edit or update it so now guys at last we will be tackling about the how to update a certain user in the last section we look at how to delete it add this now if I click the edit button I need to show the update button so how to do this it is slightly complicated if you just go to your app component app. TSS file so here we need to define a state where we will be storing about our edited user so just Define the state editing user set editing user and initial state of this will be U State and we do need to Define our user right here and we will simply pass it here the user initial value if it is not defined then in that case we will put it user I think this is your okay user null I think we need to write like this so let me paste it this simply means that uh we have defined this use State like this and for the editing user so this is actually a variable where we will be holding the reference of whichever user we need to edit or update so this is required so after you do this we also need to pass one more method to this user list component this method will be equal to handle edit so here we'll be passing this function handle edit we do need to actually Define this function similarly in the last section we defined for handle delete so handle edit this will again be a Asing function and now in the user list component we do need to add a property here which will be handle edit user will be passed to this of the type user and it will not return anything so vo so after this we just need to add this handle edit so you can now see there will be no error right here we are passing three functions to this component handle delete handle edit and the number of this is array the users array three properties we are passing it now we just need to Define this handle edit function this will simply change or it will actually the user will be passed here to this function as an argument whichever user the user selects so we simply need to here we need to say set editing user and pass the user to it that's all this is all the logic that we need to Define here so we actually are defining set editing user we are calling this and we are equaling the editing user to whichever user the uh it has been passed to this function like this so after we do this now we need to go to the user list component and right here we need to bind it in the added fun button right here we need we need to similarly bind a onclick listener so whenever we click the edit button in the browser this onclick will execute and here we need to Simply Define or call the function handle edit and pass the user that's all so as you click this button as we click this button this function will execute you can console lock the user as well so if you try to click the edit button now you will see this uh object will be passed a user object whichever object that you select email will be passed name will be passed and the ID this is the ID that we need the primary key in order to update the record so now we are getting this user we are editing set editing user to user so now it becomes very much easy we now need to after we do this we now need to go to the hand user form component so inside this user form component guys we now need to define a new state for update process so whenever we are calling this app. TSX like this so here we are passing the user form we are calling the user form and here we need to pass uh a property editing user this will be a simple editing user passing the user whichever we just equal to set editing user we are simply passing to this user form component so whichever user the the update operation is going on so we are simply passing this editing user to this component and the second thing we need to pass is this function set editing user as well this function so this function we also need to pass class so set editing user and set editing user so this this may sound slightly complicated guys but you just need to do it and you need to go to user form and if you see we have defined this editing user and set editing Cho in the interface and right here we need to add this set editing user and editing user so just make sure you define like this change this and now you can see that so this is a user prop we are using this interface which contains these three properties fetch user editing user and set editing user so right here here whenever inside the use effect hook whenever you are calling this use effect hook we do need to now make this use effect hook this will only execute when the editing user value is changed this is a slight question mark right here we are passing editing user as a dependency so this will only execute whenever this property is changed editing user has been changed so this will execute only for update operation so here right here we need to check if the editing user is present if the editing user is has a value in that case we need to say set name to editing user dot name and set email to be editing user. email in the else block we just need to reset the value set name to be none and set eail to be none that's all this is all the rest of the process will remain the same and now we need to go to the form right here and conditionally changed the label of the button based upon whether the user H editing user has a property or not so right here instead of hard coding add user we can simply check if the editing user has a value in that case question mark tary operator will come then have update as a label if the editing user is not defined in that case simply say add user like this so if you now see add user will be there as I click the edit button the values will come automatically right here if you see prefilled and the button text will be changed to update so if I click update so it is actually adding the user but we need to change the business logic in the handle submit function so right here we need to add a condition right here in the handle submit function right here we need to add a condition right after if editing user has a value in that case we need to perform the update operation instead of adding it so in the else block we can basically add this copy paste this code so now inside here we need to update so now for updating it it's very easy we provide actually call HTTP Local Host 3000 SL API users just make it as a backtick symbol you will be passing the ID so question mark ID is equal to editing user ID we need to pass the ID right here so ID and then the method here will be put which is for update operation then we need to pass the headers as well which is uh content type uh application SL Json and then we need to pass this body as well which is json. stringify name email that's all that's all that we need to perform guys now the update operation will be performing so that's all that we need to do right here and you just need to move this code which is the this set name set email outside side of this if block irrespective of whether we are updating or adding we need to perform this operation so you will just add outside this code right here and also one more thing we need to do set editing user to be null after we are done with updating we just need to update this value reset the value to be null that's all so right here we need to Define this update put operation in the backend API just open your server. TS file and write another if condition this time for the put operation so just before the delete operation right here we have a if condition for the method if the method triple equal to put in that case we will say if the ID is not defined similarly we will return a message to the user that ID is required for update operation for updating a user and here we'll be passing the status to be 40 400 and also pass the headers if the ID is provided in that case we will update the user based upon the ID submitted in the TR catch block so right here we will basically pass the body past request. Json and uh it will basically console log message updating a user so it basically provides us a method which is update one so right here we need to provide the ID and which is actually new object ID then we also need to provide dollar set this will be the actual body the updated object the name of the email that's all so after you do this you will simply return a message to the user json. stringify result and uh status to be 200 and headers you'll pass the headers so headers is important you need to pass headers in every request because if you don't pass it you will get a course origin error so the application is done now guys if you just uh refresh just restart your application after you make the changes npm Run start so if you want to change the value click on edit change the name property let's suppose update you will see that the name has been updated and it has been reflected and if I check the database as well the name has been updated to Gotham so once again if I want to edit this value change the name and the email as well click on update so both the things are have been updated if you see in the database as well you can update delete add new entries fetch all these things you can perform guys so this was a user cred application that we built inside bungs and reactjs it's a full stack application and uh thank you very much for watching this video please hit that like button subscribe the channel as well and if you need the full source code of this project with full documentation of and support from me the link is given you can directly go to proc Cod store.com and purchase the full source code and I will be seeing you guys in the next video Until then thank you very much

Channel: freemediatools

Views: 106

Keywords: freemediatools

Id: iAnCsTzkewM

Length: 75min 50sec (4550 seconds)

Published: Sat Jul 06 2024