How To Create Full Stack Food Delivery Website In React JS, MongoDB, Express, Node JS & Stripe

Hi guys welcome back to another exciting tutorial of greatest attack in this tutorial we will learn how to make a full stack food ordering web app using reactjs we will build the front end backend and admin panel with the help of M Stack so let's see the project overview that we are going to create in this tutorial so this is the homepage of our food ordering website Here you can see the list of food items that you can order from this website and here we have these menu if I click on this desert it will

display only desert if I click on noodles it will display only noodles if I click on this menu again then it will display all the food items this web page is completely responsive so let me change the screen size you can see this web page looks perfect in different screen Size here we have the signin button if I click here we will get a sign up form and if you already have an account you can click on this Link login here and enter your email ID and password and login on this web page so we'll

click on this link for a new user sign up so here we will create a new account so let me type my name here then email ID so if I enter any simple password and select this checkbox then Click on this create account button here it is displaying one warning please enter a strong password so let me enter the strong password here then click on this create account now we are logged in on this website now we can add the products in our cart so here we have this plus icon let me click here so

this product will be added if I click on this plus it will increase the quantity and if I click on this minus Icon it will decrease the quantity so let me add two quantity of this product then I will add this product it will be three quantity now we will open the cart page so in this cart page you can see the product image product name price quantity and here we have the total price and delivery charges now we will click on this proceed to checkout button so it will take you to the delivery information

Page where user can enter their name and an address and proceeded to payment page so let me add one address any dummy phone number and I will click on this proceed to payment now it will open the payment page that we have integrated using the stripe on this page also you can see the order information here we have the food items name and quantity let's add the email ID and here We will add one dummy card number then other card information and I will click on this pay button then complete so after successful payment it

will open the my order page where you can see the order details here it is displaying the food details quantity total price and the order status is processing you can see food processing now let's see the preview of our admin panel so let's open the admin Panel here we have three options add items list items and orders so let's go to orders you can see the new order that we have just just placed on our website so these are the order information then delivery address and here we have the option to change the status of

the order we can click here and select out for delivery and if I open the web page refresh this web page you can see the status has become out for delivery like that you can also change The status as delivered from the admin panel and now the user will see the status delivered now again come back to the admin panel let's open this list items here we have all the food items listed on our web page so let me delete one of it here we have cooked noodles in the last let's delete it so that

product has been deleted if I open the web page go to homepage here You can see the last product is missing now we can add a new product by using this add items here you can upload a product image then product name then small description and select the category and price then click on ADD button so you can see the message here food added if I open the front end refresh this website and at the end you can see here we have the food item that we have just added using the admin panel so this

was the Project overview in this video we are going to use react so if you are absolute beginner in react then I will highly recommend you to watch my complete JavaScript course where I have explained all the advanced JavaScript Concepts that are required to learn reactjs I will provide the link in the description so if you are ready to level up your react jss skills make sure to smash that like button hit subscribe and let's get Started right now I on my desktop screen here I will create a folder so let's add the folder name

food Del that is for food delivery now we will open this folder with the vs code editor so I will right click here show more options and open with code now our folder is open in vs code editor now here we will open the integrated terminal using this terminal we will Create our react project to create the react project we will type npm create V latest after that we have to provide the name of our project so here we will simply add front end here we will select react then select JavaScript now you can see

one folder front end has been created now we have to install our dependencies for that we have to navigate to this front end folder so here we will type CD front end and press Enter now we are in the front end folder here we will type npm install it will install all our dependencies so our dependencies has been installed in this front end folder you can see node modules folder after that we will install one package that is react router Dom so here we will type npm install react router Dom so this react router package

has been installed now we have to run this project to run this project we will type Npm run Dev now our project is running on this local server so open this address in the browser so you can see our project is successfully running in this web browser so first we have to clear our default react project for that we will open this SRC folder and here we have the app.jsx file so from here we will clear this file and here we will type rafc and here We will get this snipet if you are not getting

this snipet then you have to install one extension so in this extension you can see I have already installed one extension es7 react Redux graphql react native snipet after installing this you will get this snipet so if I type RFC and select this so our export component is ready now we will open this app. CSS file and we will delete it now we will Open index. CSS file and here we will clear this file and here we will add some CSS for all the HTML elements so we will add padding zero margin zero box sizing

border box after that we will add some properties in the body tag so for this body we will add minimum height 100 VH after that we will add the CSS properties for the anchor tag so for this a tag we will provide text decoration none Color inherit so here we have provided some basic properties for our complete project now we will open index.html file and here we will replace this title so in this title tag let's type foot Del now we will save this project and we will open the web browser so our project is

clear right now and you can see the title here in the browser fot Dell now we will create the folder structure for our react project so here we have the SRC folder we will create a new folder in this SRC and we will provide the folder name components after that in this SRC folder we will create another folder and the folder name will be pages in this components folder we will create all the components and in the pages folder we will create multiple Pages for our react Project so first for our project we will create

the Navar so we will create a new folder folder in this components folder and the folder name will be Navar inside this nabbar folder we will create a new file and the file name will be nabbar do jsx to convert this jsx file into component we will use RC now for this component we will create one CSS file so we will create a new file in this nabbar folder and the file Name will be nabbar do CSS now we have to import the CSS file in this Navar component for that here we will simply type

import and provide the path that is /nb bar. CSS now first we will Mount this snapbar component in the app component so in this app.jsx file we will add one class name in this div and the class name is app and after that here we will Mount The Navar component so we will use the opening Arrow Navar and here we will get this option navbar just click here and this file will be imported here now close this tag now our nabbar component has been added in the app component after that we will open this NAB

bar. jsx file and in this one we will add one class name and the class name is navard after that we will insert the Assets in our asset folder so here we have one assets folder I will provide this assets folder Link in the video description in this assets folder we have the icons and images for our project so we will call copy all these files and we will open our project folder open front end open SRC then assets folder and here we will paste all the images and icons after that we will open the

VSS code Editor so in this assets folder you can see we have inserted all the images and icons in this one we have one assets do JS file where we have imported all the images and icons and here we have exported it in the object format and the object name is assets so when I want to use that assets here we will type IMG tag SRC and in this SRC we will use the curly asses and here if I use assets it is coming here in this snippet And here we will type Dot and here

we'll get all the suggestions that we have exported in this assets. JS file so here if I select assets. logo and save the changes so on our screen you can see we have the Project logo by organizing our assets like this we can efficiently build our project now let me remove this IMG tag and now we will start building our navigation bar so in this navigation bar first let's insert one image and the class Name is logo and in this SRC we will use curly bres and here we will insert the assets. logo after that

we will create one UL tag and the the class name will be navard menu inside this UL tag we will create four Li tags so we will type Li into four so in the first list we will add home in the second one we will add Menu in the third one we will add mobile app and in the fourth one we will add contact us after this UL tag we will create one div and the class name will be Navar right inside this div first we will insert one IMG tag and in this SRC we

will use assets dot search icon after that we will create one div and the class name will be Navar search Icon inside this div we will insert one image tag and in this SRC we will provide assets dot basket icon after that we will create one div and the class name will be dot after this div we will create one button tag and within this button tag we will add sign In so our HTML structure for the Navar is ready now we will open open the web page so here we have the logo and text

and icon in this Navar now we will provide the CSS properties so we will open navb bar. CSS file and here we have the class name nabbar so let's copy this one and place it here for this nap bar we will provide the padding of 20 pixel and zero then we will add display that will Be Flex justify content a space between and align items center now we will save the changes now you can see in the left side we have the logo in the middle we have this menu links and in the right side

we have the icons after that we will add some padding for whole project for that we will open this index. CSS file and here we will add the CSS Properties for this app class name so here we will type do app and here we will provide width 80% margin Auto now we will save the changes so you can see we have the space in the left and right side after that we will add the CSS properties for this logo class name so in this navbar CSS file we will type navbar do Logo and here we

will provide width 150 pixels then save the changes now our logo is set to 150 pixel now we will add the CSS properties for this UL tag and the class name is Navar menu so we will copy this class name and place it here for this class name we will provide display Flex list style none and here we will provide the gap of 20 Pixel and the color of these links will be this color code then we will Define the font size that will be 18 pixel and save the changes now we will open the

web browser so here you can see this is our text here we will add the custom fonts for that we will open a new tab and we will search for outfit font here we will open this link Google font then click on this get font and click on get embed Code and after that we will click on this import and just copy this import statement just copy this one and we will paste it in our vs code editor inside this index. CSS file so add a space here and paste the link at the semicolon at

the end after that here we will provide font family outfit and save the changes now you can see the updated font for our menu Text after that we will add the CSS properties for the right side so we will copy this class name never right and we will paste it here here we will add display Flex align item Center then we will provide the gap of 40 pixels now the right side alignment is good now we will add the CSS properties for this button tag so here we will type Navar button Tag and here we

will provide the background transparent font size 16 pixel then we will use the color and this color code then we will create border of 1 pixel solid and here we will Pro add one color tomato after that we will add the padding that will be 10 pixel and 30 pixel after that we will provide the Border radius 50 Pixel then we will use cursor pointer now this signin button is looking good now we will add the hover effect on this button so here we will use this class name Navar then button tag column hover and

here we will add the background color and this color code now we will save the Changes so here you can see the hover effect on this button after that in this button tag we will add the transition property that will be 0.3 seconds now if I take cursor you can see the background color is changing smoothly after that we will add the underline effect for these menu items for that we will open this navb bar. jsx File and here we will create one State variable to create the state variable we will use const and the

state variable name will be menu and the setter function name will be set menu equal to user State and here we have this option click here and this user state will be imported from the react after that we will initialize the a state variable so let's type Home so we have created one state variable and we have initialized it with home now on these lii tags we will add the dynamic class name so we will add the class name curly presses and here we will add menu and we will compare this menu if our menu

is home in that case in this Li tag we will provide one class name that is active if our menu is not home in that case we will provide one empty String similarly here we will compare the menu here we will type mobile app and here we will type contact us and for these three list we will add the question mark then active class name then colon and we will provide the empty string after adding this when the state is home this active class name will be applied for this AI tag not for the other

lii tags similarly if the state is Menu so in that case the second Li tag will get the active class name and other three will not have the active class name after that for this active class name we will add some CSS properties so open this CSS file again and here we will type navbar do active here we will provide the padding bottom to pixel then we will will provide border bottom that will be 2 pixel solid and here we will use this color Code after that we will save the changes now we will open

the web browser so our state is home so you can see underline below this home similarly if I change it let's set menu so you can see underline below this menu now we will add the logic using that when we click on any menu this underline will be moved to that list so for that we will add the onclick property for all these Ali list and here we will pass one Arrow Function and in this one we will call the set menu function so in the first First lii tag set menu we will provide home

string in the second one we will provide menu in the third one we will provide mobile app and in the fourth one we will provide contact us now we will save the changes and we will open the web browser so if I click on home this Underline is moved to the home if I click on menu you can see the underline on the menu if I click on mobile app you can see underline on mobile app and if I click on contact so our underline effect is working fine now for these Li tags we will

add the cursor pointer so that when we take cursor over this Li tags we will get the cursor pointer so let's open the CSS file here we will type dot Nabar lii tag and here we will provide the cursor pointer now you can see the cursor pointer on this menu list after that we will add the CSS properties for this div where we have added the class name dot we will Design This div as a DOT that will be visual inside the basket so whenever we will add a product in the basket that dot will

be visible if the basket is empty then dot will be hidden for that we will Open this Nabb bar. jsx file and copy this class name which is Navar search icon paste this class here and here we will add the property position relative after that here we will add the class name navbar search icon then we'll provide the class name Dot and here we will add the CSS properties that will be position absolute then we will add the minimum width of 10 pixel minimum height will be 10 Pixel then we will add the background color

and in this background color we will use tomato then we will Define the Border radius that will be 5 pixel then we will add the position top Min - 8 pixel right Min - 8 pixel now save the changes and open the web page so here we have one dot near this basket icon now our nav bar component is ready After completing the navigation bar we will open this Pages folder and here we'll create multiple Pages for our project so first we'll create the homepage so in this Pages folder we will create a new folder

and the name will be home then we will create a new folder in this pages and the page name will be cart so the folder name we have added cart then we'll create one more folder in this pages and the folder name will be place Order we will use this home folder to display our homepage we will create the cart page to display the cart item on this place order page we will get the information about the user that is users's address and details to place the order now we will create one jsx file in

each folder so open a new file in this home folder and the file name will be home. jsx and here we will use our AFC and for this page we will create one CSS file so in this home folder we will create a new file and the file name will be home. CSS we will import this CSS file in this homepage so we will add import. home. CSS now the CSS file has been imported now we will create a new file in this cart folder and the name will be cart. jsx here also we will

use ource and in this folder we'll create one new file that is cart. CSS Now in this jsx file we will add import do/ cart. CSS similarly we will add the new file in this place order folder and the file name is place order. jsx and here we will use RFC here also we will create a new file that will be Place order. CSS and import this CSS file in this jsx file so here we will type import do/ Place order. CSS so we have added one jsx file and CSS file in each folder now

we will set up the react router to set up the react router first we will open main. jsx file and here we will remove this react strict mode and we will wrap this app component using the browser router first we will import the browser router so here we will type import curly bres and here we will add browser router From and here we will use react router Dom package using this browser router we will wrap this app component so we will add opening Arrow browser router and within this we will place this app component now

we will get the react router support in the app component now we will open app.jsx file and here we will set up the routes So after this Navar we will create routes tag we will add routes here we have this option from react router Dom select this one so this package has been imported automatically then close this tag within this routes tag we will create multiple route so first we will create the route for our homepage here we will use the route tag that is also from react router Dom this route has been Imported then

here we will Define the path so our path will be slash and here we will use the element property and in this element we will provide the homepage component so we will use the opening Arrow home and select this one then and close this tag and close the route tag also so whenever we will open this SL path we will get our homepage similarly we will set up our Card page so we will add route path and here we will provide SL cart then element and in this element property we will use the card page

component so we will add opening arrow cart slash closing Arrow so this cart has been imported then close this route tag slash closing Arrow similarly we will create the route for the place order page so we will type route and in this path we will provide SL order and here we will provide the element property and in this element property we will use place order component so for all three pages we have created the route now we will start creating our homepage so first in our homepage there will be one header so in this components

folder we'll create a new folder and here we will add add the name header we Will use this header component in our homepage so first let's create one file in this header folder that is header. jsx here we will use RFC after that we will create one CSS file for this component so in this headed folder we will create one new file and the file name will be header. CSS now we will link this CSS file with the jsx file for that here we will type import Do/ header. CSS after that here we will add

one class name property that will be header and our component has been created after that we have to mount this component on our homepage so we will open home. jsx file and within this div we will Mount our header component for that we will use the opening Arrow header and here we have this header component from our components folder and Close this tag now this header component has been mounted on our homepage now we will start building our header so in this header component we will add the HTML structure so in this div first we'll

create another div and the class name will be header content and in this div we will create one h2 tag and here we will add one text then we will use one paragraph tag and in this paragraph tag we will paste this Text so here we have created one h2 tag and one P tag after this P tag we will create one button tag and in this button we will add view menu so our HTML structure for the header is ready now we will open this assets folder and here we have this header image.png so

we will copy this file and we will paste it in our public folder right click here and paste this Image so in this public folder we have one image that is header image for now save these changes and open the web browser right now our header is looking like this so in this header background we will play Place one image for that we will open header. CSS file and here we will add the header class name and here we will provide height that will be 34 VW then we will provide the Margin 30 pixel Auto

then we will provide the background property where we will provide the URL for our background image so we will add slash header _ img.png after that we will add no depat property then we will add the background size and we will provide contain then we will add the position relative now save the changes so this header is looking like this after that we will add the CSS Properties for this header contents class name so we will copy this one and place it here here we will set the position absolute display will be Flex then Flex

direction will be column here we will use the Align item items a start and we will provide the gap of 1.5 VW then we will set the maximum width that will be 50% and here we will add the bottom 10% left 6 VW then save the changes so this content is aligned in the left bottom over this background image now we will add the CSS properties for these text so here we will type do header contents S2 tag here we will use the font weight of 500 then we will use the color white and here

we will provide the font Size of Max 4.5 VW and we will add one more parameter 22 pixel and save the changes and open the web page now our header text is looking good next we will add the CSS properties for this paragraph text so here we will add do header contents P tag tag let's provide the colored White font size 1 VW save the changes so our paragraph tag is also looking good now we will provide the CSS properties for this button so here we will add this class name hter contents then button tag

for this button we will provide water none color and we will provide this color code then we will provide the font weight that will be 500 then we will provide the padding 1 VW and 2.3 VW then we will use the background color and we will set it as white then we will Define the font size and here we will use the max property 1 VW and 13 pixel then we will provide the Border radius of 15 pixel this will be border none after that save the changes and we will open the web Browser so

this view menu button is also looking good after that when we reload this web page there is no effect so here we will add one fade in effect so that these text will be displayed with fade effect so for that we will open this index. CSS file and here we will Define one fade in key frame so let's type key frames and we will provide the name fade in after after that here we will provide The 0% this opacity will be zero after that at 100% we will set the opacity 1 after that we will

open this header. CSS file and here we have the header contents in this one we will add animation here we will provide the name of our key frame that is fade in and then we will provide the duration 3 seconds then save the changes and we Will open the web browser so when we reload the web page you can see these text are coming with smooth animation so our header component is ready after that we will create the menu section where we will display the different types of menu for that we will will come back

to the vs code editor and in this components folder we will create a new folder and the folder name will be explore Menu inside this folder we will create a new file and the file name will be explore menu do jsx here we will use RFC after that we will create one CSS file for this component so here we will right click and select new file and provide the file name explor menu. CSS now we will import this CSS file in this component so here we will type import Do/ explor menu. CSS to display the

items in this menu in this assets folder here we have the assets. JS file where we have one object here we have the images that we have already seen after that we have one menu list aray in this aray we have the multiple objects each objects carries the detail of the menu item like menu name and menu image so this menu image is imported here You can see we have imported total eight menu image so using this add a list we will display the menu data in our component so we will open this explor menu.

jsx file and here we will import menu list from the assets folder asset file so we have imported the menu list now we will create the HTML structure for the explored menu component so first in this div we will Add the class name property and we will provide the class name explored menu after that we will add the ID property and here also we will add explored menu then we will add one H1 tag and here we will add the text explore our menu then we will create one P tag and in this paragraph text

we will add this text so we have added one sentence here in this P Tag after that we will add one class name in this P tag and it will be explored menu text after this P tag we will create one div and the class name of that div will be explored menu list inside this D we will render this menu list using the map method for that we will add the curly bres and here we will add menu list do map and in this one we will pass one addo Function in this addo function

we will use the return statement and here we will return one div so we will use the parenthesis and in this one we will use one div and we will add a class name for this div that will be explor menu list item in this addo function we will pass one individual item and index number in this dip we will add the key Property and here we will simply provide the index in this dip we will insert the the image tag and in this SRC we will use item do menu image so this item is

one object where we have the property menu image where we have added the imported image after that we will create one P tag and in this P tag we will use the curlys and in this curlys we will provide the item do menu Name after that we will Mount this explored menu component in the home. jsx file so after this header we will Mount that component that is explore menu now we will open the web browser so here we have this explore our menu then this paragraph text and after that we have the multiple menu

items with the menu image and name now we will provide the CSS properties for this component so first we will add the CSS Properties for this explored menu class name copy this class name open this CSS file explor menu. CSS and here we will provide this class name and in this one we will add display Flex Flex Direction column gap of 20 pixel then save the changes and open the web browser so here we have the gap of 20 pixel and we have provided the display Flex now we will add the CSS properties For this

Title Here we will add explore menu H1 tag and here we will provide the color property and this color code after that we will Define the font weight 500 so we have added the CSS properties for this header tag now we will add the CSS properties for this P tag so here we have added the class name explor menu text just copy this One and paste it here here we will provide the max width of 60 and the color will be this color code so this text is displaying in two lines and we have added

the color property also after that we will add the CSS properties for this explore menu list class name so we will copy this class name and paste it in the CSS file here we will provide display Flex Then justify content a space between align items Center gap of 30 pixel text align Center and in this margin we will add 20 pixel and 0 pixel then we will add the Overflow X and we will type scroll save the changes so here we have all these items in a single row and here we have one Scroll bar

now we will hide this scroll bar so for that we will add do explore menu list double column webkit scroll bar and here we will provide display none then save the changes and open the web page now here we don't have the scroll bar after that we will add the CSS properties for these images so here we will type do explor menu list Item then we will use the IMG tag for this image we will Define the width that will be 7.5 VW then we will Define the mean width that will be 80 pixel then

we will provide the cursor pointer then we will provide the Border radius of 50% then we will add transition 0.2 seconds then save the Changes so we have added the width cursor and Border radius on these images after that we will add the CSS properties for these text so here we will add dot explore menu list item and P tag for this P tag we will provide margin top 10 pixel then we will provide the color this color code then we will Define the font size we will provide the max property 1.4 VW and 16

pixel then we will provide the cursor pointer and save the changes and open the web page again now these menu text is B big in size and here we have added the cursor pointer after that we will open this explor menu. jsx file and after this div we will create one HR tag now we will provide the CSS properties for this HR tag so here we will add do explore menu HR Tag here we will provide the margin that will be 10 pixel and 0 pixel then we will Define the height of 2 pixel background

color and here we will use this color code then we will Define the B none now open the web browser and at the end you can see one horizontal line that is coming using the HR tag so here we have created this explor menu component after that we will create some Functionalities for that we will come back to the home. jsx file and here we will create one state variable and the name will be category so let's add category and the setter function name will be set category equal to you CH a state and initialize

it with one string that will be all so we have created one state variable category and the set function name is set category we will Pass this in our explore menu component as a prop so here we will type category equal to curly bres and we will provide the category then we will pass set category equal to curly braces and here we will provide the set category seter function now we can destructure this category State and set function in the explored menu component so open this explored menu. jsx file and in this parenthesis we will

add curly Braes and here we will D structure the category And set category function so now we have this state and Setter function now in this div we will add the on click property and here we will pass one add function and here we will call the set category function so here first we will take our previous state and here we will check if the previous state is same as the item dot menu Name in that case we will set the state all and if it is not same in that case we will set the

state with our menu name so we will add item. menu name after adding this when I click here in our state it will store salad if I click here it will store RS in the state using these State we will add one Dynamic class name in this image so here we will add the class name property and here we will add the curly Bres so if our category is same with the menu name so we will add item. menu name in that case we will add one class name that will be active and if it

is not same in that case we will provide one empty string so basically when we'll click here we will add one active class name on this image similarly if I click on this one that active class name will be moved to This image tag so we will add the CSS properties for this active class name so we will open this explor menu. CSS file and here we will add do explor menu list item do active class name then we will provide the border and the width will be 4 pixels solid and the color is tomato

after that we will add the padding 2 pixels and save the changes now we will open the web Browser so if I refresh the web page now we will click on any menu item so here we have this border similarly if I click on this one you can see the border is moved to the second image if I click again it will remove this border so we will use this explore menu component to filter our product so here we have created the navigation bar header and explore menu component after that we will create the food

display component where we will display the Multiple food items to display the food items first we will set up the context API in our project for that in this SRC folder we will create a new folder and the folder name will be context in this context folder we will create a new file and we will add the file name store context do jsx here we will create one context for that we will type export const store Context equal to and here we will use create context that we will get from react and in this create

context we will provide null so here we have created one context the name is a store context and we have exported it now we will create the store context provider function so here we will type const store context provider it will be one Arrow function so in this one we will pass the Props after that here we will create one variable and the name will be context value and it will be one object if I add any element in this object we can access that element in any component using the context here we will add

the return statement and here we will use the store context. provider and here we will add the value property and in this one we will simply Add context value variable close this tag and within this tag we will provide props do children so here we have created this context now we have to export this a store context provider so we will type export default store context provider so the store context has been created in this context value we can provide any value or function and we can access that in any function using the context to

add The support of this context in our project we will open main. jsx file and in this browser router we will use store context provider tag and in this one we will place this app component we will click on format document so here we have wrapped the app component inside the store context provider and browser router now we have the support of context API in our project now we will open store context. jsx file And here we will Mount the food list here in this assets folder we have the assets. JS and here we have

the variable that stores one aray and here in this aray we have multiple object each object represents the food details like food ID name image price description and category so we will Mount this foood list in our context so here we will type Import cly bres food list from assets and assets so this food list areay has been imported from the assets. JS file after that in this context value we will provide this food list now using this context we can access the food list aray anywhere now we'll create one component and the name will

be food display so in this components folder we will create a New folder and we will provide the name food display in this folder we will create a new file that will be food display. jsx and here we will use the rafc similarly we will create a new file that will be food display. CSS now import the CSS file in this component so we will type import. sloot display. CSS so in this foot display component first We will get the food list array using the context API so we will type const curly Braes food list

is equal to use context and in this Ed context we will provide the stored context so so we will type store context from here select this one now this store context has been imported automatically now in this component we have the food List now we will create this component so in this div we will add one class name property and here we will provide the class name food display then we will provide one ID that will be food display in this div we will create one h2 tag and in this S2 tag we will add

the text top dises near you after that we will Mount this component on our homepage so we will Open home. jsx file after this explored menu we will mount the food display component and in this food display component we will pass the category estate as a prop so here we will add category is equal to curly bres category after that save this file and now we will open this food display component and here we will D structure the category so we will add curly Braes category We will save the changes open the web browser so

at the bottom you can see top dishes near you so this food display component has been mounted on our homepage after that we will display the multiple food item so let's come back and here we will create one div with the class name foood display list in this div we will use the C addes and this food list array so we will type Food list do map method in this map method we will pass one Arrow function and in this Arrow function we will pass the parameter item and index then we will use the return

statement and we will return one component that will take the food data and it will display that in a card for that we will create one more component so in this component folder we will Create a new folder and the name will be food item in this folder we will create a new file that will be food item. jsx here we will use the RFC after that we will create one CSS file for this component so we will right click and select new file and add the file name food item. CSS now import the CSS

file in this jsx file so we will type import do/ food item. CSS in this component we Will get the image price description ID of the food as a props from this foot display component so here we will add the DS structure so we will add curly bres ID name price description and image after that we will come to food display. jsx file and after this return we will Mount food item component then close it And in this component we will pass the props so first we'll pass the key property where we will use the

index after that we will pass the ID property where we will pass item doore id then we will provide the name in this one we will use item dot name similarly we will pass description and here we will use item. description then we will pass the price Property in this price property we will pass item. price after that we will pass the image property and in this one we will type item. image so here we have passed the key ID name description price and image using drops after that here in this component we don't have

any food item because we have not designed the food item so in this food item component we will add one class name in this div so the class name is food Item and after that in this div we will create one div and the class name will be food item image container in this dip we will insert one image tag and here we will add the class name property that will be food item image and in this SRC we will provide the image that we are getting using using this props so we will type image

after that here we will create Another div and the class name will be food item info so we will type food item info in this div we will create one div and the class name will be food item name rating and this D we will create one P tag and here we will add the curly presses and we will provide the name that we are getting using props after this P tag we will add one image Tag and here we will use the assets and from this assets we will add the rating starts in this

div we have added the product name and a strating after closing of this div we will add one P tag with the class name food item description so we have added food item DC and in this D we will add the curly bres and we will add description that we are getting using Props after that we'll create one more P tag and here we will add the class name food item price so we'll add food item price and here we will add the dollar sign curly bres and here we will provide the price that we

are getting using the props after that save the changes and now we will open the web browser so if I scroll the web page you can see here we have the food image title Description start rating so here we have total 32 food items and we are getting this food data from this food list array that we have mapped over this food item component now we will add the CSS properties for this foot display component so first we will add this class name food display and paste it in this fot display. C s file here

we will add the margin top 30 Pixel then we'll add the CSS properties for this h2 tag so here we'll add foot display h2 tag and here we will Define the font size Max property and here we will provide 2 VW and 24 pix pixel after that we will Define the font weight that will be 600 now this h2 tag is ready after that we will add the CSS properties for this food display list class Name so copy this and here we will add the class name food display list we will provide display grid grid

template columns repeat autofill then we will add min max 240 pixel and one fraction after that we will add the margin top of 30 pixel Gap 30 pixel row Gap 50 Pixel now save the changes and open the web page now here in each row we have four items and here we have the multiple rows after that we will add the CSS properties for our food item component so here we have the food item class name just copy this one and we will open food item. CSS file and we will add this class name here

and here we will provide the width 100% margin Auto border radius of 15 pixel then we will add the Box Shadow 0 pixel 0 pixel 10 pixel and one color code after that we will add the transition of 0.3 seconds then we will add the animation and it will be fade in duration will be 1 second now if I reload the web page so these food items are coming with fade Animation now we will add the CSS properties for this image tag so here we have the class name food item image so add this class

name here so for this image we will provide width 100% And then border rate radius 15 pixel 15 pixel 0 pixel and 0 pixel save the changes now the card image is looking good after that we will come back to the food item. jsx file and here we will add the CSS properties for this food item Info class name so copy this class name add it in this CS file and here let's add padding 20 pixel so now we have some space around this information text after that here we have this food item name rating

so add this class name here and here we will provide displ Flex justify content space between align item Center margin bottom of 10 Pixel save the changes now the food name is in the left side and the star rating is in the right side after that we will add the CSS properties for this P tag where we have added the name of the food item so we will add dot food item name rating space p for this P we will provide font size of 20 pixel then font weight of 500 save the changes And open

the web page so the food item name is looking good after that we will add the CSS properties for this start rating so here we will add do food item name rating IMG tag and here we will provide the width 70 pixel save the changes now the start rating is also looking good now we will add the CSS Properties for this description we will open this component file and copy this class name food item description add this class name here and for this one let's add color and this color code then we will add font

size 12 pixel save the changes now now this description is also looking good next we will add the CSS properties for this Price so let's copy this class name food item price paste it here so for this price let's add the color property and the color is tomato then we will add the font size 22 pixel then we will add font weight 500 then we will add the margin 10 pixel and 0 pixel save the changes now this price is also looking good after that in this food item Component we will create one add button

using that we can add the food item in our cart for that we will open this Hood item. jsx file and in this component first we will create one state variable so let's add const and we will add the name item count then we will create the setter function it is set item count equal to user State and here we will initialize it with zero So for all product cart we will initialize it with zero now after this image tag here we will add the curly veres and here we will check if our food item

count is zero in that case we will provide one add button and if the count is greater than zero in that case we will provide one counter so here first we will type item count is not zero in that case we will use turn operator so we will use the question mark in that case We will add one image tag in this image tag We'll add the SRC assets do add icon white and if it is not equal to zero in that case we will return one div with the class name food item counter in

this image tag we will add the class name property that is ADD and we will add the on click property and here we will pass one Arrow function and here we will use set item Count first we will take take the previous count and here we will return previous + 1 and save the changes come back to the web page so here we have the add icon and if I click this one it will disappear because here the state will be changed from the 0o to one and when it is one it will return the

another div so now we will Design This div so here we will add image tag and here we will use assets dot remove icon Red then we will add one P tag where we will display the item count after that we will display one image tag and here we will use assets dot add icon green after that in both images tag we will add the on click property and here we will pass one Arrow function here we will add the set item Count and in this one we will add previous count and here we will

return the previous Plus one so this button will remove the count so we will add previous minus one and in this button we will add previous + one then save the changes and we will open the web page so if I refresh the web page here we have this plus icon if I click here it is displaying the count one if I Click on green button it will become two if if I click on this minus it will become one and if I click again on the minus that counter will be zero and here again

we will see one add button now we will add the CSS properties for this food item image container so just copy this one and open this food item. CSS file and here we will paste it here we will simply provide position Relative after that we will add the CSS properties for this image tag where the class name is ADD so we will add dot food item image container do add here we have to provide the width 35 pixel position and absolute bottom of 15 pixel right 15 pixel then we will use the cursor pointer and

after that we will add the Border radius 50% save the changes and we will open the web browser so here we have this add icon over this food image that is looking good now if I click on this icon it is displaying this counter here so we will add the CSS properties so let's come back and here we have the food item. jsx file from here we will copy this class name food Item counter just copy this one and paste it in this food item. CSS file in this one we will add position absolute bottom

15 pixel right 15 pixel display Flex align items Center gap of 10 pixel padding of 6 Pixel border a radius of 50 pixel background color will be white save the changes so here you can see these counter are looking good it is over this image if I click on minus it will become zero if I click on this plus icon it will display this counter and this counter is looking good now we will add the CSS properties for these image tags so here we will add food item counter IMG Tag so for this image we

will Define the width 30 pixel save the changes now the button size is perfect if I click on minus it will become zero and it will display the plus icon and if I click on plus it will increase the counter we can do the same thing in any other food item so it is working here we have defined this counter value zero using that when we have 32 product it is creating one state variable for each Product that is not a best practice to solve this issue we will create one cart item object in our

context and we will manage these product cart data using the manage cart functionality so we will come back to store context. jsx file and here we will create one state variable and the name will be cart item so we'll add cost cart items and the seter function name will be set cart items equal to use a State and we will initialize it using the curly presses so here we have created One cart item state after that we'll create the functionality for add to cart and remove from cart so first we will add the functionality for

add to cart so let's add con add to cart equal To and it will be one AR function in this parameter we will simply pass the item id first we will check if the user is adding the product first time in the cart in that case we will create one entry so so we will add if cart item bracket item ID so if the cart items Item ID is not available in that Case we will use set cart items and here we will pass our previous cart data and here we will return one object where

we will Define the item ID and the value will be one so if the user will add the item first time in the cart then this statement will be executed using that in this object one entry will be created And the key ID will be Item ID and the value will be number of quantity so here we will add the Elsa statement suppose any product item is already available and quantity is one in that case we will increase that so we will add Set Card items and here we will pass previous card data and here

we will add this previous and in this previous card data we will modify the item id key Previous item id + one here we will use the triple dot after adding this this add to cart logic has been created similarly we will create the remove from card so we will add const remove from cart and it will be Arrow function here also we will add the item id as a parameter and here we will use set cart items here we will pass the previous Card data and in this previous card data we will set item

id previous item id minus 1 so basically what these functions are doing first this if a statement will create a new entry for our food product if that product ID is not available in our our cart item then only If that product is already available in the cart item then this ills condition will increase the value by one and this remove from card functionality will decrease the value by one so we have created the estate cart item add to cart functionality remove from cart functionality now we will pass these three in the context value so

here we will add Comm cart items then we will pass set cart Items then we will pass add to card functionality then remove from card functionality now we will access the cart items add to cart remove from cart functionality in our food item component using the context API so in this food item here we will add const curly bres cart items add to cart function name Then remove from cart this function name equal to use context and in this one we will simply provide a store context so we will get the access of cart item

add to cart and remove from cart after that we will remove this item count and here we will add cart items and in this one we will simply provide the ID similarly in this on click we will Remove this and we will add add to cart function in this one we have to pass the ID similarly here also we will remove it and we will add remove from cart function where we will pass the ID here also we will remove it and we will add add to cart function and we will add the ID instead

of this item count we will add cart items and here we will provide the ID now this cart items add to cart and Remove from cart has been integrated with the food items component save these files and remove this line because we are not using this we can remove this user state from the import a statement and save the file after that we will open a store context. jsx file and here we will run one use effect where we will pass one AR function and here we will add this Square bracket and we will add

cart items so when the cart items will be updated we will log the cart items State now we will open the web browser we will reload the web page so here if I click on this plus icon it will be added and if I click again it will be increasing it becomes 2 3 and it works on other image also and these data are getting managed at one place at a store context if I click on inspect open this Console so here we have multiple object objects that is our cart items so when we open

this object here we have the food ID one and the quantity is three so this is the food one the quantity is three if I click again you can see it becomes four similarly if I click on the second one you can see in the second product ID the quantity is one and here we have the three entries that we have added in the cart if I click on The new product so you can see we have the four entries that is product ID 1 2 3 4 and in the right side we have the

quantities if I reload the web page this will be reset and this cart is empty now if I click this product ID 1 quantity becomes one if I click again for the product ID 1 the quantity is two so this store context has this if Statement that is creating the first entry and for modifying the created entry we are using this else statement if I click on this remove so this quantity will become zero for that here we have used this remove from card functionality so till now we have created the Navar header component menu

selection component and this foot display component now we will add the Functionality using that if I click on these icons this food item will be filtered and it will display the food items from the particular category for that we will open this food display. jsx file in this a statement we will add one if a statement in this if a statement condition we will add if our category is all in that case we will get all products Or if our category is same as the item dot category in that case we will get the product

of the particular category so here we have added category all so if the state is all it will return the complete items and if it is not all then it will display the product of the particular category now we will move this return statement in this if condition so we have added this return statement here in this if Statement after that we will open the web browser and reload the web page now it is displaying all the food item right now our food item is not filtered so let's come back here we will add triple

equal to this is the comparison operator and save the changes and if I click on saled here we have the salads all the items are removed if I click on this rolls so here we have products in the rolls category if I click on dessert here we have Desert category food if I click on sandwich cake pure vegge noodles so all categories are working fine if I click on roles here we have only the rolls product if I click again it will be deselected and we will get all categories food so our explor menu component

and this foot display component is perfectly working after that we will create one footer for our project for that we will come back to The vs code editor and here we have the components folder here will create a new folder and the folder name is footer in this footer folder we will create a new file and the file name will be footer. jsx and here we will use rafc here we will add a class name so the class name is footer now we will create one CSS file for this footer component so we will right

click on the footer folder and add a new file footer. CSS now import this CSS file in this component so we will add import /f footer. CSS now we will start adding some elements in this footer so first we will Mount this footer component in the app component so open app jsx file and after closing of this div we will Mount the footer component so let's add footer and close It here we are getting one error because we are returning two elements to solve this here we will add the fragment and in this fragments we

will insert these elements format document now it is returning only one element now save the changes and we will come back to the footer. jsx file and in this div we will add the HTML elements for the footer so in this div let's add one ID that will be Footer after that in this div we will add another div with the class name footer content inside this div we will create three div and the name will be footer content left Center and right so let's create the div with the class name footer content left after

that another div with the class name footer content right and after this div we will add another di with the class name footer content Center move this in the center so first We have the left then Center then right we have three div so first we will add the content in the left div so we will add one image tag and here we will use the assets. logo after that we will create one P tag and in this P tag we will add one dummy text after this P tag we will create one TI with

the class name footer social icons Inside this div we will create three image tags so we will add IMG into three and in these SRC we will add curlys we will use assets do Facebook icon in the second one we will replace the icon it is assets dot Twitter icon in the third one we will add assets do LinkedIn icon then save the changes and we will come back to the web browser at the bottom you can see this is our footer Text so now we will come to Center div and in this one we

have to add one h2 tag where we will add one text company after that we will add one UL tag and in this UL we will create Four lii Tags so let's add Li into four so in the first one we will add home in the second lii tag we will add about us in the third one we will add delivery and in the fourth one we will Add the privacy policy after that we will come to WR div in this one we will add one h2 tag where we will add get in touch after

that here we will add one UL tag and in this UL tag we will add two lii tags so in the first list item we will add one phone number so I'm adding one dummy phone number after that in the second lii we will add one dummy email ID so let me add contact at tom.com so our three divs are ready footer left Center and right after that we will add one HR tag here and after this HR we will add one paragraph tag with the class name footer copyright in this P tag we will

add the text this is one copyright text after that save the changes if I open the web browser so at the bottom you can see we Have all the elements now we will add the CSS properties for the footer so first we will add the CSS properties for this footer class name so just copy this open this footer. CSS file and here we will paste this class name for this footer we will provide the color this is one color code then we will add the background color so here is the the color code for the

background then we will add display Flex Flex Direction column align item Center gap of 20 pixel padding of 20 pixel and 8 VW then padding from Top 80 pixel then save the changes now if I come back to the web page so you can see some changes in this footer layout now we will add the CSS properties for this footer content class name so let's copy this one add it Here for this footer content we will add width 100% display will be great then grade template column two fraction one fraction and one fraction then we

will add the gap of 80 pixel save the changes now you can see the content in three columns after that we will add the CSS properties for all these three div so let's add dot footer Content left comma dot footer content right comma dot footer content Center for all three divs we will add display Flex Flex Direction column align items a start and here we will provide the gap of 20 pixel then save the changes so here we have some Gap that is 20 Pixel now we will add the CSS properties for these Li tag

so let's duplicate it ready remove these CSS properties we will add list style none and after this left we will add Li similarly here also we will add lii and here also we will add Li tag after that we will add the margin bottom 10 pixel save the changes so now these dots are removed from this lii Tag after that we will add the CSS properties for these titles so let's copy it and paste it again in the left side we don't have any h2 tag so remove it and here we will add S2 and

this one also S2 so for this title we will add the color white save the changes now this title text is looking good now we will add the CSS properties for this social media icons so here we will type Dot footer social icons then IMG tag for this image we will provide the width of 40 pixel then we will provide the margin from the right side that will be 15 pixel save the changes so these footer icons are looking good after that we will add the cursor pointer for these lii tags so here let's add

a space and we will add cursor Pointer save the changes now if I move cursor over these list items we will see the cursor pointer now we will add the CSS properties for this HR tag that is not visual here so let's add dot footer then HR tag for this HR we will provide width 100% height of 2 pixel then margin of 20 pixel and zero then save the changes so this HR tag is visual After that in this HR tag we will add background color gray and then we will add border none now this

HR tag is looking good so here we have one problem after this food item component we don't have any space it is touching the footer content so here we have the footer so in this footer we will add margin top and we will provide 100 pixel so now you can see some space above this footer layout now this footer is also Complete next we will add one more component between this footer and this foood items that will be mobile app download so let's come back to the vs code editor and in this components folder we

will create a new folder with the name app download and in this folder we will create a new file that will be app download. jsx and here we will use add AFC after that we will create one CSS File so here we will type app download. CSS now we will import this CSS file in this component so we will add import SLA download. CSS now we will Mount this component on our homepage so after this foood display we will add the app download component so we have mounted it here now we will open app download.

jsx file and in this D we will add one class Name that will be app download and we will add one ID that is also app download in this div we will create one P tag and in this P tag we will add one text after adding this text here we will add one BR tag using that we can split this paragraph in two lines then we'll add one div with the class name app download platforms inside this div we will create two image Tag so we will add IMG in into two so in the

first image we will use assets do Play Store and in the second one we will add assets dot App Store now the estimat structure for this app download component is ready let's open the web browser so here we have this text and Play Store and and App Store icon now we will add the CSS properties so first we will add the CSS Properties for this app download class name so copy this one add it here in this app download. CSS file for this app download class name we will provide the margin Auto auto then we

will provide margin from the top that is 100 pixel after that we will provide the font size we will use max property 3 VW and 20 pixel then we will add text align Center and font weight of 500 right now you can see these text are looking good now we will add the CSS properties for this class name which is app download platforms copy this one add it here here we will provide display Flex justify content Center then we will add Gap in this Gap we will add Max 2 VW and 10 pixel then we

will add margin from the Top 40 pixel save the changes and we will open the web browser so here we have the gap between these Play Store and App Store icon now we will add the CSS properties for these images so we will add that class name app download platforms then IMG tag so for this image we will Define the width where we will add the max property and here we will provide 30 VW comma 120 pixel after that we will Define Max width 180 pixel transition 0.5 seconds cursor pointer now these images are looking

good next we will add the hover effect on these images so duplicate it and at the end we will add colon hover so when we'll hover this image we will provide transform scale 1.05 save the changes and if I open the web page now you can see if I move cursor over this image it will increase its size that looks very nice after that our homepage is ready where we have created the navigation bar header section EXP explore menu component then we have added the foood display component after that we have created this app download

layout then we have created the Footer now we will make this website responsive so we will right click and inspect then select this device option so you can see this is how it is displaying in the small screen so we will make it responsive so let's come back to the code file and we will open navbar docss file and here we will add the media query so let's add media Max width of 1,50 pixel in this one we will add na. logo and we will apply width of 140 Pixel then we will add Dot Navar

menu and here we will provide the gap of 20 pixel after that we will Define the font size that will be 17 pixel then we will add dot never right here we will provide the gap of 30 pixel after that we will add never right IMG tag so for this image we will provide the width of 22 pixel after that we will add do Navar Right then button tag and for this button we will provide the padding of 8 pixel and 25 pixel now we will create one copy of this and paste it again here

we will reduce the max width it will be 900 pixel here we will add the width 120 pixel and we will provide the gap of 15 pixel font size of 16 pixel here we will provide the Gap 20 and the image width will be 20 after that we will add the padding of 7 pixel and 20 pixel it will be 20 pixel after that here we will add the font size so we will set the font size 15 pixel save the changes and we will create another copy of these media query copy and paste it

and here we will add 750 pixel and here we will remove this logo and and we will keep only Navar menu so in this Navar menu we will provide Display none save the changes and open the web page again and you can see it is fully responsive now we will make our header section responsive to make the header section responsive we will come back and we will open header. CSS file and here we will add the media quy so let's add the media Max width 1,50 pixel and here we will add the do header class

Name here we will Define the height of 38 VW then we will add the header contents class name and here we will add the max width of 45% then save the changes and let's create a copy of this media quy and here we will set 750 pixel Max width remove this header for header contents we will add Max width 55% then we will add header contents P Tag for this P tag we will add display none then we will add header contents button tag and for this button we will Define the padding of 2 VW

and 4 VW then save the changes and we will open the web browser so this is how our header is looking right now so we will fix it so let's add the max width of 65% and we will remove this header now we will save the Changes now our header is looking good you can see if I change the screen size it looks good in all screen size this is how it will display in phone screen now this header component is also responsive next we will make the explored menu comp responsive so we will come

back to the vs code editor and we will open explor menu. CSS file here we will add the media query so we will add the media Max width 1,50 Pixel and here we will add dot explore menu text and we will set the max width 100% then we will Define the font size that will be 14 pixel now this explored menu component is also responsive this is how it is displaying in the smaller screen and we can slide these menu images because we have added the Overflow X scroll our foot display component is already looking

good in a smaller screen so it Is also responsive by default if I change the screen size you can see it is completely responsive this is the app download component it is also looking good in phone screen after that we will make our footer responsive for that we will open footer. CSS file here it is here we will add the media quy so Let's add media Max width and here we will Define 750 pixel and here we will add the class name footer content here we will add display Flex Flex Direction column and we will

provide the gap of 35 pixel after that we will add the class name do footer copyright here we will apply text align Center save the changes and we will open The web browser now our footer is also looking good in smaller screen so we have made our website fully responsive now we will add some functionality so that when we will click on the menu it will scroll the web page to the explored menu section when we will click on mobile app it will scroll the web page to the app download section and when we will

click on the contact us it will scroll the web page At the footer to add this functionality we will come back to the vs code editor and here we will open Navar do jsx file so in this first lii tag let's remove this lii and we will add add link tag we will select this link from react router Dom and this link tag will be imported from the react router Dom package after that in other three aite tag we will replace it with a tag so remove this Li and here we will Use the a

tag in these a tag we will add the HF property and here we will provide has and in the first a tag we will add explore menu ID that we have added in this div you can see we have added explored menu in the second one we will provide has app download and in the thir third one we will provide footer and in this link tag we will add Two property and here we will add slash we will save the changes so when we click on menu it scroll the web page to the menu section

if I click on mobile app it will scroll the web page to the mobile app and if I click on contact it will scroll the web page at the bottom so this is a scrolling the we page quickly so we will convert it into smooth scroll so we will open the index. CSS file and here after this font family we will add a scroll Behavior smooth we will save the changes and we will open the web page now if I click on mobile app it scroll the web page smoothly to the mobile app now we

have added the smooth scroll effect now our homepage is completely ready and we have added the functionality on these menu links after That we will add the login sign up popup component so that when we will click on this login button it will pop up a login form over this component to create that we will come back to the vs code editor and in this components folder we will create a new folder with the name login popup and in this folder we will create a jsx file that is login popup do jsx here we will

type RFC and for this component we will create one CSS file so here we will Create a new file with the name login popup docss in this jsx file we will import the CSS file so we will add import. login popup docss now in this day we will provide a class name that will be login popup so first we will Mount this component in the app component so we will open app jsx file and to display the login popup first we will create one state variable So we will type const so login set so login

is equal to use State and we will initialize it with false now I want to display this on the top so here before this div we will add one turn operator and here we will type so login and if this so login is true it means we have to display our component so we will Mount our component that is login Popup then close this and if this so login is false in that case we will return the fragment now we will send this so login in our navigation bar where we can convert it into true

or false so in this NAB bar we will pass the props so we will add set so login is equal to curly bres set so login now we will copy it and we will destructure it in the navigation bar component so here we will will add curly presses and paste This set so login here we have the button signin so we will link this function with this signin button so here we will type on click and here we will pass one Arrow function and here we will call the set so login and in this one

we will pass the data true we will save the changes after that we will open login popup.js x file and here we will add some text login after that we will save the Changes and we will open the web page so here we don't have any login option if I click on signin button you can see one text login at the top left corner it means our functionality is working when we click this button it will display the popup after that we will come back to the login popup component and we will Design This popup

so first let's remove this text and here we will add one form Tag and the class name will be login popup container remove this action and within this form tag we will create one div with the class name login popup title in this one we will add one h2 tag and here we will display login or sign up state for that we have to create one state variable so let's add const and the state name will be current State Set current state is equal to user State and we will initialize it with sign up and

in this S2 tag we will add the curlys and here we will provide current state and if I save the changes hit is displaying sign up that is coming using this state variable after this S2 tag we will create one image tag and in this image SRC we will use Assets dot cross icon and after that here we will add onclick property and here we will pass one Arrow function and here we will use the set so login function that we have created in the app component so here we have created set so login so

let's copy it and we will pass it using props now we will get the access of this function in the login popup component so We will D structure it here and when we will click on this image which is the cross icon it will close the popup for that here we will type set so login and we will add false we will save the changes and we will open the web page so here we have the sign up and then cross icon if I click on the cross icon it will hide that popup if I

click on signin button it will display the sign up again after this div we will create Another div and here we will add the class name login popup input in this St we will add input field and the type will be text here we will add the placeholder where we will add your name and we will set required after this input field we will add one more input field and it will be type email we will add the placeholder your email and it is also Required then we will create another input field and the type

is password then we will add the placeholder property and we will apply password and we will set it as required after this tip We'll add one button tag in this button tag we will add the curly veres and here we will provide Turner operator so first we will check our current estate is sign up in that case we will return one String that will be create account and if the estate is not equal to sign up in that case we will add one string that is login here we will add colon we will save the

changes and open the web browser if I click on sign in here we have sign up cross icon your name email and password field and create account right now this estate is sign up that's why it is displaying sign up button if I set it as Login so here we have the login and we have the Buton text login after that we have to remove this input field that is your name on the login page so we will hide this input field when the state is login for that here we will add tary operator so

we will check the current state if the current state is equal to login in that case we will return fragment and if the state is not equal to login in that case we will provide This input field so we will move it after this column save the changes and we will open the web browser so at the time of login we have the email field and password field and after this button tag we will create one div and we will provide one class name for this div that is login popup condition in this T we

will add one Input field and the type will be checkbox and we will set it as required after this input field we will add one P tag and here we will add one text after this div we will we will create one P tag and in this P tag we will add create a new account question mark and here we will add one span tag and in this span tag we will add Click here then we will save the changes so when we are on the login state it will display create a new account click

here and when we are on the sign up state for that we will create one more format so we will add P tag already have an account question mark and we will add a span tag and here we will add login here we have to display this paragraph when the state is login and when the estate Is sign up it will display the second paragraph for that we will use the turn operators so we will add the curly bres and we will check if the current state is same as login in that case we will

provide the first paragraph so we will place it here then we will add the colum and we will provide the second paragraph now in these span tag we will add the on click property and here we will pass one Aro function and here we will call the set C inter state so in the first one we will set sign up and in the second one we will set login we will save the changes now we will open the web browser so we are on the login and here it is displaying create a new account click

here if I click here so it will display sign up page and here we have The name input field and here we have the text already have an account login here if I click on this it will again display the login page now the S structure for this login popup is ready now we will add the CSS properties so first we will add the CSS properties for this login popup class name so we will copy this one and we will open login popups do CSS file here we will add this class name and we will

provide the position Absolute Z index one width it will be 100% height will be 100% background color and here we will use this color code after that we will add display grid and we will save the changes now you can see the changes in the layout of this login page so now we will come back and here we will copy this class name login popup Container and we will paste it here for this one we will add the place self Center then we will add the width Max property 23 VW and 330 pixel then we

will add the color property that will be this color code then we will add the background color white then we will apply display Flex Flex Direction column and we will provide the gap of 25 Pixel then we will add padding that will be 25 pixel and 30 pixel then we will add the Border radius of 8 pixel font size will be 14 pixel and here also we will add an animation fade in and duration will be5 seconds we will save the changes and we will open the web page now this container is in the center

with the white background if I click on the cross icon it will hide This and if I click on the signin button it will again display this popup if I click on this link it will display the signup page if I click again it will display the login page now we will add the CSS properties for this title so we will copy this class name login popup title and here we will provide CSS property display Flex justify content a space Between align item Center and the color will be black we will save the changes now

our login text is displaying in the left side and the cross icon is in the right side after that we will add the CSS properties for this cross icon so we will add do login popup title IMG tag here we will Define width that will be 16 pixel then we will add the cursor pointer we will save the Changes now this cross icon is looking good and we have the cursor pointer after that we will add the CSS properties for this div which is login popup inputs so we will copy this one and we will

paste it here for this one we will provide display Flex Flex Direction column gap of 20 pixel and we will save the Changes now we have the gap between these input fields that is 20 pixel now we will add the CSS properties for these input field so here we will add Dot Login popup inputs input field here we will provide the outline none border one pixel solid and this color code then we will provide the padding that will be 10 pixel and Border radius of 4 Pixel now these input fields are also looking good after

that we will add the CSS properties for this button so we will type Dot Login popup container button tag here we will add border none padding of 10 pixel it will be none then border radius of 4 pixel color white then background color Tomato then we will Define the font size that will be 15 pixel then we will provide the cursor pointer we will save the changes and open the web page so our button is also looking good if I click on login here also it is looking good after that we will add the CSS

properties for this login popup condition so we will copy this one and paste it Here here we will provide display Flex align items start gap of 8 pixel margin top minus 15 pixel we will save the changes now this condition div is is also looking good it is aligned side by side now we will add the CSS properties for this checkbox so let's add the class name login popup condition input field and we will provide the margin top 5 Pixel now this checkbox and the condition text is aligned properly after that we will add the

CSS properties for this span tag log in here and click here so we will type do login popup P tag span tag and in this one we will add the color tomato font weight 500 and cursor pointer we will save the changes and we will open the web Page so here you can see the color on this link so if I click here it will open the sign up form so now we have created the login popup component that is fully functional if I click on cross icon it will hide this popup and if I

click on sign in button it will display this popup again after that we will create the cart page to build our cart page we will open vs code editor and here we will open cart. jsx file that is available in this Page Pages folder and cart folder so here first we will access our cart items food list remove from card functionality from our context so here we will type const then curly presses and here we will type card items food list remove from cart equal to use context and in this one we will provide our

store context after that in this div we will Add the class name property and here we will type cart inside this div we will create another div and the class name will be cart items so we will type div dot cart items and inside this div we will create another div with the class name cart items title so we will type D do cart items title here we will create six paragraph tags so we will type P into six and in the First paragraph tag we will add items in the second one we will add

title in the third one we will add price then in the fourth P tag we will add quantity and in the next one we will add total and in the last one we will add remove after closing of this div we will add one BR tag and here we will add one HR tag after adding this save the changes and we will open the web page so in the Routes we have added SL cart so if I open this slash cart so it will open the cart page now we have to link this route with

our basket icon so that when we will click on this icon it will open the card page so we will open the navb bar. jsx file and here we have the IMG tag so before this IMG tag we will add a link link tag and we will wrap this image tag with This link tag and in this link tag we will add the two property and here we will provide the path that will be/ cart save the changes now if I open our homepage to go to homepage we have added the route on this link

home so we will add this route on the logo also so that when we will open the card page and click on the logo it will open the homepage so we will add the link on this image tag so here we will add Link and close this link after this logo image and here we will add the two property and we will provide the path slash save the changes and now now we are on the cart page and if I click on Logo so it will open the homepage and if I click on the cart

icon it will open the cart page so this route is successfully working after that we will come back to the cart. jsx file and after this HR tag we will use The curly presses and here we will use food list do map method and here we will pass one Arrow function in this parameter we will add the individual item and index number so we will get all the food list one by one from our food items after that we will compare our cart items and food item if that food item is available in this cart

item then we will display it in the cart page so for that we will type if and here we will provide the cart Items and in this one we will provide the item doore id greater than zero so if our cart items contains one product with this item ID in that case we will return one div so we will type return and in this return we will add div and we will provide the class name cart items title and we will add one more class Name that will be cart items item we have added two

class this class name is same that we have already used so we can use the same for format after that we will check this logic so simply we will add one P tag and here we will add curly presses and we will type item dot name we will save the changes and if I open the home page and click on this plus icon to add This product and we will open the card page so here we have this product name now if I add four products and open the card page now now we have the

name of four products it means this if logic is successfully working now remove this P tag and here we will create one structure using that we can display the cart items data so first we will provide one image tag and in this SRC we will Provide item. image after this image tag we we will provide one P tag and in this one we will display the name of our product so we will type item. name after that we will provide products price so we will type P tag Cs and we will type item. price so

next we have to display the quantity so we will type P tag curly bres and we will add cart items in this cart items we will provide Item doore ID so it will return the quantity for this product after that we have to display the total price for that we will use the P tag curly presses and here we will use the item do price so we will multiply this item price with the number of quantity so we will get the total amount so let's copy this one and here We will type multiply and paste

it after that we will create one more P tag and here we have to display one cross icon so simply we will use x and we will save the changes and open the web page so here you can see we have the images and other details in this cart now we will add the CSS properties for this cart page so let's come back and here we will copy this class name cart paste it here in this cart. CSS and Here we will provide the margin from the top that will be 100 pixel after that let's

copy this class name cart items title and we will paste it here for this we will add display grid grid template will be columns one fraction 1.5 fraction one fraction one fraction one fraction and 0.5 fraction after that we have to provide the Align item Center then we will set the color then we will change the font size so let's add Max property 1 VW and 12 pixel we will save the changes and we will open the web page now you can see the cart items in the grid layout for individual product it is aligned

hor recently now we will add the CSS properties for this image tag so we will open the jsx file and here we have this class name cart items item and we will past it Here here we will provide the margin 10 pixel and 0 pixel then we will provide the color black and save the changes now the color has been updated for this text and we have a space Also now we will reduce the size of this image so let's add do cart items item then IMG tag for this image we will provide the width

of 50 pixel we will save the changes now you can see the size for this icon is good now we will open the Vs code editor and after closing of this div we will return one HR tag so we are returning two elements that's why we are getting one error so we will create one div tag and in this div tag we will place this div and HR we will click on format document now we don't have any error now you can see one horizontal line after each product now we will add the CSS properties

for This HR tag so let's open the cart. CSS file and here we will provide dot cart HR tag and here we will provide the height of 1 pixel background color and provide this color code then we will provide the Border none so save the changes now this horizontal line is looking good after that we will open the jsx file and in this P tag we will add the Class name property and the class name will be cross now we will open the CSS file here we will type do cart items item do cross and

here we will simply provide the cursor pointer we will save the changes now if I move cursor over this x it will become pointer now we will add the functionality on this cross icon so that when we will click here this product will be removed from our cart for that We will open the cart. jsx file and in this P tag we will add the onclick property in this one we will pass one Arrow function and here we will call the remove from card function that we have already created and D structured using this context

API so in this one we have to provide the item ID so let's add item doore id we will save the changes and open the web page so here we have the quantity one for all products if I click on this cross that product will be be Removed from our cart if I click on the second one this product is also removed similarly we can remove all products let's open the homepage and if we add one product four times it means four quantity so you can see the quantity four and if I click on this

cross icon it will reduce the quantity it will become three if I click again it will become two if I click again it will become one if I click again it will Finally remove the product here in front of this price we will add the dollar sign add the product and now you can see the dollar sign in front of this price in this total also we will add the dollar sign so here also we will add dollar sign and save the changes so you can see the dollar sign in front of this price if

I increase the quantity let's set two for this product open the card page here you can see the Price $12 quantity 2 and the individual total price for this product which is $24 so these add to cart and remove from cart functionality is working fine after that we will create one section where we will display the delivery fee and total price and in the right side we will create a section where user can enter one promo code code for that after closing of this div we will create another div with the class name cart bottom

and inside this div we will Create another div with the class name cart total so inside this cart total div we will add one h2 tag and here we will type cart total after this h2 tag we will add one div and in this div we will add three div and the class name will be card total details so let's add d. cart total details into Three so we have created three div inside this div we will create two P tag which is paragraph tag so let's add P into two so in the first one

we will add subtotal and in the second one we will add curly bres and simply provide zero here also we will add the P tag two times and we will add delab fee here also for now we will add the CES 2 and in the third div we will add the B tag that is bold tag and in this one we will add the total and we will create one more B tag and in this one for now we will type zero after this D we will add one HR tag and here also we will

add one HR tag and after this di we will add one button tag and in this button tag we will add the text proceed to checkout let me move this button from Here so remove it and we will place it after this div we will save the changes and we will open the web page so here we have these data on our card page now we will add the promo code section on the right side so after this div here we will add one more div with the class name cart promo code inside this div

we will add one more div and in this div we will add the P Tag and here we will add if you have a promo code enter it here after this P tag we will add one div tag and in this div tag we will add the class CL name property that will be cart promo code input inside this div we will add one input field and the type will be text after that we will add the placeholder in this placeholder we will Type promo code after this input field we will add one button tag

and the button text will be submit we will save the changes and we will open the web page this is how our cart bottom section is looking right now so we will add the CSS properties so first we will add the CSS properties for this class name cart bottom so open this CSS file and here we will add do cart Bottom for this one we will provide the margin from the top 80 pixel display Flex justify content space between Gap Max property we will provide the 12 VW and 20 pixel then we will add the

class name dot cart total and here we will add Flex one then we will add display Flex Flex D and Column gap of 20 pixel we will save the changes so in the left side you can see this card total and in the right side we have the coupon now we will add the CSS properties for this card total details class name just copy this one and paste it here here we will add display Flex justify content space between and this color code we will save the Changes now you can see some changes here after

that we will add the CSS properties for these HR tag so let's add the class name do cart total HR tag here we will provide the margin that will be 10 pixel and 0 pixel then save the changes so now we have the margin next we will add the CSS properties for this button tag so here we will add dot cart total and button Tag here we will Define border none color white background color tomato width Max property 15 VW and 200 pixel then we will add the padding that will be 12 pixel and 0

pixel after that we will Define the Border radius of 4 pixel and here we will add cursor pointer we will save the changes now this button is looking good After that we will add the CSS properties for this promo code section so let's copy this class name cart promo code and paste it here in this CSS file for this class we will provide Flex one save the changes now we will add the CSS properties for this P tag so let's add do cart promo code P tag and here we will provide the color property and

this color code after That we will add the CSS properties for this cart promo code input class name just copy this one and paste it here here we will provide the margin top 10 pixel display Flex justify content space between align items center background color and here we will use this color code after that we will Define the B Radius that will be 4 pixel we will save the changes now in the background we have this color after that we will add the CSS properties for this input field so here we will type dot cart

promo code input and and input tag here we will add the background transparent border none outline none padding from the left 10 pixel save the changes and we will open The web browser now background of our input field is transparent now we will add the CSS properties for this button tag so here we will type Dot cart promo code input button tag here we will add width Max property and we will Define 10 VW and 150 pixel then we will provide the padding 12 pixel and 5 pixel then we'll add the background Color that will

be black and the border will be none we will set the color white we will use the B radius of 4 pixel save the changes and we will open the web page now this promo code section is looking good now if I right click and click on inspect so this web page is not responsive in the smaller screen so we will make it responsive using the media Queries so let's come back to the vs code editor and here we will add at the rate media and in the condition we will add the max width 750

pixel here we will add dot cart bottom and in this one we will provide the flex d section column reverse then we will add Dot card promo code and here we will use justify content Start then save the changes now open the web page so if I reduce the screen size you can see it is looking good in phone screen if I add any product in the card page and open open the card page so this is how it is displayed in the phone screen now we have successfully created the card page and we have

made it responsive now we have to create the logic using that our subtotal will be calculated and then it will calculate The total to create that logic we will open a store context. jsx file let's remove this use effect that we we are using to check the cart items so let's remove it and here we will create one Arrow function that will return the card total so we will type const get total cart amount equal to and it will be one Arrow function here we will type let to total Amount is equal to 0 so

here we have added one variable with the name total amount and initialized it with zero now we will use the cart items in foreign Loop so let's add for and in this Loop we will add cost item in cart items const item in cart items here we are using for in Loop because the cart items is an object and this for Loop will iterate over that object and it will Provide the items one by one and this item will be the key value of the cart items so first we will type let item info equal

to food list dot find method and in this find method we will pass one Arrow function where we will get the product and here we will type product doore ID and here we will use the comparison And we will type I item so if our product ID is matching with the item that is the key value of our cart items it means this product is available in the cart in that case we will add total amount and we will add plus is equal to and here we will add item info do price into quantity so

this item info. price will give the price of one product and we will multiply that with the quantity so That we will get the total amount of that product and that will be added in the total amount variable so we will type cart items and in this one we will provide the item using that we will get the quantity of that product after that we have to execute this statement inside one if condition so let's add if cart items and here we will provide item greater than zero so it will be executed only when the

quantity is greater than Zero so provide this code inside this a statement let's click on the format document now after this for Loop we will get the total amount so we will return this total amount so let's type return total amount now this function is ready that will return the total amount of our card so we will pass it in this context value we will type get total cart amount we will save the changes and and we will open the cart Page here first we have to destructure that so let's add get total cart amount

after that where we have provided zero in the subtotal here we will provide get total cart amount so here we will provide get total cart amount function in the delivery fee we have Added two so we will add this two in the total so we will type plus two and save the changes and open the web page so if I open the homepage and if we add this product two quantity and this product one quantity and open the card page so here you can see for the first product the price is 12 quty 2 total

is 24 for the second product price is 24 quantity 1 and total 24 and by adding 24 24 the subtotal is 48 delivery fee is 2 and the total is 50 That is perfectly working now we will add the dollar sign so it will look like a currency so here just add dollar sign and here also we will add dollar sign and at the total we will add dollar sign now it is looking good now we will use this get total cart amount in our navigation bar using that if the cart value is zero this

dot will be hidden if the value is greater than zero then this dot will be visible again so for that we will open navbar do jsx File and here we will type const cly addes get total cut amount equal to use context and in this one we will provide our a store context here we will provide the dynamic class name so remove this do class name we will add the curly bres and we will provide get total cart amount if it is zero in that case we will Return empty string and if it is not

zero in that case we will return dot class name we will save the changes we will use the comparison triple equal to0 so if the total cart amount is zero in that case we will return empty string and if it is not zero then we will return dot so right now we don't have any dot in the cart icon and if I add any product in the cart this dot will be visual so we have added this Functionality also after that we will create one place order page where we can get the address details of

our user for that we will open the vs code editor and we will create this place order page to go to this place order page we will open the cart. jsx file and here we will use the navigate so let's type const navigate is equal to use navigate and We will open proceed to check out button and we will type on click and in this one we will pass one Arrow function and here we will use navigate and in this navigate we have to provide the path so we will type SL order here we have

added slash order because in this app.jsx file we have defined this route at this route we have placed the element place order component save the changes so if I click on this Checkout button it will open the order page now we will start building our place order page so first we will convert this div into form and here we will use the class name property that will be place order after that in this form tag we will create two div that will be place order left and place order right so let's add div dot place

Order left and after this div let's add another div with the class name place order right first we will create the left side so let's add one P tag with the class name title in this one we will add the delivery information after this P tag we will create one div with the class name multi fields and inside this div we will Create two input Fields so let's type input into two so the type will be text and in both input tag will will add the placeholder property and in the placeholder let's add the first

name and in the second one we will add last name after this STP will create two input fields and the type will be text and in both we will add the Placeholder property so in the first placeholder we will type email address because it is one email address so we will set the type email and here we will write a Street after that we will create one copy of this multi field div and place it here and replace this placeholder text it will be City and here we will type State after that again create one

copy and here we will add the placeholder zip code and here we will add country after this div we will create one input field and the type will be text and we will add the placeholder and in the placeholder we will type phone so this left side is ready save the changes and we will open the web Browser here we have these input Fields next we'll add the content in the right side so in the right TI first we will display the card total that we have created using this card. jsx file so from here

we will copy this div the name is cart total and copy this one and paste it in our order page in this place order page we will paste this div here also we need this Get total cart amount function in this component and we will remove this onclick property and instead of this proceed to checkout We'll add proceed to payment then save the changes and we have to mount this get total card amount using this context API so let's add cons cardly addes and in this one we will type get total cart amount equal to

use Context and here we will provide a store context we will save the changes and we will open the web browser so here we have this card totals and this delivery information after that we will add the CSS properties for this place order page so first we will copy this class name place order and paste it here in this place order. CSS file here we will provide display Flex Align items start justify content space between gap of 50 pixel margin top 100 pixel we will save the changes and open the web browser so in the

left side we have these input fields and in the right side we have the card total after that we will add the CSS properties for this place order left class name so let's copy this One and paste it here here we will Define the width 100% And we will Define the max width of Max property where we will provide 30% and 500 pixels we will save the changes after that we will add the CSS properties for this title so let's add dot place order left do Title Here we will use the font size 30 pixel

font weight of 600 margin bottom of 50 pixel save the changes and we will open the web browser now this title is looking good after that we will add the CSS properties for these input Fields here we will add the class name dot placeholder left then input tag for this input tag we will provide the margin bottom 15 pixel width 100% padding of 10 Pixel border one pixel solid and one color code then we will add the Border radius that will be 4 pixel and outline color tomato then save the changes now all the input

fields are aligned vertically next we will add the CSS properties for this multi Fields class name where we have two input Fields so here we will type Dot place order left Dot multifield and for the this one we will provide display flex and gap of 10 pixel just update it it will be multi Fields now you can see two input fields are aligned side by side first name last name then City estate zip code country and we have the large field for the email Street and phone number now we will add the CSS properties for

the Right side so let's add Place order. WR and here we will provide the width of 100% then we will provide the max width Max property 40% and 500 pixel now this right side is also looking good after that we have to add a space in this button so let's add place order dot cart total and button tag and here we will provide the margin top 30 pixel save the Changes now this order page is looking good so till now we have created our homepage where we have the navigation bar this header section this explore

m menu component then we have the food display component where we have displayed the food items after that we have created this app download component and at the end we have created the footer section and this add button and counter Is also working and if I click on menu it will scroll to the menu section if I click on mobile app it will scroll here if I click on contact us it will scroll the web page at the bottom if I click on this cart icon it will open the cart page here on this cart

page we have one issue our cart is empty and it is showing delivery fee $2 so to solve this one we will come back and we will open cart. jsx file F and here we have added two remove this one we will add get total cart amount is equal to 0 in that case we will simply provide zero and if it is not zero in that case we will set the delivery charge to similarly here also we will check if the get total cart amount is zero in that case we will provide zero and if

it is not Zer we will provide get total cart amount plus two we will save the changes now we will open the web Browser so now it is displaying 00 0 and if I add any product in the cart then it is displaying $12 delivery charge $2 and total is $14 next we have to update this Logic on this page also for that let's come back and open cart. jsx file just copy these div and open place order. jsx file and paste it here save the changes so here also it is Correct so till now

in this project we have created the homepage card page place order page and login popup component now we have completed the front end next we will move for the back end part so we will come back to the vs code editor and here we will close this front end folder and here we will create a new folder and we will provide the name backend now we will close these Files now we will open the terminal and stop this terminal to stop this terminal we will typ contrl C and yes delete these instance now we have

to open the terminal in the backend folder so we will right click over this backend folder and click on open in integrated terminal so now our terminal is open and we are in the backend folder now we will create our backend Project to create the backend we will use the command npm in it then press enter next we have to give the package name so we will keep it back end then just click on enter version will be default and in this entry point we will add server.js then just click enter for all these options

now in this backend folder we have one package.json file Now in this folder we will create a new file and we will add the name server.js now we have created the server file next we will add all the dependencies that will be helpful to create the backend so in this terminal we will type nbm install and here we will add the dependencies name that we have to install for our back end so here we will type Express then we will add the that Will help us to connect with the database then we will use Json

web token using this we will create the authentication system after that we will use bcrypt using this we will encrypt the users data and store in the database after that we will install cores using that we can give the permission to our front end to connect with the back end after that we will add EnV using that we Can use the involment variable in our project after that we will install the body parer using this we will pass the data coming through the user then we will use molter using this multer we can create the

image store system then we will install stripe using that we will add the payment gateways on the web page then we will add the validator using this validator package we will check the password or email ID Is valid or not and after that we will add node Monon using this package when we will save our project the server will be restarted so we will install all these package just press enter so it will install all these packages now all packages has been installed and here we have the node modules folder now if I open package.json

file so here we have all the Dependencies by Crypt body parser course and all these now we will create one script using that we can run the project so remove this and here we will add one script so let's add server and when we will run the server we will execute nodemon server.js then save the changes so whenever we will type npm run Server in the terminal then it will execute this server.js file let's close this file and now we will open the backend folder and in this backend folder we will create the folder structure

for our backend project so in this backend folder we will create a new folder and we will add the name config in this one we will store the configuration files like database Configuration file after that we will create one more folder in this back end and the name will be models in this one we will store the models of our mongod DV database after that we'll create one more folder and we will provide the name middleware in this one we will store all the middle Wares after that we'll create one more folder and the fold

folder name will be controllers in this controllers Folder we will add the logic for our back end next we will create one more folder and here we will add the name routes after that let's create one more folder and let's add the name uploads in this folder we will upload all the images uploaded by the user now we have created all the folders after that we'll create a new file and the file name isv where we will store all the Environment variables now our folder structure has been created next we will open server.js file here

we will create one basic Express server we will create one server that will be a module type server where we will use es6 feature to use the es6 feature we will open package.json and here we will declare type and the type will be Module save the the changes and here we will create the basic Express server so first we will import Express from Express package then we will import course from course package after that we will add one comment and here we will add app config and here we will initialize our app using the Express

package so let's Add const app equal to express after that we will Define the port number where our server will be running so let's add const port equal to and we will use the 4,000 Port then we will add one more comment and let's add middle wear here we will initialize our middleware so let's add app.use first middle Weare will be express. Json Using this middleware whenever we will get the request from the front end to back end that will be passed using this Json after that we will add app.use and here we will use

course using this we can access the back end from any front end so here we have initialized the is middleware after that we will add app.get method so the get method is a HTTP method using that we can request the Data from the server so we are using app.get method there are more other methods like delete update post and they have different uses we will talk about those later when we will use that here we have used the get method after that here we have to give the path where we want to run this endp

point so simply add slash after that here we will pass one Aro function and here we will take the Parameter request and response after that using this response we will create one response so let's add response. send and whatever this text so whatever text we will write here that will be displayed on this Endo so we will add API working so whenever we will open this endpoint we will get the response API working after that we will run the express server to run the express server we will Use app. listen and in this one we

have to provide the port number so let's add this port that is 4,000 and after that we have to pass one call back function so whenever our server will be running we will display one message in console so let's add console.log and here we will use the template literal so let's add the back tick and we will Add server started on and we will write HTTP Local Host colum and here we we will add the port number from the variable so we will add the dollar sign curly bres and we will add the variable name

which is port and save the changes so our basic Express server has been created where we have created one get method SL endpoint so whenever we will hit this endpoint we will get this message Api working To run this server we have to use this script which is server so in this terminal we will type npm run server then press enter so our Express server has been started and here we have the message server started on Local Host Port 4,000 so if I open this address in the web browser so here we have a message

Api working that we have added here in this Get method so whenever we hit any URL in the browser that will be executed as a get method that's why we are getting this message Api working to to test the API we will not use the browser we will use one extension which is thunder client in this extension we will test all our apis so we will click on this new request and here we will add this URL and the method type is get and here we will click on Send so here we have this message

Api working test 200 okay and here we have the timing so it is in the 7 milliseconds so we will use this thunder client extension to test our apis if it is not installed in your vs code you can go to extensions and you can search and install this extension after that we will set the database for the back end for that we will use the mongodb atlas database so First we will open the browser and here we will search for mongod DV Atlas now we will open this link now click on signin button B

it will sign up with Google you can use GitHub also so here first we have to create one organization so we'll click on this button create an organization here we have to provide one name so I will type greatest stack after that we will select this Mongodb Atlas then click on next button after that we'll click on this create organization button now our organization has been created next we will click on this new project and here we have to add one project name so we will just add projects then click on the next button again

now click on create project now our project has been created now we have to click on Database and click on build a database here we will use this m0 free server then we will keep it like this cluster zero then we will select the provider so I will select Google cloud and select your nearest reason so I will select Mumbai then click on create deployment after that we have to create the username and password so in this Username you can write any username I will write greatest stag and here we have to set one password

when you set the password make sure you don't use the at theate symbol so we will create another secure password without using the at theate symbol so let's add something then click on create database user so our user has been created then click on choose a connection method Driver here we will select mongos after that we will get this connection string so let's copy this first line now we will open the vs code editor so in this file we will write this text as a comment and we will come back to the browser then click

on close so here we have the notification and IP address has been added to the IP address List so close this and open this network access let's open this in this option the IP address is listed we can access the database from this particular IP to give access to all the IP we will click on this button add IP address and here we will type 0.0.0.0 then click on confirm button so here we have added this entry now it will allow us to access the Database from anywhere now we will delete the second entry now

we can access the database from any IP address now we will open the server.js file and in this config folder we will create a new file and the file name will be db. JS in this file we we will create the logic using that we can connect with the database so first we will import from mcu's package after that we Will add one Arrow function and the name will be connect DV it will be one asynchronous Aro function in this function we will add await do connect and here we will paste the text that we

have copied from the mongod website so paste it here after that remove this question mark and here we have to add the project Name that is food delivery so I have added food Del after connecting with database here we will add dot then and in this one we will pass one Arrow function and here we will console log one message and the message is DB connected so here we have used the dot then method where we have called The Arrow function and we are doing console log DB Connected after that we have to export this

function so just add the export keyword using that we can access this function in the server.js file open server.js file and after configuring the middleware here we will add one comment and let's add DV connection and here we will call connect DV function from the config DV .js file so this function has Been imported from config file and here we will add this parenthesis now save the changes so here we are getting one error to solve this one here we will type config SL db. JS that's it save the changes again now it will restart

the server and here we have the message server started on Local Host 4,000 and DB connected so our database has been connected with the Express app after that we will create the models using that we can store the products in the database so in this models folder we will create a new file and we will add the name food model dot JS here we will import from the package after that we will create the schema where we will describe the food model properties So here we will add the const phot schema is equal to new

do schema and in this one we will add one object so in our food data first we will add the name and and we will Define the type of this name property for that here we will add one object and uh in this one we will provide the type property and the type will be String and here we will add required true so if we will try to store any data without name that will not get stored because here we have added required true after that we will add the description property here we will Define

type string required true after that we will add the price and the type will be Number and required true after that we will add the image property where we will store the product image URL so we will add type string required true and in the food product we will add the category also so let's add category and we will set the type string and it is also required so we will add required true so we have created this schema for The food model so in the food model we will add the name description price image

URL and category Now using this schema we will create the model so let's add const food model equal to do model and here we will add the model name that will be food and here we have to provide the schema so we will add the food Schema now our model has been created but we can create this model only once but when we run this file again it will create the model again to solve this one here we will type dot models Dot food and after that we will add odd operator so if this model

will be already there it will be used if it is not there then it will create a new model after That we have to export this food model so let's add export default food model save the changes now the food model has been created after that we will create the apis using that we can add the new food item in our database for that we will open this controllers folder and in this folder we will create a new file and the name will be food controller.js in this file first we will import food model models

slood models. JS so this food model has been imported next we will import the file system from and here we are using this FS file system that is pre-built in the nodejs after that here we will add one comment and the and the comment is add food item after that here we will add one add function and the name will be add food so we will add const add food equal to and it will be one a sync Aro Function after that in this parameter we will take request and response after that we have to

Simply export one object and here we will provide add foot function so here we have created One controller function to add food item using this function we will create one route so we will open routes folder and here we will create a new file and the Name will be food route. JS in this file first we will import the express from Express package after that we will import this add foot function that we have created in this foot controller.js file so so we will type curly bres add food select it from here and here we

have to provide JS so the function has been imported After that we will import molter using that we will create the image storage system after that we will create one Express router for that we will add const and the router name will be food router equal to Express dot router so our router has been created using this router we can create the get method post method and many other methods so after that here we will Export default this food router and we will set up it in the server.js file so save the file and open

server.js file and after this DV connection here we will add one comment that will be API endpoint so first we will create the API endpoints for the food route so we will type app.use and here we will provide the endpoint address so we will add/ API SL food and here we will provide food router select it from here so it has been imported from the food route. JS file now we will save this and we will come back to the food route. JS file so here we will create one post request so let's add for

router. poost and we use the post method to send the data on the server and on the server Our data will be process processed and after that we will get one response for example when we fill a form that form data will be sent using the post method if I have to upload a file we have to use the post method so in this post method we will add one endpoint address that will be/ add and at this address we will run the add foot function that we have imported here so let's add add food

to use that API in this end point we have to use Local Host Port 4000 API / food then SL add endpoint after that here we will create the logic using that the image will be saved in this uploads folder for that here we will add one comment and we will type image storage engine after that here we will create one storage using the mulle disk storage method so let's add const storage equal To molter dot disk storage and here we will configure here the disk storage so we will add the destination property where we

will provide the folder name where I want to store the image so here we will add uploads after that we will add the file name and here we will pass one Aro function where we will add the request file and call Back here we will return our call back function where we will provide null and after that here we will use the template literal to rename our file for that we'll use the back tick and we will add a unique name for each image for that we will add dollar sign cly bres and to create

the time stamp we will add the date do Now using this method our file name will become unique and after that we have to provide one extens so let's add dollar sign curly bres file do original name so our storage has been created so whenever we will upload one file our time stamp will be added in the file original name and it will create a unique name and that file will be stored in this uploads Folder now we can use this a storage configuration so so let's add const upload equal to molter and in this

one we will provide one object where we will add a storage and here we will provide the storage that we have created using the dis storage so this Middle where upload has been created using that we can store the Image in the upload folder on this route we have to use this middleware to add this middleware on this route here we will type upload do single and here we will provide the field name that will be image and just add one comma so here on this food router we have created the post method SL add

endpoint where we have used this middleware to upload the image That we have created using the molter package and in this storage configuration we have used this disk storage configuration now our post method has been created next we will add the logic for this add foot function so we will open the foood controller.js file and here we will add the logic using that we can store the product data in the database so first we will add one Variable to store the name of the image so let's add let image file name equal to and here

we will use the template literal so we will add the backtick dollar sign cardly veres and here we will add request do file do file name using this we will store the uploaded file name in this variable after that we will create a new food using the food Model so we will add const food equal to new food model and in this one we will add the curly Braes to define the food schema we have used name description price image and category so now now we will provide the value for these properties in this food

model so we'll add name and it will be request. body dot name from the name field then we'll Add the description and we will take the description from request. body do description then we will add the price and this will come from request. body do price then we need category so let's add category and here we will provide request. body do category after that we have to add the image URL so simply provide this file name image file name so whenever we will hit this API in the body we will send these details and we

will access it in the back end using this function after that here we will add the try catch block and in this try we will use a wait food do save using this method this food item Will be saved in the database after that we have to create one response to create the response we will use the Json method and here we will send one object Che as a response where we will add success true and here we will add the message property where we will add the text food added if we get any error

while saving the food in that case this catch block will be Executed so here we will add console.log and here we will display the error so whenever we will get the error that error will be displayed in the console after that we'll add the response using the response. Json where we will add success it will be false because product is not saved and after that we will add the message and and here we will simply provide the text Eror so if we get any error while saving the product we will get this error and if

the product is saved we will get this response after that we will save the file and now let's test this Endo so we have created this endpoint at/ API SL food SL add and here we have used the post method so when we will save this file our server will be restarted and here we have the message DB connected so now we will open the Thunder client and click on new request here we will select post method and here we will use HTTP Local Host Port 4000 SL API SL food SL add after that in

this post method we have to send some properties so we will click on the body here we will not send the Jon we will click on this form and here we will add the field name And value so as in this foot controller as we have defined in the foood controller in the body name we will send the name then in the body description we will send the description then price then category and in the image we will send the image so we will open this request and we will add add name and let's add

the name tast one then we will add Description here we will add description test then we will add the price we will add the value 10 after that we need the category here we will add the category wedge after that we have to send one image also we'll click on files and here we will select one image so we will select this image and the field name will be image because we have defined it Here in the food right upload do single image so when we send the image the field name will be image so

after filling this form if I click on the send button here we have the message success true message food added it means our food item has been successfully added in the database and with that our image has been uploaded in this uploads folder so this is our image and the name has been changed we have the timestamp and at the end we have the Original file name which is foot five so if I open the web browser click on database then click on browse collections so here we have the food delivery entry and then we

have Foods model in this Foods model we have one entry where you can see the name Description price image and category so our API f good add endpoint is successfully working now we will see how we can access this image using that we can show the uploaded image on the front end for that let's come back to the server.js file and here at this API endpoints we will create one endpoint app.use and the endpoint address will Be/ images and here we will add express. static and here we will provide the folder name that is uploads

after this entry if I save the changes here we have this uploads folder that will be exposed on this endpoint so if I open the web browser and let's copy this image name and here we will type HTTP Local Host 4,000 SL Images slash and we will paste the file name and press enter so here we can see That image so basically what we have done here we have Mount the this folder at this end point if I insert any file in this folder and we can access that file by using this/ images SL file

name now our add food item functionality is successfully working using this API we can add new food items in our database after that we will create the List food API endpoint using that we can display all the food items listed in the database for that after this function we will create a new function and the name will be list food so first we will add one comment we will type all food list first we will create one Arrow function and the name will be list food this will be asynchronous Arrow function so we will type

A sync and in the parameter we will type request and Response so our function has been created now we will pass this function in this export object so we will add comma and list food after that we will open food route. JS file and here we will create one get method so we will add food router. getet and here we will provide one endpoint name that will be slash List after that here we will provide the list food function that we have created in this foot controller.js file so first we will import that file so

here we will add comma list food now this function has been imported after that here we will provide list food function so we have created one new endpoint at/ list that will execute the list food and save the file open food controller.js file and here we have to Create the logic using that we can access all the food item and send them as a response so first we will add the TR catch block in this try we will add const Foods equal to and we will use a weit food model using this model we can

Fitch all the food items for that we'll add do findind and in this method we will simply add one empty Object in this variable we will get all the data of the food items after that we will create one response using the Json method and here we will pass one object and the property will be success true and here we will add one more property that will be data and in this one we will pass the variable so simply add foots after that if I get any error in that case we will add one message

in console So we will add console.log error and after that we will create one response also so we will add a response. Json where we will add success false and here we will add the message that will be eror we will save the changes after that we will open the Thunder client go to last request here we will send this request again so That we will create multiple food items for that we'll click on the send button so here we have the response forood added we'll click again again and this food will be added multiple

times if I refresh this so here we have total five items in this database now if I open the vs code editor let's close this request and we'll click on new request our new endpoint is mounted at this SL list Endpoint so here we will type Local Host API food SL list because this is one get method so we'll select get and we don't have to provide anything in body just click on send button and now we have the success true and here we and here we have the data property where we have one array

and in this array we have multiple objects each object is representing one food item total we have five food Items so this Endo is successfully working next we will create the end point using that we can remove these food item from our database for that here we will add one comment and here we will add remove food [Music] item after that here we will create one Arrow function and the name will be remove food and it will be one async Arrow function so let's add Asinc request response so we have created this function after that

we will pass this function in this export object so just add remove food after that we will open food route. JS file and here we will access remove food and using that function we will create a new endpoint so we'll Create one new post method and here we will pass the endpoint name that is/ remove after that here we will add remove foot function and save the file now we will come back to the foot controller.js file in this function so first first we will add the TR catch Block in this triy block first we

have to find the food item that we want to delete to find the food item here we Will add const food equal to a weight and here we will add the food model dot find by ID so here we have to provide the ID as you can see in this data where we have the ID that is created automatically using the mongod DV so whenever we will add a new entry one ID will be created so when we need to remove this we have to pass this ID in the body and we will access It

in this function so here we have to provide the request. body do ID using that that food item will be stored in this variable after that we have to delete the image of this food item from the upload folder so we have added the products five times so you can see the five images here so to delete these images here we Will type file system dot unlink and here we have to provide the path of the image so here we will use the template literal back tick so our images will be in the uploads folder

so we will type uploads slash and here we have to provide the name so we will add the dollar sign curly bres then food. image Property after that we will add one call back function and we will keep it like this after that this image will be deleted from the folder after that using this ID we have to delete the product data from the mongod DV database for that here we will type await food model do find by ID and delete and here simply provide request. body do ID after that our food data will be

deleted from the database and using this line we can delete delete the image from the folder and this line is used to find the food model using the ID after that we'll create one responsejson and here we will add one object where we will add success property that will be true and after that we'll add the message and we will add the message food Removed so if this execution fails in that case this catch block will be executed and here we will console log this error and after that we'll create one response using the Json

method where we will add the success false and we will pass the message and here we will simply add error save the changes now we will test this API for that let's open Thunder client click on New request and here we will select post method and here we will add Local Host port 4,000 SL API SL food SL remove and here in this body we have to pass the ID of the food item we will send it as a Json so we will add the curly reses here we will add the ID property and here

we have to provide the ID so so we have multiple objects let's copy this ID and paste it here if I click on the send button you can see the message success True Food removed so now if I open the web browser refresh this so here we have only four food items it was five so we have deleted one Item now we have total four items now if I open the file system and in this upload folder you can see one image has been deleted now we have only four images in this uploads folder now

let's copy the another ID and delete the product let's copy the second ID and paste it here then click on send button we have not copied it I think that's why we are getting this error so let me again copy this One and paste it here then click on send button now you can see the message food removed now if I open the web page and refresh it so now we have three products let let's copy this another ID and provide it here then click on send button so this product has been removed again now

this product is also removed now we have only two images in the Folder let's copy the another ID paste it here click on send food removed now we have only one image in the folder let's copy the another ID of the last product paste it here then click on send button so this food removed is here now in this uploads folder we don't have any image open the mongodb website refresh it now you can see here all the items has been deleted we have the zero Result now if I hit this API end point which

is Local Host API food list that display the food items let's click on send now in this data we have one aray and in this aray we don't have any data that is because we have deleted all the food items from the database so here we have created the apis to add the food item display the list of food item and remove the food item Now using these API we will create the admin panel so let's close these files in this food delivery folder we will create a new folder and we will add the name

admin and we will open this folder in the integrated terminal so we are in the terminal and we are in the admin folder so here we will type npm create we Latest then dot then press enter here we will select react then select JavaScript and we will run these commands npm install so all dependencies has been installed in this admin folder so you can see all the files has been created in this admin folder now we have to run this admin project so we will type npm run Dev and open this address in the browser

so you can see the default react project now we will clear this default project for that let's come back and uh open this SRC folder and remove this app. CSS just delete this one then open index. CSS and clear this file then open app.jsx file clear this file and here we will type RC we will save the Changes after that we will open assets folder and from here we will delete this react logo after that we will open index.html file and here we will rename this title so let's add food admin save the changes now

you can see the project is clear and you can see the title in the browser food Del admin Now we will start building our admin panel so first we will add the custom font in our admin panel project so we will open the web browser and here we will search for outfit font open this link click on get font get embedded code then click on this at theate import just copy this line and we will come back to the vs Code editor and in this index. CSS file I will paste this link after that add

one semicolon and here we will add the CSS properties for all the elements so we will add the start and in this one we will add the padding zero margin zero then box sizing border box then we will add the font family outfit then we will add the CSS properties for the body tag here we will provide the minimum Height that will be 100 VH then background color and one color code then we will add the CSS properties for all our links which is in the a tag then we will add the text decoration none

color inherit then we will add the CSS properties for the HR tag it will be border none height will be one pixel and then we will add the background color and one color code save The changes now we have the outfit font support in our project and we have provided some CSS properties now first we will create one component folder in this SRC folder so let's create a folder within this SRC the folder name is components now we will insert the Assets in this assets folder so here I have one assets folder where I have

some icons for the admin panel so we will copy these files and Open the project folder go to admin go to SRC folder and assets folder and paste all these files now we have inserted the Assets in this assets folder here we have one assets. JS file in this one we have imported all the images then exported all images in one object and the object name is Assets Now we will create another folder in this SRC that will be pages and in this Pages folder we will create Multiple Pages for now we will stop running

this project we will type contrl c yes then we will install some packages so first we will install exos using that we can create the network request like get post edit Etc then we will install react tosy using that we can create the toast notification easily after that we will install react router Dom then press enter so it is installing all these packages now our packages has been installed after that we will run the project again for that we will type npm run Dev now in this components folder we will create a new component and

its name will be sidebar so we will create a new folder with the name sidebar and within this folder we will create a new file and it will be sidebar. Jsx in this jsx file we will use RFC and for this component we will create one CSS file so within this sidebar folder we will create a new file with the name sidebar. CSS now we will import the CSS file in this jsx file for that we will type import do/ sidebar. CSS and within this components folder we will create another folder with the name Navar

and in this one we will create one jsx file and the name is is Nabb bar. Jsx here we will use RFC and within this nabbar we will create one new file that is nabbar docss and import this CSS file in this Nabb bar. jsx so here we have created two components that is sidebar and Navar now we will open app.jsx file and and within this div we will Mount the Navar component and here we will provide one HR Tag after that we will create one div and we will provide the class name app content

within this div we will Mount the sidebar component and save the changes now in this project we will add the support of react router so we will open main. jsx file and here we will remove this react a strict mode and here we will import browser router from react router Dom Here we will create the browser router tag and within this tag we will place this app component after that now we have the support of react router in our project now we will open app.jsx file and here we will add the CSS properties for this

app content so we will open index. CSS file here we will add the class name dot app content here we will add display Flex we will save the changes now we will open na. jsx file in this browser we don't have anything because we have not created anything for the UI so we will create the Navar component so for this div we will provide a class name property that is Navar then we will add two images tag so we will add the IMG into two so in this image tag we will add the class name

property and here we will add the class Name logo and in this SRC we will add the C assets and we will add the image so in this assets. jsx file we have imported all the images so here we will import that assets from double do/ do/ assets folder SL assets file so here we can use ass sets. logo similarly in this IMG we will add The class name property and the class name is profile and in this SRC we will use cly bres assets dot profile image we will save the changes and we will

open the web browser so here we have both images logo and profile image next we will add the CSS properties for the navbar so we will open navbar do CSS file here we will add the class name navbar and here we will add display Flex justify content space between align items Center then we will provide the padding 8 pixel and 4% we will save the changes so in the left side we have the logo and in the right side we have the profile image after that we will add the CSS properties for these images here

we will add navbar do logo here we will provide the width Property that will be Max 10% and 80 pixel we will save the changes so this logo size is looking perfect after that we will add the CSS properties for the profile image so we will add the class name do Navar do profile and here we will add the width 40 pixel save the changes so you can See these images are looking good after that we will open sidebar. jsx file and for this D we will add a class name property it will be sideward

now we will create one div with the class name sidebar options then we will add one div with the class name sidebar option so we have created sidebar options and in this one we have the Sidebar option within this div we will create one image tag and in this image SRC we will use assets dot add icon and here we will add one P tag where we will add add items now we will create two other copy of this div in the second one we will use the different image so we will add order icon

in the third one we will use assets Dot order icon in this P tag we will add list items in the third one we will add orders we will save the changes and we will open the web browser so in the left side we have these icons and text now we will add the CSS properties so we will open sidebar. CSS file and here first we will add the CSS properties for the side our class name here we will provide the width 18% main height 100 VH border 1.5 pixel solid and one color code then

we will add the Border top it will be zero and save the changes so here we have the layout of our sidebar after that we will add the CSS properties for this class name sideward options so let's copy this One and here at this class name here we have to provide padding from the top it will be 50 pixel then padding from the left 20% display Flex F Direction column and gap of 20 pixel we will save the changes so this is how it is displaying right now now we will add the CSS properties for

this sideward option Class name so just copy this one and add it here in this CSS file here we will provide display Flex align items Center Gap will be 12 pixel then we will add the Border property it will be 1 pixel solid and here we will provide this color code after that we will add the border from the right side it will be zero then we will add the Padding 8 pixel and 10 pixel then we will add the Border radius it will be 3 pixel 0 pixel 0 pixel and 3 pixel then we

will add the cursor pointer let's save the changes and we will open the web page so now these items are looking good next we have to add the CSS properties in the sideward here we will add the font size let's add the max property 1 VW and 10 pixel let's save the changes then we will add the media query so that this component will be responsive so here we will add condition Max width 900 pixel and here we will use the class name dot sidebar option then P tag and we will make it none so

we will hide it so just add display none now let's inspect this web page when I reduce the size of this web page these P tag are removed we can only see the icon now we Will set up the react route for that we will open pages folder and here we will create three pages to add the product to display the the list of product and to display the order so here we will create a new folder with the name add now in this Pages folder we'll create another folder with the name list then we'll

add one more folder in the spages folder and the name will be orders now within these three folders We Will create one jsx file and one CSS file So within this add folder we will add one file add. jsx here we will add the adfc now in this add folder we will add a CSS file so it will be add. CSS now import this CSS file in this jsx file so we will add import. slash add. CSS we will save the changes similarly we will add the new file in this list folder it will Be

list. jsx here we will use rafc then we'll add the new file in this list folder it will be list. CSS and import this CSS file in this jsx file then we'll create a jsx file in this orders folder it will be orders . jsx use R fce then we will create the CSS file in this orders folder so we will select new file and the file name is order. CSS here we will import the CSS File orders. CSS now save the changes so here we have created three folders within this Pages folder and in

all three fold folders We have created one jsx file and CSS file now we will set up the routes in this app.jsx file so after this sidebar we will create routes tag click here routes from react router D so it will be imported from component so it will be imported automatically in this component now Within this routes tag we will create multiple route so first we will create route tag here we will provide the path SL add and at this path we will add the element and here we will Mount the add component close this

then close this route tag we have to import the route tag so let's add here so let's add it here route so we have created one route and The path is/ add and in this one we have mounted the add component now just copy and paste it again for two times we will change the path it will be list and here we will Mount the list component similarly here we will add path orders and here we will Mount the orders component so these components has been imported automatically in this file and here we have set

up the Route now we will open side. jsx file and Within These div where the name is sidebar option we will convert this div we will use nav link tag that is coming from react router Dom we have selected nav link and it has been imported from the react router D package now here we will add two property here we will provide SL add we have provided this add path now we will update the second div it will be nav link here also we will add the two Property and we will provide SL list now

for the third one we will replace the tag it will be nav link here we will provide two property and we will provide slash orders we will save the changes now if I come to the browser and click on this add items here we are on the SL add path if I click on second one we are on the SL list if I click on orders we are on the slash orders Page so here you can see the/ orders SL add/ list but it is not visible on these list items now we will add the

logic so that when we will click on anyone that will become red so here we have used the nav link so if I inspect the web page let's click on this tab and when we have clicked here in this anchor tag we have one active class because here we are using naving Tag so when we go to another route a new class name active will be added in the nav link if I go to the third one so in the third one you can see the active class name and it has been removed from other

two now we will add the CSS properties for this active class name for that we will open sidebar. CSS file and here we will add dot sidebar option do active so when the active class name is present in that case we will add the Background color and this color code then we will add the Border color here we will use this color code we will save the changes and we will open the web browser now if I click on add item so this tab is highlighted if I click on the second one it is highlighted

if I click on the third one you can see it is highlighted with this color and the route is also Changing now if I go to Pages folder and add. jsx file and here if I add the text add save the changes in this list we will add the list save the changes and in the orders. jsx file we will add the text orders save the changes when I click on ADD items it is displaying add if I click on list items it is displaying list if I click on orders it is displaying orders so

this router is successfully working now we will remove these Text now we'll create the add page using that we can add a new product in the mongod DV database so first in this div we will add the class name property and here we will provide the class name add after that here we will create one form tag and in this form tag we will remove this action and here we will add the class name and the class name Is flex call after that now we will create One D where the class name is add image

upload so let's add dot add image upload with this class name we will add one more class name that will be Flex call within this div we will create one P tag and here we will add the text upload image after that here we will add the label Tag and here we will will add HTML for image and in this lbel tag we will add one image tag in this SRC we will add assets dot upload area after that we will add the input tag and the type will be file and the ID will be

image then we will hide it so we will use hidden and we will set it required after this div we will add one more Div here we will add the class name add product name within this div with this class name we will add one more class name Flex call and here we will add a paragraph tag the name will be product name after that we will add the input field and the type will be text then we will add the name property it will be name then we will add the placeholder property so just

add type Here then we will add the another div with the class name add product description with this class name we will add Flex call and here we will add the P tag where we will add the product description after this P tag we will create one text area here we will add the name description we will remove this ID and column property and we will provide the row Six after that we will add the placeholder property and here we will add right content here we will set it as required we have added the text

area after this div we will add one another with the class name add category price so just add the text add category price within this div we will add one more div here we will add the class name Add category with this add category we will add the class name Flex call and in this div we will add the P tag where we will add the product category after this P tag we will create one select button so just use the select tag the name will be category remove this ID in this select tab we

will add eight options tab so just add option into 8 and in this Value we will add the same text that will be option text so we will add the SED here we will add the rolls in the text and value in the third one let's add desert after that here we will add sandwich then we will add cake in the next one we will add pure wedge then we'll add pasta and in the last one we will add noodles after That after closing of this div we will add another div and here we will

add the class name add price with this class name we will add one more class name Flex call and within this D we will add one P tag and here we will add the text product price after this P tag we will add one input tag and the type will be number then we will add the name Property it will be price and here we will add the placeholder property and we will add $120 after this div we will add one button tag and we will add the button text add and within this button tag

we will add the type that will be submit then we will add the class name property it will be add button we will save the changes and we Will open the web browser if I go to add items option so here we have these image upload area product name description col category select option then product price then add button now we will add the CSS properties so we will open add. CSS file and first we will add the CSS properties for the add class name here we will Define the width it will be 70% margin

left Max here we will use 5 VW and 25 pixel then we will add the margin from the top that will be 50 pixel then we will add the color and this color code then we will Define the font size it will be 60 pixel we will save the changes now we have the space on the top and left side and the text color has been updated after that we will add the CSS properties for This form tag so in the CSS file we will add do add then form tag here we will add the

gap of 20 pixel then we will add the CSS properties for this Flex call we will use this Flex call in multiple components so we we will add this CSS in the index. CSS file so open index. CSS file here we will add this class name let's add display Flex Flex Direction column gap of 10 pixel save the changes and we will open the web browser after that we will open add doj x file and we will add the CSS properties for this IMG tag that is in this class name add image upload so just

copy this class name open add. CSS file paste it here then we will add the IMG tag and for this image we will Define the width it will be 120 pixel so this Image size is 120 pixel after that we will add the CSS properties for this class name add product name add product description just copy this one and paste it here add product name comma do add product description here we will provide the width Max property 40% or 280 pixel we will save the changes so on these div we have defined the width now

we will add the padding on these input field and text area so let's add dot add product name a space input field comma do add product description text area and here we will provide the padding 10 Pixel we will save the changes now here we have the padding of 10 pixel within this input field and text area so it is looking good after that we will add the CSS properties for this class name add category price so let's copy this paste it here here we will add display Flex gap of 30 pixels save the changes

now this product now this product category and product price are aligned Side by side now we will add the CSS properties for the select button and input field for the price so just come back we will add dot add category price then select tag comma do add category price input field and here we will provide the max width 120 pixel padding of 10 pixel we will save the changes now this product price input field and product category select menu is looking Good after that we will add the CSS properties for this add button so we

will add the class name do add button here we will Define the width here we will Define the maximum width 120 pixel border none padding padding 10 pixel background color black colored white cursor pointer we will save the Changes so this add button is looking good now this add items page is looking good we have completed the UI now we will add the functionality so now we will store this image for that we will create one state variable so we will open add. jsx file and here we will create one state variable and the name

will be image so just add const image and the seted function name will be set Image equal to user State and in s it with value false after that we will open this after that we will come here in this input field here we will add the on change property we will pass one Aro function and in this addo function we will pass the event and here we will use set image Setter function and and here we will provide e. Target do files index number Zero we will save the changes and we will open the

browser if I click on this image it will open the image selection window and if I select any image so we have selected the image but we have not displayed the preview of that image to create the preview let's come back to the vs code editor and within this SRC we will add tary operator so here we will check if we have any image available in that case we Will display that image if this image is not a level in that case we will display the image from this assets. upload area so after this question

mark we will use this image State and create one URL so for that we will add URL dot create object URL and here we will provide this image State we will save the changes and we will open the web browser so now this image preview is Displayed here if I click again and select the other image so that image preview is displayed here now this image is getting stored in this state variable after that we have to create one object where we will store the product name description product category and price for that here we

will create one more State variable and the name will be data so just add Const data then seter function name will be set data equal to user State and we will initialize it with one object where we will add the name property we will set it as empty string then we will add the description property it is also one empty string then we will add the price here also we will add the empty String then we will have the category here we will add the salad so that whenever we will reload the web page our

default category will be salid because it is the first option so we have added the default category SED after that we will come to this input field which is in the add product name div so we will convert this input field in the controlled input field it means when we change anything in this Input field that will be updated in this state variable for that first we have to create one on onchange Handler function so here we will add const on change Handler it will be one Arrow function in this one we will pass the

event so that on which input field we will update that event will be added in this function parameter so from this event we have to find the Event name and value so just add const name is equal to event. Target dot name then we'll add the con value so it will extract the value so value equal to event Dot Target dot value so we have extracted the name and value from this event after that here we will add set data we are using this set Data Setter function here we will pass the previous data and

we will use this parenthesis and we will use the CES here we will take our previous data and here we will provide field name it will be name and we will update the value with the new value that we will get from the event so we have created the on change Handler function now in this input field We will add onchange property and here simply provide the on change Handler function after that here we will add the value property and to save the product name we will use this field so we will provide data do

name now let's copy this on change and paste it in this text area here we will add the value property that will be data do description after that and this select Op we will paste that on change and uh after this input field here also we will add on change on change Handler we will add the value property and in this value we will use data do price so for each field we have added the on change property we will save this file and to check this whether our data is getting updated we will create

one use effect and here we will pass one Arrow Function and here we'll add the square braet and we will add the state name that is data so whenever our data will be updated this function will be executed here we will add the console log so let's add console.log and just provide the data we will save the changes and we will open the console tab so when I refresh the web page in this object we have the name price description these are empty and we have the category salad if I add Something in this name

veg this so whenever I'm updating a letter in this input field at that time this onchange Handler function is getting executed and it is updating the data in this state variable and when it is getting updated it is printing the data in the console so in the last one you can see the name wedge dis in the name that we have provided here if I add something in this Text area eat tasty food open the last object so in the description we have eat tasty food if I update the category here we have the updated

category which is cake if I update the price if I open this one here we have the price 20 Wes eat tasty food and the category cake so all these fields are getting updated successfully now let's remove this use effect we have already checked it so we Have removed it let's remove this use effect import we will save the changes when I select the image it is updating this image State and other data is saved in this data State variable so we have all the data of this form now we can do the API call

to make the API call here we will create one onsubmit Handler function so just add const on submit Handler and it will be one a sync Aro function we will pass the Event here we have created the function now in this form we will add on submit is equal to and we will provide the onsubmit Handler function then save the changes now if I click on the add button here we have this tool tip message fill out this field so let's select the image add the data then click on the add button this page is

getting reloaded to prevent this Reload let's come back and in this on submit Handler just add event dot prevent default if I save the changes and select any image add any text add any price click on ADD button now now it is not reloading the web page and this function will be executed now we have to insert all these form data which is the image and these title description price category in one form data so first we will create one Form data so just add const form data equal to new form data so we have

created the form data now now we have to insert all the data 1 by one in this one for that let's add form data dot append and here we will provide the field name so we will provide the name and it will be data. name Similarly let's copy this one paste it again here we will add the description and for this description field name we will add data. description then we will paste it again here we will add the price and we will provide data. price we have stored this price as a string and we

have defined the price as a number in the back end so we have to convert this value in the number so we'll add this bracket and here we will Use number now this number now this string will be converted into number now we will paste it again and here we will Define category field name and in this category we will add data. category and after that we will add form data do append and here we will add the field name image and in this field name we will send image Estate so we have provided name

description price category and image in this form data next we have to send this form data on our endpoint so our back end is running at Port number 4,000 so let's press crl C so that it will stop this back end now we will run this back end again so simply add npm run server make sure you are running this Npm run server in this backend folder so whenever you have to run the back end you have to open the backend folder which is here select open in integrated terminal then only run npm run server

command so now our server has been started here we have the message DV connected now we will do the API call to call the API we will use the exos so just add const response here we will created the variable response where we will store The response response from the server equal to await and here we will use the exos so first we have to import the exos so let's add import exos from and here we will use EXO package now after this await we will add exos do Post method because we have created the

add API using the post method that's why we are using ao. poost and after that we have To add the URL So within this add we have to create one variable it will be const URL and in this URL we will save the URL so our URL is HTTP colon SL SL Local Host Port 4,000 so this is the URL We'll add the semicolon and here we will come to xs. poost and we will add the template literal so let's add back Tick and after that we'll add the dollar sign curly bres URL and here

we will add the slash API slood SL add so this is the end point where we will upload the product after that we have to send the form data so simply add form data so that all the field data will be sent after that this form data will be added in the database and this image will be stored In the backend folder after that we have to check our response is success or false so here we will add if response. data dot success if the response is Success then we will add the statement for this

if condition that will be executed if it will be false it means the food item is not added in the database in that case we will add one Elsa statement so if the response is Success in that case we have to reset these field value for that here we will use this object just copy this and in this if statement we will add set data and paste this one so the data will be reset after that here we will add set image false so that image will be reset we will save the changes and we

will open The web browser if I add any image then we will add the product name then we will add the description let's select the desert price 10 click on ADD button so you can see the form has been reset and it will be reset when the response is Success it means our data has been added successfully in the database so let's open the mongod DV database click on this refresh button Now in this database we have added one product which is food one description is tasty food price is 10 and this is the image

file name this is the category so let's try to access this image copy this image file name here we will add Local Host 4,000 images and paste the image file name press enter so now our image is open it means the image is successfully saved in our folder now if I open the vs code editor and if I Open backend folder here we have the uploads folder and in this uploads folder we have the image let's close this folder so this add item function is successfully working now we have to add the notification using that

we will get one notification about the product added successfully for that we will search toasttify and we will open react toasttify Here we have different type of notifications so here scroll down and just copy these two lines and open the vs code editor we will open app.jsx file and paste these two lines here after that after this div we have to mount the toast container and close this one remove this toast so here we need this toast Container and this CSS file save the changes and open add do CSS file and in this if statement

after this set image here we will call the toast that we will get from the react toasttify so we will type toast. success and here we will provide one message and that will be dis played on the web page so just add response. dat do Message where we have added the food added message in the backend response so we will save the changes and we will open the web browser so if I add any product image then we will add the product name food to then we will add the description healthy food we will select

the category PIR wage then we will add the price 10 click on the add button so here we have one Toy notification food added so this react toy is successfully working similarly if I get any error in that case we will display one to error so let's add toast. error and here we will use response. data do message so whenever we will get any error in that case in the notification we will get one error message we will save the Changes so if there will be any error we will get one tost notification with red

color error message after this we will create the component list items where we will display the food items that is available in the database we will display that as a list for that we will open the vs code editor and here let's close these files let's open list. jsx file first we have to store all the data from the database into one state Variable so we will create one state variable with the name list and the setter function name will be set list equal to user State and initialize it with one empty array after that

we will create one fetch list function so we will type const fetch list equal to and it will be one as sync Arrow function here we will add API call so let's add Const response is equal to a wait then we will add the exos first we have to import this exos from exos after that we will add dotg method and here we have to provide the URL so let's create one variable const URL equal to http column SL SL Local Host Port 4,000 after that here in this get method We will use the template

literal so let's add the back tick dollar sign curly bres URL and in this URL we will append SL API SL food SL list so when we hit this API link we will get the response with the food items data so here we will add one if statement and here we will check the response. data do success if this is true it means the data has been loaded in the response variable in that case we will load those data in the State variable so we will add set list then response. dat. dat so our response

data will be saved in the list variable if we don't get any data in that case We'll add else and uh here we'll add toast. error and simply so one error message so we have to import the toast also so we will type import to toast from react toasttify so this fetch list function has been Created after that we have to run this function whenever the web page is loaded so we will use the use effect and pass one Aro function and here we will add one empty areay in this add function we will call

the fetch list function so whenever this component will be loaded in that case this function will be executed once to check this whether we are getting the response here we will add console Log response. data then save the changes open the web page let's click on inspect and open console tab and when we will load this page here we have one object where we have the success true and here we have the data are a where we have two items which is food one and foot two so these data is available now we have to

display these foood data in the list item Page so let's come back and in this div we will add add the class name property and we will add the class name list then we will add one more class name which is ADD then we will add Flex call here we will add the paragraph tag and we will add the text all foods list save the changes so here we have the all foods list after that we'll create one div with the class name list Table in this div we will create one motive with the class

name list table format with this class name we will add title class name in this one we will create five b tags so let's add B into five in the first one we will add the image in the second one we will add name in the third one we will add the category then we will add the price and in the fifth one we will add the action save the changes so here we Have the image name category price and action after this div we will add one cly addes and here we will add list

State and on this one we will add the map method here we will pass one Arrow function in this parameter we will pass individual item and we will pass the index number and here we will return one format where we will display the data so we will create one div and in this one we will add the key property and here we have to add Index after that we will add the class name property that will be list table format in this div first we will add the image tag and in this SRC we will

use template literal so we will add the back tick where we will add the dollar sign curly bres URL and then we'll add/ images and here we will add item do image that will be the image Name then we will add the P tag and here we will add curly presses item do name after this P tag we will add one more P tag where we will add the curly bres provide item. category after that we will add one more P tag where we will add curly dresses and we will display price so we will

add item. price here we will add dollar sign also after that we will add the P tag and we Will simply add X save the changes and we will open the web page so we have added two items so these two two items are displayed here where we have the product image name category price and this cross icon after that we will add the CSS properties for this list item page so first we'll open this list. CSS file and here we will add the CSS properties for do list table format here we have used this

list table format and The same class name is used here list table format so let's add the CSS properties display grid GD template columns five fraction two fraction one fraction one fraction and 0.5 fraction after that we will add the Align item Center Gap will be 10 pixel padding 12 pixel 15 pixel then we will add the Border one pixel Solid and this color code after that we will add the font size 13 pixel we will save the changes and we will open the web page so here here these items are displayed in the horizontal

line now we will add the CSS properties for this title class so let's add dot list table format. title and here we will add the background color and this color code save the changes so you can see this background Color in this title after that we'll add the CSS properties for these images so we will type dot list table format IMG tag and here we will Define width 50 pixel save the changes now these items are looking good after that we will add the media quy so that these components will be responsive so we will

add the media screen we will add the condition Max Width 600 pixel and here we will add Dot list table format grid template columns one fraction three fraction and one fraction after that we will add the gap of 15 pixel then we will add do list table format Title Here we will add display none we will save the changes and if I open this web page below 600 pixel now this is how this food item is Displayed and this add item is already looking good in phone screen now we'll add the CSS properties for this

cross icon so let's open list. jsx file and in this P tag we will add class name property cursor we will Define the CSS properties for this cursor in this index. CSS F so just add do cursor cursor pointer now if I move cursor over this cross icon we have the cursor pointer Effect now this list item is ready next we have to add the logic for this cross so that when we'll click on this one that item will be removed from the database for that let's open list. jsx file and here we will create

one Arrow function and the function name will be remove food it will be one asynchronous Arrow function so let's add async here we will pass the food ID then we have to link this function with this P tag so here we will add on Click and here we will pass one Aro function and we will call this remove move food function in this one we have to provide the item do ID if I inspect the web page go to console and in this data you can see we have the ID which is underscore ID so

we have to provide this ID in the function so here we'll add item doore id we will say the Changes and we will check whether we are getting the ID in this function so just add console.log food ID and remove this previous console log save the changes now if I open the web browser refresh the web page open the console Tab and click on cross icon so here it is displaying the ID for this food item if I click on the second one now it is displaying the ID of the second food item so we

are getting the food ID now Remove this one and here we will do the API call so let's add con response equal to await and here we will use the exos dopost method because we have created the remove food API using the post method here we have to provide the template literal so let's add backtick dollar and curly brushes URL and here we will add/ API SL food SL remove after that we have to pass one object where we will Define ID that will be food ID using that this food will be removed from the

database after that we have to update the UI with the new data so once we have removed this first one that will be removed from the database after that again we have to fetch this data and display the new data for that here we will add a wait fetch list and run this function again save the changes and we will open The web page so from here we will remove the food one so let's click on the first cross that food one has been removed and if I refresh the database you can see the food

one has been removed now we have only food to this remove action is successfully working after that here also we will add one toast notification so that the user will see the the item has been deleted so let's add if and we will add response data do Success if the success is true it means the item is successfully removed from the database so in that case we will add one toast notification so let's add toast. success and here we will provide response. dat. message after that we will add the Elsa statement also and here we

will add toast notification and the type will be error and here we will display Error save the changes now let's open the web browser now if I click on this cross icon that food item has been removed and here we have one notification food removed so now we have successfully created the add items and and list items component now we will upload all products one by one with the image name category in the database so here we have uploaded all 32 Items using this admin panel after that now we will come back to the vs

code editor and here we have defined the URL in two places in the list. jsx file and add. jsx file now we will remove these URL and we will Define the URL at one place where it will be in the app.jsx file so in this app.jsx file we will add const URL equal to http colon // Local Host Port 4,000 after that In these elements we will pass the props URL equal to URL so here we have passed this URL as a props in add page list page and orders page now open add. jsx file

and here we will simply D structure that so just add URL and remove this URL save the changes now open this app.jsx file save the changes now Open list. jsx file destructure the URL and remove this const URL save the changes now if I open the list items still you can see all the products if I go to add items let's add one more item we will add the name test test here we will set the price click on ADD now in this list item you can see test if I click on the delete this

will be removed now we have defined the URL only one place which is app.jsx file now we Will close the admin panel let's switch to another terminal and close this admin panel contrl C and Y now delete this instance now we have only one terminal where the back end is running now close these files now we will open the backend folder here we have created the food controller logic using that we can add the food list the food and remove the food next we will create the user Authentication system so that we can allow user

to login or register on the web page for that first we'll create one user controller.js file so we'll create a new file and the name will be user controller.js so we have created user controller.js file now now we'll come to routes in this routes we will create new file user route do JS so we have created two files user controller where we will create the login and sign of logic after that we have created this user route. JS file where we will create multiple route after that we will open models folder and here we will

create a new file and the file name will be user model where we will Define the model of our user so first we will create the user model for that we will import From package after that we will Define one schema for our user so let's add const user schema equal to new do schema and in this one we will add one object and here we will define the properties that will be in the model so here we'll add the name property and next we'll Define the type so the type will be String then we

will add the required true after that we will add the email property where we will save the users's email and the type will be string and the required will be true with that we will add one more property that will be unique we will set it true suppose one email ID is already used to create an account we cannot create another account with that email ID because we have added unique true after that we will add password property and the type will be a string and this is also required true after that here we have

to create one cart data where we will manage the users's card and the type will be object and uh by default the cart will be one empty object here we will add comma and we will add minimize false if we don't add This false in that case this cart data will not be created because we have not provided any data here that's why we have added minimize false so that this card data entry will be created without any data then we will add const user model equal to do model do user after that we will

add the r operator and here we will add doel and here we will add User user schema so if the model is already created that model will be used if the model is not created it will create the model after that we'll add export default and we will export this user model so this user model has been successfully created after that we will add the code in the user controller.js file so here first we will import the user model after that we will Import JWT from Json B token package after that we will import by

Crypt from by Crypt package after that we will import validator from and here we will import it from validator package so here we have imported the user model so let's add User model. JS file so we have imported the user model then JWT using that we will create the authentication then we have added the B Crypt then we have added the validator after that we will create two functions the first one will be login user so let's add the comment and we will add login user and here we will create one asynchronous Arrow function the

name will be login user so just add con login User equal to I sync and here we will pass the request and response after that here we will add one more function and the name will be register user so we will add one comment register user and after that we'll add one asynchronous Arrow function with the name register user so just add con register user equal to asynchronous function and we'll pass request and response so we have created two Functions login user registered user after that we have to export one object where we will add

login user and register user after that we will open user route. JS file and here we will import Express from Express package then we will import login user function and register user function and here we will add user controller.js after that we will create One router using the express router so we will add const user router equal to express do router after that we need the data of the user like email ID and password to create the user so here we have to create one post method so we'll add user router. post method and first

we'll create one endpoint that will be/ register and here we will provide registered user function after that we'll create one more post method where We will add the endpoint login and here we will add login user method after that we have to Simply export default this user router now we will set up this user router in this server.js file so here in this API endpoints we will add app.use and here we will set up the endpoint SL API SL user and here we will Provide user router select it from here so this user router will

be imported now we will save this file now let's open user controller.js file and first we will create the logic using that we can allow user to register on the website so first we have to destructure that name email and password from the request body so just add const curly addes name password Email equal to request. body so in these variables our name password and email will be stored after that we will add the try and catch block so in the try block first we will check if any user exist with this email if any

user is already available with this email ID we will generate one response so just add con exist equal to Await and here we will use the user model dot find one method and here we will add curly bres and we will provide email so if this email is a aable for any account then that account will be stored in this variable and here we will add one if statment and we will pass exist and if any email ID is available in that case we will return one Response do Json and in this response we will

add one object where we will add success property we will set it as false because we have not created the account it was already available in the database then we will add the message so in the message we will add user already exist after that here we will add one comment so That anyone can understand why we have written this logic so we are adding this comment checking is user already exist after that here we will add one more comment and we will validate the email format and a strong password so here we will add

validating email format and a strong password so here first we will add the if statement and we will Type not validator do is email and here we will provide users email so it will check if the users email is a valid email or not if it is not valid in that case we will generate one response so we will add return response. Json and just copy this object and paste it here so the success will be false and in the message we will provide please enter a valid Email so if the email is not valid

in that case it will generate this response where the success is false and the message is please enter a valid email if this statement is not running it means the email is valid after that we'll check our password length is greater than 8 digit or not if it is less than 8 digit in that case we will generate one response where we will add the success Falls and we will add the Message please enter a strong password so again we'll add one if statement where we will add the condition password do length is less than

8 if the password is less than 8 in that case we'll return response. Json and here we will add one object so the success will be false and here we will add the message please enter a strong Password if the password is not strong it will display this message after that if this if a statement is not executed it means the email is valid and password is also valid in that case we will create one account so before creating the account we will encrypt this password to encrypt the password we will use the bcrypt package

so here we will add one comment and we will add hashing user Password Here we will type const salt equal to await by Crypt do gen salt and here we will add the number between 5 to 15 so as higher number we will put it will create the strongest password according to that number so here we'll simply add 10 we can set this range from 5 to 15 if we will set 15 it will take time to encrypt the password after that we'll Create the encrypted password using this salt so we will add const has

password equal to await and here we will add bcrypt do has here we have to provide the password and the salt so that this password will be hashed and it will be saved in the hashed password variable so first we have to provide the users password then we have to provide this salt that we have created here now the password has been Hased after that we have to create a new user using the name email and has password for that we will add const new user equal to new and we will add the user model

in this user model we have defined the name email password and here we have the card data that will be by default one empty object so here we will provide the name email and password so here we will add one object in this one first we will provide the name that Will be name we will get this name from request do body after that we will provide the email so let's add email and here also we will add the email that we will get from this request. body after that we will provide the password and

in this password we will not use the users password we will use this hased password So we will add column hased password after that this new user will be created then we have to save this user in the database to save the user we will type await new user do save method so that this user will be saved in the database after that we need the difference of this user so just add con user equal to await new user. saave so after saving this data we will store that user in this User variable after that

we will create one token and we will send that token using the response to the user to create the token let's come here and here we will create one function that is create token so just add cost create token and in this token we need the users ID that will be self generated in the mongod DV database after that here we will return JWT do sign and here we will provide one Object where it will store the ID and here we have to provide one salt using that our data will be encrypted for that in

the backend folder in the EnV file open this file and here we will add zwt secret and here we will store one string we will type random has secret so we have used one random string in this JWT secret now we can use it in this JWT sign So now we need the EnV support in our server file so open server.js file and here we will import EnV SL config after importing this this EnV file will be included in our project after that open this and here we will add process Dot n v do JWT

secret let's update it zw2 secret now This EnV file variable will be inserted here so here we have taken the users's ID then we have used this user ID as a data and we have generated one token then we have returned this token using this function now let's come back and here we have created the user now we have to take the users's ID and generate one token so we'll add cost token equal to create token we are using that function that we Have created and in this one we have to send the users ID

that we will get from user doore ID after that this token will be gener ated now we will send this token as a response so here we will add response. Json here we will add one object where we will add the key success true after that we will send this token in this process if we get any error in that case we'll execute this Catch block so we'll add console.log and we'll display that error after that we will add one response also so let's add response. Jon where we will add success false and we will

generate the message this is eror then save the changes so we have created the API to create the user to use this registered user API we have to go to/ register endpoint here also we will Add one SL so we will get this/ register endpoint after this/ API SL user so now we will test this API so we will open the Thunder client and here we will create a new request and here we will add the post method and here we will add the end point so it will be Local Host Port 4,000 / API

slash user slash register after that in this body we have to provide the users data So in this J we will send the users name and in this name we will add greatest stack after that we will send the users email so we will add the email address so here we will add user do greatest tack at gmail.com after that we will add one password so here we will add password and in this password we will simply add one week password so we have added the 5 digit password and if I Click on the send

button so here we have the message successful false please enter a strong password we are getting this message because we have added a password Which is less than 8 digit if I set the password to 8 digit and in this email we will remove this at the rate then click on the send so here we have the message please enter a valid email so our password is correct but this email is not in the correct Format that's why we are getting success false message please enter a valid email now let's correct this email and click

on the send button now we have the message success true and the token has been generated now if I click on this button again so here we have the message user already exist because we have already created the user with this email ID now we cannot create a new account using this email ID now the user Registered API is successfully working now we will create the API using that our registered user can login so let's come back to the user controller.js file and here we will come to the login user function and to login the

user we need the users email ID and password from the request body so here we will add con email and password equal to and we will get it from the request. body after that we will include one try and catch Block so first we will check whether one user is available with this email ID for that we will add const user equal to await and here we will add user model do find one method and and here we will add curly bres and email by using this if any account is available then that user account

will be stored in this user variable after that we will check whether we got any user or Not for that we will add if and in this condition We'll add not user if we don't have any user in that case this if statement will be executed so when this if a statement will be executed we will generate one response that we didn't get any user so just add response dot Json and here we will set one object so the success will be false and here we will add the message where we will type the text

user does not exist So if any user is not available with that email ID then this message will be displayed if we are getting the user in that case we will match the user's password with the stored password in the database so here we will add con is match equal to await and here we'll add the bcrypt package so bcrypt do compared here we have to pass two arguments that is users password and the password stored in the database so here We will pass the password that user will enter while logging to the website after

that we will pass the password stored in the database so we will add user dot password if these password match this each match will be true if it is not matching this will be false so after that we will add one if a statement and here we will add not each match so if this value is false in that case we will execute this if block so we Will add return response with the Jon method and here we will pass success Falls and after that we will add the message and in the message we will

add invalid credentials so if the password is not matching in that case we will get this response if the password is matching in in that case we will generate one token for that here we will add cost token equal to create Token and here we will send the users ID so we'll add user doore ID using that this token will be generated and we will send this token as a response so we will add response. Json and we'll add success true and we'll send the token also in this process if I get any error in

that case this catch block will be executed so we will add console.log and that error and we will generate one response also so let's add response. Jon and we'll add the success Fals and here we will add the message and we will type error so now the logic for this user login has been created save the changes now this server will be restarted again now we will open the Thunder client we will click on new request so our method is post and here we will add the URL Local Host port 4,000 SL API SL user

SL login then go to body and in this body we will send the email ID and password So we will add the email and in this email we will add the email that we have used to create the account so let's copy this one and paste it here so when we click on the send button so here we have this success true and here we have a token so this login API is successfully working if I send the wrong password then click on send button here it is displaying success false and in the message we

have invalid Credentials if I use the correct password and change the email ID and click on send button then you can see the message success Falls and in the the message we have the user does not exist so this login API is perfectly working now we can allow user to login and create account on the web page using these API now let's come back to the web browser now in this database we have the users collection let's open this one and here we have the users data so The user name is greatest then we have

the users email and this is the users password that we have hased using the bcrypt so if the database got hacked or database got leaked then users password will be fully protected because we have saved the hased password instead of the original password and here we have the cart data which is one object and in this object we Don't have data so these API is perfectly working now we have to integrate this login and sign up API with the front end so let's close all these files and we will open front end folder this backend

server is already running we will keep it running now in this front end folder we will right click and select open in integrated terminal so we are in the terminal and we are in the front end folder we can Switch the backend terminal or front end terminal now in this front end terminal we will type npm run Dev command so that it will start the front end so let's open this in the web browser so this front end is open after that we will open the vs code editor so we will open the components folder

then login popup then login popup.js x file now we will create the state Variable where we will save the users name email and password so just add Con in this Con we will add the data then seter function name will be set data equal to user State and we will initialize it with one object where we will add the name that will be one string then we will add the email it is also one string then we will add the password and it is also string after that we will create one Onchange Handler that will

take the data from the input field and save it in the state variable so we will add the const on change Handler equal to and this will be one Arrow function and in this Arrow function we will pass the event from this event we will extract the name and value so let's add const name equal to event. Target dot Name then we'll create one more variable and the name will be value here we will add event. Target and let's update this TR G Target dot value so here we have extracted Ed the name and value

from this event now we will set this value in the state variable for that here we will add set data and here we will pass the previous Data here we will add the bracket cly bres and in the previous data we will change the name field and we will update it with the updated value after that we have to link this onchange Handler with the input Fields so in this input field we will add the name and uh here we will add name and here we will add the on change property and we will add

on change change Handler and here we will add the value property in this value property we will add data do name so here we have added the name then on change Handler then value is equal to data. name after that we will come to Second input field here we will add the name property and the name will be email after that we will add the on change Handler so we will add the on change Property on change Handler function then we will add the value property and here we will add the data do email similarly

in this input field we will add name property that will be password then we will add onchange property and in this onchange property we will add the onchange Handler function and here we will add the value that will be data. Password we will save the changes now when we will make any changes in the input field this data will be updated to verify this one we will r one use effect so let's add use effect and in this one we will pass the Aro function and here we will add a square bracket and we will

add data so whenever the data will be updated this function will be executed so in this function we Will add console.log and we will display the data save the changes and we will open the web browser now click on this signin button and we will open the console tab also and if I type something in this email field email the gmail.com so when we are updating the letters it is updating the data in the console you can see email at the Gmail in the last one so this email input Field is updating the data if

I type something in the password you can see it is also updating the data so here you can see the password 1 2 3 4 5 6 7 8 now in the sign up field we have the name input field also if I type something in this name input field greatest tag in this data you can see we have the name greatest tag so these Handler for the input field is perfectly working now we will come back to the vs code Editor and remove this use effect remove this use effect from here also now save

the changes after that we will open context folder then open a store context. jsx file here we will Define one variable so just add const URL is equal to and here we have to set the back URL that is HTTP colon // Local Host colon 4,000 now we will pass this variable in the context value so that we can access This URL in any component so save the changes now come back to the login popup do jsx file here we have to fetch the URL using using the context API so let's add const cly addes

URL equal to use context and here we will provide the store context select it from here so this stored context will be imported here now We can use this URL for the login component so for user login we will create one function that will be on login so just add one AR function and the name will be on login so just add const on login equal to this will be one asynchronous Arrow function so we will add async here we will pass the event then we will create one Arrow Function now we will link this

function with the form tag so here we will simply add on submit and here we will pass on login function now in this button tag we will add type that will be submit we will save the changes now now we will open the web browser so here if I click on this sign in and if I add any value then click on login here we have to check this one Then click on login now this page is getting reloaded to fix this one let's come back and here we will add event dot prevent default after

that we will save the changes now open the web browser again click on sign in and enter the email ID and password then click on login by selecting this checkbox now this web page is not reloading now we will come back to the vs code Editor and here we will add the logic using that we can call the apis to call the API we need the EXO support in the front end for that we will install the exos package so to install the xos first we will stop the front end by using control C and

Y then we will add npm install exos then press enter now the exos package has been installed now again run the project using npm run Dev so now our project is Running now we will do the API call in this on login function so we will create one instance of this URL so here we will add let new URL is equal to URL so we have created one copy of the URL now we will add one if statement in this if statement first we will check if our current estate is login in that Case in

this new URL we will append our login API that is/ API sluser SL login if the state is not login in this case the state is sign up so here we will add new URL in the else condition and here we will append SL API slash user SL register so the current estate is login then the new URL will be the login API if the current estate is not login then The new URL will be registered API after that we will call the API for that we'll add const response equal to await and here we

will add the exos package so first we will import the exos so just add import exos from exos after that here we will add exos Dot and our login and register API is created using the post method so here we will add the post and in this one we Will add new URL and here we will set the data state so this API will work in both login and register if the estate is login it will hit the login API if the estate is sign up it will hit the registered API after that we will

get one response so here we will add if and we will add one condition response.data do success so if the response. data. success is true it means we are logged In or we have registered so we will get one token so to save the token we will use one state variable where we will save the token so let's open store context. jsx file and here we will create one state variable and the name will be token so we will add const token and the setter function name will be set token and here we will add

equal to use State and we will initialize it with one Empty string now we will pass this token and set token using the context value so here we will add token and set token now save this file and we will come back to the login popup.js x file and here after this URL we will access the set token function so when the API will response with the success true here we will add sit token response. dat. Token so we will save the token using this set token function after that we will save this token in

local storage so we will add local storage do set item and here we will provide the key name token and in the value we will add response. dat. token after that we will be successfully logged in after that we will use this set so login function and it will hide the login page for that here we will add set so Login and we will provide false so that this login page will be hidden after that we will add one elsea statement this else statement will be executed when the response data do success will be false

so here we will add alert and in this alert we will add response. dat. message we will save the changes and open the web browser we will click on sign in and then click on create a new Account here we will create a new account so we will add the name greatest T in the email we will add test one at theate greatest Tack dodev and in the password we will add 1 12 3 4 5 6 7 8 then we will select this checkbox and click on create account now we are successfully logged in

now if I Inspect the web page and go to application local storage and in this local storage here we have one token where you can see this token so the token has been generated successfully and we have stored it in the local storage now if I go to mongod DV refresh this and here we have the second entry where we have the name greatest stack then we have one email test1 at Greatest. and this is our password now we can create a new account from our front end now we will add the logic using that

when we are logged in this signin button will be removed and here we will get one profile icon for that we will come back to the vs code editor we will come to nav bar. jsx here in this get total cart amount after this we will add token and set token function now after this du we will add one tary operator and here we will check If the token is not available in that case we will provide this button that will be signin button so so here we will add question mark and after this question

mark we will provide this button after that here we will add the column and here we will create one div if the token is not available we will get this button if the token is available it will display this div this button will be hidden so in this div we will add the class name property That will be na profile after that here we will add one image tag so we will add the IMG SRC and in this SRC we will add assets. profile icon after that we will create one UL tag and we will

provide the class name nav profile dropdown in this UL tag we will add one Elite tag and after this AI tag we will insert one HR tag and after this HR tag again insert one AI tag so we have added two lii tag and one HR tag in these lii tag we will insert one image and in this SRC we will use use assets dot bag icon and in the second one we will add assets dot logout icon after closing of this image tag we will add one P tag and in this one we will

add orders similarly in the second lii we will add one P tag and here we will add log out Now we will save the changes and open the web browser now you can see here it is displaying the user icon bag icon log out icon because we are logged in we have the token available that's why it is visible now we will add the CSS properties for this nabbar profile so we will come back to the nabbar do CSS file and here we will add Dot na bar profile and in this one we will add

Position relative after that we will add the CSS properties for this nav profile dropdown so we will copy this one and we will come back to the nav bar. CSS file and paste it here here we will provide the position absolute display none write zero Z index 1 now we will save the changes and open the web Page so here we have only profile icon now if I over on this profile icon still we don't have any drop down so we will create that drop down so let's come back we will add do naar profile

hover if we will take cursor over this profile icon then in this nap profile dropdown we will add display Flex then we will add the flex Direction column and we will provide the gap of 10 pixel after that we will add the background Color that will be this color code after that we will add the padding 12 pixel and 25 pixel then we will add the Border radius that is 4 pixel and here we will add the Border 1 pixel solid and this color after that we will add the outline property this will be 2

pixel solid and white then we will add the list style none so that it will remove the bullet Points from the lii tag now open the web browser now if i h on this icon here we have the lit tags with orders and log out so this drop down is working next we will add the CSS properties for these lii tag so here we will type dot nav profile dropdown lii tag and here we will add display Flex align item Center Gap we will provide 10 pixel and cursor Pointer after that save the changes so

now if i h we have these lii tags next we will add the CSS properties for these small icons so here we will type dot nav profile dropdown IMG tag and we will set the width 20 pixel we will save the changes now open the web browser now if I take cursor over this icon this drop down is looking good next we will add the hover effect for for these P tag so Just come back we will add dot nabbar profile dropdown then we will add the lii tag and here we will add the hover

and here we will add the color and this color code then save the changes and open the web browser now if I hover on this one and hover on these AI tag the text color is changing that is looking good now we will add the functionality on this log out option so we will come Back to the vs code editor close this nav word. CSS file now come back to the navb bar. jsx here we will create one Arrow function and the name will be log out so we will add const log out equal to

and this will be one Arrow function so first when we will click on the log out we will execute this function so in this Li tag where we have added the text log out we will add on click property and in this one we will pass The log out function and save the changes so whenever we will click on this it will execute this log out function for log out we have to remove the token so we will remove the token from the local storage so just add local storage dot remove item and here we

have to provide the key name that is token after that we will add set token from the token State we will remove the token it will be empty string After that when the user will be logged out we will send them to the homepage to send the user on the homepage we will use use navigate hook so we will add const navigate is equal to use navigate and here we will use this navigate so just add navigate and we will provide the path of the homepage that is slash we will save the changes is and

we will open the web browser now if i h on This one and click on log out now the user has been logged out and here we have the signin button if I inspect the web page go to application in the local storage you can see we don't have any token so now this log out functionality is perfectly working now now if I again sign in and click on this login button we are logged in on our web page and we have The token now if I reload the web page we are logged out now

we will fix this error so that when we will reload the web page we will not get logged out so let's come back to the vs code editor and we will open store content text. jsx file here we will add the logic using that the local storage data will be saved in the token State when we will refresh the web page so let's come back and here we will add use Effect and in this one we will pass one addo function and here we will add the square bracket in this function we will add one

if statement and here we will add for the local storage so we will add local storage. get item with the key name token if this entry is there then we will execute this if block and here we will add set token and here also we will provide this token from This local store stage so if the local storage have the token then we will set that token in this token state so that when we will reload the web page we will not get logged out let's come back to the web page and if I reload

the web page still we are logged in because the token estate is getting updated with the data from the local storage now if I click on log out now we are Logged out it will remove the token from the local storage now we have successfully integrated the login functionality in our food delivery app after that here we have these data these data are coming from the assets file now we will get this data from the database for that let's come back and we will come to store context. jsx file here First we will create one

state variable with the name food list so let's add const food list and we will add the setter function name set food list is equal to user state and initialize it with empty array so we have created food list now we can remove this imported food list we will save the changes now in this food list we don't have any item If I go to front end so here we don't have any item because we have not added the data in this array now we will create a function function using that we can load the

food items in this state from the database so we will load these food items so we will come back to the vs code editor here we will create one Aro function and the name will be fetch food list so we will add const fetch food List equal to and it will be one as sync Aro function and here we will call the API so we will add const response equal to await and here we will use the exos doget method because we have created the food list API using the get method that's why we are

using xos doget and here we will add the URL and In this one we will append SL API SL food SL list when we will hit this API we will get all the food items after that we will add set food list and in this one we will provide this response do data do data now we will run this function whenever the web page is loaded now in this use effect we will add this after this if statement so here we will add one async function that will be load Data so just add a sync

function and write the name load data and in this one we will add a wait and here we will call this fetch food list function that we have created here so we can cut this if statement and add it after this statement now we have to call this function which is load data so here we will call this just add load data now we can save the changes and we Will open the web browser if I I reload the web page here we have all the items but we don't have the image of the food

item to solve this one we will come back to the food item. jsx and here first we will get the URL so just add URL so we will get the URL from the context after that in this image SRC Here we will add URL plus and here we will add the slash Images slash and in this one we will append this image URL so save the changes and open the web browser now we have all the food items image these images are coming from the back end if I open open this image in the new

Tab so you can see the URL Local Host 4,000 SL images and the image name as we have defined here URL / images SL image name now let's check our functionality if I click on this one and go to cart in this cart we have this data in the cart page we have to update the image so we will come back to the pages folder and open cart. jsx file and here we have the image SRC so we have to use the URL here so first we will get the URL from the Context API and

here we will add URL plus and here we will add SL Images slash then we will add item. image that is the image name we will save the changes and open the web browser so here also the image has been uploaded now if I open the homepage and add more items open the cart page now in this card page all the data is displayed perfectly if I click on this cross icon These data will be removed till now we have integrated the login and registered API and we have integrated the food list that we are

getting from the back end after that if I add these products in the cart and refresh the web page these items will be removed so we will add the logic using that if we add any item in the cart that data will be saved in the database for that first we have to create the apis Using that we can add the cart data in the database so let's close these things and again open the backend folder here we will stop this project using contrl C and delete this terminal instance now we are in the terminal

which is the backend terminal now we will create the apis using that we can update the data in the users cart for that let's open controllers Folder and here we will create a new file and we will provide the file name cart controller.js in this file first we will import user model from and we will provide the path of the user model. JS file so just add double do/ models folder SL user model. JS after that we will create three Arrow functions first will be add to card second will be remove from cart and the

third one will be get cart so first we Will add the add to cart function so just add comment we will add add items to user cart after that here we will create one Arrow function that will be const add to cart equal to and it will be async Arrow function here we will add request and response then we will create one function similarly here we will add one comment and we will add remove items from user Cart here we will create one Arrow function we will add const remove from cart equal to and this

will be a sync Arrow function here also we will add parameter request and response and here we have created this Arrow function then we will add one more comment and in this one we will add fetch user card Data after that here we will type const then we will add the function name that is get cart this will be one a sync Aro function in this one we will add request and response and here we have created three functions add to cart remove from cart and get cart after that we will add export and here

we will export these three functions so first we will import add to cart then remove from cart then Get card we will save the changes and after that we will come back to the routes folder and we will create a new file and we will provide the name cart route. JS now we will use these three functions to create three rout so we'll add import Express from Express after that we will import these three functions that we have just Created so we will add curly bres add to cart remove from cart and get cart so

here we have have imported all three functions from the cart controller.js after that here we will create one Express router so we will add cost cart router equal to express. router so we have created one router Now using this router we will create multiple end points so first we will create cart router. Poost method for the add to cart function so we will add slash add and here we will add add to cart function similarly we will add cart router we will add one more post API and the end point will be slash remove and

here we will add remove from card function similarly we will add one more post method and we will provide the path SLG and here we will use the get cart function so we have created three API endpoint slash add SL remove SL getet where we have used add to cart remove from cart and get cart function now we have to export this cart router so just add export default cart router after that we will save this file and we will initialize this cart router in this server.js file so scroll here at API endpoints and here

we will add App.use and here we will add the path / API SL cart and here we will use the cart router after that we will save the changes now we will start building the logic using that if user will send the item id using that ID we can add one entry in their cart when user will send the data they will use the token to authenticate them to decode the token we will use the middleware and we will provide the name Authentication middleware so we'll create a new file and we'll add the name aujs

so here we will first import the JWT from and here we will add the Json web token package after that here we will create one a sync Arrow function and its name will be o middle bear so just add con or middle bear equal to a sync and here we will take request Response and call back function next then we'll add one add a function and we will export this function so just add export default and the name of this function or middleware so we have created this middle beare function we will connect it with

the cart route so first we will import it here so just add import o middleware from middleware .js file Now we will add this middle Weare on these three route so in these three route after this comma we will add o middleware and we will add one comma so in these three REITs we have added all middle bear after that we will come to .js file and we'll create the middleware so first we will take the token from the users using the headers then we will D structure the token from the request. header so just

add con curly addes token equal to request dot Headers after that we will check whether we got the token or not so just add not token if the token is not available in that case we will return one response so just add return response. Json and here we will return success false and here we will add the message not authorized log again so if we don't get any token from the user we will display this message After that we will add the TR catch Block in this try catch if we have the token we will

decode that token so just add const token decode equal to JWT dot verify method here we have to pass the token and with that we have to provide the JWT secret that is this secret text so just add token we will get this token from the User using header and after that here we will pass the JWT secret so just add process. EnV Dot JWT secret so after that our token will be decoded so while creating the token we have passed this user ID so when we have generated the token we have one object with

the ID so when we decode it we will get that ID now we will set that ID in request. body user ID so just add request. body do user ID and we will set it with token decode do ID now we will call the call back function which is next and we will run this one if we get any error in this process we will execute this catch block so in that case we will add console.log and eror and with that we will display one response using the Jon method where we Will add success Falls

and with that we will add the message and in the message we will type error we will save the changes now this middle Weare has been created this middleware will basically take the token and convert it in the user ID and using that user ID we can add remove or get the data from the card so first we will add the add to cart functionality using that we can add the data in the cart so in this function first we will Add one TR catch block and in this Tri block we will add the user

data so we have to find the user data so just add let user data is equal to await and here we will use the user model do find one method in this method we will add one object where we will add the condition so the users's ID should be request dot body dot user ID so while finding the user we have provided this condition user ID should be same as request. body. user ID that we will get using the middleware so while requesting we will not send the ID we will send the token and this

middleware will convert the token in the user ID that we have used here in the find one method after that we will get all the data of that user in this user data we Will extract the card data for that we'll add let cart data is equal to a wait and here we will add user data Dot cart data after that our users cart data will be stored in this variable after that in this card data we will modify the data so we are using add to cart functionality so when user will have to add

the data in the cart then they will send the token and with that They will send the item ID so here we we will add if not cter data and here we will provide request. body do Item ID so if in this card data there is no entry with the item id then we'll create card data and we'll add request do body do item idid equal to 1 so if the user want to add a product in the cart with one product ID and from that item id there's No entry in the card in that

case it will create a new entry after that we will add a logic using that if that cart ID is available then we will increase that value so we will add card data we will add request do body do Item ID and here we will add plus equal to 1 after that when that item will be added in the card then we have to update the users card with this new card data For that we will add the await and we will use the user model so just add user model do find by ID and

update so here we have to provide two parameters that will be users's ID so just add request. body do user ID and the second parameter will be one object and in this object we have to provide the new card data so just add card data so we will get the card data after that we will create one resp response using the Json Method here we will add the curly Braes and we will add success true and we will add message and we will add the message added to cart so this statement will update the cart

data in the database after that we will generate one response with success true message will be added to card if there is any error in this process then it Will execute this catch block so here we will add console.log and error and after that we will generate one response so just add response. Json and here we will add success false and here we will add the message error so we have created the add to card functionality now it should work now we will come to thunder client we will click on the new request here we

will select the post method and we will add the endpoint Address so our endpoint is HTTP Local Host Port 4000 SL API SL card SL add in this one we have to send one token using the header to get this token let's go to previous login API and here we will add the correct email ID click on send button so here we have this Token let's copy this after that in this header we will add token and in the value we will paste this token after that in this body we will type the ID of

the food item so let's open Foods open this Foods collection and copy the ID just add curly bres and here we will add the item ID and in this one we will paste this ID so we have added the token in the header and in the body we have added the item id now if I click on the send button so here we have the message success true message added to cart it means this product ID has been added in the cart now if I come back to the mongod DV web page go to users

and for this email let's open the card data and for this ID we have the quantity one so this logic is perfectly working If I click on the button again send again we have the message added to cart and if I refresh this now it should display the quantity to let's check it so if I expand this card data so yes you can see the quantity is two so first time it will execute this statement to add the item to the cart and to increase the value it is using this statement so we have created

the add to cart functionality next we will add the Remove from card functionality so here also first we will add TR catch Block in this try block first we will find the users data using the find by ID method so we will add let user data equal to await we will add the user model dot find by ID method and here we will simply provide the ID of user so just add request. body do user ID we will will get this user ID from Our middleware that will decode our token and convert it in the

user ID after that we have used the find by ID method so we can use this method instead of find one if I want I can remove this and here we'll add find by ID and here simply provide request do body dot user ID this will also work Same if I save this and check this one let's click on send button now database is not connected now database is connected and here we have the message added to card so this functionality is working so here we have used find by ID method after that we will

get the users data after that we have to extract the cart data so just add let card data equal to await user data Dot card data so from The users data we have stored the cart data in this variable now we will add the if statement and we will add the condition card data and we will add request. body do item id first we will check for this item ID that I want to remove from that ID if the item is available in the cart or not so here we'll add greater than zero so if

for this ID the value is greater than zero in that case is we will add cart Data and we will add request do body dot Item ID and we will decrement the value by one so we will add minus equal to 1 so for this ID for that product ID that uh quantity will be decreased if it is two it will become one now we will will update the new cart data so to update that one we will use the await user model dot find by ID and update and here we will add the user

ID Request do body do user ID then we will add new cart data so just add cart data after that the new cart data will be updated after that we will create one response so just add response. Json and here we will add success true after that we will add the message in the message we will type removed from cart so if there is any error in this block so it will execute the catch block so Just add console log and eror and with that we will generate one response where we will add success Falls

and we will add one message and in the message we will just add error save the changes and we will test this API to test this API in this add API we will remove this add and here we will add remove and we are passing the item ID in the header we have the token if I click On send so here we have the message success true removed from cart if I open mongod DB page and refresh this so in this cart data we have the quantity three if I click on send button again and

refresh this one now the quantity should become two so open cart data you can see for this product ID the quantity is two it Means the remove from cart logic is working fine after that we will add the functionality for this get cart using that we can fish the users cart data for that here we will add try catch block first using the user ID we will find the users data so just add let user data equal to await and here we will add the user model dot find by ID and we will provide request.

body do User ID that we will get using the middleware after that from this user data we will extract the cart data so just add let card data equal to await and here we will add user data Dot card data using that the users cart data will be stored in this variable after getting this cart data we will simply create one response so just add response. Json and here we will send success True and here we will send cart data and we will provide the cart data so it will generate the response with success true

and it will display the card data if there will be any error in the tri block it will execute the catch block so we will add console.log and we will add error after that we will generate one response also using the Jon method where we will add success False and here we will add the message and in the message we will provide error and we will save the changes so the get cart logic has been created now we will test this one also now we will come back to the request remove this and here we

will add get in the API endpoint to get the card data we don't have to provide the item ID in the header we have sent the token using that the middleware will Convert the token into user ID if I click on the send button so here we have the success true and in the cart data we have the object where we have the cart data so we have successfully created all three Logics add to cart remove from cart and get cart now we have to integrate these apis with our front end so we will close

these tabs and we will close this backend folder and come to front end folder open This folder in integrated terminal so we will run the front end so just add npm run Dev now we have two terminals running first one is back end and the second one is front end now let's open this address in the web browser now we will integrate our API with our front end so first we will open context folder then store context. jsx file so here we have the add to card function after this else statement we Will add one

if statement and here we will check if we have a token available so whatever item is added in the card we will update that in the database also so we will add a wait and we will add the exos dopost method and here we will provide the URL plus our endpoint address that is SL API slart SL add after that we have to provide the item ID so we will add the curly bres and Simply add item ID that we are getting from this parameter so we have provided the item ID with that we have

to set the token in the header for that here we will add one more comma and we will add the curly bres here we will Define headers and in this headers we we will add one object and in this object we will set the token now we have to convert this function in async function so we have Added a sync so this await will work so we have added this logic save the changes when we will logged in we will have the token in that case when we will add the product in the cart that

product will be added in the database cart data also now test this one let's come back to the web page first we will login click on signin button we will provide the email ID user. grestch gmail.com here we will provide the Password then click on login now we have successfully logged in after that if I add any item we have added it one time this one two times and another one two times now come back to the database refresh this one so here if I open this one you can see for this ID we have

four items that that we have added two times from the Thunder client and from the front end we have added two times and for this item id we have only One quantity and for the last one we have the quantity two that we have added from here now we will add the logic using that we will click on this remove it will remove the item from the database for that we will come back to the remove from cart function and we will convert it into the asynchronous function so we will add the ASN keyword and

after this a statement here we will add one if Statement and here we will add token so if we have the token it means the user is logged in in that case we will create the API request so just add await X dopost and here we will add the URL where we will append SL API SL card SL remove so we have added the end point after that we will add the item ID that we will get from this Parameter so we will add the item id after that here also we will add the headers

so just just add curly bres headers and in this headers we will add the object where we will add token we will save the changes now we will open the web browser so here we will reset the data let's make it zero 0 and zero then click on update so we have modified the data if I come back to the front End increase the quantity 1 1 and 1 and refresh the database so in this cart data we have quantity one for all three product if I click on minus to remove this product from the

cart and come back to the database page refresh this one so now these quantity is zero so this remove from cart functionality is successfully working and the API is also Working fine next we will add the logic using that when we have increased the quantity for and if I refresh the web page it should display the quantity for to fix this one let's come back here we will create one Arrow function that will be load card data so just add const load cart data equal to and it will be one a sync Arrow function in

this parameter we will pass Token and in this function we will call the API so just add const response equal to a wait and here we will add exos do Post method here we will add the URL in this one we will concat the API endpoint that is API slard SL get and here to hit this API we don't have to send anything in the body so we will add the empty object then we'll add the Header in the curly Braes and in this headers we will send one token in object after that we will

get one response where we will get the cart data so we will save that cart data in one variable and the name will be cart items so we already have this cart items so in this cart items state we will store that data for that here we will add set cart items and in this one we will provide response. data do card Data after that our card data will be loaded in this state after that we have to call this function whenever our page is loaded for that in this if statement here we will call

that function so just add await we will add load cart data function here we have to pass the token so for token we will use local storage dot get item and here we will Add key name name that is token using that we will get the token now we will save the changes and open the web browser now if ioad the web page still you can see the card data is displayed here if I make it two and reload the web page still we have two this data is coming from this database if I refresh

this one so here in this card data for this product we have the quantity Two if I make it one two the last one four let's increase this one also so we have added multiple products let's refresh the database now here we have all the quantity for different products if ioad the web page still we can see all the quantity that is added now we have successfully integrated the cart API where we have added the logic add to cart remove from cart and get cart after that we will add the logic using that user can

order the product added in the Cart now we will come back to the vs code editor we will close this file and we will stop the front end so type contrl c yes and we will delete this fronted terminal so now we have the backend running in this terminal close this front end folder and open the backend folder in this one we will add the logic using that we can place the order from our front end so first we will come to models Folder and we will create a new model so here let's create a

file with the name order model. JS here we will create one order model using that we can save the order in our database so first we will import the from package after that here we will type const order schema equal to new mongus do schema and here we will add the object And in this one we will Define the structure for our order schema so first we will add the user ID so the user ID type will be string and we will set it as required so just add required true after that we will add

the items and this item will be one aray so we will add type aray and it will be required so we will type required true after that we will add the Amount so we will type the amount and the type will be number it is also required so we will type required true after that we will add the address so we will type address and its type will be object so we will write type object and it is also required so we will use required true after that we will add the status and the status

type will be a string so we will use type String and here we will set one default value so just add default and in this one we will store food processing so whenever a new order will be placed the status will be food processing after that we will add the date here we will add the cly addes and the type will be date and in this one we will use the default value that will be date do now so whenever we will place one order so this date will be saved using the Current date after

that we will come to the payment property so here we'll add payment and the type will be Boolean and the default value will be false so whenever a new order will be placed the payment status will be false so we have created the schema for the order now using this schema we will create the order model so we will type const order model equal to do Models dot order order operator and here we will type dot model and here we will type order and here we will provide the order schema so now we have created

the order model next we have to export it so we will type export default and we will type the order model now we have made the order model we will save the changes and we will create the order controller so in this Controllers folder we will create a new file and we will provide the name order controller.js in this file we will import order model from model / order model user model. JS after that we will import the stripe so we will type a stripe from stripe package after that we will create one Arrow function

and the name will be place order using that we can place the Users order so first we will add one comment and we will type placing user order from front end after that we will create one Arrow function so we will type const place order equal to a sync and here we will take request and response so we have created this function next we will come to routes folder and here we will create a new file and the name will be order route so We will create a new file and write the name order route.

JS so we have created this route file in this order controller file we will export this place order function so we will type export cly is place order now we will save this file and we will open order route. JS file so here first we will import Express from Express package after that we will Import or middleware from double do/ middleware folder SL .js after that we will import the function that we have created in the order controller file so here we will type import curly bres place order so our function will be imported here

Now using this Express we will create the router so we will type const and we will provide the name order router for this Router so the router name is order router equal to Express dot router and we have created this router after that using this router we will create multiple end points so so first we will create the end point for this place order so here we will add order router. poost method here we will add the name of the endpoint it will be SL place after that here we will add the middleware that is

O Middleware after that we will add the place order function after that we will export this router so just type export default then order router now we will use this order router in the server.js file in this one we will type app.use and here we will provide the endpoint name that is/ API SL order and here we will provide the order router so this order router has been Imported here we have used this order router here now we will save this file and now we will open the order controller.js file here we will add the

logic using that we can place the order before that we will set up the stripe to set up the stripe we will open EnV file and here we will add one new variable and the name will be a stripe secret key so we will type a stripe secret Key equal to and here we will paste this secret key as a string so we have added this secret key to get this secret key you have to go to official website of stripe and here you have to create an account after creating the account in the dashboard

you will find the secret key of the stripe that you can paste here I have already created the stripe account and I have this secret key that I have pasted here after that save this file and we will come back to the order controller.js file and we will use this secret key in this file to set up the stripe so here we have imported this stripe so let's make it capital S and after that we'll create a variable and the variable name will be stripe so we will type const stripe here we are using a

small s and while importing the package we have used capital s after this const stripe we will type Equal to new and here we will use this stripe package and here we have to provide the secret key for that we will type process. EnV Dot and then we will use this variable name just copy and paste it here after that we will save the changes now we have the support of a stripe in this component now we will create the place order Function so first here we will add the TR catch block and in this

Tri block we will add the New Order so we will add const new order equal to new and here we will use the order model in this one we will add the curly Braes and here we will Define the user ID that we will get from the middleware so when the middleware will decode the Token that will generate this user ID to get this user ID we will type request. body do user ID after after that we will add the items we will get it from request dot body dot items after that we will add

the amount property and in this amount we will type request do body do amount after that we will use address and here we will add requestbody do address so we have added user ID items Amount and address after that here we will type await New Order dot save after that it will save the order in our database when the user will place the order after that we have to clear the user cart for that we will type await user model and here we will use the find by ID and update so first we will provide

the Users ID so just add request. body do user ID after that we will provide the object object where we will add the cart data and we will set the cart data with one empty object so it will clear the cart data after that we will add the logic using that we can create the payment link using the stripe to create the stripe payment link first we have to create the line items Which here we will insert all the product data currency and unit amount and quantity so we will type const line item equal to

and here we will use request do body do items that is one areay and here we will use the do map method in this map method we will pass the arrow function and here we will add this Parenthesis in this one we will add the object and here in this parameter we will take individual item after that here we will set the price data property so just type price data and here we will provide the country currency so we will type currency and here we will enter the currency code so we have set up the

stripe account in India so we will type INR after that we will add the product data in this one we will store the product's name so we will type name and we will provide the item do name after that we will set the unit amount so just type unitor amount so our unit amount will be item. price multiplied by 100 we will get this data in dollar if I want to convert it in INR so we will multiply it by 80 after that we will add a comma and here we will Define the Quantity in

this quantity we will type item dot quantity so here we have created the line items after that we will push the delivery charges in this one to push the delivery charge in this line items here we will type line items dot push in this one we will add the object and here we will type price data here also we will add the currency INR after that we will add the product Data and in the product data we will add the name and it will be delivery charges after that we will add the comma and here

we will set the unit amount here we have added the delivery charges $2 in our front end so we will type 2 into 100 and to convert it into iard we will add multiplied by 80 after that here we will add the quantity one now we have created the line items Now using this line items we will create One session for that here we will type const session equal to await and we will use these stripe. checkout do session then dot create method and in this create method we have to provide the line items and

in this line items we will provide the line items after that we will set the Mode that will be payment after that we have to provide the success URL and cancel URL if the payment will be successful we will be redirected to the success page if the payment is failed we will be redirected to the cancel URL so first we will Define the success URL here we will use the template literal so we will type backtick and after that we will Define the front end URL so here we will type Const front end URL now

our front end will be running on Local Host Port 5173 so we will type Local Host colon 5173 we will wrap it in the code so this is the front end URL after that we will come here and in this success URL we will add the dollar sign curly Braes and here we will type front end URL and after that we will type SL SL Verify question mark and here we will add the parameter success equal to true then we will type and person sign and we will add order ID equal to dollar sign C

addes and for the order ID we will use New Order doore ID so if the payment is successful we will be redirected to this page after the payment here we have created the route Verify where we have added the parameter success true and Order ID after that we will add one comma and we will copy and paste it and we will change the name it will be cancel URL in this cancel URL the front end URL will be same instead of true in this success we will type success false that's it after that the session

will be created next we will create one Response so we will type response. Json and in this one we will send the success true and after that we will send the session URL so let's type sessor URL and in this one we will pass the session. URL so we have created the logic for the place order so let's check this again here we have created the variable for frontend URL we have Added the front end URL in this variable after that we have added the tri block where we are creating the New Order after that

we are saving this order in the database after saving the order in this line we are cleaning the users's cart data after that Whatever item we get from the user we are using that item and we are creating this line items that is necessary for the stripe payment after creating this line items We are adding one more entry which is delivery charges that is $2 and we have multiplied it by 80 to convert in INR after that using this line items payment mode success URL and cancel URL we have created one session and we have

sent the session URL as a response if we get any error in that case the catch block will be executed so here we will add the console log and the error and we will generate the response using responsejson In this one we will type success false and the message will be error we will save this file so it will restart the backend server now we will link this API with our front end so let's close these files we will close this backend folder and we will will open front end folder in integrated terminal the back

end is still running So it will be running in the background now we will run the front end using npm run Dev now we will open the frontend folder then SRC folder and we will open the pages and here we will open the place order. jsx file after that here from the context we will take the token then food list then cart items URL and after that we will create the state variable where we will store the information from these form field for that we'll type const data and the setter function name is set data

equal to user State and we will initialize this variable with one object where we will add first name it will be string then last name it is also String then the next thing is email it is also string then we will type A Street then we will add the city after that we will add the state after that we will add the ZIP code then we will provide the country and then we will add the phone so here we have created the state variable and we have initialized with one object where we have the properties

Like first name last name email Street City estate zip code country and phone after that we will create the onchain change Handler function using that we will save the input field data in this state variable so we will type const on change Handler and this will be one Arrow function and in this parameter we will type event and using this event we will extract the name and value so we will Type const name equal to event. target. name then we will add one more variable that is value in this one we will store event dot

Target dot value so here we have the name and value then we will call the set data Setter function here we will pass the previous data and we will add this parenthesis then CES we will change the previous Data so here we will add the name field and in this one we will update the latest value that we will get from this event now this onchange Handler function is is ready next we have to link this Handler function and data state with the input Fields so in this input field where we have the first name

let's add the name property and we will type first name then we will add the onchange Property here we will provide the onchange Handler function after that we will add the value property this will be data do first name similarly in this input field we will type name last name on change property on change Handler value it will be data dot last name this input field is for the email so we Will type name is equal to email on change property here we will add the on change Handler function then value data dot email similarly

here we will type name Street on change property on change Handler value data dot a straight here we have to remember one Thing we are setting data. first name that will be same as the name property after that we will come to this input field we will type name equal to City on change property and we will type on change Handler then we will add the value data do City then we will add the name EST State on change property then on change Handler value will be D data do State after that we will come

to this input field here we will type name property zip code on change property on change Handler value data dot zip code in this input field we will add the name country on change property onchange Handler value data dot country after that on this input field we will add the name property this will Be phone on change property on change Handler value will be data. phone so in all input fields we have added the name property on change property and value we will save the changes and we will verify it for that we will create

one use effect we will pass one Arrow function in this Aro function we will add the comma and this square bracket we will add the state name data whenever the Data will be updated it will execute this function so in this function we will console log the data we will open the web page inspect and open console refresh the web page so here we have these fields so these fields are empty if I type something in these input field let's add greatest tack user. greatest tack at gmail.com in the street we will type Street One

in the city we will type City in the state we will type a state here we will type the ZIP code then in the country we will type us and in the phone number we will type any dummy phone number if I open the last object in the console here we have the city information City us email address first name last name phone number State Street and zip code so these form data is getting saved in The state variable so we have verified it now remove this use effect and remove it from here also save

the changes now in this data State we are getting all the data from the input field after that we will create the arrow function and the name will be place order so using that we will be redirected to the payment Gateway so first we'll type Const and the function name will be place order so the component name is place order this p is capital and here we are using a small P equal to it will be one asynchronous Arrow function we will type as sync and and here we will pass the event so we have

created the function now we will link this function with this button which is proceed to payment so here we will write type it Will be submit after that we will come to this form tag and we will add on submit here we will provide the function name which is place order so this page will be reloaded to prevent that here we will type event do prevent default so it will not reload the web page whenever we will submit this form after that we have to call our API Before calling the API we have to structure

all the orders dat data as we have created in the API so first we will create one variable its name will be order items that will be one array in this one we will add the card item related data here we will use the food list. map method and here we will pass the addo function in this parameter we will send the Individual item and here we will check if our cart items have the product with this item ID in that case we will execute this block so we will type L item info equal to

item so this item is one object in this object we will add one property that is the quantity so here we will type item info and in this square Bracket we will add the quantity equal to cart items and here we will provide the item. ID using that from this ID we we will get all the quantity in this item info quantity property after that we will add the order items dot pus and here we will add the item info here we are doing the mapping where we are adding the all item data with the

Quantity in this order items array after that we will check whether this mapping is working fine or not for that here after this line we will type console log and in this one we will console log this order items so just type order items save the changes and we will open the web browser so let's reload the web page and we will click on inspect then click on console if I click on proceed to payment so here We have the console log where we have one array in this one we have the multiple objects each

object has product category description image price name and quantity we have added this quantity using this mapping let's close this now we will add the logic using that if these fields are empty then this proceed to payment will not work for that we'll come to this input Field and here we will add required for all the input Fields so let's select all the input fields and in all these input fields we will type required we will save the changes now if I click on this button it is giving the message please fill out this field

if I enter the value in this field it is giving the message in the second field please fill out this field now we have to complete all the Fields of this form then only this proceed to payment button will work so here we have created the order items let's remove this console log and here we will create one order data variable so we will type late order data equal to and this will be one object so in this object we will add the address that will be data here we have the data State variable so

it will be stored in this Address property after that we will add the items and in this items we'll provide the order items where we are adding the data using this mapping so we will type order items after that we will add the amount in this amount we will use get total cart amount function and in this one we will add the two that is the delivery charge so we we have created the order data now we will send this order data From our API so here we will type the let response equal to await

and here we will use the exos dot post method here we will add the URL that is the backend URL in this one we will concat SL API SL order SL place with this we will set the order data that we have created here where we have the address data items and total Amount so this is the ERS data after that we will add the header so we will add the object and in this one we will Define headers where we will store token after calling this API we will get the response so here we

will check if the response. data. success is true in this case we will get one session URL so we will get that session URL so just type const Cardly Braes session URL equal to response. data so using this we will get the session URL now we have to send the user on this session URL to send the user on this session URL here we will use window Dot location dot replace and in this one we will provide the session URL so we have generated the order data then we have sent this order data to our

API and from there we will get the response if the response success is true in that case this if statement will be executed where we will get the session URL and we are sending the users to the session URL if the response.data do success is false in that case here we will add the else condition and here we will display one Alert where we will add alert error we will save the changes and we will open the web browser so we will fill this form greatest stack we will add the email address a street city

state ZIP code country and phone number and click on proceed to Payment so here we are redirected to the stripe checkout page here we have the product details Greek salad then individual price and this is the quantity quantity 2 quantity 1 2 4 so we have all the products with their quantity so you can see all the items and this is the total amount to check this payment we will use the card so let's search for a stripe dummy card let's open this one Then scroll this we page or just click here on cards by

country I have created the stripe account in India so here we will search for India and here we have one dummy card number click here to copy the card number here we will add the email ID then paste the card number then add any future month and year then we will add any three-digit number in this field here we will type the name let's add greatest Stag and click on pay Button so here we have this 3D secure page if I click on the complete button this payment will be successfully executed if I click on

fail so this payment will be cancelled we will click on the complete button so this payment is successfully placed and we will be redirected to the/ verify success true and Order ID if I open the database we will open the orders collection click here on Orders so here we have the order ID user ID who has placed this order then we have the items the total amount this is the total amount then we have the address here we have the object with users address detail and the status is is food processing that we have set

by default and this is the order place date and here we have the payment Falls here I have added the incorrect spelling for the Local Host so let's Come back to the backend part we will open controllers order controller.js and here we have added Local Host let's correct this spelling save the changes here also we will correct Local Host so this is the Local Host Port 5173 and the verify path now we will add the logic using that when the success is true and we have the order ID available so using This data we will

send the data to the back end that our payment has been made successfully and after after that we will update the false status to true if the success will be false in that case we will delete this order because the payment is cancelled for that we will come back to the vs code editor and here we will close these files and we will close this front end folder Then open order controllers file here we will create one verify method to verify the order this is not the perfect way the perfect way is using the B

hooks but if I go to be hooks that will be time consuming so here we are using a temporary payment verification system so here we will create one function and the name will be verify order so just add const verify Order equal to and it will be one asynchronous Arrow function so just add a sync we will take request and response we will pass this function in this export so just add ify order we will save the changes and we will come back to the routes folder order route. JS file and after this line we

will add order router. post method here we will add SL Verify and here we will use the verify order function so this order function has been imported here after that we will save the changes now here we will add the logic using that we can verify the order payment so here first we need the order ID and success so we will get it from the request. body so just add const order ID then Success equal to request do body then we will add the TR catch Block in this Tri block we will add the if

statement so here we will add the condition if the success is true here we are using the true as a string while calling the API we will pass this data as a string so if the success is true in that case we will make the payment true so just add await order Model dot find by ID and update here we have to pass the order ID with this we will add the object which here we will update the payment and we will update it with true so the payment will be true after that we will

generate the response where we will add success true and here we will add the message that will be paid after that if the success is not true through it means the payment is Cancelled in that case we will add the else statement and here we will type find by ID and delete so just add await order model dot find by ID and delete here we will provide the order ID and after that we will add the response using the method where we will add the success false and here we will add the message that will

be not Paid if there is any error in this Tri block the skatch block will be executed so just add console.log and error with that we will add the response also so just add response. Json and here we will add success false and in the message we will add error we will save the changes now we will integrate this verify order API with our front end so close this backend folder close these files and we Will open the front end folder fer in this folder we will go to SRC then pages and in this Pages

folder we will create a new folder and the name will be verify within this folder we will create a new file that will be verify. jsx here we will use rce after that for this page we will create one CSS file so just just add verify. CSS we will import this CSS file in this Jsx file so just add import. verify. CSS now we will connect this page with the routes for that we will open app.jsx file and here we will create one more route and here we will provide the path it will be SL

verify and here we will use the element and in this element we will use the verify component then close this route we will save the file now when we will open this verify Page this verify component will be loaded so if I type A so this a is displayed on the page it means the verify component is working fine with the route after that we will create the logic using that we can get these parameters which is Success true and Order ID within this component to find the url parameter we will use the use search

padm so just add Const search padm set search patterms equal to use search PMS now we will create two variables and the name will be success and Order ID so just add const success equal to and here we will use search padm do get method and here we will provide the key That is Success using this we will get this value which is true it will be stored in this success variable now let's copy this one and paste it again and here we will provide the name order ID here also we will add order ID

so here we will get the success and Order ID now we will check whether we are getting the data in these variables or not so simply we will add console log Success and Order ID we will save the changes and we will open the web browser reload the web page right click inspect then go to console tab so here we have the true and this is the order ID so in these variables we are getting the data after that we will get the backend URL from the context API for that we will type const c

say URL equal to use context and here we will provide the store context next we will display the spinner on the web page until the payment gets verified to create the spinner here we will add the class name property verify and in this one we will create one div and the class name will be spinner now we will add the CSS properties so in this verify. CSS file we will add verify class name and here We will provide the minan height 6 VH display will be grid after that we will add the CSS properties for

the spinner class so just add verify do a spinner here we will provide the width 100 pixel height 100 pixel Place self Center then we will add the Border Property that will be 5 pixel solid and this color code after that we will add the Border top color and here we will add this color code then we will add border radius that will be 50% after that we will add the animation and to add the animation we will use the key frame so let's add the key frame name Rotate it will be for 1 second

and it will continue to infinite number of time so here we'll create the key frames for this animation and we will use this name rotate and here we will add 100% transform rotate 360° we will save the changes and we will open the web browser so here we have this spinner and It will be displayed until the payment will be verified now let's close the CSS file and here we will create one addo function and the name will be verify payment so just add const verify payment and this will be one Snus add a function

so just add async and here we will call the API so just add const Response equal to await and here we will use the exos do poost method in this one we will provide the URL and in this one we will append the end point that will be/ API SL order SL verify here we are getting the error so let's add this parenthesis here next we will add the object in this object we will send success and Order ID when we will hit this API we will get one response so here we will check if

response do d data do success if it is true in that case we will navigate the users on different route that will be my orders that we will create later to navigate the user here we will use the use navigate hook so just type const navigate equal to use navigate and here we will use this Navigate and we will provide SL my orders if the response is not true in that case the payment will be failed so in that case we will navigate the users on the homepage so just add navigate slash we will run

this function when this component will be loaded for that here we will add the use effect and in this one we will pass the Aro Function here we will add the square braet and here we will call the verify payment function now save the changes now the payment was verified so we are redirected to the my orders if I open the database and refresh this one so here the payment is true and we are redirected to the my orders route if I create a new order let's go to homepage add these Product go to card

page then click on proceed to check out here we will provide the data in this input Fields Greatest Tag one email ID then any dummy data then we'll click on proceed to payment so here we have the payment page we will insert the email ID then we will use this card number copy this one paste it here here we will add the month year then any three Digigit then we will add the name greatest stack then we will click on pay button before making the payment we will come back to the database refresh this and

you will see the second order will be created here so you can see the second order where the amount is 32 where we have two items and the quantity is 1 one and the payment is false if I click on fail and click on back click on leave so The payment will be false and we will be redirected to the homepage and if I refresh the database this order data will be removed let's refresh this one so the second order data has been removed successfully so the verify page is successfully working now we will close

this and after this we will create the orders page where we will list the Orders to create the order page first we will come back to the vs code editor here we will close this front end folder and open the backend folder then open this controllers folder go to order controllers.js file here we have to create one addo function with the name users order in that one we will add the logic so that we can send the users order using the API for that here we will add one comment and we will type User orders

for front end then we will create one Arrow function with the name users order and it will be one asynchronous Arrow function so just add const user orders equal to a sync and in the parameter we will take request and response then we will export this function so just add user orders now save this file and we will Open routes folder then open order route. JS file here we will create one route and the end point will be users order so let's add order router dot post we are using the post method and here we

will use the endpoint SL user orders after that here we will add the middleware that will convert the O token into the user ID so here we will type O middleware after That here we will add our user order function so first we will import that function so we are importing user orders and we will provide it here now we will save this file and we will come back to the order controller.js file in this function first we will add one TR catch block within this Tri block we will find the all orders of that

user using their user ID so just add const orders is equal to Await and here we will use the order model do find method so this find method will provide the all orders of that user in this one we have to provide the filter so just add user ID and in this one we have to provide the users ID that we will get from the middle fair so just add request. body. user ID using that we will get all the orders from this particular user ID and it will be Stored in this orders variable now

we will send this order as a response so just add response. Json here we will pass one object where we will add the success property it is true with that we will add data and in the data we will store the orders using that the user will get all the order details if there is any error in this triy block it will execute the Catch block so in this catch block we will add the console.log and error after that we will generate one response using the method where we will add success Falls and we will

add the message error now we will save this file now we will test this API endpoint for that we will open Thunder client we will click on new request method type is post so select the post method then we will use the HTTP Local Host Port 4,000 SL API SL order slash user orders after that in this header we have to add one authentication token for that let's open the login API and we will generate one token us using this email ID and password so here we have this token so let's copy this one and

in this header we will add token And we will paste it here in the value so in the hitter we are sending this token if I click on send button we will get all the orders of this user so if I click on send button here we have received all the orders of this user here we have one aray and in this one we have one object we have placed one order that's why we have one object in this one we have the ID user ID then we have items in this items we have all

the food items That we have ordered we have the quantity and the total amount and address so this API is perfectly working now we will link this API with our front end so close these files we will open the we will close this backend folder and we will open front end folder then we will go for Pages folder and in this Pages folder we'll create a new page so we will create a new folder And we will add the name my orders in this folder we will create a new file so just add my orders

do ch X here we will use our afce we will create one CSS file for this component so in this folder we will create a new file my orders. CSS now we will link this CSS file with with our jsx file so we will add import. slm myy orders. CSS save the changes after that we will set up this Page in our route so we will open app.jsx file here we will create a new route in this route we will add the path that will be my orders so just add/ my orders then we will

add the element and in the element we will provide my orders my orders component so at this my orders component and close this one so route has been Created now if I open the web page and here if I type slash my orders so this component will be loaded here if I open my orders. jsx file here we will add test and you can see this test is visible on the web page so this my orders route is working fine after that here we will add the logic using that we can Fitch all the users

data and save it in one state variable so first we will create one state variable with the name data so just add const Data and we will add the seter function name set data equal to use State and initialize it with one Mt aray after that from the context we need the URL and token using that we can call the API for that here we will add const curly reses here we will take URL and token and here we will add use context and in this one we will provide A store context so here we

have the backend URL authentication token and here we have created the state variable after that now we will create a function and the name will be fetch orders so we will type con F orders equal to a sync so the function has been created in this one we will call the API for that we will add con Response equal to await and here we will use the xos package do Post method after that here we will add add the URL plus and in this one we will append the end point that is/ API SL order

slash user orders after that in the body we don't have to send anything so we will simply add the empty object and after that we will add the headers so again use the Curly Braes and headers in the headers we will add the token so it will call the API and in this variable we will get the response after getting the response we can save the users order data in this estate variable for that we will add set data here we will add response. data. data so our function has been created and in this one

we have added the logic you using that we can save the users order data in this estate Variable after that we have to call this function whenever this component will be loaded for that we will add use effect we will add the arrow function and here we will add the comma square bracket here we will add the if statement so first we will test if the token is available in that case we will run this function if the token is not available we will not run this function so in this if statement we have added

The token and here we are adding fetch orders function so it will execute this function suppose user login or log out on the web page and that case we have to again execute this Arrow function so here in this square bracket we will just add token so whenever the token will be updated this function will be executed we will save the changes and now we will check the response so here we will add the Console.log and we will add response. dat. data we will save the changes and we will open the web browser click on

inspect go to console and here we have one array in this areay we have one entry here we have the address amount date items payment a status user ID and ID so we are getting the data from the API remove this console.log now we will create the UI using that we can display the users Order so first in this div we will add one class name so it will be my orders then we will add one h2 tag and add the text my orders then we will create one div with the class name container in

this container we will use this data array and we will map the data so we'll add the curly Braes do map and here we will pass the arrow function in this one we will pass the Individual order data and index number then we will return one div in this div we will add a class name my orders order then we will add the key property where we will provide the index so just add key index that we got using the parameter now in the order we will display the image tag and in this image we

will use the assets Dot parcel icon after that we will add the paragraph tag and in this paragraph tag we will display the multiple items so in this API data we have ordered these six item so we will display all these name one by one to display that we will add curly brushes here we will use the order do items that is the array name in this one we'll add the map method and in this map method we will Pass one Aro function and in this parameter we will send individual item and index number with

the item name we will display the quantity also you can see in the data we have the quantity for this item Greek salad the quantity is two so we will display Greek salad multip by two so we will add the if statement if index equal to order do items do Length minus one so using this we can access the last item of the user order and here we will simply return item dot name and we will concat one string that will be one cross icon then we will add the item quantity so we will add

plus item do quantity we will save the changes and open the web page so here we have the entry that is p p rols and the quantity is Two so this is the last item from our all the items after that we will add the Elsa statement and we will paste this return a statement again and in this one simply concat one more string where we will add comma we will save the changes and open the web browser now we have all the items with their quantity so we have total six Items and at the

end we don't have the comma because we have added the condition here if the if we are on on the last item we don't have the comma so it is displaying all the order items after this P tag we will display one more P tag and in this one we will display the order amount for that we will add the dollar sign curly bres order do amount after that we will add 00 we will save the changes and here we Have the the order amount after that we will add one more P tag and in

this one we will add items curly bres and here we will provide the total number of item that we will get from order. items. length so here we have total six items you can see 1 2 3 4 5 and six so this item is also working fine after that we will add the paragraph tag for the order status so we will add the span tag and here we will Add the hex code after closing of this span tag we will add one B tag and in this one we will add the curly bres and

provide order do status save the changes and open the web browser so this hex code is not working here we will add one semicolon save the changes now you can see one bullet point and here we have the food processing after that we will add one button Tag and in this button tag we will add the text track order we will save the changes and open the web browser so here we have the image items name price total number of items status and this track button after that we will add the CSS properties for this

component so let's come back open my orders. CSS file and here we will add the CSS Property for the class name my orders here we will add the margin that will be 50 pixel and 0 pixel we will save the changes now we will add the CSS properties is for this container class name so let's copy this add it here before that we will add my orders then add container here we will provide display Flex Flex Direction column gap of 20 pixel margin top 30 pixel we will save the changes and open The web browser

so here we have the margin from the left and top after that we will add the CSS properties for the my orders order class name let's copy this one and paste it here in this CSS file here we will add display grid grid template column 0.5 fraction two fraction one fraction one fraction two fraction and One fraction then we will add align item Center Gap 30 pixel font size 14 pixel then we will add the padding 10 pixel and 20 pixel then we will add the color property and we will use this color code then

we will add the border that is 1 pixel solid and this color code we will save the changes and open the Web browser so here this entry is looking good after that we will add the CSS properties for this image tag so just add do my orders order IMG tag here we will provide the width of 50 pixel save the changes so this image width is 50 pixel now now we will add the CSS properties for this bullet point so here let's add dot my Orders order then B tag span tag and here we will

use color and this color code we will save the changes so this bullet point is displaying in the red color next we'll add the CSS property for this text so just add my orders then P tag then B tag here we will provide font weight 500 then color and this color code save the Changes so this text is looking good after that we will add the CSS properties for this track order button so we will come back to the vs code editor and we will add dot my orders order button tag here we will add

border none padding 12 pixel and 0 pixel border radius of 4 pixel background color and we will use this color code then we will add cursor point And we will add color and this color code save the changes and we will open the web browser so this track order button is looking good and here we have added the cursor pointer after that we will add the media query so that this my ordered page will be responsive for a smaller screen so just come back to the CSS file we will add the at the rate me

media we will add the condition Max Width 900 pixel here we will add the class name my orders order we will provide dip we will provide grid template column one fraction two fraction and one fraction then we will add the row Gap that will be 5 pixel then we will add the font size 12 pixel after that we will add the class name then button tag in this one we will decrease the Font size it will be 10 pixel save the changes now click on inspect if I decrease the size you can see this is

how it will be displayed in the smaller screen now if I open the homepage if I click on this button to add the product in the card we have set the quantity three and two we will open the card page click on proceed to check out here we will add the details then click on proceed to Payment so it will open the payment page now to make the payment we will we use the dumy card number so we'll select this card number copy this one paste it in this card information area here we will add

the month and year then we will add any three digigit here we will add the name and click on pay then click on complete payment so the payment has been completed now we are on the my orders page and here it is Displaying the second order where the quantity is to price $74 and the status is food processing here we have the track order button so our my order page is perfectly working after that we will add the logic so that when we click on log out then we cannot see this order page until we

login again so it so this page will be hidden so just come back to the code file we will open place order page and here we will add the use effect Hook so let's add use effect in this one we will pass one Aro function and it will be executed whenever our token gets updated so just add token and then we will add one if statement here we will add the condition not of token so if the token is not available then this if block will be executed so whenever this block will be executed we

will be navigated to the cart Page for that here we will use the use navigate hook so just add const navigate equal to use nav navigate after that in this if block we will add navigate and we will add/ cart with this one we will add one more condition we will add else if and that will be if our cart is empty in that case we will send the user on the card page so just add kit total cart amount and if it is zero in that case The cart will be empty so we will

again send them to the cart page so just add navigate and/ card save the changes and open the browser if I click on proceed to check out so we will be redirected to the card page if I log in on this website and right now the cart value is zero and if I click on proceed to check out so it will be redirected to the cart page only if I add any item in the cart then go to cart page click on proceed to Check out so it will display the order page so this logic

is perfectly working after that we will close this file after that we will add the function for this orders option so that if I click here it will open the my orders page for that we will open the vs code editor we will open components folder Nabb bar. jsx file so here we have to add on click property in this Li tag and here we will pass one Arrow Function we will call this navigate function and in this one we will provide the path slm my orders we will save the changes and we will open

the web browser now if I go to profile and click on orders so it will open the my orders page so here we have completed the the front end part where we have added the feature for add to cart then you can see the product in the cart page then we can click on proceed to check out and place the order so we Have set up the payment gway and after completing the payment our order will be displayed on this my orders page after that let's come back to the vs code editor and you have

to remember one thing our front end is running on this address so we have to mention it in the backend project within order controller.js file at this place if the port number is different then in this front end URL we Will add the different port number if it is 3,000 we will add the port 3,000 here if we are deploying the project online in that case whatever our front end URL is that we will place here now we will close all the front end files and stop this front end we will click on contrl C

yes let's delete this terminal also now close this folder now we will add the logic using that we can display all the users order In our admin panel so we will open this admin folder in integrated terminal and run this so just add npm rund Dev now we will open this address in our browser so here we have the add items page and list item page now we will create this orders page before creating the orders page first we will create the API so that we can get the all orders from all the Users from

our API so in this backend folder we will go to controllers and Order controllers.js file and here we will add one Aro function using that we can find all the orders of all the users so just add one comment and we'll add listing orders for admin panel then we will add one addo function and its name will be list order so just add Const list orders equal to snc in this parameter we will take request and response now we will export this function so just add comma list orders now we will open routes folder order

routes.js file here we will add one get method so just add order router do get and the endpoint name will be/ list and after that we will use the List order function that we have created in this order controller.js file so first we will import that in this line so just add list orders and here we will use that list orders function we will save this file now open order controllers.js file here we will add the logic to fch all the order details so first we will add one try and catch block in the triy

block we will add const Orders is equal to await and we will use the ordered model dot find using that we will get all the orders data in this variable Now using the API we have to send this so just add response. Json success true then we'll add data property in this data property we will send this orders if there is any error in this Tri block so it will execute the catch block So just add console.log error and we will add one response using the Jon method so the success will be false with that

we will add one message property and here we will add the message error we will save the changes Now API has been created now we have to test this so we will open Thunder client we will click on new request the method type is Get here we will use the HTTP Local Host 4000 SL API SL order SL list if I click on send button so here we have the success true and here we have the data property that is one array and in this one we have objects that display all two orders so we

have two objects here so this API is perfectly working now we have to integrate this API with our admin panel so we will open the admin folder and SRC Pages order. jsx File here first we will create one state variable where we will store the data coming from the API so just add const orders then set orders equal to user State and we will initialize it with empty array after that we will create one Arrow function and its name will be Fitch all orders so we will add const Fitch all orders equal to a sync

so Arrow function has been created And this one we will call the API to call the API before calling the API we will D structure the URL and we will get this URL from app.jsx file where we have passed the URL as a prop and in the and here we have defined our backend URL so here we will get the URL now we can do the API call so just add const response equal to await exos dot get and here we will provide the URL and in this one we will append the endpoint that is/

API SL order SL list so after that we will get all the data in the response because it is a get request so we don't have to pass anything as body and headers after this we will add one if statement where we will add the condition if response. dat. success is true it means we are getting the order data in that case we will Store the order data in this ORD state so let's add set orders and here we will provide response. data. data to check this data we will add one console log and we

will add response. dat. dat and after that we'll add the else statement if there is any error in that case this response. data. success will be false and this else condition will be executed so here we will display one Toast notification so just import the toast so let's type import toast from react toasttify after that here we will add toast. error and here we will display one text that is eror after that we have to run this function whenever this component will be loaded for that we will add use effect in this one we will

pass one add function and here we will add the Bracket in this one we will call this switch all orders function save the file and we will open the web browser if I click on inspect and go to console tab here we have one error exos is is not defined so we have to import the exos so just add import exos from Exo package save the changes and reload the web page so here We have one adday in that we have two order details so this API is perfectly working now we will use this orders

data to display the orders on this order page to display the orders here in this div we will add one class name property it will be order and one more class name which is ADD then we will add one S3 tag and write the text order page after this text we will add one D with the class name order list inside this div we will map our orders so just add curly Braes orders. map method and here we will pass one Arrow function so we will use the small bracket and in this one we will

add the HTML structure and that will display all the orders so just add div and here we will add the class name property that will be order Item then in this di we will add the key property where we will pass the index so from this parameter we will take the individual order and with that we will pass the index number and in this key we will provide this index within this div first we will add the image tag and in this image SRC we will use the assets so first we will import the assets

so here we will type Import C lies assets from do/ do/ assets folder SL assets file then here we will provide assets dot parcel icon after this image tag we will add one div tag and within this we will provide one P tag and in this P we will provide a class name it will be order item food here we will display all the items name so we will add the curly Braes just Add order do items do map and here we will pass one Arrow function in this parameter we will take the item and

index after that here we will add the if statement in this one we will type if index equal to order do items dot length minus 1 in that case here we will Return item name and in this this one we will concat one string where we will add this cross icon then we will concat the items quantity that we will get from item do quantity after that here we will add the Elsa statement and here we will add the curly Braes we will return item do Name plus this cross icon then plus item do quantity

after that we'll add one more string that is comma we will save the changes and open the web browser so here we have the order page this image then order items name and qu quty so here we are checking if it is the last item so at last item we have the name and quantity but we don't have the comma at the End and for other items we have added one comma after closing of this P tag here we'll create another P tag and in this one we'll add the order item name here we will

add the curly Braes and here we will add the users first name and last name so just add order dot address DOT first name after that we will concat one string where we will simply provide one Space after that we will conet the last name to get the last name we will type order dot address dot last name we will save the changes so here you can see the name of user who has placed the order so we have used this name greatest T while placing one order after that we will display the users address

to display the address we will add the P tag and in this one we will add the class name order item Address in this one we will add the P tag and in this one we will display the street address so just add the curly Braes we will add order. address dot Street in this one we will concat this comma after that we will add the p tag and here we will type order dot address do City then we will concat the string where we will add the comma and space after this city we will

display the users state so just add order. Address do state and here also we will add the comma and a space then we'll add order do address dot country then we will concat one comma and a space and after this the string we will concat the ZIP code so just add order. address do zip code if we will save the changes and open the web browser so here we have the street City Estate us and this ZIP code while placing the order we have entered the street city state us and this ZIP code and in

the second order we have added this a AA in all the fields that's why it is displaying this a after that we will display the users's phone number so let's remove this P tag and we will convert it into div tag so it will be div in this one we have two P tag so there's no changes here so after Closing of this div we will add one B tag and in this one we will display the users's phone number so we will add the class name property and it will be order item phone and

here we will add the curly bres order do address. phone we will save the changes and open the web browser so here we have the users's phone number after that we will display the item Quantity for that after closing of this div we will add one P tag and in this one we will add items then we will add the colum and we will add curly braces order dot items do length we will save the changes so here we have the number of items item two item six and here we have the six items name

this is the two items name after that we will show the order amount so we Will create one p type here we will add dollar sign curly bres and here we'll type order dot amount save the changes so here we have the billing amount that is doll 224 and do 74 after that we'll create a select menu so that we can change the order status so while placing the order if I go to orders data you can see the order status is food processing by default so we'll Create a select menu so that we can

change the status to out for delivery or delivered for that let's come back and here we will create a select menu so just add the select tag remove this name and ID and here we will use the three option tag so we'll type option into three so here we will add the same thing in the option text and value so we will type food processing that will be the by default Status after that we will add out for delivery after that we'll type the third status which is delivered save the changes so here we have

the option to change the status after that we will add the CSS properties for this order page so first we will add the CSS properties for this class name order item let's copy this one open order. CSS file here we will use display grid grid template Columns and here we will provide the 0.5 fraction two fraction one fraction one fraction and one fraction it will be f r after that we will add the Align items start Gap will be 30 pixel border will be 1 pixel solid and this color code then we will add the

padding that will be 20 pixel margin will be 30 pixel and 0 Pixel then we will add the font size that will be 14 pixel and at the end we will add color and use this color code we will save the changes and open the web browser so for each order we have the entry and now we will add the CSS properties for the class name order item food and the another class name order item name so let's add do order item Food comma do order item name here we will provide the font weight 600

save the changes now open the web page so this new name and the item is looking good after that here we will add the class name do order item name and here we will add the margin top 30 pixel margin bottom 5 pixel save the changes so here we have the gap between The item name and users name after that we will add the CSS properties for this add address so we will copy this class name order item address we will paste it in the CSS file here we will add margin bottom 10 pixel we

will save the changes so here we have the margin between the address and mobile number after that we will add the CSS properties for this select menu So here we will add dot order item then select tag and here we will provide the background color and this is the color code then we will add the Border 1 pixel solid and here we will use the color code after that we will add the width in the width we will add the max property 10 VW and 120 pixel then we will add the padding it will be

10 Pixel and here we will select the outline none we will save the changes and open the web page so here our select menu is looking good after that we have to make this page responsive so we will add the media query so here we will type add media and we will use the condition Max width 1,000 pixel and here we will add the class name otter item and here we will add the font size 12 Pixel then we'll add the grid template columns 0.5 fraction two fraction and one fraction after that we will add

the padding that will be 15 pixel and and 8 pixel then we will add dot order item select tag and in this one we will provide the padding of 5 pixel font size of 12 pixel and after that here we will add the order item IMG tag and for this one We will provide width 40 pixel we will save the changes and open the web browser so if I inspect this web page and reduce the screen size so you can see this is how this layout is displayed so we have created the order page also

now we will create the API using that we can select this option and change the status and that status should be saved in the database for that we Will close these files and we will open the backend folder go to controllers folder and here we will open order controller.js file so here we will create a new API for updating the status so just add comment and we will add text API for updating order status after that we will create one Arrow function and its name will be update a status and it will be asynchronous Aro

Function so just add const update a status equal to a sync and here we will add request and response after that we will pass this function in this export so just type update status and after saving this file we will open route folder then order route. JS file and here we will create a new API and its method will be post so just add order router do poost Method and here we will add the endpoint name that will be/ status and here we will use the update a status function that we have have created using

this order controller JS file so here we will import that function so just add comma update a status and we will use this update a status function here after that we will save this file and we will come back to the order controller.js File here first we will add one track catch block in this Dy block first we will find the order by using the ID then we will update the value we will get the order ID and status from the requestbody and we will send that while calling the API so here we'll type await

then we will use the order model dot find by ID and update in this method first we will provide the Order ID that we will get from the body so just add request. body dot order ID after that we will add the curly addes and here we have to update the status so just add a status and in this a status we have to update the value that we will get from the request. body so just add request. body. status after updating this our status will be updated in the database after that we will generate

one response so Just add response. Json here we will add the curly Braes and in this one we will add success true after that we will add the message where we will add a status updated if there is any error in this process then this cat block will be executed so we will type one console log and we will log the error after that we will generate the response using the Json method and in this one we'll type success False and we will add the message also so in the message we will add error we

will save the changes and we will test this API to test this API first we need the order ID we will get the order ID from the mongod DV so here we have this order ID let's copy this one then we will come back to the vs code editor we will open the Thunder client click on new request it will be Post and here we will use the API HTTP Local Host Port 4,000 SL API SL order SL status after that in this body we will add order ID and paste the order ID with that

we need need the new status so just type status and in this status we will type out for delivery then we'll click on the send button so here we have one error so let's see why we are getting This error we will open order route. JS file so here we have added the incorrect spellings so let's collect it it will be a status save the changes and now again click on the send button so here we are getting the message success true and the message is a status updated now if I open the web browser

and refresh it so this status should be updated so refresh this web page so here you can see the status out For delivery so this API is perfectly working after that we will link this API with our admin panel so we will close this back end panel here we have two terminals first backend is running and here we have the admin panel so let's open the admin folder SRC Pages orders order. jsx File here we will create a functionality using that when we select other option then it will update the order status so to create

that let's come back and here we will create one Aro function and its name will be a status Handler so just add const status handled and it will be one asynchronous Arrow function in this one we will pass the event and with that we will pass the Order ID we will create the arrow function and now we will link this function with the select tag so come here in the select tag and here we will add the on change property and here we will pass the Aro function and in this Arrow function we will pass

the event and here we will call the a status Handler function in this one we have to pass the Event and with that we have to pass the order ID to get the order ID we will typee order doore ID after adding this on change property and a status Handler we will add one more thing which is value property and in this one we'll add the order do status we will save the changes now we will check whenever we will select another option it is calling this function or not for that simply we Will add

console.log event and Order ID save the changes and open the web browser let's refresh this web page and inspect it go to console Tab and if I select another option from this dropdown here we have one event and here we have the order ID so we are getting the event and Order ID after that we will add the logic using that whenever we will change the option from drop- down that changes will be Reflected in the database for that here we will call the API so just add const response equal to await and here we

will call the exos dot post method here we have to provide the backend URL so we will type URL and in this one we will concat the endpoint address that is/ API SL order SL status after that here we have to send The body so just add curly bres and here in the body first we will will set the order ID so just add order ID then we will send the status so here we'll type a status and we will get this a status from event dot Target dot value after that we will get the

response so here we will check if if the response Is success in that case we will execute this if Block in this if block we will call this F all orders function so this data will be refreshed for that here we will type await and we will call the fch all orders function we will save the changes and we will refresh the web page so if I select the out for delivery From this dropdown and refresh the database so for this order the status is out for delivery here we are getting extra space so we

will collect it remove this space save the changes if I select delivered for both orders and refresh the database so you can see the both order status is delivered if I reload the web page you can see the updated status here which is Delivered so we have created this functionality successfully after that we will check if we are updating the status here whether our front end status is getting updated or not so now we will run the front end backend and admin panel together so here our admin panel is already running at this port number

5173 and back end is also running on Port 4,000 now we'll run the front end so open open the front end folder in the Terminal so here we have three terminals backend admin and front end here we will type npm rund Dave so our front end is running at Port number 5174 so we have to update this address in the backend controller order controller.js file so we will update this port number it will be 5174 save the changes and after that let's open this Address in the web browser so here we have the admin panel

and this is the front end now click on the login we will add this email ID password then we will login on the web page if I open the orders page so here the status is delivered so you can see the status delivered for both orders if I change the status out for delivery from the Admin panel and refresh this web page so you can see the status has been updated for the front end it is out for delivery after that we will add the functionality using that we don't have to refresh this web page

to check the state for that we will add the functionality on this track order button when we will click on this button it will update the current status so we will come back to the front end folder we will open this SRC folder Pages my orders page and here we will run this function f orders whenever we will cck click on this track order button for that in this track order button we will add the on click property and here we will provide the function name which is fetch orders save the changes now if I

change the status Delivered from the admin panel and come to my orders page on front end and click on this track order so it will update the status so now we don't need to refresh the web page to check the status we will click on track order and it will display the updated order status now we have successfully created the full stack food delivery app and we have added the name tomato so now we have created all the functionalities so that we can add the Product in the cart we can remove the product from the

cart we can place the order so if I add greatest tack in the email ID we will add this email ID and in the street if I add one 23 Main Street in this city we will type any City in the state we will type any town in the zip code we will add 1 2 3 4 5 in the country I'll type us and in the phone number we will add one dummy phone Number and click on proceed to payment so we will be redirected to the payment page to make this payment successfully we

will search for a stripe dumi card we will open this link here we will select cards by country and here we will search for country for which we have created the stripe account so let's copy this card number here we will provide the Email ID card number then select any future month and year add any three-digit number add the card holder name and click on pay then click on complete payment so the payment has been completed and here we have the third order so by default the status is food processing and if I open the

orders in the admin panel and select the status out for delivery and click on track order so it will display the out for delivery if I Click on delivered so it is displaying delivered so we have successfully created the full stack food delivery app using the reactjs expressjs mongod DV and nodejs and in the admin panel we have created the product ad page product list page and Order Details page here we have created the functionality for login log out and register my orders page card page if I click on log out so now we Have

the login form so finally we have completed this full stack food order website if you want the source code of this full stack project including backend and payment integration I have given the link in the description below and don't forget to link this project in your resume it will make your resume stand in in the top 1% and help you to secure a high paying job I hope this video was helpful to you do subscribe our Channel if you have not subscribed Yet thank you so much for watching this video