How to Build A Complete MERN Stack Projects with Dashboard, Admin Panel | Part 6

👉 Learn to How to Build A Complete MERN Stack Project with Dashboard and Admin Panel | Inventory Management System

This tutorial series covers creating a fully functional restaurant site using MongoDB, Express.js, React.js, and Node.js. Features include seamless frontend-backend integration, Firebase authentication, JWT token access, admin panel, payment processing, image hosting, and online food ordering.

⬇️What covers today:
1. Inventory Management System
2. Upload Products
3. Manage Products
4. Edit or Delete Items
5. Backend

🔧 Project Main functionalities:
1. Frontend and Backend Integration
2. Secure Authentication System
3. JWT Token Access
4. Admin Panel for Management
5. Payment Processing
6. Image Hosting
7. Online Food Ordering System
8. Order Management

🚀 By the end, you’ll have a customizable, feature-rich restaurant website. Perfect for both beginners and experienced developers. Stay tuned for the 6-7 part series. Subscribe and share with friends! 👨‍💻

🏷️Images & Source Files:
1. Github Repo(Images & Figma): https://github.com/mdalmamunit427/complete-mern-project-resources-part-5.git
2. Complete Source Code: https://www.buymeacoffee.com/aspiringdev/e/196925

Note: If you have financial crisis and aren’t able to pay only $2 for the source code, you can contact me with a valid reason. (with a mention of why you need this code). To get this code for free, you must have to leave a comment on this video and please like and subscribe to my channel.

🏷️Related Video:
Previous part: https://youtu.be/stFYvQoV8XY
►Complete PlayList: https://www.youtube.com/playlist?list=PLlW1xskDb97LUSanCCOObbt9Mmw8eoabr
Part 6: coming soon…..

⬇️Popular Playlists⬇️
1. HTML CSS Projects for Beginners: https://bit.ly/3JRCJ0D
2. Bootstrap Tutorial for Beginners: https://bit.ly/3IiaF5L

❤️SUBSCRIBE ► https://bit.ly/37Txw8d
►Subscribe and hit the notification bell! ► https://bit.ly/37Txw8d
❤️Facebook ► https://www.facebook.com/MBroMedia
🔥don’t click this link ► https://bit.ly/37Txw8d

► You Can Share your Ideas In this ❤️Comment Box❤️
► For copyright matters please contact us at: help.yourassitant@gmail.com

❤️Search Me In Google ► Md Al Mamun

🏷️ Related Tags: learn react js,personal portfolio website,react js crash course, mern stack project,mern stack,mern stack developer roadmap,mern project,mern stack projects,mern stack full course,mern stack tutorial,mern projects,mern projects for resume,mern stack course,mern tutorial,admin dashboard mern stack,mern stack crash course,how to build mern stack website,how to become full stack mern web developer,food ordering app react js mern stack,food delivery website using mern stack,mongodb react,tailwind css,express js,react js

Hello and welcome in this video we’re going to work with part six and in the previous five parts we have already done our authentication system our admin dashboards and uh actually to this part is also a features of admin panel and that is about Inventory management

System so let’s uh log our dashboard so to log to our dashboard we’ll simply type dashboards so here you can see when you type dashboard s dashboard then it will redirect to our login page if you try to access to others admin features for example dashboard SL users or something

Then still you are in the login page so without uh log to your dashboards you cannot access the admin features that’s the top level of security so here let’s log to our admin so in this projects I I am already an admin so I am trying to log in my

Account so from there you will see there is an admin dashboard so this is the admin panel so dashboard from here we have already work with our uh users you can just Define any admin or you can just delete admin it’s up to you as you

Are a top level you can see this is my email and this is the admin rle so I am admin and I can access this so if you are not admin then you cannot have access to this dashboard okay fine what we are going to do in this video

Actually in this video we are going to do our inventory management system that is we will add our menu item you can see I just designed a minimal uh form here to upload products here we will upload our menu items and then we will have manage sorry we will have manage items

Here you can see we have all uh manage items and perpose it will show 10 products and if you just hit this next then you will just see the menu items has changed and you can just go at the last phage who in the last phase you can see uh the next

Button is disabled that means you are on the last phase if you go back then your previous page look so from here you can edit any products so for example click here then you can see the product name by default you can change it or you can change

Price you can change category you can change your recipe details you can upload an image for example you can see you can upload image by this way or you can just update products but before that let me add a product so for this we are

Using some uh text from Ms DB it’s very popular platform to uh collect and pH data so let me just uh insert a p salot so here let me copy it and for the re name I’m just typing here but before there let me open our websites again that would be Local

Host this and now let me go to the menu sections here you can see uh the first one is mini cakes and here we are going to uh insert this and then let me choose this is a salad and then price is maybe uh $28 and maybe we can just choose a

Simple bio so for me maybe I just simply just keep it there and then you have to choose a product image so here you can see this image I have already download that image so that’s why I will choose here you can see potato salad I am just

Uploading this image so okay fine the image name is here and now so let me again and now if you hit add items you can see a uh a popup is there and the items uh is already done so let’s check if you refresh your menu

Page now you can see potato salad here it says descriptions here and maybe uh here is the prices you can just add to card if you want so no mats uh so this product is uploaded let me show again let me upload another product so that

Would be this one for examples so this is recipy name choose uh a category just choose price for example this price is maybe 34 and then you can just type any bio then choose an image for example this is soup and add items okay look this is working and let’s refresh our

Projects so here you can see this is fish soap and the price is here and so uh you can upload products so now the next option is how you can manage it so for to manage it you have to go to the manage items Tab and here you can see uh

The latest updated to products are here let me just edit our update a product first then we will just simply delete that so firstly let me update this one so this is the first one click here you can see here is a tab to update so click

Here then you can see by default the recipe names category prices are shown for you so you can just visualize what you keep or not you can just let me remove this one and let me Define it two and here we change it the category for

Example let me just choose is to popular and let me choose the prices maybe it’s $50 and here I think it’s okay now let me upload in New Image for example what if if we upload this image for now so okay fine now if I just update items then the items updated

Successfully and here you can see now the fish sh uh is now two here you can see this is two and the prices is here that means updated let’s check here so before that it was this name and if you refresh now you can see it’s updated

Successfully but what if if we want to delete an item for example let me delete this one this one or maybe uh we can just delete the third one okay let’s try so if you hit delete button then it says are you sure yeah I want to delete or you can

Just cancel if you cancel nothing happens you can see but if you just choose yes delete then it’s deleted and you can see the items has gone so you can just delete these items also the first items you can see the first items has gone and it’s very smooth you can

See um automatically it’s ref and the data is refreshed so that’s what we are going to do today uh we are going to implement our inventory system okay that’s fine so for now let’s um go to the projects folder and open our projects on vs code so for this

We will have the projects on projects folder and there part five so open this one and and this is our dedicated folder so okay uh we’ll open it on vs code so that’s why uh I just open it on commments and simply type code dot to open it on vs

Codes so you can see this is uh the projects we are working with so if you have this you can simply go to gab let me show you and then projects I will provide the link in the description so don’t worry you can just simply access this git

Repository so here is the specific git repository you can just clone it or you can just download this and use it so after downloading it uh it will be a g folder then uh you will unzip it when you will unzip then you will see this

Type of folder so you will go inside this folder then here you will open a terminal and then type code Dot and press enter then it will open on vs code like this so so what we will do firstly uh when you are working let me just close all

The terminals okay now when you are here what to do firstly you have to go to the a specific folder directory this is for client this is for Server so we have to go to the uh projects folder the first projects uh so the client s so that’s

Why we will type CD that means change directory and that is Foody clients so so let me Foody client and press enters okay now we can see our project is inside this directory that means Foody client folder so here firstly you will just command npmi that means or in you

Can type npm install it’s up to you so at the very beginning you have to install npm okay then next you can run it npm run da this is the command so npm run it okay this is the Local Host URL let me click here and then you can

See the project is running if you see a blank page here let me show okay okay this project is uh there so if you see blank page here what you have to do if you have to go to the uh foodie clients then SRC then Firebase

And then fire. config so if you see a blank page on there after cloning this projects then you have to just edit this page you have to set up Firebase configurations and then you have to set up this so this page actually I shown it in previous video so if you

Are not sure how to set up Firebase for this project then you can watch that video okay that’s the uh opening you can see uh this is our client site and here if you just try to go to the main P then you can see no products is there

Because our server is not running so let’s run our server so for this this is on Terminal our client site is running here we will create another terminal so that’s why launch profile there is Arrow then we will choose G batch or something I love G bash so I’m choosing G

Bash then for this you can see we have uh backend on foodie server so that’s why we will go inside this Foody server so that’s why CD foodie then server and press enter you can see now it’s inside Foody server here uh again again at the beginning you can just uh command npm

Install okay that’s done updated and next what you have to do to run our backend server you have to type npm start it is the common for the back end servers npm inst start then press enter so after running it says our uh project is run on Port 6,000 to1 so

Let’s try it if you go to the browsers and type Local Host 60001 60001 and press enter Then you can see Hello Foody client server so that means our uh client server is running you can see our mongod DV is also successfully running okay so but if you can see mongod is

Connected then you have to do another thing that is uh you have to create a folder and there you have to um just Define your database users name passwords and then uh authentications token so JWT tokens this is access token you need to include this uh three things

But I think uh if you have work with me in the previous video you can just understand how to do that okay uh so I’m starting from here we have database set up if you want to get menu datas then you can simply type menu then you can

See all the menu is there okay fine let me close these on these on for now okay so if you refresh now then you can see all the menu is shown so what you have to do you have to just go to the dashboard so that’s why click here it

Says back to the home why actually these users is not an admin so that’s why when someone who is not an admin it will say you have to go to the dashboards or to um so let me just log out so I just log out and try to log to the dashboard so

We’ll type dashboard here we have to log in maybe let me try with our Gmail accounts here let me choose my accounts close this and now this is my profile and maybe we can just go to the dashboards of we are not also an admin

So let me Define me and admin so let me go to the mongod so firstly we have to defend admin I just forget which account is used for the admin okay log to our mongod accounts I’m using my Gmail accounts to login mongod you can just uh create

Custom accounts no matter using your Ed email accounts okay that’s fine from the beginning we have to choose our projects that projects was D Mo food de C so this is the projects I’m selecting so this is our specific mongod projects so from this we will go to the browser

Server and then this is browsers Collections and here we have users you can see this is the users and we have already seven users but at the end you can see this is my email I just created an account right now and the rule is user so that’s why

Uh when I’m trying to access here it says back to the home you can have access to the uh database so let me just make uh me and admin so that’s why we will rule the edit the rule and here this will be admin okay that’s fine and

Update okay updated now if you just refresh it and just try to go to the dashboards then you can have access to the dashboard so if you have access to the dashboards then you can see we have dashboards this is empty we will Design something there

But before that at the beginning we have some users here you can see we have some users we can just uh Delete any users let me just delete this on so let me click then the one is gone you can just delete this one also that’s gone so this functionality

Is working but uh today we are going to work with ADD menu and manage items so for this when you click this on then it say it’s dashboards it say it dashboard so it’s not redirecting to a specific page so that’s why will’ll fix that so

At the very beginning uh let me open to the clients Foody clients and from there SRC folders and here uh we have to go to the layouts and then we have dashboard layout so at the dashboards layout you can see we have drawers we have something here we have dashboards every

Link is on dashboards so uh the very first thing is we have to Define when someone click add menu here we will Define it will redirect to a add menu page so that would be we will just simply Define add menu okay now that’s fine let’s back so

If you hit add menu then you can see this type of your because we haven’t create any page uh that URL is that on so we have to Define and Route and a page so that’s why uh keep it there we will uh create an page so inside this

Page go inside this page then dashboards then admin inside this admin we will create a new page so the page name will be something like add menu page add menu. jsx so it’s jsx sytax and here RFC to get a react Arrow functional export

Component so add P so now we have to set up a Brower so that’s why let me go to the Brower router so here this is router and inside this router we have router. j6 so here we have def users and after this users we will take a comma then we

Will take parenthesis inside this we will Define path the path will be you can see this path add menu path so we’ll copy add menu and then simply here we will paste it there and after then we will define an elements so the elements will we add menu so let me

Angle bracket add menu please so now let’s the magic so when you are on users okay that’s users when you are hit on this add menu then it’s add menu you can see the page name is here that means uh there is no error right now so if you

Have this then you have to design this type of thing here so we will just design this type of form here on on this page and right now our add menu page is empty and we have only this text so okay let’s try to do it so here simply let me

Define a class name and we’ll Define w full for now and we’re using Trin CSS as you are going to know that and here we will just Define a custom WID and that would be a Max width so something like 870 pixels and after then we will

Define PX4 MX Auto okay that’s fine let’s check and it’s still fine okay so to create this type of form what you have to do you have to go to the day we’re using day so that’s why we have already install that c components and

From here can see there is where is the form link alerts and this input file here you can see find form so input text input and here you can see this type of form is there uh we can just take this type of form maybe this one is okay so this

One or this one is okay uh with label so we can just collect any of this form okay but before that we have uh a header you can see here we have a header so let me copy this text and instead of this simply let me Define a

H2 tag and then paste it there and here we will Define class name that would be text to XEL 2 XEL font semibold and then uh we’ll simply Define margin top and bottom that would be four okay fine and simply here we will take a aan tag

Then paste it there and we will simply Define colors so text green so this is our custom color okay that’s fine now he can see the text is done then we have to create the form so for this actually here under this is true let me Define a comment so that is from

Input or this is from Simply from here okay fine then we will take a new de inside this deep we have the form but let me check here we have label okay fine we’ll copy this label and we will take a form so inside A4 RM so that is

Form and we don’t need actions so that’s why we’ll remove that actions and then inside this form actually we’ll copy this form we’ll copy this form so let me copy this on and simply paste it here uh paste it here so if you do that so let’s

Check uh here actually we can just keep that at the end so here you will see this type of thing but maybe we can include uh inside a dip let me cut it we will just take inside a dip and then paste it here we will include this class

Name with a class name that would be from control from control and that would be W full and myy 6 that means I’m just adding extra margin to the top and bottom so that’s fine that uh that that’s type of thing and here what we will do

Actually uh let me remove this Max okay that’s fine oh I just did a mistake we don’t need to do that first div is already done so we don’t need this so when you have this form inside this form simply uh let me copy this whole thing and

Simply paste it there we don’t need label we will make it a new div actually okay that’s fine we don’t need it to Max WSM we will delete that so let’s check it now you can see we will have this type of thing we don’t need this level so that’s

Why uh we will remove top right level no we don’t need that so remove that then we will name this is this will be uh here we’ll just make a customizations that that will be label okay okay fine and here we’ll name this will be R

CP name and we will include a AAR sign so that’s it’s required and we don’t need this level actually we don’t need this level so let me remove that so if you do this then you can see uh recipe name and this is the form similar like this but it will have full

Width so that’s why what we can do we can simply uh remove this Max W so let me remove that and now you can see the form is full width and you can see this type of thing and this is recipe name so instead of type here we will

Include recipe name this text actually let me copy this name okay fine so that’s fine recipe name then we will need this type of True Form so that’s why we will take a new div inside this div we need a select this type of selection so that’s

Why uh where is this type of sele CS so maybe Tex toggle select okay there’s some select and here you can see this type of Select is there we need this type of Select we can pick these on no backgrounds so let me text so white backgrounds so we can choose this or

This one with border or you can choose this type of thing okay let me choose this one we will choose this on so inside this form here let me second rule second second row so here simply will paste that let me just change it so the

First div will be let me cut it and this one will be label and this one will be deep okay that’s fine so for the think is here you can see we have this type of buttons and we don’t need this label text so that’s why we will remove the last level so

Here is the level and here uh we don’t need the bright level so that’s why level text remove that and simply now this type of thing here what we will do we will just simply type chose category and that would be a strike so the category will be something like here

We can include it just let me simply keep it category and here we include the first one will be select a category okay that’s fine so let me check here you can see by default select a category and then there are some options and if you check here the option

Is the same options that we have menu so that’s why we will open on menu do zon so here we will have category we will copy this category so that would be specifically the same the first one will be something like here will be a value options so we’ll

Include a value here and that would be same so we can just simply just Define a string the first one will be salad and here we can include that would be salad okay then the second value so for the second value maybe the second value

Is p so we can simply just copy the name from here so let me pza so why we are just copying from here so to ignore the spelling because we will uh we will filter based on this so that’s why I’m just specifically copy that the second one

Is pizza and the value is obviously value p and and we can just Define capitalized so it’s no mats okay fine the pizza is done then the next one is soup soup so this is something like soup we can just simply copy this soup go back to the add menu sections here the

Third one is soup and that would be value so okay let me capitalize it after then after soup we have desserts you can see we have desserts desserts so we’ll check have to check here this is deserts actually we’ll copy this back here the this one will be desert and the value will

Be deserved and after then we will have drinks so let me search drinks so this is drinks so look this is plurals if you are not careful here then you will make a big mistakes and then uh your filtering options will be not working properly so that’s why I’m just

Copy pasting here so that would be drings after then maybe we can simply Define another option so that would be popular items so if you search popular then you can see this tag so we also include this one here so this is popular and this is popular we’ll keep it capitalized so

That’s fine so let’s check what we did we can close that we have defined a select options then uh include the select we have some options so let’s check so here by default this is okay you can just choose salad you can just choose Pizza you can choose soup you can

Choose popular so no matters you can choose any of these okay that’s fine so here uh we need some space so that’s why uh let me add a comments this is cat Gories okay we can include we can just remove this one we can just simply include uh M M6

Okay that’s fine now you can see this uh this is full width but uh actually we need another field so that is the similar Fields like the first one so that’s why we can just copy the first one and then after this we will just Define it price

Field prices and here we can keep it there so if you do this then you can see instead of price field that would be sorry a recipe name that would be prices price and here it will be type number so that no one can input text actually so that would be number number

Type okay and here we’ll just Define price okay so let’s check here you can see you can type any text here you have to type numbers okay so number is there and what we need to do here you can see this is Side by Sid and so I already did that

You can see we have take it inside a div sorry inside a div you can see here we have a deep and inside this deep we have prices and categories so that’s why we will Target this and then we will make it Flex then we will make it item

Center and then we’ll simply Define what we will Define we will just simply Define a gap or something so let me Define a gap for okay let’s see now you can see there are some Gap here so if you window spect is right now it’s fine you can see everything is

Absolutely fine so okay fine so this two field is done then next field is we need a text area so here you can see we have already text area tab so here you can see this is text area Tab and you can choose this um level so that’s why we

Can just simply copy this and again after this second row we will just simply third row third row and I’m just commenting because it’s very uh efficient to do comments so let me format this code we need to card this instead of we will have deep this and then this one will be

Level okay so we don’t need the last level that’s fine then uh what we’ll do let’s me check so we don’t need this leveled all text and here we will Define VP details details and that would be an stri sence so you can just um not include strike science if you don’t want

So then that would be recipe details and this is similar like this one here we we can just include tell words about your recipe okay that’s fine uh you can see here we have tells the words as uh let me include tell the words recipe okay that’s fine and that

Would be level and this text area that’s fine so after then we will have a file upload system so that’s why we will just take this so if you check this file input then you can see this type of file input so we can choose obviously this

One if you hit then it will let you to choose these files so that’s the thing we can just take this so copy this again copy it after them we will have row four so fourth row and then we’ll simply paste it there again we have div here so that is div

And the second div will be level I’m just matching the semantic tag so nothing El we need to delete this level let me delete that and here we also need to delete that and for this we will include that would be so let’s check it maybe uh there we

Didn’t nothing label so that’s why okay but I think it’s okay let me just check that so level similar level maybe this is the level okay so we had we don’t have bord so we can just remove this border or something file input okay this type of

Thing uh we don’t need this level actually let me delete that also we’ll imp uh we will just remove that one and here we’ll divide m six as we are just defining at here we also have M 6 so everywhere is my6 actually so that’s fine we also need to Define maybe

We just Divine it okay that’s fine okay there’s Mass Gap but maybe we can just remove it remove this cap actually here is m Gap so we can from the remot details maybe it’s on third low so this is detail so we can just remove that okay let’s check okay that’s

Fine so and now lastly if you hit then you can see you can upload an image okay now you can see you can just upload this type of image okay that’s fine then we need a button so this type of button that’s right after this div we will have

Bottom and then the bottom will be add items item and here we will Define class name the class name would be Bon button green oh sorry byy green actually that means our button color then we will have text white that’s fine we’ll Define PX that pading to the left and right that would

Be six okay so let’s check the add items and we need a icons here so that’s why we just uh import icons so let me just if a uten s something like uten s this type of icon from react if icons so we can just import

Frea icons and then maybe this one is okay then you can see this type of icons is there uh we can just move it to the end so if you just simply card this and just add it here nothing changes must now you can see the icon is there

So is icon so our form is created so let’s check um okay let’s uh add add our integrate ours so react from Hook forms actually it will just simplify ours projects we have already installed that hook form we used that now uh actually let me just check the get started so

From here you will see we can choose we have to include we have to import react from Hook forms fast so we can just import this let me check this way or this way we can just simply do it any way or you can just click this

Qui start so we will CH choose these JavaScript format and firstly we will just import this react hook form at the beginning of our project so we have included then what you have to do inside this functions we will just simply can copy these three lines actually without knowing just copy this

Three lines and then paste it there so you can just formit this code we don’t need um from Estates we don’t need to watch so remove us you can remove this on also then we can just let me just make it simplified in one line so that would be something like

So after including this two line what we can do we can actually uh just add an handle submit on your form so we’ll copy this thing and this is form and we will include this so if you just do this then you can see something like this so what you have

To do here we can just take a parenthesis and include that so nothing changes so let’s check if the data is captured or not so if you inspect uh Let me refresh here we are getting a default value option so that’s is a warning actually it’s not an error but let me

Fix it it’s from second row and that will be for categories so here we have selected this and we will just include a default value so default value will be default or something you can just simply just Define any name here default okay nothing changes now if you refresh uh it’s not gone

Why uh okay uh it says you have to remove this selected so that’s why let me remove this selected okay okay that’s fine uh okay let’s try to check if the form is working we can just simply Define it oh actually what it happened it the first one will need a value so

The value will be default we don’t need to Define defaults here okay keep it there so no problem so now let me refresh okay choose category okay fine so still now if you just try to submit this form let me choose a category a price maybe some words you can just

Upload an image and then if you submit buttons then you will get an empty Arrow why actually we didn’t include this value we have to Define this way we have to different to register it so that’s why we will just simply copy any of this you will just simply do this way

Actually copy this thing if you make sure it’s a required value so okay let me copy it and from here at the first one so this is the recipe name this is the in inut field uh so after this after this input field or this you can simply

Include that and that will be something like the first one will be name it will be similar to this one firstly we will have name so you can make sure this name and this name is appropriate so otherwise you will get an error so now

We just add this on the first field and try to submit it again so let me uh just Define a name for example this name and submit it then you can see name and then this is the value so we will get uh capture all the fields so the second one will be

Recipe this way we can just copy this on and then for the category options here uh where we can include here actually you can see this is the select field and let me just form me it inside this select field we will keep it there and it will be

Category and instead of name it will be category so let’s try to check these two Fields okay we’ll just Define a menu name so that would be potato salot and then it’s a salot category okay now hit add then you can see name and categories salad name is potato salad and the

Category is salad two field is capturing so if this two field is capturing then we can obviously copy this on and then captures the prices so here this is input field and then that would be simply these prices make sure you are typing correctly or just copy this so this is prices after

Then the Third one is text area so for the text area and this is the similar one we’ll copy this thing and then this is text area inside this text area we will paste it instead of prices here you can see the name is recipe so this is

The details so here in know state of prices will include recipe okay that’s fine and for the last last one actually here you can see this is the file options and uh we also copy these on and then we will include it this and instead of file it will be image okay

Include image that’s fine so if we have something like this let me refresh it so let me choose po2 salad again then choose a category so that would be salad then prices then potato salad potato salad okay let me upload an image so this is p to salad and then finally

If you just hit this add item then you can see you are getting an object so category is Salah then we have image then we have name we have prices it’s a string format but we need to convert it uh on number for it but we will do it later so

But here you can see everything data the data you need it is there so it’s absolutely done then what actually do actually do if you you have this data then the next option is actually you have to create a servers so where you will just receiving the data that’s why we’ll

Move to the backends right now so okay let me close everything we’ll complete the back ends then we’ll back here okay that’s why we will close the front ends part and then move to the back end so from here actually we will just comp Del

Our back ends and then back to here so if you go through the servers then we will have index. Z here you can see we have already defined our users routes Manu routes so and here three routes we will go inside this menu routes so this is inside API

Routes and menu routes so go to API routes menu routes here you can see our menu routes is there but it’s from uh menu controller so that’s why we’ll open also menu controllers menu controllers the menu controllers is here and we have only one uh thing that is our menu items is from

Slash menu items so that means we are just getting menu this wave so this is the thing and then we will post a new menu so that’s why uh we need to Define another controller so let me add a comments post a new menu item okay here

For this we will Define a variable so that would be post menu items so that would be asnc operations and you must have to uh Define require and response I have talked lot about this prir and resport so that’s why uh I don’t need to explain

It later so at the very beginning we’ll just Define conos new item and will try to get it from body so that’s why required do body requir dot body okay so then what we will do we will Define a Trias block so that’s why trios block will just Define the error inside

This C block otherwise inside this triy block we will just Define KOST can Define results or something and as we are defining a Sync here we need to define a weight and that would be as we are using menu models so that’s why we will just Define menu and

Then to create a new one we’ll just call this create methods and here simply we will pass this new menu pass this new menu so lastly we’ll just send a status code so that would be R do status here the value will be 200 that means success status then we will

Do Define Json and here we will pass this results so let me pass copy this and pass this results so our post menu items is done now we will have to export it so that’s why we will Define a comma and Export it if you can

Export it you can receive it from react uh sorry menu routes and here uh then let me Define post a menu item and here we will just Define router. post ads we are posting data so that’s why from the front end we posting data here we will

Define do slash actually uh that that means we will just PST directly to this field that means our URL will be that menu so that’s why it will be slash and then we will call this menu controller so then dot post menu item that’s done so let’s

Try it with our API so uh this is postm uh this is a great tools to work for pitching or you can just work with your APS here so let me close all tabs and this all let me close all tabs okay fine and here all

Tabs okay at the beginning you can see uh we will post on this specific routes so if you post this specific routes uh so here the routes is there if you hit then you you can see all the data is here so we will also post it so

That’s why we will have local 60001 SL menu and then uh here actually it’s a post method so that’s a post method and inside this body we will just Define a raw data and that would be this one and here what will have let me copy some

Data from here actually we will have a name uh something like this okay we will have a name data and this type of fields okay let me copy all go to back here and we’ll need to Define an objects here inside this objects we will have this

Field we will have firstly name and the name will be maybe ABC Food ABC food we’re just testing ABC Food okay keep that and here we will name it it maybe okay keep it popular and the price let me change this price options the price will be maybe

20.5 okay that’s it and keep the image that one so let’s try to post it so let’s hit this send okay this is here and if you refresh your menu and here if you go back on the bottom you can see ABC food is posted so

That’s why you are able to posting data from the post method so here this is the method this way you can post data but every time you can see your data is gone on the end but at our websites I want to include this data at the forms so here

If you want the latest data will be in inserted at the beginning then to do actually so for this you have to do a little bit task actually you have to modify your models and that would be models and you will go to the menu model so let’s do

That so to modify that the latest item will be included first so that’s why we will go to models and then menu models and here you can see we will have name recipe and that’s that is a model for a menu okay after then you can see this is

Number you will just take a comma and here we will have to Define is create State add so method so that would be I can just search it on internet so let me Define created add mongodb or you can just check that that’s type of thing it’s no

Matters choose any of this here you can see you will find a method so let me this o actually we’ll take this one and we will actually include this type of thing so that’s why here we will have created add and then we’ll simply Define type type will be date

And then we will just Define a default value default the default value will be dat CH now okay that’s it that’s the power so now if you just insert so let’s try to insert and don’t maybe it’s ABC for 2 so here we’ll have to edit actually

ABC for two and let me Define this price will be maybe 50 bu okay that’s why let’s try to post it so that’s why hit the same button can see the item is inserted so if the item is inserted uh along with you can see a created ad a

Time is there so now if you refresh look at the beginning there is this name this menu name but if you refresh oh it’s not not showing okay um actually so let me back there for two Let me refresh it nothing changes why actually it should change let me try

It and here we did everything so created at methods okay it will be an object type would be that and then default will be dead now okay fine everything is fine so let’s try to do each again put and maybe here if you refresh then you are

Not getting data let me check it actually here maybe everyone is theirs so that’s why maybe it’s not showing uh okay so that’s fine so let me check is there any others thing from here we will go to our controllers then menu controllers we don’t need to do anything actually maybe this will

Work so no measures so every items is updating right now you can see everywhere is a same time okay but it will work obviously we will check it later again okay uh let me move to the second one actually for this um so from here we can

Just post data so let’s try to post data so for this what we can do actually to post data here you can see our image format is actually these format that’s why we will need to host it to other place where we can just Host this from

We will upload and when submit button is hit it then we will just try to get an image URL like this you can see every time we will have an image URL so that’s why we need this type of URL but here when you are submitting then you will

Get this type of thing there is no URL so that’s why we need that type of URL so for this we’re going to use msbb so you can just use this platform or you can also use cloud rary cloudinary you can also use the this platform it’s up to you you can

Host your image also there you have to just sign up in accounts then you can if you just read this documents you can I actually create an another specific video for this uh so how you can just host your image on cloud un but for this

Projects we are going to work with imbb so at the beginning what you have to do you have to just log to your records you can see I have just created a profile you can just just let me sign out you can just back to there so you will

Search image BB you can just simply search image IMG b b okay so you can see this is IMS BB code there this is the websites and from here at the beginning you have to sign in so that’s why click here let me log in oh maybe sorry I’m sorry so I forget

That uh let me try to with an accounts maybe I am just trying to working with Facebook okay okay that’s fine so I’m loging there so at the beginning you will are here you can upload directly image from here and collect the URL like

I did here you can see I have this URL so if you upload here any items then you can upload but we will do it bestas way so that’s why we’ll just go to the API sections and here you can see we have a API key so we’ll use this API key to

Host our image okay that’s fine so add the beginning what you have to do let me close this menu.js and here this controller uh we can just keep this controller so okay let me close every uh thing from the server we will open the uh clients

And from here we will go to the pages then dashboards then admin then add menu so this is the specific page we’re working there so here actually we will get the image so if you just try to get images for example what we can do firstly we will

Just copy this API key we will just specifically copy this API key and we’ll go to the Dov file so local env. loal file and here we will simply include invite underscores then we will just Define image underscore hosting hosting okay key and the key will

Be this value okay we can just make some Gap here so to get this image uh to get this key actually firstly what we have to do here actually we will just Define image hosting key this is a comments after them uh let me con IMS underscore

Hosting key and here uh we’ll simply define import do Meta Meta dot en EnV dot then that this name so we’ll copy this name okay paste that so if you try to console log this image hosting key then here actually you can see the key is here

Actually so we are getting this key if this key is you have this key then you can see uh let me close you can see this is the methods this is the way and this is the curl you will just post method here and this is the

URL you can see you can just copy this URL from here and then let me comment that we just def conhost image hosting hosting API and that would be here we simply Define a template string and paste that we will paste our API key here so that’s

Why uh after this equal sign simply let me clear that we will just Define a dollar sign actually we using template string and we will include this image API key inside here so if you hit this we will just host our image to this specific URL okay that’s

Fine okay let’s try to do that inside this as sync actually we can just Define it asnc functions nothing else so let me comment that and here we’ll Define const image file equal we’ll just get image dot look we have data do image and the image will have the

First value so if you just check here actually at the beginning you can see if for is maybe let me submit these on ABC a post price okay then hit it okay I just uh console log out so let me just console and let me hit again

Then you can see we will have image then uh it’s the value one so that’s why I just simply defined image and then data inside the data after data we have images you can see here after data we have images and the array is the first array okay that’s why we Define this

After then we will Define conhost hosting image and here we will just Define a wa and we will call exus Public exus public we’ll have to import exus so conos exy o public then we will just call use ex use exuse so let me just open the hook use exuse so exuse public

Equal use exuse public import that okay that’s fine so here we will call this exuse public do Post method will posting this image data so that’s why we will have post method then we will Define this image hosting API so this is the brows and after then we’ll Define the value

Our image that will be this image file so copy this image file and then simply uh to hosting form data actually to hosting image hosting image or uploading image uh we can just simple uploading Ms file IMS file so if you just do that then uh let me just check em DN website

So here you can see this is a data if you go a little bit then let me check how you can do that actually maybe here we have to app in child we’re not getting there okay maybe we can just check the second one maybe here um go little bit

Down okay now no measures if we not found it’s okay we actually include a headers here actually we need to include a headers hedgers maybe we can just search this type of thing can check a stock overflow maybe where is the hedgers also not getting okay no matters I’m just uh

Trying to show you how you can do we Define headers here and then we’ll just Define a thing here okay sorry again firstly we will have to include a Carly Braes and here we will have headers and then we will simply take an object so that would be we will def content

Type content type we can just uh Define it a small later it’s not mandatory but you can just do it and here we will define multiart multi part slash form data uh maybe here maybe you can see multi parts so this is the content type actually there but I can carefully send

That so hard the error actually maybe let me check it so maybe here is there any eror so let me type cards so what the ER actually I can STS so let me just back up sorry that would be H let me try to do it we’ll just try to get

This that use exuse public okay that’s fine import that after then we’ll have this oh sorry I just included on that field so I’m sorry extremely sorry can you understand what the error was actually I just include everything inside this Fant so that’s the ER so let me import conos exuse

Public exus public equal use exus public import that call it that’s fine after then after this we will defend conhost uh hosting image hosting IMG for shorts and then we need to Define award then we will call exus public then we’ll Define the method the method will be post and here uh

First we will have to define the URL so our URL is this one we’ll Define the URL then we will need to Define what to be post so this is image data this is our data after then we need to include headers so that’s why we’ll just Define headers and

Headers will have this content type so actually you can just copy this content type okay so let me Define content type and that would be this actually multiple data so you will just pass this okay so you can just uh small size it okay that’s fine so if you

Do this next what you can do you can just console log this if you are getting data so hosting IMG okay okay let’s try to do it so from here so let me clear wall let me Define ABC or something okay something then we will just upload this image okay fine this is

Okay then see this add item here you can see a data is console logged here inside this data we will have data inside this data you can see delete URL display URL that means this is the URL we can just check oh sorry we also we have to remove it with quotations

Mark so you can see the image is here and this image will be available for 60 seconds so here you can see uh we defined the expirations it will be 60 we can just remove remove that so we don’t need to expire so we’ll just remove that and we also remove the dollar

Signs okay that’s fine so then if you just trose this way then you will see the image is there okay we are getting the URL if we get the URL then you can just post the so that’s why after this hosting data URL what we can do so here actually we

Have to post data so if the hosting uh so let me check so when the success status you can see data do success if hosting will just conditionally if the image is not there we’ll check if the image is not there we don’t post it so that that’s why hosting hosting

Image do data dot success so maybe we can just check success so if you the data posting is Success then we’ll simply let me check the data first okay uh then we’ll just include that again so let me check it again I just want to confirm everything so let me

Hit then data success you can see the data is Success we will have data and inside this data we will have display URL and this is s okay that’s fine so we’ll check data if we’ll check if then this hosting data do success you can see this is the

Success status so if the data do success then we can do something let me comment out this one so if data do success then actually we will Define menu so that would be menu item menu item you can just Define new menu it’s no matters menu items so here we’ll

Create an objects let me format this code the objects will be firstly every item will have a name so there a name and the name will be inside this data you will receive an object so that’s why data do name after then we will need to Define category you

Can just obviously check it so this is where is the data so here you can see name we will have category so the category will be data dot category then we will have after then after category we will have prices we’ll have prices equal data dot prices after

Then um s we can just move it in a parse format so parse float actually so that that would be numbers so we’ll past inside this after then we will have VP that means details so here the this one fre CP so recipe will be data do recip after then we’ll have

Image we’ll have image let me copy this also image and the image will be this hosting hosting URL dot DOA dot data then display URL you can see here actually you can see data do data then inside this data we will have a display URL display URL so right now if you just

Console log CG this menu item then you can understand okay let me okay let me check it let me check ABC data choose a category price ABC then choose a image for example this image and then hit add menu here you can see uh the perfect formats this is category this is image

This is name prices everything is and then price is now uh this is the numera format and if you try to go to this URL let me try to go this URL you can just close everything it don’t need that so let me try it from here we don’t need

That quotation mark and the starting quotation mark If you hit then you can see the image is uploaded so this way you can upload this image if the image is uploaded you can create a menu then it’s easy to post it so that’s why we can just post it we’ll

Just post menu or something menu item here we need to we will have an another that would be secured so we will have another uh hook use uh hook use State hook so we’ll use this hook because uh this hook change a token to verify the token actually only

Admin can verify this token so that’s why we will use this hook so from here what we will just do can see exuse secure we will copy this and we’ll Define a variable so con exuse secures and we will call use exuse secure methods okay fine that’s it and here actually we’re

Defining a variable we will call exuse secure exuse secure then we will need to Define method so that would be post method so that’s why we will Define post method similar like the above then here actually we need to define the path the path will be/ menu actually there is a

Base path here you can see we have already defined this path and from your here you can see this is the post method this is the full path so firstly as we have have this same path here on this exuse secure so you don’t need to Define

It here actually you don’t need to define the full URL as we are defining is here so that’s why we will just keep simply keep this part slash menu after this SL menu we simply pass the menu items so this is menu items so if you just do that that’s our

Tas our Tas is almost done uh and you can just show a model nothing else so that’s why if you get an status you can just check um menu items dot status code sorry Start t or sorry equal equal 200s or you can just do that later

So no matter so let me check again can simply console log menu item post menu item actually post menu item okay so let’s try to console log so right now we will just Define we can just open the e m DB so here we’ll get some me data M

DB so this is M DB uh uh let me try to post this one we will just copy it we’ll just paste it here choose it a soup so this is soup let me choose a price $20 let me keep this one and now for this okay let me save this

Image let me name it okay fine now choose the image this is the image hit add items look A promise is returned the promise is fulfilled and inside this subjects you can see everything we can see the status code 200 so that means posted if you check your menu

Items you can see at the end so data is posted the data is posted okay fine if the data is posted you can just send and one um can just send a status code so that would be something like uh dot status you can just check a status will

Equal 200s here you can see the status is 200 then we can just Define a uh sweet alert so that would be sweet alert to and and here go to site alert and here uh you can see this type of custom positioning we need this sweet alert

Okay we’ll paste it there we have to import the SW so let me import it first we have to import it at the beginning so installations from here uh let me import it at the top okay where is the error right now so actually we are just doing it

Inside a console log so we have to input it okay that’s why after then we’ll just reset the form so that’s why reset and so maybe the reset is not there let me import it first here we will just call reset okay so if you call reset you can use that okay that’s

Fine so let’s me try to do it again refresh everything now choose another meal maybe this one this on category salad prices will be 30 these on and let me choose the same image it’s no matters I’m just hitting but nothing showed actually the alert is not shown oh actually maybe

This is not not getting what we can do and just remove everything okay that the that is working we can just remove that and here your item is added is inserted actually inserted successfully can show this type of alerts so let’s try to do another one maybe we can

Choose uh this one so let me choose this one then choose this is a uh maybe desert its price is 20 post it and you can choose this image for now and hit add okay the item is successfully posted so if the item is successfully posted

Let me check it you can go back to your homepage then menu page then you can see it’s not showing at the bottom so if you go back to the ninth pce you can see the data is there but it’s not the first phas so that’s why will just fix the

Issues so why the issues here you can go again to the server side we need to fix that issues first we will have to go to the models and here are menu items we will have created ads so nothing problem here okay actually the problem is there

I don’t understand so that is here actually when we are just uh so this is controller when we have the we are getting data here actually we need to include shorts thing so to shorts item we will just Define shorts so the short will be here we will short based

On uh this method so that we are includ included so that would be create create add method so let me check it from the models so that would be create methods and here we’ll simply Define create at and then Define minus value that means uh last index showing F so if you do

This then simply if you refresh this data now you can see the last one will be shown fast and if you actually refresh this page is again and now we can see the last item shown first this is the last items so let’s try again we

Will just do it a real data maybe we can just do this limber so okay P so here let me go there again dashboards hit add menu name here choose this is a uh rice actually the rice is not our list but we can just make it populars

Then we will just Define 45 will Define the same name we need to so copy this image so download this image this is Lim upload this image for now upload this image and now add items it successfully uploaded you can see now if you back to the menu p and

And now you can see the LI item the price is there so everything is showing there nothing M mejor so you can see you can upload items by your functionality by your admin D ports so that’s it so our this section is done now we will

Have to manage items so when we have hit this then it says it dashboard so that’s why we’ll just do that so let me close all the stuffs close all the steps from here so at the beginning we will have to go to the layout so this is the layout dashboard

Layout from here look this is the manage items and here we will have to Define manage item okay we make it popular plural things so if you hit here again then you will get this error so so what we have to Define we have to define a rows first

So let me Define here after this actually we’ll just Define a path the path will be this path manage items and here we’ll need to Define an elements the element will be we didn’t Define our animal sorry animal not it’s manage so items so that’s why we will go

To the pages so the this is where is the pages Pages dashboards admin and inside this admin we will have manage item or menu okay let me manage items. Z6 r a f c RFC okay react functional components and we will just insert import manage

Items here so okay that’s it so if you do this now when you add menu this page and when you hit menu items then you are in this page so if you are not admin you cannot access that features okay that’s fine so what to do actually here we need

To Define this type of that’s log out so let me check it the session is expired try to log in your accounts then back there do boards manage items so we will have this type of manage things actually you can see we will have all data there so that’s why we will just

Design our these sections so at the very beginning you can see to get all menus we can just make a hook actually we can just make a hooks first so how you can do that you can simply uh here you can see use cards we can just use menu hook use

Menu hook do CSX we can just create this hook first and let me Define RFC and here what we will do uh we call KOST exuse public so let me exuse public this one and we will call this so con exus public and then we will Define use exuse public use exus public

Features after them what will do so we will just simply can you remember we use we are using exus so go to the the exus https the official website so get it started from here so look here we we used exuse inance so this is the way oh sorry sorry

We are not there we need to go to Tang St 10 stack query so this is the site so get started then here you can see we will have qu starts so this is the way you can see uh where is the functions maybe ah query functions here is the query functions

You can see we can you use use Query and then we need to define a query key we need to define a functions this way okay that’s why we are going to do that so here we’ll Define conos and then we’ll Define an object so here after then let me

Use use Query hook first use Query use Query not queries it’s use Query inside here we will just do something we’ll just do something okay no measures so add the first here what we will do we just Define data the data will be name menu so then it will be

Empty of array first empty array first then after that we’ll check is spending and then is spending the name would be loading loading after then we will have refet refetch okay we will D structure this three thing from use Query after then will just Define query key you can

See here we will have query key so we will just copy this and then you can just simply paste it here instead of to do we simply Define we don’t need to Define this we will Define this will be menu okay after then we’ll need to define a query functions you can see

This is a query functions so we can just copy this query functions paste it here so what you can do this is a Asing functions no measures so here you can just simply Define this will be race then we don’t need to fix is this way can use

Exus exus public and then we will Define method the get method and here we will just simply Define SL menu actually you can see we are getting menu this/ menu actually so that’s why we’re getting menu slash menu after then uh simply we can just console loog CG race

And and actually uh you can just console log this ra. data okay then we’ll just return this data so R do data okay so after then here you can see this is the return block we need to return something so that’s why we will delete that we will

Return um area so so that would be first one will be menu you can see this is the menu then we will need loading loading then we will need refresh you can see here is the refresh so okay that’s fine so if you uh Define

This now you can use it on your use menu items so here we’ll simply different con menu and what you can do you can D structures so you can D structures D structure from use menu so use menu hook use menu hook just D structure it from there and we’ll destructure three

Things you can see we can destructure the whole thing we don’t need loading so we can just remove that that’s it so if you try to console log menu then you can see when you are this space Let me refresh it and then if you just inspect

Check console here you can see we are getting all the data here is the array all the data from the manage items line six so this is the line six manage items so we are getting data if you have data then you can simply show it no matures so that’s why but before

That uh we need we need this type of thing so that’s why we can copy it from add items you can simply copy it so these on so let me at the beginning copy is on and can also Define the same code at the Top Class name at the top okay that’s

Fine so if you check now you can see it is uploaded item when you hit manage items it’s uploaded item so in state of manage all menu items okay that’s it so let’s check when you hit menu items it says manage all menu items okay that’s

It after then you will need this type of uh table so that’s why we will have to define a table so let me Define menu item table okay you can copy the table from your Tor uh sorry Daisy y you can see if you scroll a little bit you can see this

Is table and from here you can choose this type of table this type of table so with visualized so you can choose this type of table see you can see you can just copy this and after then you will take a new div after then you can paste simply that

Form it this code so let’s check it so now we don’t need this okay so we don’t the need this so let me just close row this fourth low and we don’t need this footer we don’t need okay that’s fine we keep only one row so Row 2 3 4

Delete that okay now we can see now we have on row at the first one we don’t need to Define this we need Define is Hash so that would be top hash we don’t need a check mark so that’s why we don’t need that we simply need number

One so here number one we need image uh so the first one will be image the then that would be name then here we will include uh I item name here the third one would be prices then fourth one will be edit or t will be delete okay now check we’ll have this

For items that’s fine next we need to edit this simply we don’t need to define the titles here so now the titles has gone here we don’t need this SP span and this bracket okay that’s fine okay that’s something and we need exter so that would be we need to

Convert this TD and then we will have another TDM and that would be delete we can simply copy this so that would be delete update okay that’s it now we can see we’ll have image Pro and the Sim this is similar like this actually so if

You have like this you can see what you can do you can need to F data so here uh after this body after this body you can actually face data you can just F menu then we will Define map items then we will get item and

Index index then we will have Arrow then we will take a parenthesis inside this parenthesis we will move this tier okay remove this tier and paste it here so you will get this type of error actually it’s not an error we need to define a key prop so the key props will be

Index and here instead of one we will simply just Define index + one okay now let’s check now we can see we will have totals uh 68 data okay that’s it so in state of this image we will just Define slash item. imsg image and we need to Define

Alt and that would be empty string okay let’s check all the images there can see all the images there so if you have all the images then what the next the next thing is you can need to change the name so here you can see this is the name field and we simply

Define item. name the name field is done then prices options and that would be item to price so you can see this is prices you can include dollar so nothing much so you can see this is dollar and then we need update and delete so we need this

Type of Buton so that’s why here inside this TD uh actually for the button we’ll Define a link components here so that would be link we need to import it from react R and pess the button here we need to define a tool so that would be a uh a slash dashboard dashboard

Slash update menu slash dollar sign items doore ID okay that’s it and here uh inside this menu what we will do we don’t need this we need to define a uh icon so that would be EF edit icons import it from react router Dom okay fine so let’s check it now this

Is the icons so we need to background color so that’s why this is backgrounds so the background color will be bsy War 500 or something now we can can see this is and we need to define the text white so that’s why text white okay now we can

See this is the edit button and now we need to define the delete so the delete button is similar here we will have button we will need to Define if a delete or if a trash icon something like that a trash W icons so import that that’s fine so

Let’s check here this is the button we need to define the colors so the text will be red so this is the red colors so now this is the buttons so the appearance is done now for the next we have to delete items so that’s why we will Define a

Functions at the button so here we will just Define one click click one click functions and the one click functions will have Anonymous functions we will have arrow and then handle delete item here we’ll pass item the whole item so we have to Define this at the top

Otherwise there will be shown an error so this is here we will just find handle delete const we Define handle delete that will be receive items and the parenthesis okay so simply inside here we can just console log item oh God so here is the parenthesis

Okay formit this code so if you do this let’s try to check it you know spect it now here you can see scroll it uh let me just do it on big size so here uh let me just clear all if you hit then this item is shown this is limbo

Fure you can see if you hit the uh ABC items then you can see this is the ABC item food to if you just go back and here if you just want to click this Handcock hand so here you can see hand talk so item is selected but you have to

Define the delete methods so previously we have defined routes but we didn’t Define routes for the delete method so that’s why we’ll back to the uh food server client backends and here we’ll have menu controllers from here we’ll need to define the routes for delete and update so delete a mainu item

So const delete a mainu item will receive required response and here what we will do inside here so so here firstly we will try to get ID so that would be menu ID and here we will just get it from request. params par

Do ID we will get it from the ID then we will have a try Cas block we’ll have try Cas block the case block will be this so paste it there inside this Tri block firstly we will check if there is the menu the selected items you can just see um name it

Deleted item the item we are going to delete and that would be we’ll search it from menu model dot find by ID and delete so here we will include this ID we will pass this ID so if we just get this item then we can just Define it raise.

Status press. a status then the code will be 200 and then that is success and we will Define a Jon and here we just Define a message message the message will be menu deleted successfully okay menu item actually item deleted successfully okay that’s fine but what if if you have haven’t

Find these menu items we’ll check if not menu item we will just send a response to the server so that would be we will just return a status code so that would be 404 and here the message is menu not found so if the menu is not

Found we will send this okay that’s it so our route is our sorry our cont controls controller is done now we have to just add it to our um two hours sorry where is the router so this is routers here we will include that so after then let me

Define delete a menu items we’ll given route router. delete methods so here delete method and we will delete based on the ID so that’s why col ID then we will have a comma we will call menu controller to delete menu items so that’s it so now if this then you can

Just Define this fonted so that would be here when you hit this button so back to the manage items so here we have defined the items we can call this method from the front ends so what to do actually here we will want to show this type

Of aler so let me go uh when you hit then it will ask something so maybe uh confirm so we’ll just want to make sure when you hit there but this button it will show this type of alert so let me show it we have to import this

From switter lot okay fine so now this time if you hit any of this item so let me check then it will show this so there will be to options so yes deleted then when you hit this button actually you will inside this one so if the result is conf

Confirmed then we’ll just Define const bre equal we’ll just call a wa and then actually before that we need to import secure so we need to Define conos EXO secure so where is the uh hook where is the hook ex you secure actually this hook let you pass

Token so that’s why we are using this so let me just uh copy this exuse secure paste it here then we will just insert exuse use exuse secure here okay that’s fine so if you do this now we after this a we’ll call this then that would be delete method so that

Would be delete and here we will just Define the path so it will be template string and the path will be we just slash menu so actually this way uh maybe you can see here menu we will have slash and this ID actually we sorry sorry

Again we will have this type of ID so that was our URL for delete items so here actually you can just simply pass it but as we are using Bas URL here at the top we don’t need to the Define the Bas URL and we want to delete based on the

Dynamic so that’s why we will Define dollar sign and here we’ll have items doore IDE okay that’s it and it’s not a it is not working because we didn’t Define Asing so where we have to Define Asing you can just Define ASN here actually Asing method here so now the

Ear has gone so what to do now so actually after doing this uh you can just re here okay call the refresh here so format this code so if you do this okay let me check now so I want to delete so let me sorry here uh close that so let me

Refresh we want to delete maybe here is some duplicate items so we can just delete this one this is the duplicate item okay let me hit delete cancel nothing happens again hit is delete item deleted and you can see the image is three but now uh Let me refresh deleted but it still

Showing but what happened actually let me check the backends so maybe it’s crashed so it is not there me is not fine so let me check controllers maybe post delete menu okay everything is fine let me check with this so menu items slash here we will pass an ID so

The ID will be the first at the beginning let me we will delete this item or can just delete this item so we will hit this item and here none we’ll just change this delete method and let try to hit menu items is not oh is deleted success it’s deleted successfully

Actually so if it’s deleted successfully then I think it’s working so why it’s not showing Let me refresh it uh is still there let me try to this one not removing H actually let me no spect successfully deleted but it’s not showing actually let me try this

One it’s not showing how actually let me check refet we can include it so let me you know P this delete yes it’s deleted but it’s not heated actually this so let me try to check the r okay so again we can just console log

This menu items at the top we don’t need that so delete the this yes the data is here see status code uh deleted successfully let me check if if FR okay refresh it delete deleted working refit is there everything is fine but what is not showing actually it’s not deleting from

The dash ports so that’s why the alert is showing but let me check send items limber PS you can just delete this one hit item traded successfully send again but it’s not it’s not deleted why actually maybe our server is working fine so let me close our server again clear wall npm start

Again so let me hit again copy this ID then hit item successfully not removing horse the error I can understand maybe isn’t it he it properly Local Host 6,000 uh that would be itm doore ID sorry this will be under is right okay fine controllers I think it’s reest the

Spams ID is passed we can just console log this actually this item deleted item okay just hit again menu I deleted successfully oh maybe I did a mistake so here uh find by ID and delete so that’s fine exuse secure is the method delete so I think here is no problem oh

God that would be this let’s hit again item successfully yes status code successfully everything is fine but why it’s not deleted or it’s not deleted actually we have to inp that we can check here actually still let me check CLG mainu ID okay we don’t need that for now menu Dot

Our seat we didn’t Define a we that would be menu dot find and delete see here would be menu ID so let me copy this menu ID okay so let me know spe it so if you hit again items successfully let me check the console so

Here the ID is there so I think now it will work properly if you refresh then the data has gone the mistake was there actually we didn’t Define a wa here so that’s was the mistake uh and it’s very silly mistakes so let me refresh it now

It will work properly so uh here the two duplicates we can just delete the first one is hit deleted the deleted one let’s try to delete this one or okay delete this one okay the deleted done you can see this is properly working you can delete this

One this is one you can just also delete this one done so you can just delete any of these no me so you can easily delete that so if you can delete that then the last option is we have to update when someone hit here then it will just

Redirect to this space so we will need to define a route for this and just implement the delete option so we can just close everything for now so so that you can understand properly so from here from the route space go to the routes so here

This is routes we’ll just set up another routes so that would be path and the path will be this path you can see when you hit any of this space you will just redirect to this space so that’s why we’ll go we will Define this path and instead of this

Hardcoded ID we will Define slash ID so that would be slash ID and you must need to define a clone here okay so if you define this then you need to Define an elements so that would be elements so the element will be update menu inside this admin dashboards we

Will just create another folder so that would be update menu. CSX RFC as usual react functional export component we will import this update menu here okay fine so now let’s back to the manage items then hit any of this then you will redirect to update menu base so here uh

We will Define a use loader so that would be loader and then we will Define a params here and then we’ll Define fetch p and here we’ll just uh Define a specific ID for example here we will have slash menu items this is our ID oh

Sorry here we will have ID this URL but if you hit this URL you cannot find this but to keep this URL right now you will paste this URL instead of this hardcoded ID you will Define time dollar sign and here you will simply Define params do ID sorry bs.

ID so let me just this is ps. ID here will have an arrow okay that’s fine so if you do this then you can load data from here here so we’ll Define const item equal use loader data and then we’ll Define console log the item okay that’s it so if you now

Check uh sorry here if you check in inspect actually if you inspect then you can see anything actually we didn’t Define as single ID for the uh so that’s why the error so we need to define the single ID first so that’s why we will create our API for the single ID so

That’s why we will go to our um back ends and then we will have menu controllers here we’ll Define get single menu item okay that’s would be con single menu item and here we’ll just def as sync award that would be request and response and here for to do actually

Um at the very beginning we’ll just do the same thing we will just try to get or try to catch the ID so we’ll just try to cat the ID we don’t need to console log at the top we can remove that so after then we will have same thing we

Will just try cast block and for the C block we will have this and add the form block we’ll just Define conos menu then we will Define air and that would be we will find menu dot find by it so here we not finding actually or we didn’t Define equal sign yeah wait

Then we will have menu do find by ID so find by ID and then we will pass this mainu ID so after then we’ll just Define response. 2000 then inside this session we will simply pass this menu okay so if you do this now if you hit to try to get a specific

IDE oh we didn’t uh Define uh any routes so that should be menu routes and here we’ll Define get single menu item so that would be R.G so here we’ll just Define dot do single so what is the we need to export it first to get that so export

Then we can get that from there okay now if you refresh then you will get a specific Ida so if you get a specific ID then you can just show it if you refresh now then you can see a specific ID is there so if you have the specific ID

Then you can just show the ID okay let’s try to show it here that would be upd menu from here we will open this add menu items here you can just completely copy this whole thing and and then replace this way in stage of at the upload you can just Define Update Update this menu items okay that’s fine and we also you need to include this from so submit from and copy everything from here and paste it here okay that’s fine we need to import Sol that from at the top we need to import public we need to use

Form we need to copy this secures okay that’s it now here actually uh we need also update update items so if you do this then you can see here so let me refresh it can see this type of form is shown update menu items and here we need to

Show the default value so that’s why what you will do actually here this is the name field so here we will just Define default value the default value will be item do name so now if you check this can show the item do name you can just Define text color a little

Bit so that would be something like text TR something like 400 so let’s try to okay that’s fine or you can just keep that nothing must bees so 500s no matter we don’t need to do that we can simply Define this value actually everywhere so for the select here we will

Define default value that would be item dot category okay so that’s it here for the price will have item Dot price after then uh here we need items do recipe okay that’s it so now you can see refresh this can see by default it will showing

Thing you can change it you can just show any of this you can change recipe uh you can just to anything so you can also update items this way so no meas so if you do this all of this what you the next what the next is that everything is

Fine so everything is fine the next task is that you have to uh Define a routes for this for the update method so that’s why we will go there and here we will Define a update methods so that would be update a single menu item so we’ll defend KOST update

Menu items we will have request and response inside this we will fastly receive uh we will just get try to get this ID first then we’ll Define uh we’ll just uh try to get a specific ID from the specific items from the body so that’s would be Rec

Dot body okay that’s fine and here we’ll try to get everything you can see we need underscore ID we have underscore ID we’ll just destructure everything from here we’ll have underscore ID we will have name we have recipe we will have IMS we’ll have category we’ll have

Price we’ll have we don’t need to include the CR that but you can just do that no matters so we can just do receive this we don’t need to define the ID also we don’t receive the ID okay that’s fine so after then we will Define a Trias

Block so try catch the catch will be the same and inside this try firstly we will Define conos update menu and here we’ll Define your wa then we’ll just Define menu dot find ID and updates so here we will pass this Manu ID so here firstly

We’ll uh pass some others prop so that’s why we will use comma and here we need to pass these objects so we’ll need to pass these whole objects and then after then we can simply Define another so that would be new new true you can just check by this way new true then

Free run validators so that would be true okay that’s fine so after then so we’ll check if it’s available so if not update menu we’ll do something we’ll just return a status we will just return the same a status as we did return a status menu items item menu not found

Otherwise will send this actually we can just copy it same thing we just same thing instead of this message instead of this message we can just Define update so we can just polarize it updated menu and we’ll pass updated menu okay that’s it if you define it you have to

Export it as we are doing the same thing then we have to include it here so update single items so that would be brouter do Pat we use pass method we are trying to update Min field so that’s why that would be pass methods so instead of single update so would be up

Menu items so that’s it so now let’s check if we can update this way so that method will be patch methods and let me get an ID for a specific the first one this is the ID okay then we need we can just copy the whole object and here inside this

Body we’ll Define draw then we Define this one we can remove all here we don’t need this two thing uh let me update it would be Ram no of two we don’t need to include ID okay and the prices will be 20 let me Define the prices will be 50 and

Here oh okay let’s try to update send it it says an error so what the error is maybe let me check our terminal so here unexpected tokens so let me check it’s patch okay here is the comma let me try again okay that’s updated so if you just check your

Data if you check your data then you can see it’s true and the field is okay that’s why it’s updated so if uh it’s updated then the you can just simply just Implement that so it’s very simple so from here you can see everything is fine after then instead of

This post in state of this post actually uh we simply Define delete methods and then here the router will have a little change so that would be uh we’ll use template string we’ll use template string and the routes will be the same routes we don’t need to include this so

We’ll remove that after then we also remove the hardcoded will use template string that would be item _ ID so that’s it item updated item updated successfully okay so that’s it let’s try to check it so let’s move back manage items here this is two let me hit here we will

Define three the prices will be 55 then we’ll Define it’s a salad we Define is three then let me update image maybe we can update this so that we can understand hit update the item is updated successfully let’s try to check it go back to the menu page and here uh refresh

This m is there have any problem so let me back refresh edit let me remove this on keep it everything image is there updated so it’s updated then let’s try it’s actually deleted maybe oh there’s the delete method is selected it will be patch so that’s why it’s

Automatically deleted I think it will work right now okay let’s try to insert a items so menu items let me insert this items then it will be maybe salad it will be price will be 50 bucks and this is the name and this is the Lim image okay

Update upload a product upload it let’s try to add another product so that would be something like we can just upload potato salot so you can just copy this let’s try to it’s a salad let’s try to Define it um 45 maybe this is the same name and maybe

This is for to salad items added and another items you can just fish sou okay then it’s a sou price will be 100 bucks soup and let me Define it soup so this soup okay hit add items item is added now manage items you can see we have three items and if you

Just take another Local host, 4 maybe okay four maybe and then we will just Define go to the menu okay you can see we’ll have these three items you can just check if it’s it’s also categorized you can see this is categorized also okay okay fine so we

Need to uh edit so maybe we can just reduce the prices so that’s why we can hit edit and here instead of this we can just simply Define it 20 and we also change the image so that would be fish sou so instead of this we can just uh

Want to upload this image for now so if you just hit update it’s updated successfully and then back there you can see the image is updated and the price is now 20 and if you also refresh here you can see the price is 20 and this image is updated but when the items

Is updated we want to redirect it to the homepage so that’s why the next task is we will simply redirect to homepage so that’s why we’ll Define con navigate equal use navigate so we will import it from react router and we will use after it’s successfully

Done we will just simply redirect it to the main so that would be slash so let me check we’ll just manage manace so we’ll just redirected this as space so we’ll Define this uh we can just check it from the dashboard layout so what is the okay this is the Way so that maybe we can redirect it okay that’s fine so let’s try to remove these extensions okay the extension is must big we can just reduce the price a little bit that would be 30 bucks and here we also need to Define it po salad so this is the image and

Update updated and then it’s back you can see the put salot the trace box so it’s working now let’s try to delete on you can just delete this one or that one so okay it’s delete it so you can delete this one sometimes it will not work actually

Uh so if it’s happened it’s actually not your fault it’s actually fault is that uh every products will have not it we just uploaded product so that’s why some products will not work but if you just upload product this way so if you upload this product you can just delete that

It’s there was some hardcoded ID so here on this menu sections you can see uh we have used hardcoded things so that’s why sometime the ID w a mass properly and that’s why the item will not be deleted so I think this is fine so if this video

Is helpful to you please subscribe my channel and stay with us please leave a comments thank you