GreatStack presents a comprehensive guide

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

AI-generated summary and notes. Check quotations, numbers, and important claims against the source video. Captions may contain errors.

Watch the source video on YouTube

Estimated reading time: 355 minutes for the text on this page.

Summary

This tutorial by GreatStack walks you through the process of building a full-stack food delivery web application using ReactJS, MongoDB, Express, NodeJS, and Stripe for payment integration. The video covers the creation of a responsive front end, a functional back end with a structured database, an admin panel for managing products and orders, and a user authentication system. The tutorial provides step-by-step instructions on setting up the development environment, implementing CRUD operations, integrating a payment gateway using Stripe, and ensuring a smooth user experience across devices.

Highlights

Walkthrough of setting up the project with the MERN stack 📦
Basics of creating a responsive layout with ReactJS 🎨
Backend creation with MongoDB, Express, and NodeJS 🚀
Step-by-step guide to setting up Stripe for payments 💸
Detailed explanation of building an admin panel for order management 📋

Key Takeaways

Master the Mongoose stack to build a robust back end 🍽️
Design a responsive user interface with ReactJS 🌐
Integrate Stripe for seamless payment processing 💳
Build an admin panel to manage products and orders effortlessly 📊
Implement authentication to secure user data 🔒

Overview

The video opens with an introduction to the MERN stack—MongoDB, Express, React, and NodeJS—and its suitability for developing a comprehensive food delivery application. The tutorial emphasizes setting up a robust back end using Mongoose, ensuring data is handled efficiently and securely.

Viewers are guided through creating a responsive front end with ReactJS, enabling a seamless user experience across various devices. You'll learn how to implement dynamic state management and hooks to manage user interactions effectively.

A significant portion of the tutorial is dedicated to integrating the Stripe payment gateway, allowing users to pay seamlessly within the app. Additionally, the tutorial covers the construction of an admin panel, presenting tools for order and product management, critical for maintaining a functional e-commerce platform.

Chapters

00:00 - 00:30: Introduction The introduction chapter welcomes viewers to a new tutorial focused on creating a full stack food ordering web application using ReactJS. The tutorial will cover building the front end, back end, and an admin panel using the M Stack. The chapter briefly presents the project overview, highlighting that viewers will be designing a homepage for the food ordering website.
00:30 - 06:00: Project Overview The chapter 'Project Overview' provides a walkthrough of a food ordering website. It highlights the website's features, such as displaying a list of food items available for order. The menu can be filtered to show specific categories like desserts or noodles, and is designed to display all items when reset. The website is responsive, adapting its layout according to the screen size.
06:00 - 09:00: Setting up the Environment The chapter 'Setting up the Environment' likely deals with creating a responsive web page that adjusts seamlessly across different screen sizes. It showcases elements like a 'sign-in' button and a 'sign-up' form. Additionally, it explains the login process for existing accounts, which involves clicking a login link and entering credentials such as email ID and password.
09:00 - 38:00: Creating the Frontend The chapter titled 'Creating the Frontend' discusses the process of implementing a signup functionality on a website. It covers the user interface interaction for new user registration where users input their name, email, and password. The chapter highlights the importance of password security by demonstrating a warning message that prompts users to enter a strong password if a weak one is initially provided.
38:00 - 57:30: Creating the Backend This chapter guides the user through the process of creating the backend of an application. It includes steps for account creation, logging in, and product interaction within a cart. The user is shown how to add products to the cart using a plus icon, increase or decrease the quantity of products, and manage the cart by adjusting the number of items accordingly.
57:30 - 72:00: Integrating Frontend and Backend This chapter discusses the integration of frontend and backend components in a shopping cart system. It describes the process starting from adding a product to the cart, viewing cart details such as product image, name, price, quantity, total price, and delivery charges. After reviewing the cart, the user can proceed to the checkout page, enter their name and address on the delivery information page, and then move on to the payment page.
72:00 - 86:00: User Authentication The chapter on 'User Authentication' introduces the process of making a purchase and proceeding through an online payment system. It begins by setting an address and a phone number and then clicking a button to proceed to the payment page. The payment page is integrated with Stripe, a popular payment processing platform, and displays order information.
86:00 - 96:00: Cart Functionality This chapter discusses the functionality of a shopping cart system. It begins with adding food items along with their quantities to the cart. The user then inputs an email ID and a dummy card number for transaction purposes. Additional card information is also entered. Upon clicking the pay button, the system processes the payment, and after a successful transaction, it navigates to the 'My Order' page where the order details are displayed.
96:00 - 117:30: Order Placement and Payment Integration This chapter focuses on order placement and payment integration within a food service context. It involves displaying food details, like quantity and total price, as well as tracking the order status which is currently 'processing'. The chapter includes a demonstration of the admin panel, which has options to add items, list items, and review orders. It specifically walks through checking a new order that has just been placed on the website.
117:30 - 145:30: Admin Panel The chapter titled 'Admin Panel' discusses the functionalities available in the admin panel for managing order information. It explains how an admin can view order details, update the delivery address, and change the order status. The admin has options to mark an order as 'out for delivery' or 'delivered'. It also details the real-time effect of status updates on what the end-user sees, as demonstrated through refreshing a web page to reflect the changes.
145:30 - 174:00: Testing and Debugging The chapter titled 'Testing and Debugging' focuses on the process of managing items through an admin panel. It provides a practical example where a food item, 'cooked noodles,' is deleted from the list of items showcased on a web page. This action is followed up by checking the homepage to ensure the product has indeed been deleted, thus demonstrating a basic test of the deletion feature.
174:00 - 181:00: Conclusion and Deployment Tips In the 'Conclusion and Deployment Tips' chapter, the focus is on finalizing and launching a product successfully. The last item or product is identified as missing, indicating a clean slate for adding new products. Instructions are provided to add new items, which include uploading a product image, entering the name, a brief description, and choosing the appropriate category and price. Upon clicking the 'ADD' button, confirmation of the addition is shown through a message indicating the product has been added. This process is verified by refreshing the website to see the new product displayed on the front end.

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

00:00 - 00:30 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
00:30 - 01:00 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
01:00 - 01:30 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
01:30 - 02:00 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
02:00 - 02:30 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
02:30 - 03:00 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
03:00 - 03:30 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
03:30 - 04:00 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
04:00 - 04:30 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
04:30 - 05:00 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
05:00 - 05:30 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
05:30 - 06:00 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
06:00 - 06:30 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
06:30 - 07:00 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
07:00 - 07:30 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
07:30 - 08:00 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
08:00 - 08:30 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
08:30 - 09:00 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
09:00 - 09:30 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
09:30 - 10:00 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
10:00 - 10:30 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
10:30 - 11:00 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
11:00 - 11:30 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
11:30 - 12:00 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
12:00 - 12:30 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
12:30 - 13:00 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
13:00 - 13:30 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
13:30 - 14:00 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
14:00 - 14:30 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
14:30 - 15:00 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
15:00 - 15:30 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
15:30 - 16:00 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
16:00 - 16:30 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
16:30 - 17:00 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
17:00 - 17:30 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
17:30 - 18:00 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
18:00 - 18:30 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
18:30 - 19:00 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
19:00 - 19:30 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
19:30 - 20:00 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
20:00 - 20:30 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
20:30 - 21:00 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
21:00 - 21:30 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
21:30 - 22:00 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
22:00 - 22:30 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
22:30 - 23:00 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
23:00 - 23:30 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
23:30 - 24:00 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
24:00 - 24:30 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
24:30 - 25:00 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
25:00 - 25:30 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
25:30 - 26:00 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
26:00 - 26:30 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
26:30 - 27:00 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
27:00 - 27:30 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
27:30 - 28:00 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
28:00 - 28:30 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
28:30 - 29:00 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
29:00 - 29:30 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
29:30 - 30:00 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
30:00 - 30:30 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
30:30 - 31:00 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
31:00 - 31:30 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
31:30 - 32:00 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
32:00 - 32:30 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
32:30 - 33:00 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
33:00 - 33:30 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
33:30 - 34:00 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
34:00 - 34:30 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
34:30 - 35:00 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
35:00 - 35:30 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
35:30 - 36:00 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
36:00 - 36:30 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
36:30 - 37:00 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
37:00 - 37:30 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
37:30 - 38:00 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
38:00 - 38:30 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
38:30 - 39:00 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
39:00 - 39:30 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
39:30 - 40:00 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
40:00 - 40:30 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
40:30 - 41:00 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
41:00 - 41:30 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
41:30 - 42:00 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
42:00 - 42:30 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
42:30 - 43:00 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
43:00 - 43:30 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
43:30 - 44:00 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
44:00 - 44:30 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
44:30 - 45:00 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
45:00 - 45:30 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
45:30 - 46:00 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
46:00 - 46:30 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
46:30 - 47:00 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
47:00 - 47:30 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
47:30 - 48:00 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
48:00 - 48:30 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
48:30 - 49:00 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
49:00 - 49:30 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
49:30 - 50:00 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
50:00 - 50:30 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
50:30 - 51:00 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
51:00 - 51:30 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
51:30 - 52:00 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
52:00 - 52:30 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
52:30 - 53:00 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
53:00 - 53:30 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
53:30 - 54:00 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
54:00 - 54:30 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
54:30 - 55:00 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
55:00 - 55:30 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
55:30 - 56:00 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
56:00 - 56:30 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
56:30 - 57:00 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
57:00 - 57:30 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
57:30 - 58:00 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
58:00 - 58:30 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
58:30 - 59:00 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
59:00 - 59:30 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
59:30 - 60:00 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
60:00 - 60:30 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
60:30 - 61:00 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
61:00 - 61:30 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
61:30 - 62:00 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
62:00 - 62:30 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
62:30 - 63:00 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
63:00 - 63:30 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
63:30 - 64:00 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
64:00 - 64:30 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
64:30 - 65:00 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
65:00 - 65:30 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
65:30 - 66:00 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
66:00 - 66:30 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
66:30 - 67:00 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
67:00 - 67:30 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
67:30 - 68:00 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.
68:00 - 68:30 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
68:30 - 69:00 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
69:00 - 69:30 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
69:30 - 70:00 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
70:00 - 70:30 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
70:30 - 71:00 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
71:00 - 71:30 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
71:30 - 72:00 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
72:00 - 72:30 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
72:30 - 73:00 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
73:00 - 73:30 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.
73:30 - 74:00 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
74:00 - 74:30 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
74:30 - 75:00 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
75:00 - 75:30 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
75:30 - 76:00 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
76:00 - 76:30 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
76:30 - 77:00 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
77:00 - 77:30 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
77:30 - 78:00 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
78:00 - 78:30 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
78:30 - 79:00 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
79:00 - 79:30 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
79:30 - 80:00 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
80:00 - 80:30 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
80:30 - 81:00 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
81:00 - 81:30 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
81:30 - 82:00 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
82:00 - 82:30 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
82:30 - 83:00 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
83:00 - 83:30 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
83:30 - 84:00 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
84:00 - 84:30 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
84:30 - 85:00 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
85:00 - 85:30 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
85:30 - 86:00 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
86:00 - 86:30 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
86:30 - 87:00 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 +
87:00 - 87:30 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
87:30 - 88:00 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
88:00 - 88:30 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
88:30 - 89:00 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
89:00 - 89:30 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
89:30 - 90:00 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
90:00 - 90:30 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
90:30 - 91:00 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
91:00 - 91:30 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
91:30 - 92:00 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
92:00 - 92:30 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
92:30 - 93:00 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
93:00 - 93:30 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
93:30 - 94:00 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
94:00 - 94:30 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
94:30 - 95:00 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
95:00 - 95:30 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
95:30 - 96:00 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
96:00 - 96:30 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
96:30 - 97:00 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
97:00 - 97:30 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
97:30 - 98:00 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
98:00 - 98:30 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
98:30 - 99:00 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
99:00 - 99:30 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
99:30 - 100:00 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
100:00 - 100:30 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
100:30 - 101:00 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
101:00 - 101:30 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
101:30 - 102:00 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
102:00 - 102:30 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
102:30 - 103:00 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
103:00 - 103:30 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
103:30 - 104:00 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
104:00 - 104:30 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
104:30 - 105:00 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
105:00 - 105:30 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
105:30 - 106:00 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
106:00 - 106:30 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
106:30 - 107:00 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
107:00 - 107:30 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
107:30 - 108:00 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
108:00 - 108:30 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
108:30 - 109:00 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
109:00 - 109:30 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
109:30 - 110:00 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
110:00 - 110:30 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
110:30 - 111:00 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
111:00 - 111:30 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
111:30 - 112:00 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
112:00 - 112:30 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
112:30 - 113:00 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
113:00 - 113:30 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
113:30 - 114:00 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
114:00 - 114:30 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
114:30 - 115:00 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
115:00 - 115:30 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
115:30 - 116:00 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
116:00 - 116:30 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
116:30 - 117:00 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
117:00 - 117:30 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
117:30 - 118:00 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
118:00 - 118:30 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
118:30 - 119:00 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
119:00 - 119:30 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
119:30 - 120:00 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
120:00 - 120:30 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
120:30 - 121:00 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
121:00 - 121:30 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
121:30 - 122:00 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
122:00 - 122:30 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
122:30 - 123:00 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
123:00 - 123:30 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
123:30 - 124:00 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
124:00 - 124:30 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
124:30 - 125:00 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
125:00 - 125:30 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
125:30 - 126:00 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
126:00 - 126:30 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
126:30 - 127:00 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
127:00 - 127:30 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
127:30 - 128:00 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
128:00 - 128:30 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
128:30 - 129:00 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
129:00 - 129:30 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
129:30 - 130:00 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
130:00 - 130:30 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
130:30 - 131:00 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
131:00 - 131:30 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
131:30 - 132:00 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
132:00 - 132:30 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
132:30 - 133:00 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
133:00 - 133:30 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
133:30 - 134:00 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
134:00 - 134:30 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
134:30 - 135:00 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
135:00 - 135:30 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
135:30 - 136:00 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
136:00 - 136:30 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
136:30 - 137:00 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
137:00 - 137:30 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
137:30 - 138:00 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
138:00 - 138:30 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
138:30 - 139:00 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
139:00 - 139:30 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
139:30 - 140:00 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
140:00 - 140:30 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
140:30 - 141:00 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
141:00 - 141:30 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
141:30 - 142:00 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
142:00 - 142:30 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
142:30 - 143:00 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
143:00 - 143:30 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
143:30 - 144:00 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
144:00 - 144:30 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
144:30 - 145:00 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
145:00 - 145:30 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
145:30 - 146:00 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
146:00 - 146:30 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
146:30 - 147:00 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
147:00 - 147:30 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
147:30 - 148:00 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
148:00 - 148:30 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
148:30 - 149:00 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
149:00 - 149:30 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
149:30 - 150:00 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
150:00 - 150:30 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
150:30 - 151:00 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
151:00 - 151:30 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
151:30 - 152:00 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
152:00 - 152:30 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
152:30 - 153:00 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
153:00 - 153:30 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
153:30 - 154:00 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
154:00 - 154:30 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
154:30 - 155:00 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
155:00 - 155:30 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
155:30 - 156:00 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
156:00 - 156:30 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
156:30 - 157:00 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
157:00 - 157:30 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
157:30 - 158:00 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
158:00 - 158:30 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
158:30 - 159:00 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
159:00 - 159:30 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
159:30 - 160:00 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
160:00 - 160:30 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
160:30 - 161:00 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
161:00 - 161:30 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
161:30 - 162:00 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
162:00 - 162:30 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
162:30 - 163:00 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
163:00 - 163:30 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
163:30 - 164:00 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
164:00 - 164:30 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
164:30 - 165:00 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
165:00 - 165:30 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
165:30 - 166:00 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
166:00 - 166:30 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
166:30 - 167:00 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
167:00 - 167:30 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
167:30 - 168:00 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
168:00 - 168:30 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
168:30 - 169:00 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
169:00 - 169:30 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
169:30 - 170:00 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
170:00 - 170:30 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
170:30 - 171:00 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
171:00 - 171:30 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
171:30 - 172:00 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
172:00 - 172:30 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
172:30 - 173:00 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
173:00 - 173:30 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
173:30 - 174:00 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
174:00 - 174:30 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
174:30 - 175:00 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
175:00 - 175:30 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
175:30 - 176:00 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
176:00 - 176:30 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
176:30 - 177:00 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
177:00 - 177:30 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
177:30 - 178:00 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
178:00 - 178:30 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
178:30 - 179:00 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
179:00 - 179:30 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
179:30 - 180:00 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
180:00 - 180:30 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
180:30 - 181:00 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
181:00 - 181:30 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
181:30 - 182:00 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
182:00 - 182:30 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
182:30 - 183:00 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
183:00 - 183:30 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
183:30 - 184:00 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
184:00 - 184:30 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
184:30 - 185:00 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
185:00 - 185:30 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
185:30 - 186:00 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
186:00 - 186:30 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
186:30 - 187:00 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
187:00 - 187:30 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
187:30 - 188:00 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
188:00 - 188:30 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
188:30 - 189:00 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
189:00 - 189:30 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
189:30 - 190:00 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
190:00 - 190:30 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
190:30 - 191:00 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
191:00 - 191:30 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
191:30 - 192:00 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
192:00 - 192:30 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
192:30 - 193:00 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
193:00 - 193:30 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
193:30 - 194:00 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
194:00 - 194:30 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
194:30 - 195:00 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
195:00 - 195:30 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
195:30 - 196:00 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
196:00 - 196:30 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
196:30 - 197:00 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
197:00 - 197:30 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
197:30 - 198:00 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
198:00 - 198:30 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
198:30 - 199:00 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
199:00 - 199:30 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
199:30 - 200:00 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
200:00 - 200:30 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
200:30 - 201:00 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
201:00 - 201:30 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
201:30 - 202:00 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
202:00 - 202:30 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
202:30 - 203:00 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
203:00 - 203:30 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
203:30 - 204:00 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
204:00 - 204:30 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
204:30 - 205:00 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
205:00 - 205:30 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
205:30 - 206:00 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
206:00 - 206:30 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
206:30 - 207:00 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
207:00 - 207:30 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
207:30 - 208:00 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
208:00 - 208:30 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
208:30 - 209:00 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
209:00 - 209:30 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
209:30 - 210:00 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
210:00 - 210:30 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
210:30 - 211:00 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
211:00 - 211:30 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
211:30 - 212:00 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
212:00 - 212:30 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
212:30 - 213:00 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
213:00 - 213:30 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
213:30 - 214:00 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
214:00 - 214:30 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
214:30 - 215:00 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
215:00 - 215:30 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
215:30 - 216:00 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
216:00 - 216:30 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
216:30 - 217:00 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
217:00 - 217:30 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
217:30 - 218:00 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
218:00 - 218:30 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
218:30 - 219:00 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
219:00 - 219:30 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
219:30 - 220:00 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
220:00 - 220:30 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
220:30 - 221:00 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
221:00 - 221:30 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
221:30 - 222:00 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
222:00 - 222:30 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
222:30 - 223:00 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
223:00 - 223:30 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
223:30 - 224:00 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
224:00 - 224:30 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
224:30 - 225:00 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
225:00 - 225:30 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
225:30 - 226:00 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
226:00 - 226:30 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
226:30 - 227:00 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
227:00 - 227:30 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
227:30 - 228:00 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
228:00 - 228:30 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
228:30 - 229:00 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
229:00 - 229:30 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
229:30 - 230:00 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
230:00 - 230:30 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
230:30 - 231:00 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
231:00 - 231:30 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
231:30 - 232:00 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
232:00 - 232:30 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
232:30 - 233:00 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
233:00 - 233:30 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
233:30 - 234:00 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
234:00 - 234:30 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
234:30 - 235:00 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
235:00 - 235:30 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
235:30 - 236:00 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.
236:00 - 236:30 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
236:30 - 237:00 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
237:00 - 237:30 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
237:30 - 238:00 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
238:00 - 238:30 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
238:30 - 239:00 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
239:00 - 239:30 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
239:30 - 240:00 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
240:00 - 240:30 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
240:30 - 241:00 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
241:00 - 241:30 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
241:30 - 242:00 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
242:00 - 242:30 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
242:30 - 243:00 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
243:00 - 243:30 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
243:30 - 244:00 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
244:00 - 244:30 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
244:30 - 245:00 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
245:00 - 245:30 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.
245:30 - 246:00 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
246:00 - 246:30 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
246:30 - 247:00 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
247:00 - 247:30 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
247:30 - 248:00 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
248:00 - 248:30 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
248:30 - 249:00 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
249:00 - 249:30 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
249:30 - 250:00 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
250:00 - 250:30 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
250:30 - 251:00 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
251:00 - 251:30 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
251:30 - 252:00 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
252:00 - 252:30 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
252:30 - 253:00 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
253:00 - 253:30 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
253:30 - 254:00 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
254:00 - 254:30 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
254:30 - 255:00 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
255:00 - 255:30 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
255:30 - 256:00 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.
256:00 - 256:30 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
256:30 - 257:00 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
257:00 - 257:30 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
257:30 - 258:00 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
258:00 - 258:30 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
258:30 - 259:00 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
259:00 - 259:30 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
259:30 - 260:00 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
260:00 - 260:30 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
260:30 - 261:00 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
261:00 - 261:30 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
261:30 - 262:00 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
262:00 - 262:30 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
262:30 - 263:00 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
263:00 - 263:30 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
263:30 - 264:00 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
264:00 - 264:30 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
264:30 - 265:00 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
265:00 - 265:30 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
265:30 - 266:00 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
266:00 - 266:30 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
266:30 - 267:00 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
267:00 - 267:30 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
267:30 - 268:00 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
268:00 - 268:30 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
268:30 - 269:00 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
269:00 - 269:30 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
269:30 - 270:00 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
270:00 - 270:30 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
270:30 - 271:00 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
271:00 - 271:30 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
271:30 - 272:00 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
272:00 - 272:30 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
272:30 - 273:00 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
273:00 - 273:30 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
273:30 - 274:00 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
274:00 - 274:30 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
274:30 - 275:00 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
275:00 - 275:30 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
275:30 - 276:00 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
276:00 - 276:30 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
276:30 - 277:00 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
277:00 - 277:30 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
277:30 - 278:00 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
278:00 - 278:30 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
278:30 - 279:00 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
279:00 - 279:30 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
279:30 - 280:00 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
280:00 - 280:30 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
280:30 - 281:00 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
281:00 - 281:30 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
281:30 - 282:00 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
282:00 - 282:30 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
282:30 - 283:00 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
283:00 - 283:30 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
283:30 - 284:00 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
284:00 - 284:30 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
284:30 - 285:00 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
285:00 - 285:30 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
285:30 - 286:00 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
286:00 - 286:30 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
286:30 - 287:00 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
287:00 - 287:30 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
287:30 - 288:00 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
288:00 - 288:30 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
288:30 - 289:00 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
289:00 - 289:30 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.
289:30 - 290:00 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
290:00 - 290:30 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
290:30 - 291:00 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
291:00 - 291:30 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
291:30 - 292:00 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
292:00 - 292:30 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
292:30 - 293:00 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
293:00 - 293:30 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
293:30 - 294:00 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
294:00 - 294:30 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
294:30 - 295:00 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.
295:00 - 295:30 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
295:30 - 296:00 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
296:00 - 296:30 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
296:30 - 297:00 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
297:00 - 297:30 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
297:30 - 298:00 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
298:00 - 298:30 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
298:30 - 299:00 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
299:00 - 299:30 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
299:30 - 300:00 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
300:00 - 300:30 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
300:30 - 301:00 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
301:00 - 301:30 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
301:30 - 302:00 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
302:00 - 302:30 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
302:30 - 303:00 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
303:00 - 303:30 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
303:30 - 304:00 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
304:00 - 304:30 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
304:30 - 305:00 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
305:00 - 305:30 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
305:30 - 306:00 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
306:00 - 306:30 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
306:30 - 307:00 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
307:00 - 307:30 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
307:30 - 308:00 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
308:00 - 308:30 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
308:30 - 309:00 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
309:00 - 309:30 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
309:30 - 310:00 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
310:00 - 310:30 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
310:30 - 311:00 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
311:00 - 311:30 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
311:30 - 312:00 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
312:00 - 312:30 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
312:30 - 313:00 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
313:00 - 313:30 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
313:30 - 314:00 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
314:00 - 314:30 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
314:30 - 315:00 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
315:00 - 315:30 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
315:30 - 316:00 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
316:00 - 316:30 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
316:30 - 317:00 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
317:00 - 317:30 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
317:30 - 318:00 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
318:00 - 318:30 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
318:30 - 319:00 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
319:00 - 319:30 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
319:30 - 320:00 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
320:00 - 320:30 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
320:30 - 321:00 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.
321:00 - 321:30 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
321:30 - 322:00 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.
322:00 - 322:30 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
322:30 - 323:00 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
323:00 - 323:30 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
323:30 - 324:00 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
324:00 - 324:30 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
324:30 - 325:00 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
325:00 - 325:30 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
325:30 - 326:00 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
326:00 - 326:30 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
326:30 - 327:00 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
327:00 - 327:30 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
327:30 - 328:00 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
328:00 - 328:30 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
328:30 - 329:00 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
329:00 - 329:30 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
329:30 - 330:00 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.
330:00 - 330:30 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
330:30 - 331:00 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
331:00 - 331:30 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
331:30 - 332:00 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
332:00 - 332:30 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
332:30 - 333:00 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
333:00 - 333:30 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
333:30 - 334:00 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
334:00 - 334:30 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
334:30 - 335:00 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
335:00 - 335:30 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
335:30 - 336:00 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
336:00 - 336:30 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
336:30 - 337:00 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
337:00 - 337:30 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
337:30 - 338:00 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
338:00 - 338:30 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
338:30 - 339:00 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
339:00 - 339:30 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
339:30 - 340:00 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
340:00 - 340:30 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
340:30 - 341:00 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
341:00 - 341:30 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
341:30 - 342:00 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
342:00 - 342:30 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
342:30 - 343:00 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
343:00 - 343:30 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
343:30 - 344:00 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
344:00 - 344:30 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
344:30 - 345:00 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
345:00 - 345:30 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
345:30 - 346:00 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
346:00 - 346:30 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
346:30 - 347:00 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
347:00 - 347:30 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
347:30 - 348:00 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
348:00 - 348:30 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
348:30 - 349:00 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
349:00 - 349:30 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
349:30 - 350:00 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
350:00 - 350:30 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
350:30 - 351:00 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
351:00 - 351:30 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
351:30 - 352:00 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
352:00 - 352:30 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
352:30 - 353:00 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
353:00 - 353:30 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
353:30 - 354:00 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
354:00 - 354:30 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
354:30 - 355:00 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
355:00 - 355:30 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
355:30 - 356:00 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
356:00 - 356:30 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
356:30 - 357:00 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
357:00 - 357:30 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
357:30 - 358:00 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
358:00 - 358:30 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
358:30 - 359:00 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
359:00 - 359:30 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
359:30 - 360:00 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
360:00 - 360:30 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
360:30 - 361:00 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
361:00 - 361:30 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
361:30 - 362:00 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
362:00 - 362:30 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
362:30 - 363:00 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
363:00 - 363:30 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
363:30 - 364:00 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
364:00 - 364:30 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
364:30 - 365:00 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
365:00 - 365:30 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
365:30 - 366:00 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
366:00 - 366:30 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
366:30 - 367:00 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
367:00 - 367:30 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
367:30 - 368:00 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
368:00 - 368:30 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
368:30 - 369:00 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
369:00 - 369:30 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
369:30 - 370:00 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
370:00 - 370:30 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
370:30 - 371:00 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
371:00 - 371:30 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
371:30 - 372:00 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
372:00 - 372:30 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
372:30 - 373:00 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
373:00 - 373:30 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
373:30 - 374:00 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
374:00 - 374:30 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
374:30 - 375:00 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
375:00 - 375:30 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
375:30 - 376:00 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
376:00 - 376:30 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
376:30 - 377:00 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
377:00 - 377:30 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
377:30 - 378:00 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
378:00 - 378:30 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
378:30 - 379:00 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
379:00 - 379:30 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
379:30 - 380:00 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
380:00 - 380:30 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
380:30 - 381:00 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
381:00 - 381:30 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
381:30 - 382:00 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
382:00 - 382:30 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
382:30 - 383:00 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
383:00 - 383:30 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
383:30 - 384:00 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
384:00 - 384:30 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
384:30 - 385:00 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
385:00 - 385:30 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
385:30 - 386:00 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
386:00 - 386:30 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
386:30 - 387:00 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
387:00 - 387:30 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
387:30 - 388:00 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
388:00 - 388:30 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
388:30 - 389:00 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
389:00 - 389:30 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
389:30 - 390:00 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
390:00 - 390:30 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
390:30 - 391:00 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
391:00 - 391:30 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
391:30 - 392:00 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
392:00 - 392:30 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
392:30 - 393:00 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
393:00 - 393:30 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
393:30 - 394:00 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
394:00 - 394:30 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
394:30 - 395:00 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
395:00 - 395:30 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
395:30 - 396:00 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
396:00 - 396:30 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
396:30 - 397:00 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
397:00 - 397:30 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
397:30 - 398:00 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
398:00 - 398:30 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
398:30 - 399:00 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
399:00 - 399:30 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
399:30 - 400:00 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
400:00 - 400:30 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
400:30 - 401:00 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
401:00 - 401:30 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
401:30 - 402:00 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
402:00 - 402:30 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
402:30 - 403:00 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
403:00 - 403:30 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
403:30 - 404:00 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
404:00 - 404:30 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
404:30 - 405:00 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
405:00 - 405:30 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
405:30 - 406:00 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
406:00 - 406:30 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
406:30 - 407:00 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
407:00 - 407:30 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
407:30 - 408:00 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
408:00 - 408:30 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
408:30 - 409:00 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
409:00 - 409:30 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
409:30 - 410:00 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
410:00 - 410:30 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
410:30 - 411:00 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
411:00 - 411:30 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
411:30 - 412:00 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
412:00 - 412:30 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
412:30 - 413:00 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
413:00 - 413:30 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
413:30 - 414:00 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
414:00 - 414:30 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
414:30 - 415:00 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
415:00 - 415:30 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
415:30 - 416:00 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
416:00 - 416:30 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
416:30 - 417:00 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
417:00 - 417:30 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
417:30 - 418:00 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
418:00 - 418:30 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
418:30 - 419:00 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
419:00 - 419:30 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
419:30 - 420:00 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
420:00 - 420:30 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
420:30 - 421:00 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
421:00 - 421:30 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
421:30 - 422:00 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
422:00 - 422:30 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
422:30 - 423:00 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
423:00 - 423:30 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
423:30 - 424:00 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
424:00 - 424:30 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
424:30 - 425:00 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
425:00 - 425:30 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
425:30 - 426:00 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
426:00 - 426:30 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
426:30 - 427:00 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
427:00 - 427:30 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
427:30 - 428:00 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
428:00 - 428:30 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
428:30 - 429:00 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
429:00 - 429:30 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
429:30 - 430:00 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
430:00 - 430:30 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
430:30 - 431:00 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
431:00 - 431:30 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
431:30 - 432:00 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
432:00 - 432:30 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
432:30 - 433:00 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
433:00 - 433:30 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
433:30 - 434:00 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
434:00 - 434:30 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
434:30 - 435:00 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
435:00 - 435:30 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
435:30 - 436:00 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
436:00 - 436:30 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
436:30 - 437:00 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
437:00 - 437:30 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
437:30 - 438:00 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
438:00 - 438:30 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
438:30 - 439:00 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
439:00 - 439:30 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
439:30 - 440:00 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
440:00 - 440:30 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
440:30 - 441:00 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
441:00 - 441:30 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
441:30 - 442:00 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
442:00 - 442:30 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
442:30 - 443:00 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
443:00 - 443:30 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
443:30 - 444:00 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
444:00 - 444:30 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
444:30 - 445:00 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
445:00 - 445:30 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
445:30 - 446:00 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
446:00 - 446:30 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
446:30 - 447:00 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
447:00 - 447:30 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
447:30 - 448:00 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
448:00 - 448:30 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
448:30 - 449:00 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
449:00 - 449:30 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
449:30 - 450:00 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
450:00 - 450:30 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
450:30 - 451:00 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
451:00 - 451:30 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
451:30 - 452:00 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
452:00 - 452:30 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
452:30 - 453:00 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
453:00 - 453:30 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
453:30 - 454:00 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
454:00 - 454:30 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
454:30 - 455:00 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
455:00 - 455:30 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
455:30 - 456:00 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
456:00 - 456:30 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
456:30 - 457:00 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
457:00 - 457:30 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
457:30 - 458:00 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
458:00 - 458:30 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
458:30 - 459:00 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
459:00 - 459:30 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
459:30 - 460:00 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
460:00 - 460:30 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
460:30 - 461:00 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
461:00 - 461:30 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
461:30 - 462:00 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
462:00 - 462:30 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
462:30 - 463:00 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
463:00 - 463:30 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
463:30 - 464:00 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
464:00 - 464:30 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
464:30 - 465:00 file and we will provide the name order controller.js in this file we will import order model from model / order model user model.
465:00 - 465:30 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
465:30 - 466:00 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
466:00 - 466:30 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
466:30 - 467:00 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
467:00 - 467:30 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
467:30 - 468:00 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
468:00 - 468:30 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
468:30 - 469:00 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
469:00 - 469:30 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
469:30 - 470:00 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
470:00 - 470:30 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
470:30 - 471:00 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
471:00 - 471:30 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
471:30 - 472:00 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
472:00 - 472:30 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
472:30 - 473:00 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
473:00 - 473:30 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
473:30 - 474:00 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
474:00 - 474:30 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
474:30 - 475:00 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
475:00 - 475:30 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
475:30 - 476:00 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
476:00 - 476:30 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
476:30 - 477:00 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
477:00 - 477:30 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
477:30 - 478:00 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
478:00 - 478:30 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.
478:30 - 479:00 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
479:00 - 479:30 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
479:30 - 480:00 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
480:00 - 480:30 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
480:30 - 481:00 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
481:00 - 481:30 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
481:30 - 482:00 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
482:00 - 482:30 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
482:30 - 483:00 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
483:00 - 483:30 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
483:30 - 484:00 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
484:00 - 484:30 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
484:30 - 485:00 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
485:00 - 485:30 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
485:30 - 486:00 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
486:00 - 486:30 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
486:30 - 487:00 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
487:00 - 487:30 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
487:30 - 488:00 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
488:00 - 488:30 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
488:30 - 489:00 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
489:00 - 489:30 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
489:30 - 490:00 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
490:00 - 490:30 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
490:30 - 491:00 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
491:00 - 491:30 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
491:30 - 492:00 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.
492:00 - 492:30 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
492:30 - 493:00 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
493:00 - 493:30 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
493:30 - 494:00 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
494:00 - 494:30 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
494:30 - 495:00 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
495:00 - 495:30 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
495:30 - 496:00 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
496:00 - 496:30 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
496:30 - 497:00 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
497:00 - 497:30 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
497:30 - 498:00 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
498:00 - 498:30 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
498:30 - 499:00 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
499:00 - 499:30 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
499:30 - 500:00 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
500:00 - 500:30 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
500:30 - 501:00 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
501:00 - 501:30 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
501:30 - 502:00 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
502:00 - 502:30 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
502:30 - 503:00 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
503:00 - 503:30 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
503:30 - 504:00 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
504:00 - 504:30 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
504:30 - 505:00 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
505:00 - 505:30 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
505:30 - 506:00 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
506:00 - 506:30 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
506:30 - 507:00 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
507:00 - 507:30 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
507:30 - 508:00 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
508:00 - 508:30 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
508:30 - 509:00 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
509:00 - 509:30 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
509:30 - 510:00 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
510:00 - 510:30 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
510:30 - 511:00 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
511:00 - 511:30 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
511:30 - 512:00 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
512:00 - 512:30 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
512:30 - 513:00 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
513:00 - 513:30 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
513:30 - 514:00 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
514:00 - 514:30 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
514:30 - 515:00 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
515:00 - 515:30 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
515:30 - 516:00 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
516:00 - 516:30 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
516:30 - 517:00 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
517:00 - 517:30 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
517:30 - 518:00 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
518:00 - 518:30 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
518:30 - 519:00 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
519:00 - 519:30 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
519:30 - 520:00 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
520:00 - 520:30 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
520:30 - 521:00 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
521:00 - 521:30 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
521:30 - 522:00 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
522:00 - 522:30 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
522:30 - 523:00 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
523:00 - 523:30 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
523:30 - 524:00 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
524:00 - 524:30 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
524:30 - 525:00 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
525:00 - 525:30 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
525:30 - 526:00 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
526:00 - 526:30 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
526:30 - 527:00 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
527:00 - 527:30 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
527:30 - 528:00 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
528:00 - 528:30 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
528:30 - 529:00 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
529:00 - 529:30 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
529:30 - 530:00 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
530:00 - 530:30 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
530:30 - 531:00 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
531:00 - 531:30 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
531:30 - 532:00 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
532:00 - 532:30 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
532:30 - 533:00 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
533:00 - 533:30 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
533:30 - 534:00 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
534:00 - 534:30 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
534:30 - 535:00 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
535:00 - 535:30 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
535:30 - 536:00 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
536:00 - 536:30 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
536:30 - 537:00 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
537:00 - 537:30 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
537:30 - 538:00 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
538:00 - 538:30 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
538:30 - 539:00 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
539:00 - 539:30 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
539:30 - 540:00 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
540:00 - 540:30 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
540:30 - 541:00 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
541:00 - 541:30 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
541:30 - 542:00 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
542:00 - 542:30 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
542:30 - 543:00 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
543:00 - 543:30 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
543:30 - 544:00 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
544:00 - 544:30 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
544:30 - 545:00 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
545:00 - 545:30 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
545:30 - 546:00 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
546:00 - 546:30 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
546:30 - 547:00 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
547:00 - 547:30 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
547:30 - 548:00 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
548:00 - 548:30 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
548:30 - 549:00 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
549:00 - 549:30 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
549:30 - 550:00 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
550:00 - 550:30 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
550:30 - 551:00 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
551:00 - 551:30 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
551:30 - 552:00 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
552:00 - 552:30 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
552:30 - 553:00 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
553:00 - 553:30 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
553:30 - 554:00 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
554:00 - 554:30 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
554:30 - 555:00 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
555:00 - 555:30 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
555:30 - 556:00 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
556:00 - 556:30 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
556:30 - 557:00 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
557:00 - 557:30 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
557:30 - 558:00 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
558:00 - 558:30 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
558:30 - 559:00 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
559:00 - 559:30 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
559:30 - 560:00 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
560:00 - 560:30 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
560:30 - 561:00 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
561:00 - 561:30 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
561:30 - 562:00 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
562:00 - 562:30 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
562:30 - 563:00 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
563:00 - 563:30 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
563:30 - 564:00 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.
564:00 - 564:30 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
564:30 - 565:00 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
565:00 - 565:30 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
565:30 - 566:00 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
566:00 - 566:30 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
566:30 - 567:00 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
567:00 - 567:30 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
567:30 - 568:00 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
568:00 - 568:30 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
568:30 - 569:00 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
569:00 - 569:30 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
569:30 - 570:00 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
570:00 - 570:30 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
570:30 - 571:00 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
571:00 - 571:30 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
571:30 - 572:00 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
572:00 - 572:30 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
572:30 - 573:00 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
573:00 - 573:30 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
573:30 - 574:00 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
574:00 - 574:30 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
574:30 - 575:00 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
575:00 - 575:30 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
575:30 - 576:00 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
576:00 - 576:30 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
576:30 - 577:00 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
577:00 - 577:30 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
577:30 - 578:00 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
578:00 - 578:30 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
578:30 - 579:00 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
579:00 - 579:30 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
579:30 - 580:00 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
580:00 - 580:30 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
580:30 - 581:00 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
581:00 - 581:30 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
581:30 - 582:00 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
582:00 - 582:30 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
582:30 - 583:00 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
583:00 - 583:30 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
583:30 - 584:00 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
584:00 - 584:30 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
584:30 - 585:00 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
585:00 - 585:30 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
585:30 - 586:00 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
586:00 - 586:30 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
586:30 - 587:00 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
587:00 - 587:30 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
587:30 - 588:00 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
588:00 - 588:30 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
588:30 - 589:00 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
589:00 - 589:30 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
589:30 - 590:00 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
590:00 - 590:30 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
590:30 - 591:00 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
591:00 - 591:30 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
591:30 - 592:00 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
592:00 - 592:30 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
592:30 - 593:00 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
593:00 - 593:30 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
593:30 - 594:00 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
594:00 - 594:30 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
594:30 - 595:00 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
595:00 - 595:30 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
595:30 - 596:00 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
596:00 - 596:30 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
596:30 - 597:00 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
597:00 - 597:30 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
597:30 - 598:00 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
598:00 - 598:30 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
598:30 - 599:00 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
599:00 - 599:30 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
599:30 - 600:00 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
600:00 - 600:30 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
600:30 - 601:00 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
601:00 - 601:30 yet thank you so much for watching this video