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