GreatStack tutorial recap

Build & Deploy Grocery Delivery App with Live Order Tracking | Full Stack Project Tutorial 2026

Estimated read time: 1:20

Summary

This tutorial walks through building and deploying a full-stack grocery delivery app called Instacart-style grocery delivery using the PERN stack with TypeScript. It starts with the customer experience: browsing categories, filtering products, searching, viewing product details, adding items to cart, checking out, tracking orders, and managing addresses. Then it expands into admin tools for managing products, orders, and delivery partners, plus a delivery partner dashboard for live delivery updates and OTP-based completion. The backend is built with Express, Prisma, Neon Postgres, Ingest for background jobs, Cloudinary for image uploads, Stripe for payments, and deployment via Vercel. The tutorial also shows authentication, route protection, order tracking, and live location sharing. By the end, the app is fully connected to real APIs, seeded with data, and deployed online with admin and delivery workflows working end to end.

Highlights

Homepage with hero banner, categories, popular products, promo section, newsletter, and footer ✨
Powerful product browsing with filters, sorting, search, product pages, and related products 🔎
Cart sidebar with live quantity updates, totals, delivery fee, and checkout flow 🧾
Admin dashboard for products, orders, delivery partners, and assignment controls 🧑‍💼
Delivery partner dashboard with live location sharing and OTP delivery completion 📦
Background automation for low-stock alerts, monthly offers, and auto-assigned riders 🧠
Stripe checkout sessions with webhook handling for payment confirmation 💰

Key Takeaways

Built a real-world grocery delivery app with customer, admin, and delivery partner roles 🛒
Used React, Node/Express, Prisma, Neon, and TypeScript for a production-style stack ⚙️
Added cart, checkout, address management, order tracking, and OTP delivery confirmation 📍
Integrated Stripe payments, Cloudinary uploads, and Ingest background jobs 💳
Deployed both frontend and backend to Vercel for a live working app 🚀

Overview

The tutorial begins by demonstrating the completed grocery delivery app from the user’s point of view. Viewers see the homepage, product catalog, filtering and search, product details, cart behavior, checkout process, and live order tracking. The app also includes a full authentication flow, address management, and my orders page. The experience is designed to feel like a modern delivery platform with real-time order states and delivery visibility.

Next, the tutorial shifts into building the frontend architecture. It creates the React app with Vite and TypeScript, sets up routes, reusable components, global context for auth and cart state, and multiple pages for login, home, products, flash deals, checkout, order tracking, and more. Tailwind CSS is used heavily for layout and styling, while the frontend is gradually connected to mock assets before moving to real API data.

The second half focuses on the backend and deployment. An Express server is built with Prisma and Neon Postgres, then extended with controllers and routes for auth, products, orders, addresses, admin tools, delivery partner tools, Stripe checkout, and Stripe webhooks. Ingest powers automation like low-stock alerts and monthly offers, Cloudinary handles images, and the app is deployed to Vercel. By the end, the frontend is wired to live APIs and the app works end to end.

Chapters

00:00 - 125:00: Project Overview and App Demo The video begins with a demo of a full-stack grocery delivery app, showing the homepage, product listing with filters and sorting, deals page, search page, sign-in/sign-up flow, product details, cart behavior, checkout, order tracking, admin panel, and delivery partner dashboard. It highlights real-time delivery tracking, OTP confirmation, status changes, and role-based features for users, admins, and delivery agents.
125:00 - 375:00: Frontend Setup and Routing Foundation The frontend begins with product card interaction and display logic: each card is made clickable with navigation to the product details page, shows product image, discount badge, title, rating, review count, price, unit, original price, and an add-to-cart button that stops click propagation. Popular products are rendered by mapping over the product list and mounting the card component for each item.
375:00 - 650:00: Building the User Shopping Experience The transcript walks through building the order tracking page UI, starting with rendering the full shipping address and adding the items list with images, names, quantities, and per-item prices. It then adds the order cost breakdown, including subtotal, delivery fee, tax, and total, and confirms the completed tracking page for delivered and out-for-delivery orders.
650:00 - 875:00: Checkout, Orders, and Address Management This chapter focused on implementing order assignment logic and then moving into address-management, admin, and delivery-partner APIs. On the order side, the system checks whether an order exists, is already assigned, or has a cancelled/delivered status before auto-assigning a rider after a five-minute delay. It gathers busy rider IDs, picks an available active rider, generates a delivery OTP, appends an assignment event to order history, updates the order with the rider and OTP, and returns assignment details. The chapter also wires these background functions into the ingest/event system so they can be triggered when an order is placed or stock changes.
875:00 - 1002:30: Backend API, Database, and Admin Controls Implemented live order tracking updates on the user side: the order page now polls every 10 seconds for live location when an order is in an active state, updates status changes in real time, and cleans up intervals properly.

Build & Deploy Grocery Delivery App with Live Order Tracking | Full Stack Project Tutorial 2026 Transcription

Segment 1: 00:00 - 02:30 Hello and welcome back to another exciting tutorial of great stack. In today's video, we are going to build and deploy a full stack grocery delivery website a stepby step using per stack. We will create a complete realworld application where user can browse categories, place orders and track their deliveries in real time. This project will have multiple roles and powerful features. We will build an admin panel where admin can manage products, orders and deliveries partner efficiently. We will also create delivery partner dashboard where delivery agents can manage their assigned deliveries and even share their live location. So user can track their orders in real time just like modern delivery apps. So let's take a look at the project demo. So this is the homepage of our grocery delivery website where you can see the banner. Then we have the categories. Here we have some popular products. Then we have CTA and then newsletter subscription form and footer. If I go to products. So here you will find all the products. In the left side we have the filters. We can filter the products based on category and minimum and maximum range. And here we have the drop-down to sort the product. After that, here we have the deals page where you will find all the products where we have some discounts. Then we have the search bar. Let me search anything here. So it will open the search result where you can type the product name and find the product using this search page. After that, let me sign up on this website. So, I'll click on this sign in button. And here you need to enter the existing email ID and password and sign in. And if you don't have an account, you can click here create one and provide the name, email id and password and create a new account here. So, let me sign in with my existing account. I'll provide my email id
Segment 2: 00:00 - 02:30 and then provide the password and click on this sign in button. After sign in, let's go to products and I'll click on this product. So it
Segment 3: 02:30 - 05:00 will open the product detail page where you can see the product image, name, category, review, total price and add to cart button. We have the increase and decrease option also so that we can increase or decrease the quantity. And here we have the available stocks. After that we have the customer reviews and then we have the related products. Let me open the another product. I'll click here. So this is the product detail page again and you can see the product image. Here we have the discount. Then we have the details and then we have the add to cart button. I'll click here. So this product will be added in the cart and the cart is open from the right side. Let's increase the quantity here. I'll click on this plus icon so that we can increase the quantity and the price has been updated. Let me just come back or come here in the related products and uh I'll add a new product here. Add this one in the cart. So now you can see we have two product. Let's come to products page and I'll add another product. Add to cart. So now we have three products. Now let me click on this proceed to checkout. So it will open this check out page where you can choose the added address or add a new one. I'll click on this add new address. So it will open the list of addresses and here we have the add address button. Using that we can add a new address. Now after that let's come here in the checkout page. So select the address where you want the delivery. Then click on continue to payment. So here you need to choose the payment method like online payment using debit or credit card. We have added the stripe for online payment integration. Then we have the cash on delivery option. Let me choose this one cash on delivery and click on review order. So here you can review the final order that is the product details, price, quantity and delivery address. Then place the order. So we have
Segment 4: 02:30 - 05:00 selected the cash on delivery. So we can simply place the order without payment. After that it will open the order tracking page where you can see the delivery location. Then we have the delivery status like it is placed. Once the order is confirmed by admin you will see the status confirmed. Let me go to my orders page. I'll click here. Go to
Segment 5: 05:00 - 07:30 my orders. So here you can see we have all the orders. So the new one is placed. You can see the status placed. Let's come here in the assigned. So when the order will get assigned to delivery partner then you will see the OTP. You need to share this OTP with the delivery partner. Then the delivery partner will submit the order as completed right and here you will see the live location of the delivery partner also. So you can see the status like this that is placed confirmed assigned and after that it will display the status like packed and out for delivery and you will see the exact location of the delivery partner. Now let's just come here and uh see the another order which is delivered. So you can see this order is already delivered. I'll click here. So after delivery you will see the status like this. Now let me show you the admin panel also. So I'll click on this admin panel. I have created the admin using this email ID. That's why I'm getting this option admin panel. So I'll click here. And in this admin panel you can manage the products. You can see here we have the list of products where we have the edit icon. We can edit the existing product or we can add a new product also using this add product button. Here we can enter the details to add a new product. Now after that let's come here in the orders. Here admin can see the list of orders and here we have the option to assign the delivery partner. I'll click here. So we have only one delivery partner. You can select this one and click on assign. So this delivery partner will be assigned in this order. After that it will also update the status. So you can see the status has been updated to assigned. We can also change the status from here like tagged out for delivery delivered or cancelled. Right now let's come here in the dashboard. In the admin dashboard you will see the entire data like total number of orders, total number of users, total products and out of a stock
Segment 6: 05:00 - 07:30 product. Then we have the recent orders here. Then let's come here in the delivery partners. So here you will see the list of delivery partners added on this website. And here we have the add button. Using that you can add a new delivery partner. You need to provide the email ID, name, password, phone number and vehicle type and create partner. Now after that let's come back
Segment 7: 07:30 - 10:00 to the homepage. Now let me show you the delivery partner dashboard also. So scroll down and at the bottom you will find this delivery partner link. So it will open this login page. Right now we are not logged in as delivery partner. So let's add the email id for delivery partner and then we'll add the password and after that you will see the dashboard of the delivery partner where you can see the active deliveries. It means the order which is assigned to this delivery partner. And here we have the completed order. Let's click here. So this is the completed order that is already delivered. And this is the active order. And here we have the shared location button. When we click here, it will share the delivery partner location to the user. So that user can track their order. And here you can see we have the option like cancel. Delivery partner can cancel the order or we have the option to mark packed. So delivery partner can mark the order as packed. So you can see the status has been updated. After that we can click here to mark it as out for delivery. Let's click here. So now the status has been updated. It is out for delivery. Now if I click on this mark delivered then it will ask you to provide the OTP. So delivery partner will get the OTP from the user and submit the OTP here to confirm the delivery. So this was the overview of our grocery delivery project. To build this application we will use per stack which includes Postgress SQL express react and NodeJS. We will use neon database for managing our Postgress SQL database in a scalable and seamless way. You can see this is the dashboard of our neon database where you can see the data stored in the tables like this. We have the product data. Then we have the user data, order data, addresses and delivery partner. So we will store our project data in neon database. After that we are going to use
Segment 8: 07:30 - 10:00 ingest to handle the background task like auto assign delivery partner, sending monthly offer emails, trigger low stock alerts. This will make our application more powerful and production ready. If you want me to create more full stack project like this, just comment full stack project below. And if
Segment 9: 10:00 - 12:30 this tutorial helps you, please support it. Let's try to reach 5,000 likes and 500 comments. Your support truly means a lot to me. Now, let's get started. To create our project, we will come to desktop screen and here we'll create our project folder. So, let's add the folder name grocery delivery. Now we will open this folder with VS code. Now here we are going to create our React project. For that let's open the terminal. So let's click on this new terminal. And in this terminal we will use the command to create a react project using wheat. So just add npm create wheat at latest. After adding this command just press y. Then it is asking for the project name. So we'll create the back end and front end of our full stack project. So for front end we are using the project name client. So I'll type client and after that here we are going to use react. So we will choose react and after that I'll choose the variant. So in this variant let me choose typescript. This is the first one. After that it is asking install with npm and start now. So it will install the packages. So just press enter. Now all packages has been installed and our project is running at this URL. So let me open this link in web browser. So this is the basic wheat plus react project. Correct. Now we have to clear our default project. So we will come back to the VS code again. We will hide this terminal. Let's go to client and in this client you can see we have the node modules that includes all the packages. Here we have package.json where you can see the project details like name,
Segment 10: 12:30 - 15:00 version, type. Then we have the scripts to preview build and see this project using this dev. And after that let's see the dependencies. So here we are using these dependencies to create our project and here we have the dev dependencies that will be used for development purpose only. Now you can see here we have the src in this src we have app dot css. So let me delete this app dot css. After that we will open this app.tsx. So let's just clear it and here we will add R A FCE to create the complainer structure like this. We are using this R A FCE because we have added one extension. If I open the extensions here you can see we have added this extension that is ES7 react redux react native snippets right so install this extension and you will be able to use the shortcuts now after that let's open the main tsx file here we don't have to change anything for now. Let's open index.html. In this one, you can see here we have the title that will be displayed in the browser. So, let me update this title. I'll provide the site name that will be Instacart and it will be a grocery delivery application. So, we have added Instacart grocery delivery. After that, let me save the changes and open the web page. You can see still the background is dark because we have some index dot CSS file and in that one we have the CSS properties. But you can see the title has been updated here. Instacart grocery delivery. We will update this favicon icon also. Right? For that let me just come back to the desktop. And here you can see we have a folder that is grocery assets. You will find this in the video description. So just download this folder. So I'll copy all these files except folder and paste it in our project. So
Segment 11: 12:30 - 15:00 just copy and come here in the project
Segment 12: 15:00 - 17:30 folder client. Then come here in the src and assets and paste it here. That's it. After that let me remove the old files that is hero.png png react. SVG and v.svg just delete it. Now after that let's come here in this assets here you can see we have this public. So in this public we have fabicon. SVG. So just copy it and add it in the project folder in the client public and paste this one. So it will remove the existing file. So remove the existing file and here we have icon.s SVG. Let's remove it. Now after that let's see the project or assets folder. So in this assets folder we have the CSS. So in this CSS we have index dot CSS. Just copy this file and open the project folder client and src. In this src we have index dot css. Right? So just paste the new one. It will replace the old file, replace the old file and close it. Now let's come back to the web browser. So after opening this page, you can see here we have the error that is the Telvin CSS is not available right because we have added the index dot CSS file. As you can see here in this index dot CSS, we have used the Telvin classes, right? So we have to add the Telvin CSS in this project. For that let me just come back to the web browser. Open we plus Tind. Open this URL and after that here you can see the steps. First we have to create a project right after that install Telvin CSS using this command. So just copy this and paste it in the terminal. So we'll come back to the VS code and let's open the terminal again. In this terminal project is running. So simply add Ctrl C to stop the project. Then we'll add this command here. But we have to add it in the client folder. So let me just clear it. And first we have
Segment 13: 17:30 - 20:00 to navigate to client folder. You can see right now we are in the grocery delivery. So just add cd client. So now we are in the client directory. Now paste this command to install the telin css in the client. After that let's see the next step. So you can see the next step. We have to add the telvin css/we plugin in our wheat configuration. It means we have to open the wheat config.ts file and in this one we have to add this plugins Telvin CSS and import it from this path. So just copy this import statement and come back to the VS code and open this read config dot ts file and here let's import this tel css and after that here we have the plugins in this plugins we already have react so after that just add comma and provide this tin css save the changes now let's see the next step so after that you can see we have to add this import telvin CSS. So I think it is already imported in our index dot CSS file. You can see import is already there. Now let me just come back here in the documentation and we can start the project using npm rundev and we can start using the tailwind classes in any HTML element. So let's start the project again using npm rundev. So let's come back here. and open the terminal and in this client simply add npm rundev. So you can see the project is running at same URL. Now hide this terminal and come back here. So now you can see our project is clear. Here we have the app that we have added in the app dot ts file or tsx file. Now we will create the folder structure in our project. So just come back to the VS code and uh in this src we will create the folders. So first we will create a folder with the name pages. In this folder we will create all the pages for our application. Then create
Segment 14: 20:00 - 22:30 another folder in this src and write the folder name components. In this one, we will write or create all our components that will be used on multiple pages. After that, let's create another folder. And here, let's add a folder name that is context. So in this context folder we'll create the context file where we will store the global states and functions. Now after that let's create another folder here and write the folder name types. So in this types folder we will create a file and define all the data types that we are going to use in this project because we are creating the project using typescript. So we have already provided it in the assets. If I open the assets folder here we have the types folder and in this types folder you will find the index.ts right. So just copy it and open the project folder. Then go to client src and types and paste it here. So in this types we have added index.ts. That's it. Now after that let's see all pages that we are going to create. We have added the pages folder. So in the pages we'll create multiple pages. So let's see our UI design. So this is the Figma file where you can see the UI design of all our pages. So first we have the login page. In this login page we have added one message in the left side and in the right side we have the input fields for sign in. And here we have the link that is create one. It means we can create an account. Now we have to create the homepage and in this homepage we will add the navigation bar. Then banner then we'll add some features. Then we have the categories and popular products. Then we have added one call to action section and newsletter subscription form. And at the bottom we have the footer. Now after that we are going to create our next page. That will be our products page where we can see all the products
Segment 15: 22:30 - 25:00 and we can filter the products using the categories and we can also sort the products using the newest and lowest and highest price and from the price range also. Now we have to create the next page that is flash deals. So in this one also we will create the flash deals page where we will display the products again but here we will display all the products where we have added the discount that will be added in flash deals. Then we have to create the product detail page that contains the product image. Then other details and reviews and we have the add to cart button. And then we have the related products also. So it will display the deleted products based on category. And in all these pages we have the same header and footer. After that we have to create the my orders page where user can see all their orders. Then we have to create the order tracking page like this. And uh then we will create the admin panel like this. So this is the dashboard of our admin panel. Then in the admin panel, we'll create the add product page, product list page, order list page, and delivery partners page. Right? So these are all pages that we are going to create in our project. So let me just come back to the VS code and we will come to the pages folder. And in this pages folder, let's create our first file. So create a new file here in the pages and write the file name home and write the file name extension tsx. Here let's add our AFCE to create the component structure. Now after that we'll create our next page. So create a new file and uh let's write the file name login.tsx. tsx here we'll add rafce and create this component structure after that we will create the products page so create a new file
Segment 16: 25:00 - 27:30 products dot psx after that we'll create the product page that will be individual product page So let's create a new file and write the file name product page.jsx. After that let's create our next page that is my orders. So we have added my orders.tsx. tsx and after that let's create the next page with the name order tracking.tsx. After that let's create the search result page. So create a new file in the pages and it will be search results. After that we'll create the flash deals page. So we have added flash deals.tsx and write rafce. In this one you can see we have added product page JSX. So let me update the name. I'll click on rename. And here we will use tsx. Now it is correct. Now after that we'll create another page that is checkout. So create a new file checkout.tsx. Write R a F CE. Now after that let's create the next page that is address. We will add addresses tsx.
Segment 17: 27:30 - 30:00 Now we'll create one more page that is app layout. So create a new one and write the file name app layout.tsx. Now after creating all these files we have to set up the routes so that we can navigate to different pages. For that we have to add a new package that will be react router DOM. To install the React router DOM package we will open the terminal and let's add Ctrl C to stop this project. Now here write npm install react router DOM. After that here we will add the react hot toast also using that we can display the toast notification. Then we will add the lucid react package. Using that we can add the icon. Then we will add the icon pack. Using that we can use the brand icons. Right. So let me write at icons pack/ react simple icons and uh after that we will add the leaf left. Using this leaf let package we can display the location map. Here we'll add one more package that is react leaflet. So you can see all the packages name here that we are installing that is nvm install react router dom react hot toast lucid react then add icons pack/ react simple icons then leaflet and react leaflet press enter so all packages has been installed now we'll add one more package is in the dev dependencies. So let's add npm
Segment 18: 30:00 - 32:30 install dash d and then we'll add at types slash and provide leaflet. So we have added at types / leaflet. Press enter. And after installing it, we can start the project again using npm rundev. So now the project is running again. Let's hide this terminal and open our package.json file. So in this one now you can see all the packages like icons pack react simple icons then leaflet then we have the lucid react then react hot toast then we have react leaflet react router dom and in the dev dependencies we have types leaflet that's it now after that we have to create the routes using this package, right? So that we can navigate to different pages. For that, let me just open the main file that is main.tsx. And in this one, we have to import the browser router. So let's add import curly braces from and provide the package name that is react router DOM and from this react router DOM let's get the browser router. Now let's wrap our application using this browser router. So here you can see the arct mode. So remove this a mode and provide the browser router opening and browser router closing tag. Now here you can see we have the strict mode imported from react. So we can remove it. It is not in use. Save the changes. So we have wrapped our application using this browser router. And after that we will open our app file. So let's open app dot tsx. So in this one here we have the return statement. Now in this return we have a div right. So let's remove
Segment 19: 32:30 - 35:00 this div and here we will use the fragment right now in this one let me provide the toaster tag because we have added the react hot toast to display the toast notification. So first we'll add import and uh let's add curly braces from and package name react hot toast and uh here let's get the toaster. Now after that let's mount this toaster tag here. So in this fragment simply mount the toaster tag and it will be self-closing. Now here we will add the position. So it will be in the top right. After that we have to provide the toast options and it will be one object where we will add the duration 3,00 then we have to add comma style. And in this style let's provide background color border radius and font size. Right now after that let's create the routes. So just add opening arrow routes and import this route from react router DOM. It has been imported. Now let's add the closing tag also. So we have routes opening and closing tag. Now in this one we'll add our first route for the login right. So here let me add the comment. So just add the comment that is o pages no navbar footer. So in this authentication page we will not add the navbar and footer. So simply add this route tag and import this route tag and after that let's add the self-closing. After that let's add the path. So in this path property simply add / login. So when we will go to login then we have to mount one element here. So in this element let me just provide the opening arrow
Segment 20: 35:00 - 37:30 login page from this pages. So you can see login has been imported from the pages / login right now let's close this tag. So we have mounted the login page when we open this path / login right now after that let's add the comment that is main pages with navar and footer. So these pages will contain the nav bar also and footer also. So we will add the navigation bar and footer in a layout and within this layout we will mount all other routes. So let's add opening arrow route tag and it will be opening and closing route. Right? After that we will add the path here. In this path simply add slash. Then we will add the element. And in this element we will mount our app layout. So let's add opening arrow app layout and import it from pages. So we have mounted the app layout here and after that within this route let's add the new route. So just copy this one paste it here. Here we'll add the path. So it will be our homepage. So the path will be same like slash. So instead of this path simply add index. Then we'll add the element. And in this element just add the home that is the homepage. Import the homepage like this. Now let's duplicate it. In the second one, we have to provide the path. So just add the path property here. And in this path property, let's provide the path name that is products that will display all the products list. So here we will mount the products from the pages. Now duplicate it. Here we will add the products / colon id. So it will be a dynamic route. Based on this id it will display different products. So here it will add the product page. You can see we have added product page and it is imported here. So
Segment 21: 37:30 - 40:00 it will display the product page and in that product page it will display different products based on the product ID. After that just duplicate it. Here we will add the path. So the path will be search. So in this search just add the page called search results and import it from pages. Now duplicate it. Here we will add the path called deals. And in this one just add flash deals pages. Right? Now after that let's add some other routes but these routes will be protected. Right? So only logged in user can access these routes. So these routes will be checkout, my orders, order tracking and addresses. So let's add route tag and route closing tag. Now in this one just add route tag again it will be self-closing. And then we have to add the path. So the path will be checkout. Then we have to add the element. And in this element simply provide our checkout page. So let's import the checkout page here. Now just duplicate it. In the second one, we'll add the orders. And here we will mount the my orders page. Import it from pages. Duplicate it. Here we will add the orders/ colon id. It is also dynamic route. And here we'll add the order tracking. So just add order tracking page. Now duplicate it and here we'll add the addresses in the path and just mount the addresses page. Save the changes. Now in this route we have to add one element right that will be protected route. So just open the sidebar components and in this components create a new file and write the file name protected route dot tsx. Now we'll add the rafce and uh in this one here we have return.
Segment 22: 40:00 - 42:30 So in this return simply add the outlet just add outlet from react router DOM. So it will mount all the children routes or children elements. That's it. Now let's mount this protected route here in the app.tsx. Just add the element here. And uh in this element we will provide our protected route component. Let's import it and close this tag. You can see this component has been imported here. Right now we have added this layout right here. So in this layout also we have to add the outlet. So just open the pages and app layout.tsx tsx and in this one here you can see we have the return. So in this return simply add the fragment. Now in this fragment we have to add the banner right that will be displayed in all pages. So just add the text for now we will add banner. After that we'll add the nav bar. So just add navbar and after that we will add the main tag and in this main tag we will add the outlet and import it from react router DOM. Now in this main we have to add the height. So simply add the class name and provide min height as screen. Then we have to add the footer also. So just add P and provide the footer because it will be displayed in all pages. And with this footer we'll add one more thing that is cart sidebar. So it will be displayed on all pages. Right now let me just come back here on our web page. So if I refresh it, you can see here we have navbar, banner and home right.
Segment 23: 42:30 - 45:00 And when we scroll the web page here at the bottom you can see we have the footer and card sidebar. It is because we have added the minimum height screen for this outlet that contains our home. Right now let's go to other pages like / login. So in this login we have not added the napper and footer. So in this login you will simply see the login text like this. But if I go to products here you can see again we have the banner nav bar and then we have the products and at bottom we have the footer and card sidebar. Right now if I go to other pages like my orders. So here it should display the my orders. So let me see the path again. We have the app.tsx and uh let's see the path. Path is orders not my orders. So simply add /orders. And you can see here we have the same navbar footer and we have this my orders right. So we have created the routes so that we can navigate to different pages. Next we have to create the homepage. And for creating this homepage you can see we have to create different components like banner, navbar, right? But before creating the homepage, let me start with the login page where we will add the sign in and sign up form. So we will start with this login form to create this authentication or login page. We will come back to the VS code and uh in this pages you will find login.tsx. Now in this one we will create some states. So just add const and the state name is is login state and the setter function name is set is login state equal to use state and import the user state from react and let's initialize it using boolean data true. So by default is
Segment 24: 42:30 - 45:00 login state will be true. it means we
Segment 25: 45:00 - 47:30 will display the login form and if it is false then we will display the sign up form or registration form. Now let's add the next state. So just duplicate it. Here we'll add the name and the setter function is set name and by default it will be empty string. So in this one we will store the name that we will enter in the input field. Now duplicate it. Here we'll add the email and setter function set email. After that we will add the next state that will be password and setter function name is set password. After that let's add one more state that is loading and the setter function name is set loading and let's make it false. Right after that here we'll add the function that will be executed once we submit the form. So just add handle submit equal to async arrow function. Now in this parameter we will get the event and we will add colon react dotsubmit event. Now after that here simply add e dot prevent default. Next we will add the set loading and we will make it true. So once we click on the submit button it will set the loading state true and after that we will redirect the users on homepage after login. So simply use the set timeout so that it will take some time. So we'll add set timeout and in this set timeout simply add window.loation location dot hf and provide the path slash then comma 1,000 milliseconds that is 1 second. So after 1 second it will redirect the users on homepage. Now just come here in the return that will be displayed on the screen. So here let's clear this div and uh in this one we'll add some tailwind classes. So we have to set the minimum height and we'll add the flex for the flex layout. After that we'll divide the content in two part in the left and right. Right? So just add this comment
Segment 26: 47:30 - 50:00 left side and right side. Now in the left side we will add a div where we have to add one background image and over that image we will add the title and description. So in this dives and provide these classes. So this div will be hidden for mobile screen. It will be displayed for desktop only. So we have added hidden and for LG that is large and our screen size it will be flex. Now after that here we have to add one image. So just add the img tag in this one. Let me provide the image from the assets. So simply add curly braces hero section data from the assets and in this one we'll get dot hero image. After that we'll add some classes for this image. So we have added these classes. Now after that we have to provide the title and description in a div. So create a div and within this div we will add the title in h2. So the title is welcome back to insta cart. Then we have to add the text in p tag. So here we will add one small paragraph like this. Next we will provide some classes. So just start with this div that contains the title and description. Then we will add the classes for the title. And after that we'll add the classes for the paragraph. Now we will save the changes and open our web page and go to / login. So on this screen you can see we have a background image and text in the left side. As you can see in this UI design right now after that we have to add the content in the right side. So you can see the UI design in the right side we have to add one icon that will be the logo. Then we have to add some title and small text. So this will be the header section of our form. And after that we have to display the actual form that contains the fields like email and password for login and we'll add the
Segment 27: 50:00 - 52:30 name field also for sign up. So let's just come back to the VS code and here we have the comment for right side. So in this right side just add a div and uh here we will add these classes and after that let's add another div in this one we will set the maximum width. So simply add class name width full and max width medium. Now after that let's add the comment for the form header message. Here we'll add the header message and after that we'll add the comment for actual form. So let's add the comment here that is login register form. For creating this form header message let's add a div and uh in this one simply add the tin classes to align the content in center using text center and we have added margin bottom. Now after that in this one we have to add the logo that will be clickable. So we will use the link tag from react router DOM. So we can click on this link to navigate to homepage. Right? You can see the link tag has been imported from react router DOM. Now after this link we have to add the title in H1. Right. And after this title we have to add some text in P tag. Right now let's start with this link. So in this link we'll add the two property and provide the path. So the path will be slash that will open the homepage. Then we have to add some classes here. So we have added class name property and inline flex item center gap two and margin bottom. Then we will add the icon here. So just add bike icon from lucid react and uh in this icon we have to set the size eight and then we'll add text app green. Now after that we have to add the text also in the span tag. So the text will be insta cart. Now let me add the classes for this span tag. So we have added text to XL font
Segment 28: 52:30 - 55:00 medium and text app green. Save the changes and just come back here. So here you can see we have the logo that contains one icon and text. After that we have to add the title. So just come back to the VS code. Now in this H1 we have to add the title. So this title will be different for different state. So here we'll add curly braces and we'll add our state is login state. If it is true then we will add the text called sign in to your account. And if it is false then we will add sign up for an account like this. Now here we have to add some classes for this title. So in this H1 we have added these classes. Now we will add the description in this P tag. So in this P tag again we'll use the same thing. We will add curly braces and add is login state question mark. If it is true in this case we will add don't have an account. else we will add already have an account. After that we have to add the button here. So let's add button tag. And in this button tag we will again add the same condition that is is login state. So if the is login state is true then we will add the text called create one and if it is false then we will add the text called sign in. That's it. Now we'll add the on click property on this button. So let me move this button in new line. And here we have the button text like this. Now in this button we will add on click property. So simply add the add function and after that here we will use a setter function set is login state and here simply provide
Segment 29: 55:00 - 57:30 not of is login state. That's it. Now we have to add some classes in this button. So in this button tag we will provide the class name property and provide these classes. Now we have to add the classes in this P tag also. So in this P tag let's add the classes like this. Now we will save the changes and open our web page. So here you can see we have this sign in to your account and then we have the small message don't have an account create one. If I click on this create one, you can see the title has been updated that is sign up for an account and here we have a small message already have an account sign in. So it will come to sign in estate. Now based on this state we will display the form just below this text. To create our form, we will come back to the VS code and uh after this comment, let's add the form tag. Now, in this form tag, instead of this action, we will use onsubmit. In this onsubmit, simply provide the function that is handle submit. Now in this one we'll add the class name property and provide the a space y5. Now let's add the curly braces and we'll add not of is login state right it means we are in the sign up state. So here we'll add one input field for name. So let's add this label tag. Now in this label tag we will add the name. Right? Now in this label we will add the classes also. So we have added these classes. Now after this name just add a div. In this div we'll add the class name and provide relative. Now in this div we have to add the icon. So just add the user icon from Lucid React. In this icon we have to provide some classes. So we have added these classes
Segment 30: 57:30 - 60:00 for this icon. Then we have to add our input field. So just add the input type will be text. Then we will add the value. So in the value we will add our name state. After that here we have to add on change. In this on change just add the arrow function with the event in the parameter. Then we will use the set function set name and provide the e do.target dot value. So in this input field we have added the type value and on change. After that here we will add the required. So this input field will be required to submit this form. Then we will add the placeholder. In this placeholder simply add the text called your name. After that we have to add some classes. So in this one we have added these Telvin classes. So we have added our first input field that is your name. But it will be visible only on signup. If I come back here you can see right now we are in the sign in state. If I go to create one. So we are in the signup estate. And here we have this label name. And here we have this input field where we can enter the name. Now we'll add the other input fields. So just come back, copy this label tag and uh paste it here. Now in this one we will use the same classes and update the label text. It will be email address. After that let me update the type. Type will be email. In this value we will add the email. And here we will use the set email equal to e.target. After that in the placeholder just add you atample.com. And after that let's use the same classes in the input field.
Segment 31: 60:00 - 62:30 Now we have to add another input field for password. So just copy this label. Paste it here. So in this one also we will use the same classes here. Just update the label text. It will be password. Then we will add the value. Value will be password. and the type will be password. Here we will use set password. After that in the placeholder just add the dots like this. Now let me update the icon also. Here you can see we have the user icon. So instead of this we'll add lock icon from Lucid React. After that just come here in the previous one that is email. Here we will use mail icon from Lucid React. Save the changes. Now just come back here. You can see here we have three input fields. Name, email, address and password. Right? And if I go to sign in here we have only two input field that is email and password. After that we have to add the submit button. So just come back and uh just after this closing label and before this closing form tag we have to add a button. So we have added the button tag. In this one let's use the loading. So when the loading is true we have to add the loader icon. So simply add loader to icon from Lucid React and then we'll add the classes also for this icon and uh it will be animate a spin. So it will be displayed whenever the loading state is true and if it is false then we'll add colon and here simply provide is login a state. So if the state is login in in this case we'll add the message called sign in that is the button text sign in else we'll add the button text called sign up. Now in this button we have to add the classes also. So in this button we'll add the class name property provide
Segment 32: 62:30 - 65:00 these classes and then we will add the button type. So just add the type it will be submit and this button will get disabled when the loading is true. So just add disabled property equal to loading. Save the changes and come back here. So you can see here we have a beautiful button to submit this form. So we have completed our sign up and signin form. After that let me just come here on home and here we have to create the homepage. So let's see the UI design. So we will start with the top banner and after that we'll create the navbar. So just come back to the VS code. Let's open the sidebar. In this components folder, create a new file and write the file name banner.tsx. Now in this one, let's add R Ace to create the complainer structure. So here we have to create the top banner that will be displayed at top of the screen or web page. So here we have to create a state. So before this return a statement let's add con banner visible and the setter function name is set banner visible equal to use state and user state has been imported. After that in this one let's add the arrow function and here let's add the return statement and just use the session storage dot get item and provide the item name that is banner dismissed not equal to true. Let's add it as a string. After that, we have to create a function. Using that, we can hide this banner. So, let's add con dismiss banner and it will
Segment 33: 65:00 - 67:30 add a function. And in this one, just use the set banner visible and make it false. Now after that just use the session storage and uh in this session storage we will use dot set item. In this set item we'll add the item name banner dismissed and provide the value that is true. So in this return you can see we have the text called banner. So just clear it and here let's add curly braces and we will use banner visible. If it is true then only we will add this div that display our banner. So in this one we have to add some classes like this and just after that within this div we have to add the first div that contains our text right and after that we'll add one button using that we can hide this banner right so in this button we have to add the cross icon so just add the X icon from Lucid React And uh here we will set the size 3.5 using the class name property. Now in this button we'll add the on click property also. And simply use the function that is dismiss banner. And let's add the class name here also and provide the classes so that we can position this button in the right side. So we have added this button to close the banner. And now come here in this div. So in this one we have to add different content and we will align it side by side. So just add the class name like this. Now within this let's add the first content in a div that contains one icon and text. So let's add truck icon from Lucid React and for this icon we will add the size four slink zero. Then we have to add the text in a span tag. So this is our text that is free delivery on orders above $20.
Segment 34: 67:30 - 70:00 Then we have to add the class name in this aspan that is font medium. And let's add the classes in this div also. So we have added this class name. Now if I save the changes and we have to mount this banner. So just open the app layout. Here you can see the text called banner. So instead of this P just add banner component mount this component here. Save the changes and come back here. So here you can see we have this banner section with this text and here we have the cross icon. So it will display this text on smaller screen also. But here we will add other text also that will be visible only for desktop. So just come back to the VS code. Let's open the banner. TSX file again. Come here. Here we'll create another div. So instead of creating the div, we can use the aspan tag here. So in this span tag, let's add this line. That's it. Next, we will add the classes in this span. So we have added the classes also. And after that, just add another div. So let's add a div here with some classes. So we will add the class name property and provide hidden. So it will be hidden for small screen and it is also hidden for a small screen. Now let's add the icon that is zap icon and in this icon we'll add some classes. Then we will add the span tag for adding the text. So here we have the text called farm fresh product delivered daily. Save the changes and come back here. So you can see here our banner is ready. Now after this banner we have to display the navar as you can see in this UI design. So in this navbar we'll add the logo menu items, search form or input field and then we'll add the cart icon and user icon.
Segment 35: 67:30 - 70:00 So let's just come back to the VS code
Segment 36: 70:00 - 72:30 and we'll create a new component that is navbar. So let's open the sidebar components and create a new file navbar dot tsx then write a fce remove this import. After that just mount this navbar here. Let me just open the layout and remove this text and mount the navbar component. save the changes and after that if I come back here you can see we have this navbar text that is coming from the component let me just come back and uh open this and let's update the name navbar component you can see the text has been updated navar component so let's design this navar component here in this navar component first we'll create some states and we'll also create a variable where we will store the user data. So let's add con user equal to object and here we have to add the type. So let's add the user colon any now here let's add the name. So for now I'll add the dummy data here. So we have added the dummy name. Then we have to add the email id. So we will add the email id and then we'll add is admin true. So here we have the user variable. After this user let's add con curly braces. We will create the variable card count and set is card open equal to object. And here let's get the card count five. After that we'll add set is cart open. And uh here we will add the arrow function. And in this parameter we'll get underscore data colon any
Segment 37: 72:30 - 75:00 provide the curly braces like this. Now after that here we will add another state. So just add con search search query and the setter function name is set search query equal to user state and let's initialize it using empty string. Duplicate it. Here we'll add user menu open and setter function name is set user menu open and let's initialize it using false. After that here we will get the navigate function. So just at con is equal to use navigate and import the use navigate from react router DOM. Now after that let's come here in the return. In this return we have a div. So instead of this div we will use the nap tag. Now in this nap tag we'll add a div. Now we'll add the classes for the nav and div tag. So in the nav tag we have added these classes and in this div we have added some classes like this. After that here we have to add the first content that will be our logo. So let's add the comment that is logo and for displaying this logo we will use the link tag so that we can click here. So import the link from react routerdom and here we'll add the two property. In this two simply add slash that will be homepage. Then we'll add the classes. So let's add the flex classes so that we can align the icon and text side by side. And then we'll add the icon here that is bike icon from Lucid React. Now in this icon we'll set the size 24 and after this icon we have to add the text also that is Insta cart. So we have added the text also. Now we will save the changes. After adding the logo let's open the web page and here you can see we have the navigation bar with this logo. Now let me just come back again and here we'll add the menu items. So after this logo let's add a div.
Segment 38: 75:00 - 77:30 In this div we will add some Telvin classes. And after that let me add the command here that is nav links and it is for desktop only. So just add a div. And in this one we will add the class name called hidden. So that it will be hidden for small screen. And then we have added the MD flex. So for medium and above a screen it will be flex display flex. Now let's add the menu items. So just use the link tag. Now in this link we'll add the text called home and provide the two property. In this two property simply add slash and duplicate this link. In the second one we'll add slash products and the link text is products. Then we'll add the / deals and here we'll add the text called deals. Then we have to add some classes also. So let's provide these classes. Save the changes. Now just come back here. So here you can see we have these menu items. Now we have to add a search form. To display the search form we will come back here and just after this div here we'll add the comment search and let's use a form tag. In this one we will add some classes. So just add the class name property and provide these classes. So it will be hidden on small screen and for small and over screen it will be visible. It means it will be hidden on mobile screen. Now let's add a div here. That div will contain the search icon and input text. So here we will add the class name and provide relative and weights full. Then we have to add search icon from lucid react. For this search icon we have to add some classes. So we have provided these classes and then we'll add the input. So the input type will be text. After that we have to add the
Segment 39: 77:30 - 80:00 placeholder. So in the placeholder just add search for groceries. Next we have to add the value. So in this value we will use this search query. So just add the value search query and then we will add the onchange property. In this on change just add the arrow function get the event in the parameter and use this function set search query it will be e dot target dot value. After that let's add the class name here. And in this class name just provide these telin classes. Save the changes. Now let me just come back here on the web page. So here you can see we have this search bar also. After this search bar, we have to add some action buttons in the right side. Right? So just come back again. And uh now after this form let's add the command that is write action and create a div. Here we will use the flex classes so that we can align all items side by side. And first we have to add the cart icon. So just add the comment cart. After this cart we have to add the user icon. So here we'll add the comment user. Right now in this cart we have to add the icon and count number. So simply add a button tag and in this button we will add the shopping cart icon imported from lucid react and in this icon we will add the size and color like this. After that we have to display the total number of items in the cart. So let's add curly braces and we will use the cart count is greater than zero. If it is true then we will add the aspan tag. Now in this aspan tag simply provide our card count. Now we have to set the position of this
Segment 40: 80:00 - 82:30 text or count. So just add these tailwind classes and now let's save the changes and uh let me add the classes in the button also. So in this button tag we have added these classes and after that here we will add on click and in this on click add the add function and then let me call the set is cart open and make it true. So when we click here it will open the sidebar where we will display the cart data. So just come back here and you can see here we have the cart icon and here we have the total number of items in the cart that is five. Then we have to add the user icon that display the first character of the user's name. So just come here after this comment user we will add a div. In this div simply add relative. Now we will check the user is logged in or not. So just add curly braces user. So when the user data is available it means the user is logged in. Right? Else we'll add colon and another curly braces or parenthesis. So here we have added two parenthesis. In the first one we'll add the button that display the user's first character. And in the second one we will add a div that will display the login button. So in this first case that is button we will add the class name and uh let's add flex classes. Now in this button we will add a div also. In this div simply provide the user dot name dot CAD at and we'll use the index zero. So we'll get the first character and then we'll add two uppercase. So we'll display the first character and then just add the classes in this div.
Segment 41: 82:30 - 85:00 Save the changes. Now just come back here. So you can see here we have the icon with the letter J that is the first character of the user's name. Right? After that we have to add one drop-down icon. So just come back and uh after this div let's add one icon imported from Lucid React and uh in this icon we'll set the size three and we'll set the color. Let's save the changes and come back here. So you can see here we have one drop-down icon. Now let's come back and see this second case when the user data is not available. So here just add the class name and provide the flex center gap 2. Then we have to add a link. So just add the link tag. In this link tag, we'll add the icon that is user icon. And uh in this user icon, we'll set the size 16. Then we have to add the text also that is sign in. After that we have to add the path here in this link. So just add two. So the path will be / login. We will add the classes also. So let me provide the class name and provide these classes. Now let's add the curly braces and use this user menu open. So when the user menu is open in this case we have to add the cross icon else we will display the menu icon for small screen. So just add X icon from Lucid React. In this one we will add the class name. Then we'll add the on click. In this on click simply add the arrow function and call the set user menu open and uh let's add not of
Segment 42: 85:00 - 87:30 user menu open. Then we'll add the else condition. So just add the colon and provide the menu icon from lucid react. Now in this menu icon we'll add the class name MD hidden. So it will be displayed only for small screen. After that we'll add on click property again. And in this on click simply add set user menu open not of user menu open. Save the changes. Now we have to create the content when the user menu is open. we will display the drop-down right. So here only we will add curly braces provide the user menu open and operator. So when it is true we will add one fragment and here let's add a div. Now in this div simply add the class name and after that we'll add the on click also. In this on click add the arrow function and provide set user menu open false and uh it will be self-closing div like this. Remove this closing div from here. So after adding this div when we click here it will close our side menu that display the menu items as drop-down. Right? So here we will add a div where we will display all the menu items in drop-down. So just add class name and after that let's use the curly braces user. So when the user is logged in. So in this case here we will add a div and provide a class name here. And then we'll add the text np tag. So the text is user's name. So simply add user question mark dot name. And for this one we will add some classes also like this. Now after that we have to add the user's email id. So
Segment 43: 87:30 - 90:00 let's add the p tag again. And here we will use curly braces user email. And then we have to add the classes here also. So let's add the class name. Save the changes. Now after that let's come here. Here we will add a div. In this one we will add all the menu items. So let's add the onclick property first. In this on click simply add the add function and let's use the setter function set user menu open and make it false. Now let's add the first menu item here. For that let's add not of user. So when the user is not logged in in this case we will add the login button. So just add the link tag and uh in this link tag we'll add the text called sign in and with that we have to add the icon also. So let's add user icon from lucid react and in this icon we have to add the size 16. Now in this link tag we'll add the two property in this two property to add the path / login. So we have added the first link when the user is not logged in. Now suppose the user is logged in. So just add curly braces user and so here again add the link tag just copy this one paste it here and in this link tag we'll add the path /ders then we have to add the class name in this link. So let's add the class name. Here it is drop-down link. And in this one also we'll add the class name drop-down link which is our custom class. After that here we have to add the icon. So just replace this icon. It will be package icon from lucid react. Size will
Segment 44: 90:00 - 92:30 be same and the text will be my orders. Let's add the space like this. So we have added two items. After that we'll add the address. So just duplicate this one. Here we'll add path / addresses. And then we will add the icon that is map pin icon from Lucid React. And then we'll add the text. So the text is addresses. Now we'll add the next item. So just copy this link tag only and paste it here. In this link tag we'll add the path that is products. Right? Then we will add class name MD hidden. So it will be hidden for medium and above screen. it will be displayed on mobile phone only. After that here we have to update the icon. So import this icon arrow up right icon. Then we have to add the text called products. Similarly we will add the another icon and text. So just duplicate this link. In this one let's add the path / deals. Then we have to add the text that is deals. Save the changes. Now after that we have to add the curly braces here. So after this link tag let's add user question mark dot is admin. So if the user is admin in this case we'll add one more item. So just add the and operator parenthesis and add the link tag. So let's just copy this one. Paste it here. And in this link tag we'll add the path. It will be / admin/ products. Here we'll add the same class name drop-down link. Then we will add the icon here that is sealed icon import it from lucid react. Then we have to add the classes in this icon. So just
Segment 45: 92:30 - 95:00 add the class name property and provide these classes. Then we will add the text in a span tag. So here we will add the a span tag. In this aspan tag we'll add the text called admin panel. And in this span we have to add the class name property. So just add the class name property and provide text app orange dark. Save the changes. After that let's come here and add another curly braces. We will use the user. So when the user is available in this case we will add log out button. So just add a div. In this div we will add the button. In this button we'll add the icon log out icon from Lucid React and here we'll add the size 16 and the text will be log out. Next we will add the classes on this button tag. So just add the class name property. Provide these classes and then we'll add the classes in the div also. So here we have this div. Just add the classes like this. Save the changes. Now after adding it, if I come back here and click on this drop-down icon, it should display the menu items. Let me refresh it. Let me just come back to the VS code. Here we have action and write and uh after that you can see here we have this drop-down icon and here we have this button. So in this button we have to add the on click property. Let's add on click. In this on click simply add the add function and call the set user menu open and provide not of user menu open. Let's save the changes and come back here. Now again click here. So you can see it is displaying the drop-own menu with the user's name, email id. Then we have my orders, addresses, products, deals and admin
Segment 46: 95:00 - 97:30 panel. And we have the log out button, right? And uh if I remove the user, if I just come back here and uh clear this user data and open this page, we need the username here. Let me just come back. It is working. We will remove this user data. Simply provide null. Save the changes and let's come back here. So you can see when we are not logged in then it will display the sign in button. Right? If I click on sign in it will open the signin page. Let's come back to the homepage now. Just come back and provide the user data. So once we have the user data, it will display the user drop-down like this. Now we have to create some handler function for our form and log out button. So let's come here and create one function called handle search equal to add a function. In this one we will get the event as parameter and provide the type using react dot subummit event. import the react. Now after that here let's add e dot prevent default. Next we'll add if statement if search query dot trim. It means we have the search query available. Then we'll add the navigate and provide the path here using back ticks forward slash search path. Then we will add the query here using the question mark q equal to and provide the data using template lit using dollar sign curly braces. Here just add encoded URI component and provide the search query dot trim.
Segment 47: 97:30 - 100:00 After that let's add set search query provide empty string. So it will navigate the users on search page with this parameter in the URL. After that, let's connect this handler function with our form. So, here we have the form tag for search query. Let's find it. It's here, right? So, in this form, just add onsubmit. In this onsubmit, provide the handle search. After that, let's add our next function that will handle the logout. So, just add con handle logout and create the add a function. Then we will use setter function set user menu open make it false. After that we will navigate the users on homepage. Now just connect this function with our button. So at the bottom we have added the log out icon right and we have the button tag also. So on this button tag let's add on click property and simply provide the handle logout function. Let me just come back here and click on this log out. It should open the homepage. Right? So whenever we are on any other page then click on log out. You can see the path is home. So we have created our navigation bar. Let me see it in the small screen. So when we open it in smaller screen, it will hide the menu items, but it will be displayed in this drop-down. Correct? Now let me just come back and uh remove this user data. Simply provide null. Save the changes and come back here. So if I refresh it here, you can see we have the menu items. Let's click here. So it will display sign in products and deals. Let's close it. It works. And if I provide the user data
Segment 48: 97:30 - 100:00 then we have the user's first name as icon. And we have more options like this. So now we have completed our
Segment 49: 100:00 - 102:30 header, banner and navigation bar. After that, we have to display our hero section. In this hero section, we'll add a background image and we'll add our welcome message and some text. To create this hero section, let's come back to the VS code. And now we will open the components. And in this components, create a folder for home. Now within this home folder we will create the components for homepage. So let's create the first component with the name hero.tsx. Let's add rfce to create the component structure. Now in this one let's use the section as returned. Now in this section we'll add some classes and provide these classes. Now here we have to add one image. So let's add the img tag. In this image src we will add the image from the assets. So just add hero section data. import it from the assets and in this one we will get dot hero image. Now here we'll add the alt property that is hero and then we have to add the classes here. So just add the class name property and here we'll add the absolute insert zero then height full width full and object cover. After that here we have to add a div that will add a layer on this image. So just use the self-closing div. Then we'll add the classes here. So in this one we have added these classes that will add the linear gradient color layer on this image. Now after that add another div here. In this one, let me add the classes. And after that, here we will add a div
Segment 50: 102:30 - 105:00 that contains our content like title and description and button. So in this one also we'll add the class name properties and provide the maximum width and padding for Excel and our screen size. Then first we'll add the span tag. In this span tag we have to add the icon. So let's add the icon leaf icon from Lucid React. And in this icon we'll add the size. So just add the class name size three. Then we have to add the text here. So this is the text. Now we will add the classes in this span that contains this icon. So in this span we have added these classes. Now after that here we have to add the H1. So let's add the H1 tag. In this H1, we'll add the text that is nourish your home with and provide the span tag. In this span tag, we'll add Earth's finest. And in this span, let's add the class name property with text orange 300. Next, we'll add the classes in the H1 tag. So, in this H1 tag, we have added font. Then we have added the font size and other CSS properties. Then we have to add the description here. Right? So let's add the P tag. In this P tag simply add curly braces hero section data dot description. And uh for this description just add the classes. So we have added these classes. Now after that we have to add the buttons. So just create a div. In this div we'll add two buttons. So let's use the link tag. Just add the link tag here. And in this link we'll add the two property. So let's add two and provide the path / products. Then we have to add some classes here. So we have added these classes. And in this
Segment 51: 105:00 - 107:30 link we'll add the text called shop now. And after that we have to add one icon also. So let's add the arrow write icon from lucid react. And uh after that in this icon we'll add the size four using this class name property. Now just duplicate it to create the next link tag or button. In this one, simply add the text called browse categories. Here we'll add the same path that is products, but we will update the classes. So you can see we have updated these classes. Save the changes. Now we have to mount this component. So let's open the pages folder home.tsx file. In this one, you can see here we have the div. So in this div, first we'll add the classes. So we'll add the minimum height as screen. Then we'll add the max width. Then MX auto and we have added some padding and uh after that simply mount our component that is hero imported from the components folder. So you can see hero has been imported from components home hero. Save the changes and come back here. So now on this screen you can see here we have the banner image with this text this description and button. Let me fix this button. It's too big. I'll just come back to the VS code. Open this uh hero.tsx. And here you can see we have a div that contains both icons. So in this div let's let's add the class name and provide flex flex wrap and gap three. Save the changes. Come back here. So now you can see these buttons are looking good. If I click on any button it will open / products. As you can see if I click on logo it will open the home screen. And here we have the hero section. It's done. After creating this hero section you can see the design. We have to create this feature section where we will display four column with icon and text. To create it, we'll
Segment 52: 105:00 - 107:30 come back to the VS code and open sidebar components and home. In this components, we have home folder. So, in
Segment 53: 107:30 - 110:00 this one, create a file called features. DSX. Then add RFC to create the component structure. And uh after that here also we will use the section tag and in this one we have to add some classes. Then we will add a div here. In this div we'll add the MX auto. Then we have added some padding. Now after that in this one also we'll add another div. And for this one we will use the grid layout. So we will add the grid classes with grid column two for medium and our screen it will add column 4 and gap 4. Now here we will add the data from assets. So just add hero section data dot hero features dot map. It's an array. So we can use the map method and create the arrow function with this parenthesis. Now in this function parameter we will get the individual feature and I that is index number. So here we will return a div and in this div first we have to add the key property. It will be I for index and then we'll add some classes here. So we will add the flex classes and provide some gap and padding. Then we will add the div and in this div let's add the classes and here we have to add the icon. So let's add opening arrow and use this feature dot icon. And for this icon we have to add the classes. So just add the class name property and set the size five. Right now after this icon we have to add the text in a div. So just add a div here and add the text in P tag. So simply add feature dot title. Duplicate it. Here we'll add feature dot description.
Segment 54: 110:00 - 112:30 Right now we'll add the classes for the title. And then we'll add the classes for the feature description. Save the changes. Now after adding it, simply mount this component on our homepage. So just open home tsx. Let's open from here. After this hero simply mount features component. It has been imported. Close this tag. Save the changes and open the web page. So if I scroll down here, you can see we have the features. After this features, you can see the UI design. So we have to create our home categories section where we will display the categories image and name and with that we'll add the title also for this section that is browse categories and some small description. For that let me just come back to the VS code and create a new component. So open this sidebar and in this components home create a new file that is home categories dot dsx add rafce and uh after that here we'll add the section. Now in this one we'll add the padding that is py 6 or 16. Now in this section we will add the first div and here we'll add the class name and provide the maximum width and provide MX auto. After that just add a div that contains the title of this section. So just add the title in H2 that is browse categories and after that we'll add the subtitle in P tag. So just add the P tag and here we will add the subtitle text. Next we have to add the classes for the title and subtitle. So in this one we have added the classes for title where we have added the text to Excel and font semi bold. Then we'll add the classes for subtitle like this. Save the changes. Now let me mount this component. So we will open
Segment 55: 112:30 - 115:00 home.tsx and after this features let's add home categories. So, home categories has been imported here and close this tag. Save the changes and come back here. So, if I scroll down, you can see here we have the title and subtitle. Next, we have to display the categories list. So, just come back in the VS code. Open the home categories.tsx file and just after this div that contains the title subtitle, we will create a new div. Here we will add the flex layout because we have to display the categories side by side. So just add the class name and provide these classes. Here we have added overflow x scroll. It means we will scroll horizontally for more categories. Now let's add the data from assets that is categories data from assets. then dot map method and here we'll add the arrow function and provide this parenthesis. Now in this one we will use the individual category as parameter and after that let's use the link tag. Import the link tag from react routerd. Now in this link we'll add the key property first. So just add the key property. It will be our category dot slug. Then we have to add the two property. In this two property, let's add back text slash. Then we will use the products. Then question mark category equal to and then we will add dollar sign curly braces and provide the category dot slug. After this two property we will add the onclick property also. So simply add the on click and add the add function here. In this add a function just add window dot scroll to and provide 0 comma 0. So it will scroll the web page to top. After
Segment 56: 112:30 - 115:00 that just add the classes using the class name property. And here we'll add the group so that we can add the hover effect also. And after that let's add the icon in a div. So just add the div.
Segment 57: 115:00 - 117:30 And here we will use the image tag. Now in this one just add the src and provide the category dot image. After that here we'll add the alt property. It will be category dotname and then we have to add some classes. So just add the class name property. Provide these classes. Now let's add the classes in the div that contains our icon or image. So here we have added these classes. Right. After adding it, if I come back to the web page, you can see here we have these categories images. Right? And we can scroll it horizontally like this. Next, we have to display the category name also. So, we'll come back to the VS code and uh just before this closing link tag, we will add a span tag. In this suspend tag simply add curly braces category dot name and uh let's provide the classes also. So in this span we will add the class name property provide these classes and come back here. So now you can see here we have a list of categories image and name also right. So we have created our category section for home. As you can see in this UI design after that we have to display the popular products like this. To create this popular product section we will come back to the VS code. Let's open the sidebar and uh in this one we have the components home and in this home create a new file popular products dot tsx then add rafce to create the component structure. Now in this one we need the state to store the product data. So just add con product and set function name is set products equal to use a state use a state has been imported and here we will add the empty array initialize it using empty array. After that here we have to add the type also.
Segment 58: 115:00 - 117:30 So just add this angle bracket and provide
Segment 59: 117:30 - 120:00 product and let's import it from the types folder. You can see product has been imported from / types folder and after that here we'll add the array like this. Now we'll add the use effect so that we can execute the code when the page gets refreshed. So in this one let's use the setter function set products. In this set products just add the dummy data. So just add dummy products from the assets and then we'll add dot slice because we have to display only 10 products. So just add 0, 10. So we have the product list in this dummy products. So we'll display only 10 products. So this 10 products will be added in the products state. Right? Now just come here in this return. In this return, let's add the section. And after that, in this section, we'll add the padding from the bottom. Now, after that, here we will add the div. So, we will add a div here. In this div width and MX auto. Now after that here we will add one more div where we have to add the section title. So let's add a div and in this one we will add these classes and after that just add title and subtitle in a div. So we'll add the title in s2 tag. So the title is product or popular products. Then we will add the subtitle in B tag that is top rated products this season. Then we have to provide the font size and color in the title. Then we'll add the classes in this subtitle. So we have added text size and color and margin top. Now after adding it let me mount this component. So I'll open home.tsx tsx and after this home categories let's mount our popular products
Segment 60: 120:00 - 122:30 section close this tag and open the web page. So here you can see when we scroll we have the popular products and this sub title. Now in the right side we have to display the button called view all with the icon. So just come back open this popular products.tsx tsx and uh just after this div we will add the link tag import the link from react router down and in this link just add the text called view all and after that we have to add one icon also so let's add the opening arrow and provide the arrow write icon from lucid react and then we have to add the class name provide the size four for this icon view all Then we'll add the classes in this link also. So in this link tag we have added some classes and then we have to add the two property in this link. So let's add / products that will display all the products. Right? Save the changes. Now just come back here and you can see in the right side we have this link called view all. Right? Now after that let me just come back and after closing of this div that contains the title and link. Here we will add another div. It will contain the product list. So we have to display the products in grid layout. So just add the class name and provide the grid classes. Now after that here we'll add the product list. So for now let me add the text and provide product list. If I come back here you can see here we have the product list. Correct? But we have to display the product card like this. As you can see in this UI design, we have to create a product card that contains the product image, then badge of discount, then product title, review and price and add to cart button. So to display this product card, we have to create a new component. So just come back to the VS code and uh we will create a new
Segment 61: 120:00 - 122:30 component. So in this components folder create a new file and write the file name product card dot dsx.
Segment 62: 122:30 - 125:00 In this one let's add rfce to create the component structure. And after that here we'll get some data as props. So let's add curly braces product and provide the colon props and after that let's add interface props. It will be product colon product. And let's import this product from the types. So you can see product has been imported from the types folder. Now we have the product data here. So we can create a card. But we have to display the price here. So to display the price we will use the currency symbol, right? So let's add the currency symbol in the environment variable. So in our project we'll create one env file. So here we have the client folder. In this one create a new file with the name env. Right? And in this environment variable with the prefix wheat. So just add wheat_currency symbol equal to and provide the currency symbol dollar. Now after that come here in the product card dot tsx and here let's import that. We'll add const currency is equal to import dot meta env dot and the environment variable name that is weight currency symbol and if it is not available then we will add the odd operator and simply provide the dollar sign. Now we have to dstructure the add to cart also. So we'll add the dummy data here. We'll add con add to cart equal to add to cart and it will be add a function like this and in this parameter we'll get the data and the type will be any.
Segment 63: 125:00 - 127:30 We will update it after creating the back end. Now here we will get the navigate function also. So just add const navigate equal to use navigate from react router DOM. Now just come here in the return statement. In this return we'll add a div that is already there. So in this div simply add the classes. So we'll add these classes in this div. Now in this div we'll add the onclick property also. So let's add on click because it is a product card. We can click on this card to open the product detail page. So just add on click and add the add function. And here we will use the navigate function. In this navigate function just add the path that is / products slash then add dollar sign and here we will use the product dot id. We are getting the product from here. Now after that here we'll add the comment that is image. So first we have to display the image in a div. So just add a div and uh in this div we have added some classes and then we have to display the image using img tag. So here just add src it will be product dot image. Then we have to add the alt property. It will be product dot name. And after that we'll add some classes for this image like this. Now after this image we have to add one badge for the offer right. So let me add the comment here that is badge and here we'll add the div. Now in this div simply add product dot discount. Then we have to add the percent symbol and text called off. Right now let me wrap it inside a a span tag. So I'll add the span tag here. In this aspan tag we will move this one. And for this span just add the class name property and provide these classes. And uh before this span let's add curly
Segment 64: 127:30 - 130:00 braces. And we will use the product dot discount. So if the discount is greater than zero then only we have to display that as span. So just move this as span here like this. Next we have to add the classes in the div which is here. So we have added these classes. That's it. Save the changes. So we have created this div that contains the image and badge of offer or discount. After that we have to display the product info. So after this image here we'll add the comment info and let's create a div. Now in this dives and after that we have to add the product name. So we'll add the product name in S3 tag and for displaying the product name simply use the product dot name and then we have to add some classes. So in this S3 we have added these classes for the product name. After the product name we have to display the rating right? So let's add the comment that is rating and in this one just add curly braces. we will use the product dot rating is greater than zero. If the rating is greater than zero, then only we will display the rating. So let's add a div and in this div provide some classes for flex layout. After that we have to add the star icon. So let's add star from lucid react and in this one we have to add some classes. So we have provided the classes in this star icon. After that we have to add the a span tag. In this aspan tag we'll add the product rating and after this rating we have to display the review count. So let's add a span tag. Then we'll add this bracket and in this one just add this product dot review count. Now we have to add some classes for the
Segment 65: 130:00 - 132:30 span tag and add the classes in the second span that is product or review count. Save the changes. So after adding it let me mount this component. We will open the popular products. So in this popular products we have added product list. Right? So just remove this text and simply use curly braces. provide the products dot map method and in this parameter we'll get the individual product and uh after that simply mount our component that is product card component. Now here we have to add the props. So first we'll add the key property. In this key property, let's add the product dot id. And then we'll add the product. It will be product. Save the changes and open the web page. So you can see here we have the popular product section with 10 products where you can see the product image, offer badge, title, and review. After that, we have to display the price and add to cart button. For that, let me just come back here. and open the product card again. In this product card here, let's add the comment that is price plus add. So create a div and in this div we will use the flex layout. So we will add the flex classes and then we'll add the div for the price and uh after that we will add the button for plus icon or add to cart button like this. Now in this div classes again. So we'll add the class name flex item center gap one and truncate. Now in this one let's add the span tag. So in this span tag just add the currency first. So just add the currency that is the currency symbol right and after that we have to add the price. So just add product dot price. Then we'll add two fixed one. Next we have to add the classes for this
Segment 66: 130:00 - 132:30 aspan tag. So we have added text base
Segment 67: 132:30 - 135:00 font medium. Now we'll add another span tag. In this one we will add the product unit. So let's add / curly braces and provide the product dot unit. And in this one also we have to add the classes. So simply add class name provide the text extra small and color and block right after that here we'll add curly braces we will use the product dot original price if the product dot original price is greater than product price. If it is true then we'll add and and add the span tag like this. And in this aspan tag we'll add the currency and then we'll add product dot original price dot to fixed correct and in this one we have to add some classes. So in this span we'll add the class name property. And here we have added the text extra small and text color. And here we have added line through right now let's come here in the button. So in this button we have to add the plus icon. That's it. So simply add plus from the lucid react. And after that let's add the class name to provide the size 3.5. Now we have to set the background of this plus icon. So just add the class name in this button tag and in this button tag we have added these classes and now in this button we'll add the onclick property also. So simply add the on click and create the arrow function and we will use the parameter E that is event and here we will add curly braces and provide E dot stop propagation. Then we will add add to cart function. And in this one simply provide the product. Save the changes. Now let me just come back here. So you can see here we have the
Segment 68: 132:30 - 135:00 product name,
Segment 69: 135:00 - 137:30 rating and total number of reviews or rating. And then we have the price. And here we have the price per unit. Then we have the original price also that is line through and we have the plus icon that is the add to cut button. So we have completed our popular products for home. After that let me see our UI design. So in this UI design you can see we have to create this section that will be app promotion banner. To create this app promo banner section, we will come back to the VS code and here we have to create a new component. So in this components folder, let's create a new file or we can come here in this components we have the home, right? So in this home folder, create a new file and write the file name app promo banner. TSX. Now let's add R A F CE to create the component structure. After that in this one just replace this div with section. So we have the section opening and closing tag. Now in this section we have to provide some classes and here we have to display the content in two column in the left and right side. As you can see in this UI design, we have the two column. In the left side, we'll add the title, description and buttons. And in the right side, we'll add the image. So, let's just come back. So, we'll provide the comment first that is left side content. After that, we'll add the comment right side image. So, just add a div here for the left side. In this one, we will use the class name and provide the classes. After that, we have to add another div. So, we will add a div here. And in this one, let's add the text center for the phone screen and text left for medium and above screen size. After that here we have to add the title. So we will add the title in H2.
Segment 70: 137:30 - 140:00 And let's get this title from assets. So just add the app promo banner data from the assets. Then dot title. After that we have to add the description also in P tag. So again we will add app promo banner data dot description after that here we will add a div where we have to add two buttons. So just add a div and create the first button and in this button we'll add the text called app store. Let's duplicate it. In the second one, we'll add Google Play. Right now, we will save the changes and mount this component. So, let's just come here in home. JSX and after this popular products, we will mount this app promo banner component. It has been imported here. Now let's come back to the web browser again. So here you can see we have this green background and here we have this text but the text color is dark that's why it is not visible. So we will update the colors. We will add some CSS properties. So let's just come back to the VS code again. open our component and uh in this one let's add the classes in the title first. So in this title we have added these classes. Then we will add the classes in the P tag. Then we will add some classes in a div that contains both buttons. So we have added flex classes so that the buttons will be aligned side by side. Now let's decorate the first button. So in this first button we'll add some classes and after that we'll add the classes for the second button like this. Now save the changes and come back here. So you can see we have added the CSS properties for these content and now it is looking good. After that we have to add a image in the right side. So
Segment 71: 140:00 - 142:30 let's just come back and after this comment simply add the img tag. In this image tag let's add assets from the assets folder. Then we'll add dot delivery truck. After that we'll add the alt property. So in this alt property provide the text called delivery truck and then provide some classes here. Now save the changes and open the web page. So this delivery truck is displayed below this content. So let me fix it. I'll come back to the VS code. We have added this image right here. So let me just move it. I'll just cut this one and add it just before this closing div. Right now let's come here and uh add the space here and this comment will be here. So this is the row that contains the left and right column. Correct? So this is the left column and this is the right one. Now we'll save the changes and open the web page. So now you can see this app promo banner section is looking good. Let's see our UI design again on Figma. So next we have to create our newsletter section. To create it, we will come back again in the VS code and open this sidebar and components home and in this home folder create a new file with the name newsletter dot tsx. And after that let's add the component structure here. And in this one just add a tag called section. So we have the section opening and closing tag. Now in this one we will add a div and in this div just add the maximum width to excel and uh after that we'll add the MX auto. So it will be aligned in center and text center. After that here we have to add one icon. So we'll add one div. And inside this div, we will add the icon that is mail icon from
Segment 72: 142:30 - 145:00 Lucid React. For this icon, we will add the class name and provide the size 8. And we'll add the color. And then we have added the stroke width 1.5. Right now let's set the background of this icon. So here in this div we will add the size background white rounded excel and flex center MX auto and margin bottom and shadow. So we have added this icon and here we have this section. So in this one also we'll add the classes. So here we'll add the white background. So we have added the background white and other CSS properties. Now let's save the changes and mount this component also. So just come in the home.tsx file and after this app promo banner let's mount our newsletter component. Then see the web page. So here you can see we have this section with white background and first we have this mail icon with some shadow as you can see in this UI design then we have to add the title subtitle and input field. So just come back to the VS code open the newsletter dot tsx file and after this div let's add the title in h2 tag. So the title is subscribe to our newsletter. Next we'll add some classes in this title. So we have provided these classes. After that we'll add the P tag where we have to add the description or subtitle. So we have added this text. Now for this text also we have to change the text color and font. So we have added some classes here. After that we have to create a form. So let's add a form tag and in this form we have to add the input field and button. So we'll add the input type will be email.
Segment 73: 145:00 - 147:30 And after that here we have to add the button also. and the button type will be submit. So we have added a form. Let's save the changes. Come back here. So you can see here we have this title subtitle and after that it should display our input field. So let me add some classes here so that we can see clearly. So first in this form tag we will add the class name and provide these classes. After that in this input field we'll add the placeholder and provide the text that is enter your email id and it will be required to submit this form and after that provide the classes also. So just add the class name properties and uh here we have added these classes. Let's save the changes and come back here. So you can see here we have a input field. Now let's design our submit button. So in this button we will add the button text called subscribe and then we will add some classes. So simply add the class name property and provide these classes for the button. Save the changes. Come back here. So you can see here we have the button to submit this form. Next we have to add one onsubmit property in this form tag. So here we have the form tag. In this form tag let's add onsubmit. And uh let's add the add a function. In this parameter, we will get the event. And here simply add e dot prevent default. Save the changes. And now we have completed our newsletter section. After that, let's see our UI design again. So in this UI design, you can see we have to create our footer. In the footer, we will create four columns. After that we'll add another row where
Segment 74: 145:00 - 147:30 we'll add two column. In the left side we'll add the copyright message and in the right side we'll add the essential
Segment 75: 147:30 - 150:00 links like privacy policy and terms of service. To create this footer we have to create a new component. So let's just come back to the VS code. Let's open the sidebar and here you will find the components folder. In this one, create a new file and write the file name footer dot tsx create the component structure and after that here we'll add the footer tag. Instead of div we have added the footer tag. Now in this footer tag we have to add our color. So let's add the class name and provide the background app green and text white. After this footer tag we will create a div. Within this div we will create two section that will be top and bottom of the footer. So here let's add the class name and provide these classes. Now let's add the comment here that is top and we will add the next comment that is bottom. Now in this top let's add a div and after that let's add another div for this bottom. Right. After that let me mount this footer component. So we will open our layout. Let's find the app layout.tsx. In this one, you can see we have the text called footer. So, remove it and simply mount the footer component. So, you can see footer component has been imported. After that, let's come back here on the web page. So, at the bottom, you can see here we have the horizontal line in green background. Right? So, here we have to add the content. So let's just come back and open the footer.tsx file. In this one, let's add the content in the top section. So in this top, we have to add the content in four columns. So here we will use the grid layout. So just add the grid classes
Segment 76: 147:30 - 150:00 and after that let's add the
Segment 77: 150:00 - 152:30 data one by one. So first let's add a div. As you can see in this UI design in this first div we have to add the logo. Then we will add the description and after that we'll add the footer links. Right? So this will be the brand information. So here we'll add the comment that is blend and after this comment let's use the link tag import the link from react routerdom and in this link we will add one icon. So let's add the bike icon from leucid react and provide the classes here. So we'll add the size six and text white. After that in this link we will add the two property and in this two simply add the path slash. Then we have to add some classes also. So provide the flex classes. Then we have to add the text also. So here we will add the span tag. In this aspan tag simply provide the footer data from assets. Then dot brand dot name. After that let's add some classes in this aspan tag. So in this aspan tag we have added some classes. Let's save the changes. Come back here. So you can see here we have this logo and it is clickable. Whenever we will click here, it will open the homepage. Now let me just come back again and uh after this div, let's add the P tag where we have to add the description. So simply add the footer data dot brand dot description. Now for this description, we have to change the font and color using these classes. And after that we have to display the social media icons. So just add a div. In this div we will use the flex and gap 3. So it will align all the icons side by side. Then we will use the
Segment 78: 152:30 - 155:00 footer data dot brand dot socials dot map. Now in this one we'll get individual social media icon and index number i. Then we will use the a tag. In this a tag we will add the icon. So let's add this social dot icon. Close this tag. And here we have to add the class name and provide the size four. Correct. Now for this a tag we'll add some classes also. So just add the class name property and provide these classes. Next we'll add the href. So let's add the href and here we have to add the link. So just add curly braces social dot link. After that we'll add the key property. So in this key simply provide the index i. Save the changes and let's open our web page. So here you can see we have this logo description and social media icons but it is aligned horizontally. So let me fix it. I'll just come back to the VS code and uh after that let's see this div is here. So we have to move everything inside this branch div. So just cut this and add it here after this link. Save the changes. Come back here. So you can see everything is aligned in first column. After that we have to add other column. So just come back here in the VS code and after closing up this div that is for brand here we will add the comment that is dynamic sections and here just use the dummy data. So just add footer data dot sections dot map. Here we will add the arrow function. In this parameter we'll get individual section and index number i and after that let's return a div.
Segment 79: 155:00 - 157:30 Now in this div we will add the key property and provide index. And after that first we'll add the section title in the s3 tag. So let's get the title from this section dot title. After that we have to add some classes for this title. So let me provide these classes. And after this title we will add the ul tag and in this ul we will provide the space y 2.5. After this ul let's add curly braces and just add the section dot links dot map and create the arrow function in this map. Here we will get the individual link and index in the parameter. After that let's return the li tag. In this li we will provide the key and the key will be our index and then we have to add the curly braces provide link dot to question mark. Then we will add link tag. In this link tag simply add the content that is link dot label and after that we'll add the two property also. So in this two property just add the link dot two. Then we have to add the classes. So provide the class name. So we have added these classes. Right? Now we'll add the else condition also. So here we'll add colon and here just add the a tag. In this a tag provide the href. In this href, let's provide link dot href. Then we have to add the class name and provided these classes. It is same. And after that we have to provide the link label
Segment 80: 157:30 - 160:00 like this. Now let's save the changes and open the web page. So here you can see we have two other columns with quick links and customer service. Now we have to add our fourth column where we'll add the contact details. Right? So I'll come back to the VS code here. Let's add the comment that is contact and uh in this one create a div and then we'll add the title. So the title is contact us. For this title we have to provide some classes also. So let's provide the text a small then font semibold uppercase and then we have added the margin bottom four. Now after this title we will use the ul tag and in this ul we will add the a space y3. Then we will add the list items. So we will get the list items from the footer data. So just add footer data dot contact dot map. Create the arrow function and here get the individual item and index. After that here just add con icon is equal to item dot icon. Then we will add the return statement. In this return let's provide the parenthesis and provide the li tag. In this li tag we have to add the icon. And after this icon we'll add the text also. So simply add the item dot text. Now for this icon we have to set the size and color. So we have added these classes. Then we'll add the key property here. It will be index. And then we'll add the class name. So let's provide the flex classes so that it will align our icon and the content side by side. Let's
Segment 81: 160:00 - 162:30 save the changes and open our web page. So here you can see we have the fourth column that is the contact section where we have the icon and text. So first we have the location, phone number and email ID. Now let's create the bottom part of this footer where we have to display the copyright message. So just come here and in this comment we have added div. So in this div let's let's add the class name properties and provide these classes. Then we have to add the content for left side in p tag. So in the left side let's provide the footer data dot bottom dot copyight. After that, let's add the class name and uh provide these classes. Then we'll add a div where we will add two links, right? So we'll get the links using footer data only. So just add footer data dot bottom dot links dot map. create the arrow function and get the link and index in the parameter. Here we'll add the parenthesis and simply provide the a tag. In this a tag let's add the link dot label and then we have to add the index also. So just add the key and provide index i. Then we will add the href. So in this href we will provide the link dot href. Then provide some classes also. So here we'll add the text extra small and text color. Then we'll add the hover color. Right now we'll add the classes in the div that contains these links. So it will align the links side by side. So after adding it, save the changes and open the web page. So here you can see we have the bottom section of this footer where we have the copyright message like copyright great tag and in the right side we have two links privacy policy and terms of services. So we have completed the homepage of our
Segment 82: 162:30 - 165:00 grocery delivery project. Next we have to create this component also that is cart sidebar. So it will open a sidebar where we will display the cart items. Right? So instead of opening the cart page we can simply see the cart items in a sidebar. To create that we have to create a new component. To create that we will come back to the VS code. Let's create a new component. So in this components folder create a new file that is card sidebar dot tsx. Create the component structure. And uh after that let's mount this component. So we will mount this component here in our app layout. In this app layout you can see we have added the text. So remove this text and provide this card sidebar component. Now after that I'll open this file and uh in this one you can see we have a div. So let's add one fragment here. In this fragment we will place this div and in this one just add the classes and provide these classes. So it will be displayed on entire screen. And here we have added the background black with opacity 40 and z index 50 and transition opacity. And after that let's add the self-closing div like this. So it will be just like an overlay. It will cover the entire screen. So we will add the comment also that is overlay. And here we will add the on click property also. So let's add on click. And when we will click here it will close the cart sidebar. Right? So I'll add that value later. For now, let me just remove it and design this layout. So after this div, let's add another div. This will be our actual sidebar. So
Segment 83: 165:00 - 167:30 we'll add the comment sidebar. And after that, let's add the class name property. So in this class name property, provide these classes. Then save the changes and let's open our web page. So here you can see we have a sidebar in white background. Right now in this sidebar we have to add the content. So we will add the cart item content. It means we will add the cart item data. But the cart item data will be shared across multiple component. That's why we will create this data in a separate file that will be our context file so that we can share this card data in multiple component and we can access this from the context. So just come back to the VS code and you can see we have created the context folder. So in this context folder let's create our file that will be cart context. Create a new file cart context dot tsx. Now in this file we will use the create context to create our new context file. So just add con card context equal to create context from react. It has been imported and uh after that here let's add undefined. After that we have to add the type also. So let's define the type here using interface. So just add the interface and provide the cart context type object. Here we will add the items. So the items will be cart item. Then we'll add the add to cart. In this add to cart add the function return void. And in the parameter we will add the product and quantity. And we have to import this product from the types.
Segment 84: 167:30 - 170:00 Right? Now after that here we have added the cart items. So let's import the cart items also from types. So you can see cart items and product has been imported from the types folder. Now after that let's add the next data that is remove from cart. So in this remove from cart again add the arrow function with the product ID in the parameter and return void. Then we'll add the update quantity. In this update quantity also we'll add the product ID and quantity returning void. Then we have to add the clear card function. It will be add a function returning void. After that we'll add card count. So the type will be number. Then we'll add the card total. It is also number. Then we'll add is cart open. It will be boolean. And then set is cart open. It will be add a function where we will pass the open that is boolean and returning void. So let's add the type here in this declaration. So just add the angle bracket provide this type or undefined like this. Now after that we have to create the cart provider. So let's add export function and write the function name card provider. Now in this parameter let's get the children and then we have to provide the type here. So just add colon and provide the children colon react node import from react. Now in this one we will create all the states and function and that we can access in any other component. Now in this provider function we will add the return statement and here let's return the cart context dot provider.
Segment 85: 170:00 - 172:30 Let's close this tag and after that here simply add the children. Now after that here we'll add the value. Now in this value object we can place all the state and functions that we can access in any other component. Now here we will add one function using that we can easily access the context data. So let's add export function and the function name is use cart. So we have created this use cart function. Let's add con context equal to use context. In this use context provide the card context. After that let's add if statement. If not of context then we'll add throw new error and let's add the message use cart must be used within cart provider. After that let's add the return statement and return this context. Now let's create all the states and function for our context. So in this one first we'll add the state that is items and set function name is set items equal to use a state and uh in this one let's add the addo function. In this add a function we'll add con saved equal to local storage dot get item and provide the item name app cart. After that let's add the return and in this return we will check the saved question mark. If it is true then we will add the JSON dot parse and provide the saved.
Segment 86: 172:30 - 175:00 Else we'll provide the empty array. Right? And here we have to define the type also. So just add the angle bracket and in this one we will provide the cart item and array like this. Here we will add another state. So I'll provide con is cart open and setter function name is set is cart open equal to use a state and here let's add false. So initialize it using false. So by default the sidebar will be closed. Now let's add one use effect also. In this use effect add the arrow function and here we will add local storage dot set item and provide the item name or key name app cart. Then we will add the value. So just add the JSON dot a stringify and provide the items that is available here. Now after that here we'll add comma and dependency array. In this dependency array just add the items. Right now after that here let's add the functions. So first we'll add add to cart function. Using that we can add the product into cart. So let's add the function here. In this parameter we will get the product and quantity. So this product will be the product type and after that here we have the quantity one that is the default value. Then we will use the set items. In this set items, we will use the previous data in the parameter. And after that, just add consting equal to this previous dot find. In this find just add the
Segment 87: 175:00 - 177:30 arrow function with the item in parameter and after that let's add item dot product dot id equal to product dot id. So if this product is already existing in the cart in this case we'll add the if statement if existing then we have to update the quantity only. So let's add return. In this return just add previous dot map. Here we'll get the item. And after that let's add the item dot product dot ID equal to product dot ID. If it is true in this case just add the object and a spread operator item, quantity property and let's add the item from here. Let's add the arrow function like this. So here we'll add the item dot quantity plus quantity. else we will add item. Now after that here let's add the return statement. We will add the array a spread operator and use the previous data and provide a new data that will be product and quantity. So it will be added in the cart data. After that here we will use set is cart open and make it true. So it will open the cart item sidebar. So we have created this add to cart. Right? Now we have to create another function that is remove from cart. So let's add con remove from cart equal to add a function with the product ID in the parameter and the type is a string. So we will get the product ID to remove this product from the cart. Then we will use the set items. In this set items just add the arrow function and provide the previous data here. And from here we will filter out the product. So just add previous dot
Segment 88: 177:30 - 180:00 filter. Add the arrow function and provide the item and it will be item dot product dot ID not equal to product ID. So it will remove this particular product ID and remaining will be added here in the items using the set items. So we have created this function remove from cart. After that let's add another function that is update cart. So just copy it. We will add the function name update quantity. Right here we will get the product ID and uh type is a string. Then add comma we will get the quantity also and the type is number. Right. After that here simply add if statement and let's add quantity less than equal to zero. So in this case just add remove from cart and provide the product ID right and after that let's add return. Now suppose the quantity is greater than zero then we will use the set items create the add function provide the previous data in this one we have to update the quantity. So let's add previous dot map and create the arrow function in this map. Now in this add a function let's add item dot product do id equal to product id. If it is true in this case just add a split operator and item and quantity and if it is false then we will simply provide the item. So let me fix the brackets here. Now it is correct. So we have added this function update quantity. Right? After that we'll add another function that is clear cart. So create
Segment 89: 180:00 - 182:30 an arrow function and simply use set items and provide the empty array. After that we will use set is cart open and make it false. So it will close the cart sidebar. After that we will add the variables where we will store the cart total amount and card total count. So simply add con card count equal to the items dot reduce. Then add the function here and provide the parameter sum and item. Then provide sum dot item dot quantity and start with zero. Now duplicate it. Here we will add the cart total. It will be items dot reduce then sum dot item I mean sum, item. And here it will return sum plus item dot product dot price multiplied by item dot quantity and start with zero. So it will return the cart total amount. Now after that here we have the return that is returning this card context and value. Now in this value we can provide all the data that we need to pass from this context. So first we'll cross the items then add to cart function then remove from cart then update quantity then clear cart. After that cart count then cart total. After that we'll add is cart open set is cart open. So we will pass these data using this value object. Now we can access these data in any other
Segment 90: 182:30 - 185:00 component. But before accessing it, we have to wrap our component using this context provider. Right? For that, let me open our main file. So, let me open the main.tsx. And in this one let's add opening arrow cart provider. You can see cart provider has been imported from context cart context and close this tag. Now in this card provider provide this app. So you can see we have wrapped our app using this card provider and wrapped it using the browser router also. Let's save the changes. Now we can access the data from this cart. So let's continue our component. So we were creating the cart sidebar which is here. So in this card sidebar we need the data. So let's start with here in this function before this return first we need the currency. So let's get the currency from env using this import meta.env and v currency symbol. Else we will use the dollar sign if it is not available in env. Now after that let's get the data from context. So just add con curly braces equal to use cart. Use cart has been imported here. Now from this use cart let's get the items. Then we will get update quantity. After that get the remove from cart. Then get card total. Then we'll get is cart open. After that let's use set is cart open. Right? We are getting these data from use cart. After that let's get the navigate function also. So simply add con equal to use navigate from react router.
Segment 91: 185:00 - 187:30 Now let's add the if statement. If not of is cart open it means the sidebar cart is closed then we will simply add return null and if it is true then we will return this one right. So before that here let's add const and pro to write the variable called delivery fee equal to our card total greater than 20. If it is true then it will be free. So simply add zero. Else we will add the delivery fee 1.99. Right? After that let's add grand total. So the grand total will be cart total plus delivery fee. Now just come here in this return. So you can see we have added the sidebar div. In this one let's add the header section where we have to add the text. So let me add the comment called header and create a div. Now in this one we will add some classes also. So we have added these classes and in this div we will add the icon. So simply add shopping bag icon from Lucid React. In this icon we will set the size five. And after this we will add the text in H2. So the text is your cart. Correct. Now for this title we will add the classes also. So we have provided some classes here. After that we have to add the span tag. In this aspan tag we will add the total number of items in the cart. So simply add curly braces items.length and provide the items. And after that let's provide the classes also. So provide the class name property and these are the classes. After that we have to add a button also. So after closing off this div we will add a button. In this button we have to add a cross icon. So just add X icon from Lucid React. And for this icon
Segment 92: 187:30 - 190:00 we will set the size five. In this button we'll add the classes. And let's provide these classes. Now we have to add the on click property on this button. So simply add on click and in this on click add the add a function and use this function that is set is cart open and make it false so that we can close it. Now just copy this on click from here and we can use it in the first div which is here in this overlay. Let's use this on click and call set is cart open false. Save the changes and let's come here on the web page. So right now the sidebar cart is closed. Let me just come back here in the context. Here we have added is cart open false. So let me make it true. Save the changes and come back here. So now you can see our sidebar cart is open. Here you can see we have the title and item zero. And here we have the cross icon to close it. If I click on anywhere else, it will close it. Let me refresh it. Now it is back. Click on this cross icon, it will also close it. Right now let's design this sidebar cart page or sidebar that contains the cart items. So just come back to the VS code again. Open the card sidebar.tsx tfx file. So in this one we have added the header right and uh after this header we have to add the items list. Before displaying our items list, let me wrap inside a div. We will wrap this div and button. Right? So here we'll add a div and close it. Here in this one just add the class name property and provide the flex item center justify between padding border and border app border. Let's save the changes and come back here. So you can see now this title is looking good that
Segment 93: 187:30 - 190:00 is your cart zero items and cross icon.
Segment 94: 190:00 - 192:30 Now let's display the items. So let me just come back and uh here we will add the comment that is items and create a div where we will display the items. So first we'll add the classes here. So we have added these classes and then we have to use the items estate. We will check the length. So it will provide whether we have the items or not. So just add if it is equal to zero. In this case let's add the div. And here we will add the message that your cart is empty. And else we will add colon parenthesis. And here we will use the items to display our items. So just add items do map in this map add the add function and get the individual item in the parameter. And after that let's return a div here. And in this div we will add the key property. It will be our item dot product dot id. Let's come here in the first div. So in this div we'll add the classes to align the content in the center. Then we'll add the icon here that will be shopping bag icon. Right? So let's add this icon. And uh in this icon we will set the size and color. After that here we have to add the text also. So the text will be your cart is empty. And for this text we'll add the text size and weight and margin bottom. Save the changes. And uh let's come here. You can see the message here. Your cart is empty. Right. Now let me just come back and come here in the items where we have to display the cart items right. So in this div we'll add some classes first. So just add the class name property and provide these classes.
Segment 95: 192:30 - 195:00 Then in this div we have to add one image that will be the product image. So simply add src item.product product dot image. Then we'll add the alt property. In this alt property provide item.product.tname. And then we will add the classes for this image. So we have added these classes. Right? Now after that let's add a div where we have to add other details. So first let's add the classes for the div. Then we will add the product name in H4. So to display the product name we will use the item dot product.name and provide some classes also. So we'll add the text small and uh provide the font semi bold and truncate. Then we have to add the P tag. In this P tag we'll add the currency symbol first. After that we'll add the price. So to display the price we will use curly braces item. Dot to fixed two. Then we'll add slash and here we will again use curly braces and provide the unit. So we will provide item.product product dot unit. Now in this one also we have to add some classes. So in this P tag provide these classes right save the changes. Now after this P we will add a div where we have to add the increase and decrease button. Using that we can increase the product quantity or decrease the product quantity. And then we'll add two other div like this. So in the first one we will add these buttons and in the second one we will add the updated price and remove from cart button. So let's add the classes in the first one. So add the class name property provide these classes. Now let's come here in the first div. So in this one we have to add two buttons right. So we'll use the flex layout here. And after that in this one just add our first button. And in
Segment 96: 195:00 - 197:30 this first button we will add the minus icon so that we can decrease the quantity. So let's add minus icon from Lucid React. And in this icon we will set the size three. Right now after that we'll add some classes in this button. So we have added these classes. Now after that in this button we have to add the on click. So let's add the onclick property. Add the arrow function and simply call the update quantity function. In this update quantity we have to provide the item id using item dot product dot id. Then provide the quantity also. So we have to provide the item dot quantity minus one like this. Now let's duplicate this button. So this is the second button. So in this second button let's use the same classes. Classes will be same. Then we will use the update quantity function. We will provide the item dot quantity + one. So it will increase the quantity by one. And here we have to use updated icon. It will be plus icon from lucid react. And between these buttons we'll add the aspan tag. Now in this aspan tag just add the exact quantity. So simply add the item dot quantity right and for this a span we have added these classes also right so it will be displayed in the left side. Now in the right side we will display this div that display the price and remove from cart button. So in this one provide the class name and provide the flex layout. Then we will add the span tag. In this span just add the currency. After this currency just add curly braces and provide the parenthesis where we have to add the item dot
Segment 97: 197:30 - 200:00 product dot price multiplied by item dot quantity that will be total price. Then we'll add dot to fixed two. Now in this span we will add the font small and provide the font semi bold. Correct. After that here we will add the button and in this button we will add the trash icon. So import this trash to icon from juicy react and provide the size four. After adding this icon in this button we'll add some classes. So just add the class name property provide these classes. Now in this button we'll add the on click. So let's add the onclick property and uh then add the add a function and here we will call remove from cart function and simply provide the item dot product do id that is underscore id save the changes so it will remove this particular product from the cart after that let's scroll down and here just before this last closing div we will add the comment for footer that will be the card sidebar footer. We have added the header. As you can see here, this is the header for sidebar. Now we will add the footer for this sidebar. So let's add curly braces items do. Length greater than zero and so when the item is available. So in this case let's add the div and uh in this one we have added some Telvin classes and after that let's add the div where we'll add the subtotal and its value. So it will be displayed side by side. So let's add flex justify between text small. Now let's add the aspan tag. In this aspan tag provide the text called subtotal and uh in this one we have to add text color. Then we'll add another span tag that will be displayed in right
Segment 98: 197:30 - 200:00 side. And here we have to add the currency symbol. And after that we'll
Segment 99: 200:00 - 202:30 add the cart total price. It will be card total dot to fix two. Then provide the font. It will be medium. Right? Now just duplicate it. So in the second one we will use the same classes. Then we have the span tag and the text will be delivery. And then we have this span tag. Again in this one let's add curly braces. delivery fee is equal to zero. If it is true, then we will add the span tag. Let's remove this card total. So, in this span tag, we will add free. After that, in this span, we will add some classes also. So, we have provided these classes. text app success. Now suppose the delivery fee is not equal to zero then we'll add colon and provide back tick then dollar sign curly braces to insert the template literal just add the currency then we'll add dollar curly braces provide the delivery fee dot to fixed two. That's it. After that, we have to display a message. If the delivery fee is not equal to zero, then we will add a message. So, let's add curly braces. If delivery fee is greater than zero, then only we will display the message. So, just add the and operator and use the P tag. In this P tag, we'll add the message that is free delivery on orders over and provide the currency here 20. So this message will be displayed and for this message we'll add some classes. So in this P tag we have added
Segment 100: 202:30 - 205:00 text small and text color and text center. Then we have to add the final price. So let's add a div. In this div we'll add the flex layout. Then justify between text base font semibold border top and border color and padding top. Now here we'll add the span for the first text. So the first text is total. Now we'll add the value in second span. So in this one just add currency and then we have to add the grand total to fixed two. Now we'll add the button also using that we can proceed to check out. So let's add a button tag. In this button we'll add the text called proceed to checkout. And after this text we have to add the icon. So the icon is arrow right icon and import it from lucid react. Now in this icon we will set the size four. Then in this button we'll add the classes. So here we have added these relevant classes. Right now in this button we'll add on click property. In this onclick property add the arrow function. And then we will use set is cart open and make it false. After that let's add navigate and provide the path that is / checkout. After that add semicolon and provide window dot scroll to and provide 0 comma 0. That's it. So we have created our cart sidebar. Right now you can see the cart sidebar is empty but once we will add the product it will be displayed in this sidebar and we can close it from here and to permanent close. Let's come back and open our context. And here let's make it false. Here we have is cart open. We will make it false. So it will be closed by default. Save the changes. Next, we have to add the functionality on this cart icon so that when we click
Segment 101: 205:00 - 207:30 here, it should open the sidebar that will display our cart items. And we will also add the functionality on these plus icon. When we will click here, it will add the product in cart. For that, let me just come back to the VS Code. And now we will open the product card dot tsx file. In this one here you can see here we have added add toart function. So let me just clear this line and here we will get this add to cart from our context. So let's add use cart and click here to import it. You can see use cart has been imported from this context folder cart context file and let's call it save the changes. So now we have this add to cart function here and it will be called when we click on the plus icon as you can see in this button. So it will call this add to cart function and it will provide the product as parameter right and after that let me open the navbar so that we can add the functionality on cart icon. So the cart icon is added in navar. So we will open the components navar.tsx tsx and here you can see we are getting this card count and set is card open and we have added this data. So let me just clear it and here also we will get the data from context. So simply add use cart import it and call this one. So from this use cart now we are getting the cart count and set is cart open. Let's save the changes and open our web page. So now you can see if I refresh the web page the cart count is zero. That's why here we don't have any number. Let me just click here it will open our sidebar to display the cart items. And you can see the items is zero. Let's close it. Now I'll come here and click on this plus icon. So this product is added in the cart and it will automatically open our cart sidebar
Segment 102: 205:00 - 207:30 right and here you can see the item one
Segment 103: 207:30 - 210:00 and this is the product name then price per unit and this is the actual quantity and we have the option to increase or decrease the quantity right let me increase it. So as we increase the quantity you can see it will also update the price. And here we have the delete icon that will remove the product from this cart. Then at the bottom you can see we have subtotal then delivery and total amount. And here we have the proceed to check out button. Let me just close this or we can click anywhere except this sidebar. So it will also close it. So here you can see the total items in cart is two. As you can see in this nav bar. So it is working fine. Let me add another product. So let's add this. So you can see now we have two product. For the first one we have two quantity. This is for one quantity. Right now let me delete the previous one. So we can delete it also. Let's come back here. And you can see now we have only one product. So this add to cart is working fine. Let me add it again. We can add multiple items here. So this add to cart is working fine. Next we have to create our other pages. So let's open our UI design. So after completing this homepage and our sidebar cart items. Let's create the next page that is product page. That will be the product list page. Here we will display all the products and we'll display the categories in the left side to create it. Let me just come back to the VS code. In this one, let's open the sidebar. Here you can see we have pages and in this pages we have products dot tsx file where we have to display the products list. Right? So in this one let's create some state where we will store the products data and we will also add the state to get the search pam so that we can filter the
Segment 104: 207:30 - 210:00 products when we search the items in navbar and we'll also add the state for total number of pages and we'll add the
Segment 105: 210:00 - 212:30 state for loading a state right so let's come here before This return a statement we'll add const search patterns and setter function name is set search params equal to use search params. After that you can see the search params that is use search params has been imported from react router dom. After that let's add const provide the products and setter function set products equal to use a state and initialize it using empty array and here we have to add the type also. So let's add this angle bracket and provide the product type. Let's import it. You can see the product is imported from the types. Then we have to add this add. After that let's duplicate it. In this one we'll add the state name that will be total pages and set function name is set total pages equal to use a state and let's initialize it with number that is one. So initially total number of pages will be one. After that we'll add next a state that is loading and setter function name is set loading equal to use state and initialize it using true. So by default the loading will be true and after loading the products data it will set the loading false. After that let's add con mobile filter option set mobile filter option equal to user state and let's add false. So the filter option will be hidden by default on phone screen and we can also open it. So in that case we will make it true. So in mobile screen we can display or hide the filter option. After that we'll add the variable. So let's add con category equal to this search patterns
Segment 106: 212:30 - 215:00 dot get and from this search patterns we will find the category. If it is available, it will be added here. Else we will use the empty string. Correct? Now let's duplicate it. Here we will add organic equal to search patterns dot get organic. After that let's duplicate it. Here we'll add salt. Then provide search panels dot get and provide sort. Let's duplicate it. Here we'll add page equal to and here we will use the search patterns dot get and provide the page right or we will provide the one but we have to convert this into number for that let's remove it and provide the number function And in this one, simply paste it. That's it. Now, let's copy this one. Paste it here. Here, we will add the min price equal to search patterns.get and provide the min price. Then duplicate it. We'll provide the max price. It will be search paramounts.get get and max price. After that, first we have to fetch the products. So right now we have not created the back end. So we will fetch the products from our dummy data that is available in the assets. So we have to create a function for that. Let's add con fetch products equal to async add a function. And uh in this function first we'll set the loading true. After that we'll use the set products. In this set products just add the dummy products data. So let's add dummy
Segment 107: 215:00 - 217:30 products from the asset. You can see it has been imported from the assets folder asset file. After that here we will use the filter. In this filter, let's add the add a function. And here let's add one individual product. And after that let's add P dot category equal to category or category equal to empty string. After that let's use set loading and we will make it false. After loading the product, it will set the loading false. And we have to execute this function when the component gets loaded. Right? So here let's add the use effect also. In this use effect, add the arrow function and provide comma dependency array. Now in this function simply call this fetch products. After that come here in the dependency add and here we will add the category. So when the category changes it will execute this function. After that we'll add the organic. So if it is changing it will execute the same function again. Let's call this function again when this sort changes so that we can sort the product. So add it here. After that we'll add page min price and max price. So whenever any of this data is changing it will execute this function. Correct? Now after that we have to add another function using that we can update the filter. Right? So let's add con update filter equal to add a function. And in this one we'll get some data in parameter. So let's add key. It will be a string. Then we have to add the value. It is also a string.
Segment 108: 217:30 - 220:00 Then we will add the const new params equal to new URL search params and provide the search params. After that we will add if statement. If the value is available then we will provide this new params dot set and provide the key and value. So whenever we will update the filter it will set the key and value in the URL. Right. After that let's add else. In this else just add new patterns dot delete. It means we have unselected that or removed that filter. Then we will add delete and provide the key only. Right now after that we'll add if statement again. If key not equal to page right. So in this case just add new patterns dot delete and provide the page. After that here simply use the set search patterns and provide the new patterns. So it will reset the search patterns and uh according to that it will filter our product right. So let's come here before this use effect we will add const clear filter equal to add a function. We will add a button so that we can clear all the filters. So here we will use the set search params and from the paddam we will remove everything. So simply provide empty object. So it will clear all the filters right now we have to get the active category
Segment 109: 220:00 - 222:30 right so that we can highlight the category list from the left side. So just add con active category is equal to let's add the category data from the assets. You can see the categories data has been imported from asset. Then we will add dot find and create the arrow function. provide individual category in the parameter and then we'll use C dot slug is equal to our category. So it will find the active category. After that let's add con has filters equal to category or organic or min price or max price. So if any of this is true it means we have the filters applied right. So when the filters are applied then only we will display this button to clear the filter that's why we have added this variable. Now after getting all these product data and creating this variables now we can display the data on web page right. So let's come here in this return statement and here in this first div let's add some TIN classes that will be minimum height and we have added the background color. After that let's add another div. So we have added another div here and uh in this one we'll add some TIN classes again. So we have added the maximum width and MX auto and provided the padding for different screen. Now first we have to display the breadcrumbs like it will display the home icon and after that it will display the page name like product. So to create the breadcrumb first we will add the comment. So we have added this comment breadcrumb and we will add the nav tag here because we will use it to navigate. So here we'll add the classes
Segment 110: 222:30 - 225:00 that will align the content side by side. Then we will add link tag from react router DOM. Close this link. And in this one we have to add the home icon. So let's add the home icon from Lucid React. And in this home icon we have to provide the size. So let's add the size four. And after that in this link tag we will add the classes like this. So that we'll see the whole effect and then we'll add the two property also. So in this two property simply provide slash it will open the homepage. Now after this link we have to add the forward slash. So simply add the span tag and provide this forward slash. Now we have to add the page name. So again we'll add the span. In this suspend let's add curly braces and we will use the active category. If the active category is available then we will add the active category dot name right else let's add the colon and provide the name like all products. That's it. Now we'll add some classes in this aspan. So in this span we have added the class name like this. Save the changes. After adding it let me open our web page and we will open the products page. So if I go to path/ products here also we are getting the same content. Let me refresh it and you can see now it is good. Let's go to home and click on products. It is not updating the content. But after refresh, it is updating it. Let me fix it. To fix this issue, let me just inspect this web page. Go to console and uh here we are getting the error message and you can see the message from popular products.tsx file in line number 13. And we have the error in use effect. So let me just come back to the VS code and open the
Segment 111: 225:00 - 227:30 components home and popular products.tsx file. In this one we'll come here in line number 13. And you can see we have added the use effect. But in this one we have not added the dependency array. So just add comma and provide empty array. layer in this use effect we will provide empty a save the changes and after that let me just come back on the web page now if I click on products you can see here we are on the products page and we are getting the breadcrumb where we have the home icon with this hover effect and here we have all products right now let me go to homepage again and click on any category So I'll click on this bakery category. So you can see the URL. Here we have products. Then we have the category equal to bakery. This is the search patterns. So here we have the category equal to bakery. That's why here you can see the breadcrumb it is home/bakery. So it is also working fine. Now let me just come back to the VS code. open our products page. So here we have the products.tsx file. So in this one we have created the breadcrumbs and after that we will scroll here and here just add another div after this nav. Now in this div we have to add the content for desktop screen that will be our filter. Right? So let's add class name. In this class name simply provide flex. Then we'll add the gap and we'll add the gap for different screen size. Now after that let's add the sidebar that will be displayed for the desktop only. So let's add the comment called side bar for desktop. And uh after that we'll add our main content. So let's add the comment here that is main content. Now to create this sidebar here we will use
Segment 112: 227:30 - 230:00 aside tag and in this aside tag just add the class name and provide the class name hidden. So it will be hidden for mobile screen and for large and above a screen we have added display block. Then we have added the width shrink zero. Now let's add the div and in this one let's add some classes. So just add the class name property provide these classes and after that in this one we have to display the filter item where we can filter the product based on categories based on organic or inorganic product based on maximum or minimum price. Right? So here we have to create the filter. So let me provide the text for now. We'll add filter like this. After that just come back to the web page. So here you can see we have this filter and here we have the white background. Now let's just come back and we'll add the main content. So here we have the comment for main content. In this one we will add the main tag like this and in this main tag we'll add the class name property and provide flex one. So it will use entire space after this sidebar. Now here we have to add the header part. So we'll add the comment here that is header. So in the header we have to display the active category name if the category is selected. Else we'll display the text called all products. Right? And we'll also display the total number of products. So just add a div here. In this div add the classes and then we'll add another div where we have to add the text in H1 tag. So let's use the variable that is active category question mark and provide the active category.
Segment 113: 230:00 - 232:30 If it is available then we'll display the active categories name. So just add dot name else we will add the text called all products. So this is the first text. Now we'll add one more text here in P tag. So in this P tag let's add products dotlength. So it will display the total number of products and then we have to add the text called products found. So it will display the message like 10 products found. Next we have to provide the classes for this both text. So in the first one we have added this text that is text 2 Excel that will be large text and in the second one we have added this small text and color. Let's save the changes and come back here. So here you can see we have the category name that is bakery and here we have two products found correct because in the URL patterns you can see we have selected the category bakery correct now after that we have to add the filter for mobile. We can toggle the filter we can display and hide the filter right. So we have to display that button only. So let's just come back after this div we will add another div. In this one just add the classes like this that contains flex flex column. And after that here we will add comment that is mobile filter toggle. We will add the toggle button using this button tag. In this one we have to add one icon. So let's add the sliders horizontal icon from Lucid React and uh after that we'll set the size four. Now we have to add one text also. So the text is filters. Now in this button we have to provide some classes. So we have added these classes so that it will be hidden on large and above a screen size. it will be displayed on a smaller screen only. Right? Now in this one we have to add
Segment 114: 232:30 - 235:00 the onclick property so that we can hide and display the filter on mobile screen. So we have added the onclick property add the add function and let's call the set mobile filter open and make it true. After that, if I come back to the UI design, you can see in the right side, we have to display the drop-down. Using that, we can sort the product. We can sort based on the price, based on the top rated, newest, right? So, let me just come back and uh we will open the VS code. And here you can see we have added this button. So after this button let's add the comment for sort and in this one just add one div. In this div name relative after that we'll use the select tag to create the drop-down. So we have added this select tag. In this select tag we have to add the value. So the value will be the sort state. After that we'll add the onchange property also. In this onchange add the add function and use the event in the parameter. Then we will use the update filter function and provide the sort. Then we'll add the value here that is e dot target dot value. Right now here we have to change the appearance of this drop-down. So we need to provide the classes here. So just add the class name property and provide these classes. After that we have to add different options here within this select that will be displayed in the drop-down. So just add the option tag. So we have added the option tag. In this one we'll add the value. So the value will be empty string for the first one and add the display text newest. Now duplicate it. In the second one
Segment 115: 235:00 - 237:30 we'll add the price ascending. In the next one we'll add price descending. Then we'll add next one that is rating. After that we'll add the next one that is name that is product name. Now let's update the display text also. This is price low to high. Then price high to low. After that top rated after that A to Z right after that we have to add one icon also. So after this select tag let's add this icon and import this icon from Lucid React. In this icon we have to provide some classes. So we have added the class name property and provided absolute right top. So we have set the position for this icon and in the parent div we have added the relative. Let's save the changes and open the web page. So here you can see in the right side we have this drop-down. Right now after that in this UI design you can see we have to display our product list in the grid layout. Right. So we will come back to the VS code and uh after this sort let's come here before this closing main tag. Here we will add the comment that is product grid. Let's add the curly braces and use the loading state. If the loading is true in this case we have to display the loading animation. For that we will create one loading component. But for now let me add the text only. We will add loading. we will replace it and create another component. Now suppose the loading is false then we'll add colon and we will check the length. So just add this products.length is equal to zero. So if the length is zero
Segment 116: 237:30 - 240:00 in this case we have to display the message like no products found. So we will display it here in a div. Now suppose the product length is greater than zero then we'll add the colon and in this next parenthesis we will add a div where we will display our products in grid layout. So let's add the content in the first one that will display the message no products found. So here let's add the class name provide text center and some padding. Then we have to add the message in P tag. So the message is no products found. After that we will add the next message that is try adjusting your filters or search terms. Right. Next we have to provide the classes for the text. So we have added the classes for the first one and now for the second one. And after that we have to add a button also. So we will add the button tag. In this button we will add clear filters. Suppose we don't have any product. So to remove the filters we will use a button clear filters. And in this button we have to add the classes. So just add these classes. Now in this button we have to call a function. So just add the onclick property. And let me call the clear filter function that we have already created. So if the product length is zero, it will display the message no products found and then it will display the button also. Right now after that let's see this second div that will display the actual product list. So here we'll add the class name and use the grid layout. So we will add these tele classes to create the grid layout. Then we will use curly braces and use the products dot map. Now in this map we'll add the arrow function
Segment 117: 240:00 - 242:30 and get the individual product in the parameter. Now here let's add the individual product dot stock. We will check the stock first. If it is greater than zero then only we will display it. So just add this add operator and parenthesis and we will mount our product card. So let's add product card component. Let's import this component and here we have to provide the props. So first we'll add the key. So the key will be our product dot id. Then we'll add the props called product and let's provide the product from the parameter. Let's save the changes. After that you can see here we have two products because we have selected the bakery category. Right now let's change the category from here. I'll choose anything else. Let's come here. So here you can see in this baby care category we have zero products found and we have the message no products found. Try adjusting your filters or search terms and here we have the button clear filters. Let's click on this button. So you can see the filters has been removed and here we have all products like this. Next we have to display the pagination also at the bottom. So let me just come back to the VS code and uh here before this closing main tag let's add the comment called pagination. Here we'll add curly braces. We will use the total pages if it is greater than one. In this case, we'll add the and operator parenthesis and provide the div. In this div, we'll add the flex layout using these tin classes. And we will add curly braces. Add a dot from and add this object with length. It will be total pages. Right? Then we'll add dot map method.
Segment 118: 240:00 - 242:30 And in this one add the add a function
Segment 119: 242:30 - 245:00 like this and provide underscore, index. It will be added here in this parameter. Now after that here we have to return the button tag. So let's add the button tag. And in this button tag simply add curly braces I + 1. That's it. Now we have to decorate this button. For that we have to add the classes. So let's add the class name property and we'll use the dynamic classes. So just add the pack and provide these classes. Then we'll add the dynamic classes here. So just add dollar sign curly braces. Let's use the page is equal to 1 or we will add page equal to i + 1. If it is true then we will use green color of background and text white. else. Here we have to add the colon and in this code we will add the white background with green text. So we have added these tele classes. Let's save the changes. Next we have to add the key property. So in this button we'll add the key property. It will be I that is the index. Then we'll add the on click also. So in this on click let's add the add a function and it will call the update filter and in this update filter we have to add the name that will be page. Then we have to add the value. So just add comma and provide the a string function. And in this string let's add I + 1. Right? And after that we have to scroll the web page to the top. So let's add semicolon and provide scroll to it will be 0 comma 0. Let's fix it. Here we are getting the warning. So let's move it in the new
Segment 120: 245:00 - 247:30 line. So here you can see we have added this update filter. Then in this update filter we have added this page right. And uh after that we have to remove this bracket from here. After this page we have the a string and after that a scroll two and uh then we will add it here. Now let's save the changes. So we have added the pagination. If the page is greater than one it will display the pagination at the bottom. Right now after that we have to create the loading page also or loading component that will be displayed once the product is not loaded. So we have to create a new component. For that let's open the sidebar components and create a new file called loading dot. TSX. In this one just add RFCE to create the complaint structure. And after that in this div we'll add the classes to align the content in center. Right? And after that we'll add the loader icon. So let's add loader to icon from Lucid React. And we have to add the animation and color for this one. So we have added these classes to animate it. Right. Next we have to use this loading component in our page that is products page. So here you can see we have added the text called loading. So remove it and just mount our loading component. Import this component. Close this tag. That's it. Now if I come here, we have the products only. Right? But for fraction of seconds, you can see the loading animation. To display that, I'll just come back and uh I'll clear this one. Here we have set products, right? So let me just comment this one. We have this use effect, right? So let's comment this line. It will not call this function. So by default the products will be empty array. If I come back here, refresh it.
Segment 121: 247:30 - 250:00 Here you can see we have the loading animation when the products is not loaded. Here we have zero products found. And after loading the product, it will display the product. So let's call this function. It will load the product. So we have the product list and the filter is also working. If I come here, click on snacks. You can see the padams. Here we have the category snacks. We don't have any product in this category. Let's go to another one. We'll go to fruits. So here we have the fruits and vegetables. As you can see in this URL also fruits and vegetables. So let me just come back again in this products page. Here in the left side you can see we have this filter right. We have just added a text. So instead of this text we have to create one actual filter. For that we are going to create a separate component right. To create that let me just come back to the VS code. Let's open the sidebar and come here in the components and create a new file and write the file name filter panel dot tsx. Now in this one let's add R A F CE to create this component structure and after that here before this return let's add const categories with all equal to array and here we'll add the object then provide the slug empty string. Then we'll add name all categories. Then we'll add comma a spread operator and uh then we'll add categories and we will get this categories as props. So here let's restructure the props. Just add curly braces. We'll get the categories as props. Then we'll get the individual category. After that we'll get main price then get max price and uh
Segment 122: 250:00 - 252:30 update filter function and we'll get the clear filter and has filters and then we'll add the colon any. So the type is any. Now after that let's come here in this return statement. So in this return we have added a div. So in this div let's add the space. So we'll add the space y 6. Then we'll add the comment called categories. So just add a div and uh create one title using s3 and the title is categories. For this title we have to provide some classes. So we have added text small font semi bold and we have added the text color and margin bottom. Then we have to display all the categories list using a div. In this div just add the curly braces. Add the categories with all dot map. Create the arrow function. And here we'll get the individual category and type is any. Then let's return one button. So we have added one button tag. In this button we'll add the category dot name. That's it. Now let's add the classes in the div that contains all the categories. So we have added the space y 1.5 and uh after that we'll add the classes in this button. So in this button we'll add the class name property and here we have to add the dynamic classes. So just add curly braces back. In this back we have added these fixed classes. After that we will add the dynamic classes based on the category. So just add dollar sign curly braces provide the category is equal to cat dot slug. If it is true then we have to add the green background and text white. else we will provide the
Segment 123: 252:30 - 255:00 light text and we will add the another color when we hover. Right? Let's save the changes. Now in this button we'll add the key property also. So let's add the key property. It will be cat dot slug because the slug is unique. Then we'll add the on click property. So let's add on click. So when we click here, it will call a function that is update filter. In this update filter, we have to add the name that is category. And after that, we have to add the value. So the value will be cat do.lug. Let's move it in new line. Save the changes. So we have added this list of categories right. Next we have to display that. So to display it let me just come back here on our products page. In this products page we have to mount our component. So I'll just come here, remove this P and instead of this P, let's mount filter panel. Import this component and close this tag. Now here we have to provide the props. So the props will be categories equal to categories data. Let's import the categories data. It is already imported. I think the categories data is imported here from assets. Right? So we have added the categories data that will display all the categories list. After that let's add the next props that is category. So just add the category here. After that let's add organic and equal to organic. Then we'll add min price, max price, update filter, clear filter and has filters. So provide everything in the props
Segment 124: 255:00 - 257:30 like this. Now we will save the changes and uh open the web page. So in the products page in the left side you can see here we have a list of categories. So all categories is selected by default. If I click on fruits and vegetables it is selected. If I click on personal care you can see it is selected. If I click on pantry it is selected. So we can select the categories from the left sidebar. It will filter the products based on the categories. Next, we have to add the other content in this left filter. For that, let me just come back to the VS code. We will open the filter panel. In this filter panel, just before the last closing div, we will add the comment called price range. Add a div. And uh in this div we will add the title again. So let's add the title that is price range. And we have added some classes for this title. Then we will add a div that will contain the input fields. So here we have to display two input field. So simply add the classes here to provide the flex layout. And we can align both input fields side by side. So let's add the first input field here. input type will be number and then we have to add the placeholder. So in the placeholder let's add min it means the minimum price. Then we have to add the value property and provide the min price state. Then we'll add the onchange. Let me add it in new line. In this onchange function, simply provide the add function and get the event in the parameter and call update filter and provide the first parameter that is min price, value. It will be e.target dot value.
Segment 125: 257:30 - 260:00 Right? Now after that we have to add some classes in this input field. So just add the class name properties and provide these classes. Right? After that we have to add one space or dash. So just add the assign tag provide this dash. Now in this one just add some classes. So we have added these classes to decorate it. Next we have to add another input field. So I'll just copy the same and paste it here. Here also we'll use the type number and in the placeholder we will add max. In the value we will add the max price and uh after that here we have to add the max price in the first parameter. Then everything will be same right save the changes and come back here. So here in the left sidebar you can see we have the price range. We have two input fields for minimum and maximum price. So we can filter the product based on price. After that we'll add the button. Using that we can filter or clear the filters. So just come back to the VS code and uh just before this last closing div we'll add curly braces use the has filters. If it is true then we will display that button. So here we'll add the button tag. In this button tag, we'll add the text called cleared all filters. To decorate this button, we'll add the classes. So, just add the class name property. And uh let me provide these classes. After that, here we have to add the on click property also. So, let's add on click property and call the clear filters function. That's it. Let's save the changes. Come back here. So you can see here we have cleared all filters because the filter is already selected. We have selected fruits and vegetables. Let's click on this button all clear all filters. So you can see all filters has been removed. Now let me open it in small screen. So when we open it in small screen you can see here we have this button called
Segment 126: 257:30 - 260:00 filters. So when we click on this filter button, it should display the filter on mobile screen also. Right? For that we
Segment 127: 260:00 - 262:30 have to display it on mobile screen when this state is true that we have created called mobile filters open. So let me just come back to the VS code and we will open the products.tsx file. Right? In this one we have to create that filter for mobile screen. So here we have added this main tag right. So after this main we have these closing divs. So before this last closing div we will add the comment mobile filters model. Let's add curly braces. We will use the mobile filters open. when it is true then only we have to display this model. So here let's add the fragment and in this one just add one div. Now in this div let's add the class name. So it will be displayed on entire screen with some opacity. So we have added fixed. Then we have added the insert zero, background black, opacity 40 and Z index 50. When we click anywhere on this screen then it will close that model. So just add on click in this on click will add add function and simply use this set function set mobile filters open and make it false. Right? And let's use the self-closing div like this. Remove this closing tag. Now after that here we will add another div. Now in this next div let's add some classes so that it will be fixed at bottom. Right now after that here we will add the div where we will display the text and close icon. So just add a div. In this one we have to provide the text that will be the title. So just add the
Segment 128: 262:30 - 265:00 title in S3. So the title is filters and in this line in the right side we will display the close icon. So just add the button tag and here we will add the close icon that is X icon. So import it from Lucid React. Now for this icon we'll set the size five. For this button we have to provide some classes also. So let's add these classes. Let's add this X icon. Now it is correct. After that in this button we have to add the onclick property also. Let me provide the classes again. So we have added these classes. Now in this button let's provide the onclick property. In this one just add the arrow function and then let's call the same set mobile filters open and make it false. So it will close this model. Now let's add the classes in the title also. So here we have the title in S3 and provide these classes. Let's add the classes in the div that contains both title and close icon. So we have added these classes. So here we have a div that contains the title and button. Save the changes and come back here. So now on this mobile screen you can see at the bottom we have this filters with cross icon. Let's click anywhere it will hide it. Let's click on this button it will display it. If I click on cross it will also hide it. So you can see it is animated. It is moving up from the bottom. Right now let's mount our filter panel here. So just come back and uh after this div let's let's add another div. In this one simply add the class name and provide some padding. So let's add the padding four. Now let's mount our component that is filter panel component. Now in this component we have to provide the props right. So I'll just copy from previous mount. Here we have this. Let's just copy everything and paste it here. That's it. Save the changes and after
Segment 129: 262:30 - 265:00 that open the web page. Now if I click
Segment 130: 265:00 - 267:30 on this filters, you can see here we have the entire filter for mobile screen and it is scrollable. we can filter the products based on category and maximum and minimum price right and uh after that if I click on anywhere else or this cross icon it will hide it let's choose any category let's come here click on this category bakery and click on filter so at the bottom you can see cleared all filters also let's click here and it will be cleared so This filter is displayed on both mobile and desktop screen and we have completed our products page. After completing the front end of our products page, we have to create the next page. So let's see the UI design. So we will open the Figma design. Here you can see the next page is our flash deals where we will display this banner. After that we will display the product list where we have some discount and offers. Right? So it's very simple to create this one. We have to create the header like this where we will display the title flash deals and subtitle and simply mount the products. So to create it just open the VS code again and come here in the pages here we have the pages folder. So in this pages create a new file or I think I have already created that file right here we have flash deals.tsx. So in this flash deals tsx we have to get the products first. Right. So let's create one state to store the products data. So just add con products equal to use a state we have added setter function set products use a state and initialize it using empty array and then we have to add the type also. So let's add the angle bracket and import the product. So just import this product type from the types folder. After that here we'll add this array. So we have added this state to store the
Segment 131: 267:30 - 270:00 products data. Let's duplicate it. We will add the loading state. Using that we can display either loading animation or we can display the product list. So let's initialize it using false or let me use true so that by default it will be true. It will display the loading animation when the component gets loaded and after loading the product we will make it false so that we can display our product list. So just add the use effect and in this use effect we'll add the add function using that we will fetch the product. So let's use the setter function set products and here we will add the dummy product data from the assets. So just add dummy products from the assets. You can see it has been imported. Now let's filter these product using the filter and add a function. Let's get the individual product here and the type is any. then it will return all the product where the stock is greater than zero. So let's add stock greater than zero. And after that let's add the set time out so that it will take 1 second to display our product. So after 1 second we will set the loading false because we are using the dummy data. it will instantly fetch the product. So you won't see the loading animation. That's why I'm adding this set time out. In this set timeout, add this add a function and uh use set loading and make it false. Then add comma here and provide 1,000 milliseconds. That's it. So now after 1 second it will display the product. For that we have to add the HTML elements in this return. So in this return we already have a div. So in this div we'll set the minimum height and background color using these classes. Then we'll add the banner
Segment 132: 270:00 - 272:30 section. Right? So we'll add the comment here and add one div here. We'll add the linear gradient colored in the background. So we have added the color here that is from and to that is app orange dark orange. Then the text will be white and we have added some padding from y-axis. Now within this let's add another div. So in this one let's set the maximum width because we will not stretch the text in entire row. So we have added the maximum width here and other classes we have added the text center. Next we'll add a div where we have to add the icon that will be the flash icon and the text and after that we'll add the subtitle. So just add div that includes one icon. Let's add zap from Lucid React. In this one, let's set this size and fill white. So we have added this icon with size and fill color white. Let's duplicate it. So we have two icons, right? It will be displayed at beginning and end. Then between these icons, we have to add our message that is flash deals. And for this message, we have to increase the text size and font weight. So we have added these classes. Now let's align all icons and text side by side. So simply add class name flex center gap 2 and margin bottom three. After that here we will add the text in P tag. So let me provide this small description and for this description also we have to provide some classes. So let's add text white/ then we have added the maximum width and MX auto. Let me save the changes and come back here. Let's click on this deals in the navbar.
Segment 133: 272:30 - 275:00 You can see we have the deals. So I'll click here. So you can see it is opening the deals path. Here you can see the banner that contains this flash deals and this small description. Now after that we have to display the product or loading a screen if the product is not loaded. So let's just come back and uh just after this div that is for the banner here we will add another div in this one let me set the maximum width that is 7 XL and MX auto some padding right and in this one just add loading a state we will check the loading state is true or false. So if it is true, we will simply add this loading component. Import the loading component. Close this tag. Right? Now suppose it is false. So then add this colon and this parenthesis. So if it is false then we will use the products and we'll check the length also. So just add the length. So if the length is zero it means we don't have any product in deals. So let's add question mark again. And here we have to add a div. In this div we will add the text like no deals right now. And suppose we have the products length greater than zero. Then we'll add another div that display the list of product. So just after this parenthesis we'll add colon and another parenthesis and add another div. Now in this first one let me provide text text center and padding Y. Then we have to add the zap icon. So I'll just copy it paste it here. So we have added zap icon and in this one just update these classes. After that we have to add the text in s2. So let's add s2 tag. In this s2 tag we will provide no deals right now.
Segment 134: 275:00 - 277:30 After that let's add the class name and provide these classes. Then we have to add the text in p tag. So here let me provide these text. Next we'll add some classes also for this small description. So we have added these classes. Let's save the changes. So if the product does not have any deals then it will display this message. Now suppose some product have the deals then we will display it here. So here we'll add the grid layout. So simply add the class name and provide the grid classes to align all the product item. So let's add curly braces use the products array. Then we will use dot map. In this map add the arrow function and get individual product here. And after that let's add the product dot a stock. If the stock is greater than zero then only we will add and operator and display a product card. So just add product card here import it from the components. So product card component has been imported. Let's add the key property. So the key will be our product dot id. Then we have to add the props that will be product and provide the product that we are getting from this parameter. Let's save the changes. After that we will open our web page. Let's refresh it. Here you can see the loading animation and it is still loading. Yeah. So after loading you can see here we have the list of products. Correct. Let's refresh it again. It is displaying the loading animation for one second and after that it is displaying the list of products where we have some deals. And if I click on this add button, this will be added in the cart. Let's close it. Now after completing our deals page, we have to create the
Segment 135: 277:30 - 280:00 another page. So let's see our UI designs. So we will come back in the Figma design and you can see we have to create the product details page like this. So we can click on the product title or product image to open this product details page where we have to display the product image, price, rating and title and stocks available and increase decrease button to add the product into cart. Then we'll display the customer reviews. So we'll add some dummy reviews here and below that we'll add the related products also. In this related products we have this button view all right. So let's create our product details page. So let's come back to the VS code. Let's open the sidebar. In this one we have the pages folder. In this pages folder, you can see we have this product page, right? So in this product page, we have to add the content so that we can display the individual product details. So in this one, we will display the product price. So we need the currency, right? So let's get the currency from env. We will add const currency equal to import dot meta. env dot and the environment variable name is V currency symbol or we will provide the dollar sign. After that we have to fetch the ID from the patterns so that we can display the individual product. So just add con id equal to use paddoms and import the use patterns from react router DOM. So now we have the product ID here. After that here we'll add the navigate function also so that we can navigate to other pages. So just add con equal to use navigate and import the use navigate from reapper DOM. After that we need the cart data from the context. Right? So let's add con curly braces. items that will be the cart items. Right? After that here we need the add
Segment 136: 280:00 - 282:30 to cart function. Then we need update quantity function. After that we need remove from cart function. And we will get all these from the use cart and use cart has been imported here from context cart context and call this use cart function. So here we are getting these data. Next we'll create some state to store the data. So let's add con product and set function name is set product equal to user state. In this user state let's initialize the product using null. So by default the product will be null. And here we have to add the type also. So let's add angle bracket and provide the product interface from the types folder. You can see it has been imported from types folder. And here we'll add or null. Let's add like this product or null. And after that let's add another state. So here we'll add con related products and set a function name is set related products equal to user state and it will be empty array because in this one we'll store multiple products. So again we have to add the type. So just copy this product from here and add this array. After that we'll add the loading state also. And by default the loading will be true. And after that we'll add con local quantity and set local quantity equal to user state and let's add the value one. So initialize it using one. Now after that we have to load the product using this id. It means we have to fetch the product data using this id. So let's create one function and this function will be executed inside use effect so that it will be executed automatically when the component gets loaded. So just add the use effect and in this use effect let's add comma and provide dependency array. Here we'll
Segment 137: 280:00 - 282:30 add the ID. So when the ID changes it
Segment 138: 282:30 - 285:00 will execute the function again and we'll add the navigate also. So just add the navigate function. So when the navigate changes it will execute this function. Now let me just come back to the previous page that we have created that is products.tsx. So in this one here also we have added the use effect right not in this products we have created the flash deals. Let's open the flash deals. So yeah, here we have added the use effect. But in this use effect, we did not provide the dependency array. We missed it. So here we'll add the comma and provide empty array. Provide this empty array in this use effect for flash deals. After that we'll come here in the product page.tsx. Now in this one we already have the dependency array and come here in the use effect. So in this use effect first we'll set the loading. So let's use set loading true. After that we'll use set local quantity. Let's set one. After that, let's add window dot scroll to zero and after that let's add con product equal to dummy products from the asset. So we have the dummy. Let me undo this. We'll add dummy products from assets. It has been imported. Then in this one we will use find method and add the add a function to find individual product. So simply add the individual product here and it will return the product dot id or dot id is equal to the id that we are getting from this use params. So it will return the
Segment 139: 282:30 - 285:00 individual product only. Right now let's
Segment 140: 285:00 - 287:30 add set product setter function and in this one we will use this product then exclamation after that let's use the set related products. So just add set related products. In this one again use the dummy products dot filter. In this filter add the arrow function. Use individual product here. And after that we'll use P dot ID not equal to ID. So it will add other product except this one. Right now after that let's use the set loading and we will make the loading false so that we can hide the loading animation. Save the changes. Now we have the individual product data. After that let's come here. Before this return we'll add if statement and use loading a state. So when the loading is true simply add return and we will return the loading component right now after that let's add if not of product. So if product is not available in this case we'll add return null. After that suppose the product is available. So in this case we'll add cost cart item equal to items that we are getting from context. In this one just add dot find and provide the add a function with individual item in this parameter and provide item.product product dot id equal to the product dot id. Then let's add con in cart equal to not of not cart items. Then we will add cost
Segment 141: 287:30 - 290:00 display quantity equal to in cart question mark. Then we'll add cart item dot quantity or it means else we will add the local quantity. So if this product is already in the cart then we'll display that product quantity beside of this add to cart button. So after that let's add const category label equal to the product dot category dot replace and in this one let's add / dash / g comma This empty space we have added one space. So it will replace this dash with this a space from the category. After that here we have the return. So in this return let's add the minimum height. So we'll add the min height. It will be a screen for this product page. After that, let's add the another div. In this one, let me provide class name and provide the maximum width MX auto and some padding. Then we have to add the breadcrumbs. As you can see in this Figma design here, we have the breadcrumbs that display the home icon, then products, then category, and then product name. So it will be displayed in breadcrumbs. So just come back and here we will add the comment called breadcrumbs and use the nav tag and in this nav tag just add some classes and then within this nav first we'll add the link tag so that it will be clickable. Import the link from react router DOM. Let's see the link is imported or not. So you can see the link tag has been imported. And uh after that in this link we'll add the two property and in this
Segment 142: 287:30 - 290:00 two let's add slash.
Segment 143: 290:00 - 292:30 Then we'll add some classes in this link. So we have added the hover effect. When we hover it, it will change the color and some transition of color. Then we have to add the home icon. So just add home icon from Lucid React. And for this home icon we will set this size four. Then we have to add forward slash. So simply add the span tag and provide this forward slash. After that we have to add another link. Let's copy and paste it here. In this one we have to add the path / products. Then we have to add the same classes here. And after that in this one we have to add the text called products like this. Again we have to add this span with forward slash. After that we have to add the product category. So let's copy this link again. Paste it here. In this one we have the two property. So let's add curly braces back/ products. Then we'll add search query. So just add question mark. Then category equal to dollar sign curly braces and include the product dot category. After that let's add the classes here. So we have added the capitalize right after that here we have to add the category label. So let's add curly braces category label in this link. Again we have to add a span here. So after this link we have added this span for forward slash and then we'll add the product name in another aspan. So just add the span tag and this product dot name. Now in this product name let's provide the classes and uh provide these classes for text color font truncate and maximum width. Let's save the changes and come back here and open our file. This is the Figma design, right? Let's open our page that we are creating and click on any
Segment 144: 290:00 - 292:30 product. So, I'll click on the first
Segment 145: 292:30 - 295:00 one. So, you can see here we have the product detail page. As you can see the URL, we have the path/ products and then ID that is the product ID. And here we have the breadcrumbs where we have the home icon products bakery and we have this product name. Right after that we have to add a back button. Let me see this UI design. You can see here we have this back button. Correct. To create it, let me just come back to the VS code. After this nav tag, let's add this comment for back button and provide a button tag. Now in this button tag, we'll add the back arrow. So let's add arrow left icon and import this icon from lucid react. And then we have to add the size. So the size will be four. And then we have to add the text also. So the text is back. Now let's add some classes also in this btn tag or button tag. Then we'll add the on click property. So let's add on click. And in this on click just add the add a function and call the navigate function provide minus one save the changes. So here you can see we have this back button. Let me click on this back button. So we are back to our deals page. Let's click on this product. So we are on the product detail page. Next we have to display the product details section as you can see here. So this is the product details section where we have to display the product image and other data. So let's come back to the VS code and uh after this button let's add comment that is product details section. After this product details section we have to create other sections also. So let me add the comment for that one. If I see the UI design, you can see here we have the product details. Then we have the customer reviews, right? So I'll
Segment 146: 292:30 - 295:00 come back here and add another comment that is customer reviews. After that you can see the next
Segment 147: 295:00 - 297:30 layout that is the related products, right? So I'll add the comment for this one also. So just come back and here we'll add related products. Now let's add the content here in the product details. So in this product details section create a div. In this div we'll add the white background. So here we'll add these classes. We have added the border rounded and overflow hidden. Now here we'll add the content in two column. In the left side we have to add the image and in the right side we will add the details. So let's add a div and provide the grid layout to align our contents side by side. So in this grid we will add two column. So just add the comment that is left side image and in the right side we have to add the details. So just add the comment right side details. So let's come here in the left side. In the left side add a div. In this one we have to add our product image right. So we will add the class name here provide these classes. We have added the relative because we have to add one badge also. As you can see here we have the badge. So we'll set the position absolute for this badge. So in the parent we have added relative. So in this div let's let's add img in this image src. Simply add the product dot image. Then we'll add the alt property. It will be product dot name. Here we'll add some classes also. So simply add the class name property. And here we have added these classes in this image. Now after that let me save the changes and come back here on our web page. So let me refresh this. You can see here we have the product image in the left side. Over this image we have to create a badge. So just come back to the VS code and uh after this image just add the comment
Segment 148: 295:00 - 297:30 badge and let's add a div. In this one we'll add some classes to set its
Segment 149: 297:30 - 300:00 position. So we have added the absolute top left five. After that we'll add the curly braces. In this curly braces we'll add product dot is organic. So when the product is organic then we have to add one span tag here. In this span tag we'll add the text called organic and with that we'll add one icon also. So let's add leaf icon and import the icon from Lucid React. Close this tag. And here we'll set the width and height three. After that just add the classes in this span. So we have provided these classes. Right now we'll add another badge that is for the discount. So we'll add another curly braces here. In this one we will use the product dot discount if it is greater than zero then and add this parenthesis and here we'll add the aspan tag again. So I'll just copy this one paste it here. Now in this aspan tag we will update the classes like this and after that remove this icon and here we'll add curly braces. In this one just add the product dot discount. After that here we'll add the percent and off. remove this organic. Let's save the changes and open the web page. So here you can see it should display that badge but it is here. Let me fix the position. I'll come back here. So here we have this div which should place it inside this div. So we'll add this space here and uh let's just move this entire div of badge here just after this image. Now it is correct. Save the changes. And you can see here we have this badge 10%
Segment 150: 300:00 - 302:30 off. If I go to other products here you can see we have this badge organic and 7% off. So we have two badges. Let's come back come to the first product. Now we have to display the details in the right side. So I'll come back here in the VS code. Here we have this comment right side details. So just add a div. In this div we will provide the classes for padding and we will add the flex layout justify center flex column. Then we'll add the aspan tag. In this aspan tag we'll add the category label and we'll add the product name. So let's add span curly braces provide the category label. Then we'll add the product name in H1. So simply add curly braces product dot name. Let's save the changes. Come back here. So you can see here we have the category and product name as shown in this UI design. Let's add the classes also. So in this a span tag we'll add class name and provide these classes. After that in the title provide class name and provide these classes. So we have the category and title. After that let's see the preview. You can see here we have the category and this product title or product name. Then we have to display the rating. To display the rating, I'll come back here and just after this H1, we will add the comment called ratings or rating and add the product dot rating. If it is greater than zero then only we will add this div. Now in this one we have to add the flex layout using these flex classes. Then we will add another div.
Segment 151: 302:30 - 305:00 So in this first div we have to add the star icon. After that, let's add a span tag. In this span tag, we'll add the actual rating, right? So, simply add curly braces and provide product dot rating. Here, we'll add stars. And after that, we'll add another span tag. In this one, we'll add this bracket. And uh after that we will add product dot review count total number of reviews. And here we'll add the text called reviews. If I save the changes and come back here you can see here we have the stars then 4.5 and 12 reviews. Next we'll add the classes here. So just come back and uh in the first div that contains the stars we'll add the classes like this. After that here we have the span tag. So in this one we have to set the font a small. So we'll add the text small and font medium. After that we'll add the classes in the next one. So in the next span we'll add the text small text color light that is the custom color. You can see the updated color for this 12 reviews and 4.5. Now let's place the star icons here in this div. So in this div remove this text and provide curly braces array. In this array we'll add 1 to 5. Then we will add dot map. In this map we'll add the arrow function. Here we will add star. And uh after that let's add this parenthesis and provide the opening arrow a start icon from Lucid React. Close this tag. Now here we'll add the key property. So the key property will be our star. Then we have to add the
Segment 152: 305:00 - 307:30 classes here. So simply add the class name property and provide curly braces and back text to insert the dynamic classes. So here we'll add the width and height. Correct. After that we'll add dollar sign curly braces. Use the star. If the start is less than equal to math dot round and the product dot rating. If it is true in this case we will add this color text app warning fill app warning else we'll add another color that is text app border. Let's save the changes and come back here. So you can see here we have these star icons. If I come to another product here also we have the star icons. So let's see the other product. So in all products we have 4.5 that's why it is displaying all starts in yellow color right let's come back and open the first product only and after that let's see what we have to add. So we have to add this text like price and after this price we have to add the description then a stock and this button correct. So I'll come back here in this one we have added this curly braces for ratings. So after that we'll add the price. So simply add the comment price. Add a div. In this div we'll add the span tag. In this span just add the currency. After this currency we'll add curly braces. Use the product dot price to fixed two. So this will the product price in the span tag. Now after that here let's add curly braces and use the product dot original
Segment 153: 307:30 - 310:00 price is greater than product dot price. In this case just add and operator parenthesis and provide another span and here we are going to display the original price also. So simply copy this paste it here and here we are going to replace this price with original price. So let me add the space so that you can see clearly we have the price and here we have the original price if the original price is greater than the current price. Now we'll add the classes. So in this second span provide the class name and provide text large text app text light and line through. So it will be crossed or line through. Then in the first one we will add the class name and provide the text 3 XL and here we have added the color green. Save the changes and let's add the classes in the parent div to align these prices. So we have added these classes. Let's come back to the preview. So here you can see we have current price and original price and the original price have line through and it is in a small size and here we have the large size. Right? Now after that we have to display the description. Correct. So just come back to the VS code and after closing of this div we will add description and add the description in P tag. So simply add product dot description. For this description we'll add some classes also. So simply add the class name and provide these classes. Now after this description we have to display the stocks also. So here we'll add comment a stock and create a div. Now in this one we'll add the margin from the bottom and then we have to check the stock. So just add product dot a stock is greater than zero. If it is true in this case just add this parenthesis. Else we'll add another parenthesis. So in the first one
Segment 154: 310:00 - 312:30 add the span tag and let's add the span tag in the second one also. So in the first one let's add the text like this in a stock and we'll provide the product dot a stock available and if it is out of a stock in the second span we'll add the text out of a stock. Next we have to provide the classes also. So in the first one just add these classes and in the second one add these classes. Save the changes and come back here. So you can see here we have in stock 100 available. After that we have to display the quantity and update quantity option and with that we'll also add the button to add the product in cart. So just come back and uh after closing of this div for the stock we'll add the comment that is quantity plus add to cart and create a div. In this one we'll add the flex layout and text center and provide some gap. Now here we have to add a div that contains our quantity details and we'll add a button that will be add to cart button. Right? Let me add the comment also. Here we'll write quantity and here we'll add add to cart. Right? Now in this quantity we have to display the plus and minus button and actual quantity. So simply add the class name to align it side by side. So just add these classes. And after that let's add the button tag. In this first button we'll add the minus icon. So just add the minus icon from Lucid React and provide the width and height four for this icon. And then we'll add some classes also. So here we'll add class name property and uh provide these classes. Correct? Now after that here we have to
Segment 155: 310:00 - 312:30 add the actual quantity in the span tag. So in the span tag just add display quantity.
Segment 156: 312:30 - 315:00 Then we'll add the button again. So copy this button paste it here. Here we'll update the button. It will be plus icon from lucid react and the height and width will be same and uh after that this classes will be same. If I come back to the web page you can see here we have minus and plus button. Let me just come back and in this span we'll add some classes. So just add these classes here. And now if I come back here, we have some space also as shown in this UI design. Now we have to add the add toart button. So let me just come back and uh let's come here in this button tag. Here we have to add the button text. For that let's add curly braces and we will use in cart variable. If it is true in this case this product is already available in the cart right. So just add the comment or button text added to cart and if it is false in this case just add the button text add to cart. Now we have to add one icon also. So let's add the opening arrow and stopping cut icon and import this icon from Lucid React. For this icon we will set the width and height four. Save the changes. Come back here. So you can see here we have this icon and add to cart button or we have the add it to cart because this product is already available in the cart. Let's see this cart. You can see here we have this product. Let's increase the quantity here. And after that, you can see the quantity is also updated here. Next, let's add the classes for this button. So, come back here and in this button, we'll add the class name property. Now, in this class name, we'll add the dynamic classes. So simply add curly braces back text and uh provide these fixed classes
Segment 157: 315:00 - 317:30 and after that here we'll add dollar sign curly braces we will use in cart. So if it is available in the cart in this case we'll add question mark and provide these classes and if it is false in this case we'll add else statement and in this else statement we will add other classes like this. Save the changes. Now you can see this button is looking good. add to cart I mean add it to cart right and if I remove this from here here we have the add to cart and if it is added then it will display added to cart but we have to add the on click also so let's come back and in this button we'll add the other properties like disabled so this button will be disabled when the product dot stock is equal to zero. So it will be disabled. Right? And after that here we'll add on click property. In this on click we'll add the arrow function and here we'll add the if statement if not in cart. In this case, just add add to cart. Call this add to cart function and provide the product and we'll provide the local quantity. That's it. And uh after that we'll add the on click in this plus and minus buttons. So when we click here it should increase and decrease the quantity. For that we have to create the functions right. So just scroll up and uh here before this return let's create the function handle minus equal to add a function. Here we'll add if in cart is true. In this case, we will add the if statement. If cart item dot quantity is greater than 1,
Segment 158: 317:30 - 320:00 then we'll add update quantity. And in this update quantity provide the product dot id, comma, and cart items dot quantity minus one. So it will reduce the quantity by one. Then we'll add the else statement. So in this else statement simply add remove from cart and provide product dot ID. That's it. It means when the quantity is greater than one, it will decrease it by one. And if the quantity is one, it will simply remove this product from cart when we click on minus. After that here we'll add the else statement again when it is not in the cart. So in this case let's add set local quantity. In this set local quantity we will add math dot max one and provide the local quantity minus one. Save the changes. Now let's add the other function. So just duplicate it and add the function name handle plus. Clear this function. And in this one let's add if statement again if in cart. So if the product is available in the cart in this case we'll add update quantity and uh provide this paste it here. We'll add product dot id, cart items dot quantity + one. Then we'll add the else statement. In this else statement, we'll use set local quantity. In this set local quantity, just add local quantity + one. That's it. Save the changes. Now, let's link these functions with our minus and plus button. So, here we have the buttons.
Segment 159: 320:00 - 322:30 So this is the minus icon. So in this button we'll add on click property and in this on click simply insert our function that we have just created that is handle minus. Now in this second button we have the plus icon. So just add on click property and provide handle plus. Save the changes and let's come here. So you can see if I click on this plus icon it is increasing the quantity. If I click on minus it is decreasing the quantity right let's click on add to cart. So it will be added in the cart right here. And after that if I increase it it is increasing the value here like we can increase five and see the card details. So here also you can see five. So it is added in the cart. Now we cannot click here. It is already added. Let's reduce it. If I reduce by one and if I reduce it further then it will be removed from the cart. You can see it is removed. And here we have the add to cart button. So this feature is working fine. After that we have to display the customer reviews as you can see here. So we'll display the dummy reviews. So simply come back to the VS code. Scroll down and here we have the comment customer reviews. So let's add curly braces. Provide product dot review count. If it is greater than zero then operator and here we will add dummy review section. Import it from assets. And in this one just add the product and product. That's it. And after that here we have the related products. Right? So in this related products comment we'll add curly braces and simply provide related products. If it is greater than zero then we'll add and operator and parenthesis and provide the section.
Segment 160: 320:00 - 322:30 In this section tag we have to add the
Segment 161: 322:30 - 325:00 margin. So add the classes here. After that here in this section we will add a div. In this div we will add the title like related products and in the right side we will add more from and we'll add the category name. After that we'll add the link that will display all products using view all. Right? So we have to add it in a div. And uh after that we'll add another div that will display the product list. Correct? So in the second one let's add the grid layout. Just add the classes and provide the grid layout. And after that let's mount the products here. So simply add curly braces related products dot slice. And here we'll use 0 comma 5 to display the five products only. Then we will use the map method. In this map method add the arrow function and get the related product here. And after that just add this parenthesis. In this one mount our product card. So here we have product card imported from the components and in this one provide the key property. So the key will be related product dot id and then we'll add the props that is product and the product is related product. Right? If I save the changes and open our web page. So here you can see we have the dummy reviews and then we have the deleted products here. But we have to add the title and this link to view all products. So just come back and in this first div let's add some classes. So just add the class name property provide these classes and then just add a div here. Provide the text in S2. So the text is related products. After that we'll add the text inp tag. Here we'll add the text called more from and category label. Right? And after that here we'll add the link tag. Import the link. And in this link tag we'll add the text called view all.
Segment 162: 325:00 - 327:30 And after this view all we have to add the icon. So let's add arrow write icon and import this icon from Lucid React. And for this icon we'll set the size four. After adding it, simply save the changes. But here we will add the two property also. In this two property, let's add back text/ products question mark category equal to dollar sign curly braces product category. Let's save the changes and come back here. So you can see here we have this related products, more from bakery and view all. Let me just come back and uh here we'll add the classes for the title. So we will add text to XL font semi bold and color. Then we'll add the classes in the second one. So in this P tag we'll add these classes. Now let's add some classes in the link tag also. So in this link tag we will add the class name property and provided these classes. Let's save the changes and come back here. So you can see this section is also looking good. Related products, more from bakery and view all. So now we have completed our product details page. Let me preview other products. I'll come back here. Open this one. Here you can see we have the next product. Let's go to previous page. Open any other product. Right. So this product detail page is looking good. We have completed our product details page. After completing the product details page, let's see the UI design. So next we have to create the my orders page. In this my orders you can see we have to add this title that will display the title called my orders. Then we will display the tabs like all orders placed orders out for delivery or delivered. So we'll display this tabs. After that we'll display the list of orders in a
Segment 163: 325:00 - 327:30 card. So in this card we have three row. In the first row, we have added the ID, date and status. In the second row, we
Segment 164: 327:30 - 330:00 have thumbnails of the product image. Then we have the third row that display the total items and total price. So to create it, let's just come back to the VS code. We will open the sidebar. In this one, we have pages folder. In this pages folder we have my orders.tsx file. Now in this one we have to display the price right. So first we'll get the currency here. So before this return let's add con currency equal to import dot meta.env and provide the invarant variable name v currency symbol. And if it is not available then we'll add this or dollar symbol. Now let's add the a state where we will store the orders data. So just add con orders and setter function is set orders equal to use state and initialize it using empty array. And here we have to add the type in angle bracket provide order interface from types folder. You can see it has been imported from types folder. Now here we'll add the empty array. After that we'll add the next estate. So let's duplicate it. We will add the loading set loading and uh remove this type and simply initialize it using true. Now duplicate it. Here we'll add active tab and set function set active tab and here we'll add use a state all. So initialize it using a string all. Let's duplicate it. Here we will add search patterns and set search patterns equal to use search patterns. In this use search patterns we'll add nothing. Simply call it use search params and here we have this use search params imported from react router dum. After that we'll add all the tabs list.
Segment 165: 327:30 - 330:00 So just add con tabs equal to array and
Segment 166: 330:00 - 332:30 let's add all the elements like all placed out for delivery and delivered. After that let's add the data from use cart. So just add constly braces and from context we will get clear cart function and uh to get it simply call this use cart. Use cart has been imported from the context file. Right now we have to fetch the order data. So create a function called fetch orders and it will be a sync arrow function. In this function just use set orders. In this set orders just add the dummy data that is dummy dashboard orders data as any. After that here we'll use set loading and make it false. Then we'll add the use effect. In this use effect, add the add function. And then we'll add the dependency array here. So in this dependency array, just add active tab. Let's add the if statement again. In this if statement, we'll add search params dot get. Then we'll add clear cut. So in this case we'll add the clearcut function. After that we'll use set search params empty object. After this set search parents, we have to call our fetch orders function. We will call it in set timeout. So just add set timeout. Add the add a function here and provide the time 2,000 milliseconds. And here simply call the fetch orders. Right? Then we'll add the else statement here. In this else statement, simply call the fetch orders. That's it. Now we have the order data
Segment 167: 332:30 - 335:00 that we can display on screen. So in this return we have a div. So in this div let's add the minimum height and we'll add the background color and margin. After that we'll add another div where it will add the maximum width where we have to display the content. After that in this one we have to add one page title right. So we will add the title in H1 tag. So the title is my orders and after that we have to increase the size and font. So simply add class name property and provide these tele classes. Now we have to display the tabs here. So just add the comment tabs, right? And after this tabs will display the orders list. So let's add the orders list. Correct? And uh after that let's add the content in the tabs. To display the tabs we'll add a div. And here we'll add the flex layout to align all the tabs side by side. Now here we will add curly braces. Tabs array dot map method. Create the arrow function and use individual tab in the parameter. Then use the parenthesis and return the button tag. Now in this button tag we will add curly braces. Use this tab equal to all. If it is true then we'll add the text called all orders. Else we'll add the text that is simply this tab. After that we have to add the key property in this button. So in this key property provide our tab. Then we have to provide the on click. So in this on click let's add the add function and simply use set active tab and provide the tab. After that we'll add the classes also. So add the class name property and provide the curly braces back text. In this one we will add the dynamic classes. So here
Segment 168: 335:00 - 337:30 we have added these fixed classes and after that we have added the template lit and added active tab equal to tab. Then we'll add the green background and text white. Else we'll use the white background and light text with whole effect. Correct. Now after adding it save the changes and open our web page and here let's try to open the my orders. So I'll click here. So you can see we are on orders page where we have the title and these tabs. After that we have to display the order list. So we will display the dummy order list. So just come back to the VS code again. And uh after closing of this div here we have the comment orders list. So here only provide curly braces and in this one we will use the loading. So if the loading is true in this case we have to simply mount our loading component. So let's mount this component here. Right? And if it is false then we will add colon and provide the orders do.length. We will check the length of the order if it is zero. So if the loading is false but order length is zero. In this case, we will add a div where we have to display the message like no orders found and if we have the orders list greater than zero then we'll add another parenthesis and here we'll add another div. Let's add the question mark here. Now it is correct. So in the first one we'll add the classes and provide text center and padding Y. After that we have to add one icon here. So I'll provide opening arrow package icon from Lucid React. And uh for this icon we will add the classes. So we'll add the size 16 then text color and MX auto and margin bottom. After that we'll add the text here in S2 tag. So the text is no orders
Segment 169: 335:00 - 337:30 yet.
Segment 170: 337:30 - 340:00 For this text we'll add some classes to increase the font size and font weight. Then we'll add the description in P tag. So let's add the description that is start shopping to see your orders here. Then we'll add some classes for this description also. So we have provided these classes. Next we have to add a link. So let's add the link tag imported from react router DOM and in this link we'll add the two property. So in the two property we will add / product. So it will open the products page to shop more. Here we'll add the text called start shopping. Let's decorate this link using the Telvin classes. So add the class name property and provide these classes. Save the changes. And here it should display that when the order data is empty, we don't have any orders. But we have some orders in dummy data, right? So we will display that one. And to check the message that is no orders yet, here we'll add one more thing. You can see here we have the fetch orders. So let's just comment it. Save the changes. Come back here. Let me refresh it. You can see here we have the loading effect. Let's just come back and uh let's set the loading false. Set loading false. And after setting the loading false, you can see here we have no orders yet and start shopping to see your orders here and start shopping. And we can click here to go to products page. Right. Let me just come back and uh I'll undo the changes. Let's remove this and uncomment this one and this one. Now let's come here and add the content in the second div that will be displayed when we have the list of orders. So here we'll add some a space first. We'll add class name provide a space y4 then just
Segment 171: 337:30 - 340:00 add curly braces orders do map.
Segment 172: 340:00 - 342:30 add the arrow function in this map. Now here in this parameter we'll get the individual order. Then in this parenthesis we'll add the link tag because this will be clickable so that we can open the order tracking page. So we have added the link and we'll add the key property. So in this key property we'll add this order dot id. Then we will add two property. In this two property just add the back tick. Provide the path / orders/ dollar sign curly braces and provide the order id that is order dot ID. So it will open the tracking page. Next we'll add the classes also. So provide the class name property and provide these classes. So here we have added a link that will be clickable to open the order tracking page. Now here we have to add the first row that display the order ID, date and a status. So just add the comment order ID, date and a status. After that we'll add the second row that will display the items thumbnails and after that we'll display the third row that display the total items and total price. So let's add the content one by one. So for the first one create a div and we'll add the flex layout because we have to display the order id and date in the left side and in the right side we'll add the a status right. So just add the comment left and right. Now in the left side add a div. In the right side also we'll add a div. So in the left div tag in this p we'll add the text called order then hash and after that we have to insert the order number. So use the curly braces then order dot
Segment 173: 342:30 - 345:00 id and uh after that we'll add dot slice minus 8. Then we'll add dot two uppercase. After that here we have to add a div where we will display the icon and date. So to display the icon just add calendar icon from Lucid React and after this icon we have to add the date in a span tag right. So to display the date just add curly braces new date in this new date add the order dot created at dot to local date string. In this one we'll add en us first parameter then comma provide object where we'll add month then we'll add comma day numeric year numeric. So it will display the formatted date and after that in this span we have to add some classes. So just add the class name properties like this. Next we'll add some classes in the icon also. So in this icon we'll add the class name property and provide these classes. So it will be displayed below the order ID. And for this order id we have to add some classes. So in this P tag we'll add class name and provide text a small font medium and text color. Now in this div we'll add some classes that contains the icon and date. So in this div we'll add the flex layout so that it will be aligned side by side. So just added the flex item center gap two and margin top one. Let's save the
Segment 174: 345:00 - 347:30 changes and come back here. You can see here we have two cards in the first or second one. You can see we have the order ID, icon and date. So this date structure is looking good like April 6, 2026. Now we'll add the data in the right side that will display the order status. Right? So just come back here we have the comment. Right? So in this div layout like this and after that we'll add the span tag. In this aspan tag, let's add curly braces order dot a status. So we'll get the order status. And after this order status, we have to add one icon also. So let's add icon from lucid react. For this icon, we'll set the size four and provide the color. So we have added size four. And here we have the text app text light. This is the color that we have provided in the index dot CSS file which is the custom color code. And after that let's add the classes in this aspan tag also. So in this aspan tag provide the class name. And here we have to add the dynamic classes. So just add the curly braces back text and provide these fixed classes and after that add the template literal. In this one just add a status colors and import the status colors from the assets. After that we'll add orders dot a status or odd. Let's provide this one background gray 100 text gray 700. Let's save the changes and uh after that let's come here. So you can see here we have delivered and out for delivery. We have different color for different status. Let's align it. So just come back here. We have added this span. In this span we have this order status. Right? So let's move this
Segment 175: 347:30 - 350:00 one out after this as span. Just cut this icon and we will paste it after this aspan. Right? Save the changes and come back here. You can see now it is looking good. After that we have to display the items images and we can display maximum four images and if user have ordered more than four product then we'll display the count after that four images like five plus items 10 plus items like that. So here we have item thumbnails. So in this one just add a div and let's use the telin classes to create the flex layout and after that just add the order dot items dot slice and we'll get four items. Then dot map method. In this map, create the arrow function and get the individual item and then get the index. Then we'll add the parenthesis to return the img tag. In this image, we'll add the key property. In this key, we'll add the I. Now, in this src, let's add the item dot image. After that in this alt we'll add the item dot name. After that we'll add some classes. So just add the class name property. And here we will set the size for different screen. We have added the rounded then object cover border and this border color. Save the changes. After adding it if I come back you can see it should display the image here. Yeah, it's available. We have two products right now. Let me just come back and after that we will add the curly braces here. After adding these images, we'll add curly braces and we'll check the order length. So just add order dot items.length is greater than four. Here we are displaying the four images. And suppose the user has ordered more
Segment 176: 350:00 - 352:30 than four product then we'll display four images and after that we'll display message like plus five items plus 10 items. For that we'll add a div here. In this one, just add plus curly braces order dot items dot length minus 4. So it will display the remaining count. Let's add the classes. So here we'll add the class name property and provided these classes. Save the changes. So here we have only two products. So we can't see that message. Now let's add the third row that will display the total number of items and price. So just come here. After this command we'll add a div. In this div we'll add the TIN classes to create the flex layout and then we'll add the span tag for the left side. In the left side we have to provide the total number of items. So just add order dot items do.tlength and then we'll add the text called items. So it will be displayed like 10 items, five items. Now in the right side we have to display the price. So just add another span. Here we have to add the currency. So use this currency then curly braces order dot total dot to fixed two. Now we'll add the classes for the second one and add the classes in the first one. After adding it, let's save the changes and open our web page. So here you can see we have this text called two items and here we have the total price right. So we have completed our my orders page also where we can see the order ID, order date, status, product images, total number of items and price. After completing my orders page, let me
Segment 177: 352:30 - 355:00 click on the order card. If I click on the first one, you can see it will open a new route. So this is the order tracking page where we can see the status of the order. We can see the live tracking. We can see the map and we'll also see the rider details. And to create this one, let me see the UI design first. So we will come back to the Figma file. In this design you can see we have to add one back arrow button. Then we'll add the order ID, date and a status. Then we have to divide the content in two part. In the left side we will add the location map. Then timeline and after that we'll add the delivery partner detail. And in the right side we will display the order details like address and order items to create this one. Let's just come back to the VS code. We will open sidebar pages. And in this one you will find order tracking dot tsx file. Now in this file first we need the order data. Right? So we need to find the individual order. Right? So here let's add con id equal to use params. So use params has been imported and here we'll get the id that will be the order id and using this order id we have to find the detail of individual order. After that let's add other data here we'll add con. navigate equal to use navigate. Use navigate has been imported. After that we'll add the state where we will store the order details. So we will add con order and set order equal to user state. Import the user state and initialize it using null. Then we'll add the type here in the angle bracket. Just add order interface from the types folder.
Segment 178: 355:00 - 357:30 So it has been imported from the types folder. Then we'll add or null. Now after that we'll add the next state. So I'll duplicate it. We'll add loading and set loading. and let's initialize it using true. So by default the loading will be true until we fetch the order details. After that we'll add next state. So I'll copy this one paste it here. Here we'll add live location and setter function is set live location equal to use state and initialize it using null. And here we have to add the type. So in this type we will add one object and provide the latitude it will be number then we'll add semicolon longitude and it is also number. So this object contains two properties latitude and longitude and uh after that we have to create a function that will get executed and fetch the order details. So let's add the use effect. In this use effect add the add function. Then we will add the dependency array. In this dependency add provide the id and we'll also provide the navigate. Now in this function just use the set order and in this set order let me provide the dummy data. So let's add dummy dashboard orders data import it from the assets. Then we'll add dot find method. And in this find method add the arrow function. Provide the individual order here in the parameter. And then we'll add this order dot ID equal to id as any. Then we will use set loading
Segment 179: 357:30 - 360:00 and make it false because now we have the order details. So we can set the loading false. Now let's come here. Before this return we will add if statement if loading is true. In this case let's add return and we will provide the loading component. So we'll mount the loading component here. Import the loading component. Now we will add if statement if not of order. So if the loading is false and we don't have the order data then return null. Now suppose the order data is available then we will come here in this return. Here we have the div. So in this div let's add the minimum height and background color. Then we will add another div here. For this div, let me set the maximum width where we have to place the content and some padding. Now in this one, we have to add one header that includes the back button. So just add the comment header and provide a button tag. In this button tag, simply add the back arrow. So we'll add this arrow left icon from Lucid React. Now in this icon we will set the size four and after this size we will add the back to orders that is the text. Next we have to provide some classes in this button. So in this button we will add these classes and after that we will add on click property. In this onclick property let me provide navigate and provide the path that is /ders. So when we click on this button it will take you back to the orders page. Right now after that we have to add a div that contains the order id, date and a status. So just after this button let's add a comment and in this one create a div.
Segment 180: 360:00 - 362:30 And uh in this div we will use the flex layout because we'll display the order id and date in the left side and in the right side we'll display the status. So just add a div for the left side and then we will add the span for right side. So in this div we will add the name in h1. We will not add the name we will add the order id. So in this H1 just add order hash. After this hash we have to insert the order id. So let's add order dot id. Then we'll add dot slice minus 8. Then dot two uppercase. Here we are getting the warning in this order because it could be null also. So here we'll add not null using this exclamation. Now after that let's add the other text in P tag. So in this P tag we have to display the date right? So just add placed on and then create new date using the order not null dot created at then dot to local data string and after that just add US comma provide object with month day year. Now we'll add some classes for the order ID in H1. So we have added the classes in the H1. Then we'll add some classes in this date also. So in this P we have added these classes. Let's save the changes. open our web page. So you can see here we have back to orders button then order ID and date. Then in the right side we have to display the status. So just come back again and in this aspan tag let's provide
Segment 181: 362:30 - 365:00 order exclamation dot a status. Now we'll add some classes here. So we'll add the dynamic classes. So just add the class name property and then curly braces back tick. In this back tick let's provide these a static class and after that let's add the classes based on the a status. So just add dollar sign curly braces and use order dot a status is equal to delivered. If it is true then we have to add these Telvin classes. Else let's check the a status again. We will add order dot a status equal to cancelled. So in this case add question mark and provide these classes then else provide other tin classes like this. Now here also we'll add the exclamation and here also after this order order not null. Save the changes and come back here. So you can see here we have the status delivered in the right side. Now after that let's see the UI design. So in this one you can see we have to divide the content in two column left and right. So just come back to the VS code. After this div here let's add div. In this div we will add the grid layout to align the content side by side. So just add the class name and provide grid classes. After that in the left side we have to display the live tracking map and timeline. So let's add the comment here that is timeline plus map area. And here let's add a div. Correct. Now after that in the right
Segment 182: 362:30 - 365:00 side we have to display the order details. So just add the comment here
Segment 183: 365:00 - 367:30 order details sidebar or let me update this comment. So here we'll add right side order details and left side timeline plus map area. So let's add the content in the left side. So in the left side just add the class name and provide these telin classes. After that, first we have to display a card that will display the OTP if the order is out for delivery. Right? For that, we are going to use a component. So, if I come back to the desktop and open the assets folder. So, in the assets folder, you will find the components folder. In this components folder, you will find the order tracking folder. So here we have all the components that we will use on the order tracking page. So just copy this order tracking folder from here. Then open our project folder then client then src and uh components in this components just paste this folder that is order tracking and here we have three components that is live map order OTP and order timeline. After that just come back here and we will mount that component here. So let's add opening arrow order OTP. You can see we are getting the suggestion to import it from the components folder/order tracking. Let's click here and close this tag. Let's scroll up. You can see the order OTP component has been imported from components folder. Order tagging/ order OTP. Now here we have to provide the props. So in the props just add the order like this. After that let's save the changes and open our web page. So here you can see we have this delivery OTP when the order is out for delivery. Let me come back to the previous one. Here you can see the order is delivered. If I open this one, we don't have that OTP.
Segment 184: 365:00 - 367:30 And if I go to second order where the status is out for delivery, we can see the OTP right now. Let's come back and
Segment 185: 367:30 - 370:00 uh see the UI design. So next we have to display the location map or live tracking. So just come back here in the VS code and after that we will mount another component. So first we'll add the comment that is live tracking map. So here also let's add opening arrow live map and import it from components. Now here we'll add the props that is order and provide this order. Then we will add live location and provide this live location. Save the changes and come back here. So here you can see we have this location map. So we can see the live location when the order is out for delivery. If I go to previous order, so if it is delivered, we don't have that map. So if I come here in the out for delivery, we can see the live tracking. After that, we have to display the order timeline. So just come back and add the comment here that is progress timeline and then we'll add order timeline component and uh provide the props. So the props is order. Save the changes. Come back here. So you can see here we have this order timeline when this order was placed. then confirmed, assigned, packed and out for delivery. Let's go to the previous order. In this one, you can see we have the timeline only with placed, confirmed, assigned, packed, out for delivery and delivered with the date also. So, this tracking is available on this order tracking page. After that, we have to display the order details in the right side. And before that, let me display one more thing in the left side. that will be the delivery partner detail. So just come back to the VS code and uh after this order timeline let's add the comment that is delivery person. So just add curly braces. We'll add the order dot delivery partner and
Segment 186: 367:30 - 370:00 order dot a status
Segment 187: 370:00 - 372:30 not equal to delivered and order dot a status not equal to cancelled. If it is true then we'll add this parenthesis and provide this div. Now within this div we have to provide some classes. So let's add these tin classes to set the background white border radius and uh flex item center justify between. Then in the writer or delivery person details we have to display one icon and after that we'll display the user's name. So just add a div and uh here let's add the flex classes. So just add the class name provide these flex classes. So it will align the icon and text side by side. Next we'll add the icon in a div. So in this div we will use the aspan tag and in this aspan tag we will use the classes. So let's add text white font semibold and text SM. Now in this span let's add order dot delivery partner dot name dot CAD at. So it will use the first character of the name car zero. Right now after that let's add the classes in a div that contains this span. So we have added these classes. Now after that let's come here after this icon we will add another div where we have to add the rider's name in the P tag. So in this P tag let's just copy this paste it here and provide order. Delivery partner.name. name that will display the full name. After that we will add another P tag. In this P tag we'll add curly braces order dot delivery partner dot vehicle type then dot and provide delivery partner. Next we have to add some classes. So in this second P we will add these classes and in the first P that will be the
Segment 188: 370:00 - 372:30 delivery partner name. We will add these
Segment 189: 372:30 - 375:00 classes. Let's save the changes and come back here. So you can see here we have the icon that contains the first character of the user's name. Then the delivery partner name and delivery partner and in the right side we'll add the link so that we can call this delivery partner. So let's come here and uh after this div that is for the left side here we'll add one a tag. So in this a tag we have to add the phone icon. So let's add phone icon from Lucid React. Import this icon and after that close this tag. In this icon we have to add the size and color using these classes. Next we'll add some classes for this one. So just add the class name property. Provide these classes and then we have to add the href. So in this HDF let's add curly braces and use black text provide teel colon that is telephone colon and provide dollar sign curly braces to use the template lit here we will add order delivery partner phone. That's it. Let's save the changes and after that we will open the web page. So here you can see we have this call icon so that we can call the delivery partner. Next we have to display the details in the right side. So we'll display the delivery address and order items. So I'll just come back to the VS code again. Here we already have this comment right side order details. So create a div. In this div we'll add some space from y. Next let's add the delivery address first. So just add the comment here that is delivery address and create one div in this div just add the background white and provide the rounded to excel and some padding. Then we have to add the title here that will be this block title. So with this title we have to add one icon. Let's add map pin icon and import this icon from Lucid React. In this icon, we'll set the size four. And
Segment 190: 372:30 - 375:00 after this icon, we have to add the title delivery address. Now, let's align these icon and title side by sides using these classes. Let's save the changes and open our web page. So, in the right side, you can see we have the white box with this icon and text called delivery
Segment 191: 375:00 - 377:30 address. Below that, we have to display the entire address. So, just come back and after this title in H3, we will use the P tag. In this P tag just add curly braces and provide the order dot shipping address then dot label. After that we have to add the line break using this BR and then we will add order dot shipping address dot address. Then again add this line break. We'll add the question mark here. And after that just add the same thing order dot shipping address dot city. Then we will add comma. Copy and paste it here. After this city we have to add state. Then we'll add a space here and provide the same thing. In this one just add order dotzipping address dotzip. That's it. Save the changes and open the web page. So here you can see we have the entire address. Next we'll add some classes for this address. So in this p tag provide the class name property provide text small text color and leading relaxed. Now it is looking good. After that we have to display the items list in the right side. So just come back. After closing of this div let's add the comment that is items and create one div. So first we have to add the title here in H3. So we'll add the S3 tag and the text will be items and in this bracket we have to provide the total number of item. So just add curly braces order dot items dot length. Right now we'll add the classes in this div. Then we'll add some classes in this title also. And after that, let's preview our web
Segment 192: 375:00 - 377:30 page. So here you can see we have items too. We have two items in this order.
Segment 193: 377:30 - 380:00 After that, let me just come back to the VS code. And after this title, we'll create one div. In this div, we'll add the space from Y. And then we will use our order data. So let's add curly braces order dot items dot map. In this map we have to add one add function provide this parenthesis and get the individual item and index number in the parameter and then we will return a div here. Now in this div we'll add the key property. So the key will be our index and then we have to add some classes here. So just add the class name property provide the flex item center and gap three. Next we have to add the item image. Right? So we will use the img tag in this src. Simply add curly braces this item dot image property. Then we'll add the alter tag. It will be item dot name property. After that we'll add the classes also for this image. We will set the size and uh rounded and object cover. Let's save the changes. Come back here. So you can see here we have two items image. Right below that we have to display the item name and uh their quantity. So let's come back. And after this img just create one div. In this div we will use the flex layout. So create the class name provide these classes. And first we'll add one p tag. This p tag will contain the item name. So let's add the item dot name. After that just add another p tag. In this second P tag, we'll add X and then curly braces and provide the item dot quantity. Save the changes. Come back here. You can see here we have the quantity. Correct. Now we'll add the classes. If I see the UID and you can see here we have the quantity like this. So just update
Segment 194: 377:30 - 380:00 the classes here to change the appearance. So in the first P tag we'll
Segment 195: 380:00 - 382:30 add the class name and provide the text as small font medium and text color. Then we'll add the classes. In the second P here we will use the text extra small and text color. Now it is looking good. After that we have to add the price. Right? For that we have to display the currency symbol also. So just come back scroll up and here we will get the currency from our environment variable. So let's add const currency equal to import dot meta dot env dot wheat currency symbol or we will use this dollar sign if it is not available in env. After that, let's provide this currency symbol here to display the order amount. So at the bottom, we have this quantity. So after this P that contains quantity here, we have the closing div, right? So it will be displayed in the left side. In the right side, we have to display the price. So just add the aspan tag here. In this span tag, we'll add the currency. Then we'll add curly braces parenthesis this item dot price multiplied by item dot quantity dot to fixed two. Now for this aspan we will add the text small and font semib bold. Save the changes and let's open the web page. So you can see here we have the price of individual item with their quantity. Right now let's see the UI design. So in this UI design you can see we have to display the subtotal delivery fee tax and final amount that is the total cost of this order. To display that just come back here in the VS code and uh after this curly braces here we have the closing div. So just after this
Segment 196: 382:30 - 385:00 closing div we will add a div. In this one just add these classes and after that create the first div for the first data. So in this first div let's add flex and uh we'll add justify between. So the content will be aligned side by side in the left and right side. Right? There will be a space between both items. Now we'll add the span tag. In this span tag we'll add the text called subtotal. After that just add another span. Here we will use currency symbol. Then we will add curly braces order dot subtotal dot to fixed two. Now in the first one we have to set the text color. So we have added these classes. So this is the first item. Let's duplicate it. We'll add a space here and duplicate this one. So in the second one we have to add the delivery that will be delivery fee. Correct? And uh after that these classes will be same. Then here we will add turnary operator. So just add curly braces order dot delivery fee equal to zero. If it is true in this case simply provide the text called free else we will add the colon and we have to provide back text. And then let's insert this currency here. So just add dollar sign Calibrates currency and after that again add this one or just remove it. We can type dollar sign curly braces and provide order dot delivery fee dot to fixed two. After that let's see the UI design or
Segment 197: 385:00 - 387:30 preview. So you can see here we have the subtotal and we have the delivery. Then we have to display the text. Just come back and duplicate this. In this one also the classes will be same. Just replace the text. It will be tax. And after that remove this conditions. So clear it. And use this first one. Just copy and paste it here. Here we will use the currency symbol. Then order dot tax dot to fix two. Save the changes. And you can see here we have the tax amount. After that come back and duplicate this one. So in the fourth one we have to display the price. So we have to highlight it with other classes. So let's update the classes in the div. After that here let's remove this class name and use the text called total that is the total amount. After that here we will use the currency symbol. then order dot total dot to fixed. Save the changes and come back here. So you can see here we have the total amount of this order. So now we have completed this order tracking page. Let's come back to the my orders. Click on the first one. So this order is delivered. Here we have the order timeline only with this order address and order items. Let's come to the second one. So this order is out for delivery. When it is out for delivery, we will see the OTP live tracking. Then timeline and delivery partner detail. In the right side, we'll see the order address and items. So now we have completed our order tracking page. After completing the order tracking page, next we have to create the addresses page where we will display the add address form. Using that we can add a new address and we will display the added address list. Using that we can place the order on checkout page. So let's click on this drop-down and go to addresses. So this is the addresses
Segment 198: 385:00 - 387:30 route as you can see here and here we have the text called addresses. So let's create this page. Just come back to the VS code and open the sidebar pages and
Segment 199: 387:30 - 390:00 in the pages you will find addresses.tsx. Now in this one we have to store the address data in a state. So let's create that state. We will add con addresses set addresses equal to use a state and initialize it using empty array because we can store multiple addresses. Right? So here we'll add the type also. In this angle bracket we'll add address interface from the types. So you can see the address has been imported from the types folder. And here also we'll add the array. Now after that we have to add another state that will be loading. So let's add this loading state equal to use a state and initialize it using true. So by default the loading will be true and we will make it false after loading the address data. Next we have to create the state for form. So just duplicate this. We'll add so form and set function set so form. So by default the form will be hidden here. will add false. When we make it true, it will display the form. Using that, we can add a new address or edit the existing address. Let's duplicate it. Here we'll add the next estate that is editing ID and set editing ID. So when we edit the address, we have to provide the address ID. So let's add user state and by default it will be null. And then we'll add the type here. So again add type. And in the type we'll add the id. So the id will be string or null. After that let's add another state that will be form. So we'll add const form and set function set form equal to use a state. So in this form state we'll store multiple data like form label, address, city, state, zip code and is default property. So let's add one object and here we will add all the properties one by one. We'll add label. So let's
Segment 200: 390:00 - 392:30 initialize it using empty string. Then we'll add the next property. So the next property will be address empty string. Then we will add the city. After the city we will add the estate. Then we will add zip code. And then we will add is default. So is default will be false. Next we have to add a function using that we can reset the form. So here we will add con reset form equal to add a function. So when we reset the form we have to reset this form a state using the set forms. in this set forms. Let's add the same thing. Let's just copy this. Paste it here. Let me write it in the same line like this. It will also work. So when we reset the form, we will use label empty string, address empty string, then city, state, zip, and uh is default false. After that let's use set so form and make it false. Then we will use set editing ID and provide null. After that we have to add a function that will be executed when we submit the form. So let's add con handle submit equal to async add function. Now in this function we will get the event and after that let's add react import the react then dot submit event in this one just add e dot prevent default. Now after that we have to add another function that is on edit handler. Using that we can edit the existing address. So just add con on edit handler equal to add a function.
Segment 201: 392:30 - 395:00 Here we'll get the address and provide the interface that is address. Then we will use set form. In this set form just add the label. So let me just copy from here. Paste it here. So we have added the label. It will be this address dot label. Then we will add address dot address. Then city will be address dot city. then address dot state then address dot zip and after that address dot is default that's it then we will use set editing ID after this set form we will use set editing ID so let's start from here and provide this address dot id then we have to add set so form and let's make it true now in this id we are getting the warning so let's add underscore id now it is correct after that we have to get the dummy address data so just add use effect in this use effect add the arrow function And let's add the dependency array that will be empty array. Now here simply use set addresses. And in this setter function just add the dummy address data from the asset. After that we have to remove the loading effect. So let's keep the loading effect for 1 second and then we will remove it. So let's add the set time out. In this set timeout add the add a function and uh then we'll use set loading and let's make it false and provide the time that is 1,000 milliseconds. So after 1 second it will set the loading false. Now if I scroll up you can see the dummy
Segment 202: 395:00 - 397:30 address data has been imported from assets/ assets. Now we have all the data that we can display here on the addresses page. So in this div first we'll add the minimum height and background color. So we have this custom color. After that let's add another div. And in this one, let's set the maximum width where we have to display the content and add some padding. Next, we have to add the page header. That page header will contain the title and a button. So, let's add a div for this page header. And in this one, we will add some TIN classes to align the title in the left side and button in the right side. So we will add the title in H1 and then we'll add one button that will be displayed in the right side. In the button we have to add the plus icon. So let's add plus icon from Lucid React. And for this icon we'll set the size four and the button text will be add. Now let's add the title also. So in the title we will write my addresses. Now for this title we have to increase the font size, font weight and change the color using these telewind classes and after that let's update the classes in this button also. So in this button we have added these telewind classes. Now in this button tag we'll add on click property also. So just add the onclick property. add the add function. So when we click this button, it will first reset the form. So let's add reset form. Call this function then colon and then use set so form and let's make it true. So it will display the form when we click on this button. So after adding this page header save the changes and come back here. In this left side you can see we have the title my addresses and in the right side we have the button called add address with this
Segment 203: 395:00 - 397:30 plus icon. Next we have to display the form.
Segment 204: 397:30 - 400:00 Right? But before displaying that form let me display the available addresses. So just come back and uh after closing of this div let's let's add the comment that is form model using that we can display a new form to add or edit the address and after this let's add another command that is address list. We will display the address list here. Right? To display the address list just add curly braces. use the loading. So when the loading is true in this case, we will mount the loading component from the components folder. If it is false, then again we will use turnary operator that is address dot length. We will check the length is equal to zero. If it is true, it means we don't have any address in the data. So in this case, let's add a div where we'll add the message like no addresses available. Else we'll add the colon parenthesis and here we will add a div and mount the address list. So let's add the text and uh classes in this div where we don't have any address. So just add the class name and provide the text. Text will be centered and we'll add the padding from Y-axis. Then we have to add one icon here. So let's add the map pin icon and import this icon from Lucid React. In this icon, we will set the size. Then we'll add the color and margin bottom. After that we have to add the text in S2 that is no address saved. Then we will add another text that is add an address for faster checkout. Now we'll add some classes for the title that is in H2 and then we'll add some classes for this paragraph. Save the changes. So it will be displayed when we don't have the address. If I come back here, you can see we don't have that message. But if I scroll up and uh
Segment 205: 400:00 - 402:30 in this set addresses, let's provide empty array. Save the changes and come back here. So you can see here we have the loading effect and then we have this message, no addresses saved. Add an address for faster checkout. Right? And when we provide the address using this dummy addresses data, we have added the dummy addresses data. Then it will display the address list here. When we refresh the web page, you can see the loading screen. And after that, we don't have any content because we have to mount our address list. For that, we'll create a separate component. Right? So in this last div, we'll add some class name. We'll add a space y4 right and after that let's add curly braces. We will use the addresses dot map at the add function. Here we'll get individual address and after that we'll return a div like this. And in this div let me provide this address dot label. If I save the changes you can see here we have address label home and work. Right? Let's change it. We'll add address dot addresses. Save the changes. You can see here we have the address name. Correct? So instead of displaying the address like this, we'll create a beautiful component. So let's open the sidebar and in this components folder we'll create a new file and write the file name address card.tsx. In this address card dot tsx let's add rafce for creating the component structure. And after that here we'll get the data from proxs. So let's destructure the prop. We'll get the address. Then we'll get on edit handler. Then we'll get set address. So here we have added the props that is address. Then we have added the on edit handler function and set
Segment 206: 402:30 - 405:00 addresses. Right now let's define the type also. So just add the colon and here let me provide the interface that is address card props and let's define it. Here we'll add interface address card props object. Now in this one we'll add the first property address and it will be address interface. Let's import it from the types folder. Then we'll add next property that is this on edit handler. For this on edit handler, let's add the add a function return void. And in the parameter, we'll get the address again. Colon provide this address type. Now let's duplicate it. Here we'll use this set addresses. In this one we will get the addresses in props. And here also we'll add this address and array and return wide. That's it. Now after that let's come here. Before this return let's add one handler function that is handle delete. so that we can delete any individual address equal to asynchronous add function and in this one we'll add the id. ID will be a string. Now after that let's add console dot log and let's print this id for now. Now after that come here in the return in this return we'll add the div with the key property and in the key let me provide the address dot id. After that here we'll add some classes. So just add the class name property and provide the maximum width for this layout. Then we have added the background border radius and flex and justify between right now after that in this one we'll add the content in the left and right side. So just add the comment that is for left. In the left
Segment 207: 405:00 - 407:30 side we'll add the address data and in the right side we'll add the action buttons. So just add the comment for right side also that is right action buttons. Now in the left side create a div and in this div we'll add the flex and gap four. After that here we'll add the icon. So let's add one div. Within this div we'll add the icon. So just add the map pin icon. Import this icon from Lucid React. For this icon, we'll set the size and color will be app green. Now in this div, we'll add some classes so that we can set the background of this icon. So we have added these classes that wraps our icon. Now after this div, let's add another div. And in this one, we have to provide the address label and the text called default if the address is default. and then we'll display the entire address. So here let's add the first div for the address label and default and then we'll add the P tag where we'll add the entire address. So in this P tag just add curly braces address dot address then add space and provide the comma also and provide the address dot city then comma provide address dot state then comma space address dotzip. Here we'll add the line break also. So let's add the line break here after this city. Then let's come here in this first div. In this one, we will use the flex layout to align the label text and uh default side by side that is default text. So just add class name property provide these classes and here let's add the P tag. In this P just add address dot label and for this P just add these classes. Now after that here we
Segment 208: 407:30 - 410:00 will display the label that is address is default or not. So let's check it. We'll use the address dot is default. When it is true then only we have to display that badge. So just add the aspan tag here. In this aspan tag, let's add the icon. So add one check icon from Lucid React. And for this check icon, we'll set this size 2.5. And then we'll add the text also. So the text is default. After that, we'll add some classes also. So let's add class name property and provide these classes. Let's save the changes. Now after adding it, if I open the web page here still have the previous list, we will update it with our component. But before that, let's add the classes in this P also. So in this P, we have added these classes. Let's save the changes. And after that, we will mount this component. So just open the addresses tsx file and here we will mount our component that we have just created. So let's remove this div. We will add opening arrow address card and mount this card here. In this card let's add the key. So the key will be address dot id. Then we will add the address. It will be address. Let's add like this. Now it is correct. After that here we will provide the on edit handler and provide this on edit handler only. Then we'll provide the props set addresses and use the set addresses. So we have mounted our component and after that if I come back you can see we have two addresses with this map icon then text that is the label text like home and work. Here we have the default badge and we have the address also. Now in the right side we have to add the action buttons. So just come back and uh open the address card
Segment 209: 410:00 - 412:30 component. In this address card component we have added the comment for action and buttons. So below that just add a div. Now in this div we will add the flex layout using these tbin classes and create the button. So let's add the button tag. Now in this button tag we'll use the icon that is pencil icon and uh let's import this icon from Lucid React. Now in this one we'll set the size four. Correct? Now in this button we'll add some classes also. So let's add the class name properties in this button tag. Now after that in this first button we'll add the onclick property. In this onclick property add the arrow function and simply call on edit handler and provide the address in the parameter. So this is the first button. Let's duplicate it. Now in this second button, we'll add handle delete and provide the address dot id. After that here, let's update the classes. We have updated this class name. And after that, we'll update the icon also. So just use this trash icon imported from Lucid React size will be same. Save the changes and come back here. So you can see here we have two icons that is edit icon and delete icon. Right after that let's create our component. Using that we can add a new address and edit the existing address. For that, let's just come back here and open the sidebar. In this components, create a new file. So, in this components folder, create a new file with the name address form dot. DSX and then we'll add R Ace to create the comp structure. And uh after that here let's get the data from props. So restructure the props here that will be reset form. Then
Segment 210: 410:00 - 412:30 we will get the handle submit. Then we will get the form state then set
Segment 211: 412:30 - 415:00 form setter function then editing id and after that just add the colon any here we have the return statement. So in this return let's add one fragment. Now in this fragment first we have to add one overlay that will be displayed on entire screen. So let's create a div here and uh let's use the self-closing div like this. Now in this div we have to provide some classes. So just add class name property and provide fixed insert zero background black/40 and Z index 50. Now here we'll add the onclick property also. So just add the on property and simply call reset form. So when we click on this overlay, it will hide this form. Now after that let's add the command that is form container. So create one div that will be the form container and in this one we will use the position fixed. insert zero, Z index 50, flex center and padding four. Now here we'll add the form tag. So simply add the form tag. In this form tag, we'll add onsubmit property. In this onsubmit, simply add handle submit. Now in this form, we'll add some classes also. So just add the class name property. And in this class name property, let me provide the background, border radius, padding, width, and some animation. Now we have to add the form header. So I'll add the comment here that is form header. And for this form header, we'll create one div where we have to add the title in H2. And then we will add the button. In this button we'll add the cross icon. Using that we can hide this form. So let's add the title first. So to display the title we will use curly braces. Editing ID. If the editing ID is available in this case the title will be
Segment 212: 415:00 - 417:30 edit address. Else we will add the title that is add new address. Now we'll add the classes for the title. So in this title we'll add the class name property. Provide the font large. Then font weight will be semi bold. Then provide the color. After that come here in the button. So in the button we'll add the icon. So just add X icon from Lucid React. Now for this icon set the size five. Then we have to add the button type. So button type will be button. And after that let's add the on click property and simply call the reset form. Then provide the classes for the button. So in this button we'll add the padding. Then hover effect and border radius. Save the changes. Now let's add the classes in a div that contains both title and button. So provide the flex layout. Save the changes. Now let's mount this component. To mount this component we will come back to the main file that is addresses. TSX and in this addresses tsx you can see we have added a comment here form model. So here only we will use curly braces and use this. So model or so form. So if the so form is true then let's mount our address form from the components. Now provide the props here that is reset form. I think reset form is not here. Let's see it's here. Reset form function is here. So just provide it as props. So we will provide reset form. After that we will provide handle submit then provide form state then provide set form setter function then we will provide the editing id save the changes and after that let's click on this add address button so you can see here we have the title add new
Segment 213: 417:30 - 420:00 address and cross icon and if I click on this cross icon button or if we click on anywhere else except this white it will close it. It is not closing yet. So let's just come back open the form address form.tsx tsx here we have div on click that is reset form to close this model when we click anywhere else let me just come back to the vs code and you can see here we have added this overlay in this one we have this on click so just remove this on click from here and add it in this form container so in this form container we have added on click property and after that come here in the form in this form tag again add on click and use the event and create the add a function and here just add e dot a stop propagation let's save the changes and come back here now you can see if I click here it will hide it if I click on this cross it will hide it right it works fine next we have to display the input fields in this form So let's just come back to the VS code. So in this VS code you can see we have added the form header. So after this form header let's add the input fields. So just add the comment here that is form input fields and we will add it inside a div. And in this div we will add the a space from y. After that we have to add the submit button so that we can submit this form. Right? So here let's add the comment that is submit button and here we'll add a button tag. In this button we'll add the type. So the type will be submit. Now let's add the input fields in this div that we have added here for the form. So we will add a div that contains the label tag first. So in this label tag we'll add the text called label that is the address label. Now in this label tag we have to add some classes. So we will
Segment 214: 420:00 - 422:30 provide these telin classes and after that provide the input field. So just add the input type will be text. Then we will add the placeholder. So in this placeholder just add home work etc. After this placeholder let's add required. So this field will be required. Then we'll add some classes. So just add the class name property and we will add these TIN classes for this input field. Now after that in this input field let's add the value property. In this value just add the form state dot value or we will use form state dot label. After that just add the onchange. In this onchange property create the add function with the event and then let's call the set form. In this set form use the object as spread operator. Use the form state label property. We have to update this label property. So just add label colon E dot target dot value. So now we have added the first input field. If I save the changes, come back here and click on this button. You can see here we have the label input field where we can enter the address label. Just come back and duplicate this entire div. So in this second one we will add the text called a street address. Then we'll add form dot address in the value. After that here we have the onchange. So in this onchange just add address colon e.target dot value. Then we have to add the required. So required is there and uh after that here we have this placeholder. So just remove this placeholder. Save the changes. And now you can see here we have the a street address. Now let me just come back and uh we'll
Segment 215: 422:30 - 425:00 add one div and within this we will paste this div. And here we will use the grid layout so that we can align two items. Right? Now in this one let's add the label. Label will be city. Then we have to add the value. Value will be form dot city. And here we'll add city col.target dot value. It is also required. Now let's duplicate it. And here we will add a state. Then we will add form dot a state. And here a state colon e.target dot value. Save the changes. Come back here. So you can see here we have the city and a state input field. Right now just come back and uh here let's add another div. In this one also we'll use this grid like this. Next here we have to add the label and input. So just copy this input tag and label paste it here. In this one just add the label tag that is zip code. Then we will add value. It will be form do.zip. And here we'll add zip col. Now after that let's duplicate this or we have to add it inside a div. So just create a div and within this we will provide this input and uh this label. Let's add it here. Now let's duplicate it. So in this second div let's let's add flex items end and padding bottom. Then we will add the label. So remove this input from here. Simply add the label. In this label we will add a span tag. In this aspan tag we will add the text called set as default. Now for this aspan we will set the text
Segment 216: 425:00 - 427:30 size. It will be small then color. Now before this span we have to add the input. So we will add the input. In this input we'll add the type checkbox and then we'll add the checked property. So just add checked property. It will be form dot is default. Then we will use onchange. In this onchange just add the add a function. Get the event here and provide set form. In this set form add the object with spread operator. Use the form state is default property. Let's get it from here. is default colon it will be e dot target dot value. Now we will add the classes in this label tag also. So in this label tag just update these classes. Now we will save the changes and come back here. So you can see here we have this label tag and we have the checkbox like this. We can set this as default or not default. The second click is not working. So let me just come back. We will fix it. Here you can see we have this checked. It will be form dot is default and uh type is checkbox. Then we have this on change. So in this onchange we have add a function set form. Form state is default equal to e.target target dot value. So instead of E.target dot value, we will add E.target dot checked. Let's save the changes and come back again. Now if I click here, you can see we can check and uncheck this checkbox. Now we have to add one submit button. So let's just come back. And here we have this button tag. Right? So in this button tag we have added the type submit. Let's add
Segment 217: 425:00 - 427:30 the classes also. So provide the class name property and these TIN classes. And
Segment 218: 427:30 - 430:00 then we'll add the button text using the turn operator. Just add editing ID. If the editing ID is available in this case the button text will be update address. Else we'll add add or save address. Let's save the changes. Come back here. You can see here we have this save address button. Now let's close it and click on this pencil icon or edit icon. So you can see here we have edit address. We have the prefilled address data. Right? And here we have the update address button. Let's close it. Click on add address. Now we have save address. If I click on edit, we have the update address. So we have completed our addresses page where we can display the address list. Edit the address, add a new address. Right after that, we can create our checkout page. If I go to cart and click on this proceed to check out, you can see it is opening the checkout path. So this is the checkout page. We have to create this page. Now to create this checkout, we will use some components that we have already provided in the assets. So if I open the assets folder, you will find components. In this components, you will find checkout. In this checkout folder, we have checkout address, checkout payment, and checkout review. So let's just copy this entire folder called checkout and come back to the project folder. In the project folder, go to client src and components and paste it here. So in this project components we have provided this check out folder that contains three components. After that let's come back to the VS code. In this VS code open the sidebar then go to pages and open checkout.tsx file. Now in this one we will create some states and functions. So in this checkout tsx file before this return let's get the navigate function so that we can navigate to different pages. So let's add con equal to use navigate and import the use navigate
Segment 219: 427:30 - 430:00 from react router dum. Then we need the currency also. So let's add const currency equal to
Segment 220: 430:00 - 432:30 import dot meta dot env dot and environment variable name that is wheat currency symbol or we will use the dollar sign. Now let's add the state here that is a step. So just add const step and set a function set step equal to use state. In this use state let's add the initial value that is address. After that just duplicate it. Here we'll add loading state and set function is set loading and initialize it using boolean data false. By default loading will be false. Then let's add the data from cart. So let's add con items and cart total equal to use cart. So from this use cart we will get the cart items and it has been imported from context. Now after that we will get the user data also. So just add con user equal to object. It will be user property and in this user property we will add the addresses property and in this addresses property add the dummy address. So just add dummy address data from asset. Right? So we can use this dummy address for placing the order. Now after that let's add new state that is addresses or we can write con address and set function set address equal to use a state and let's initialize it using object where we will add the id. So in the id we will add empty string. So let me update it. We will use underscore id is equal to empty string. Then we'll add the label. So in the label let's add the default text home. Then we'll add the
Segment 221: 432:30 - 435:00 address, city, state and zip. These all are empty string. Then we'll add the is default. So by default it will be false. After that we'll add the latitude and longitude it will be zero. Now we'll add the type also. So after this use a state just add the angle bracket and provide the address from the types folder. So you can see address has been imported from type folder. Now after that here we'll add the next state that will be for payment method. So just add con payment method and set a function set payment method equal to use a state and let's add the initial value card. So payment method will be card. After that let's add the variable to store the delivery fee. So it will be cart total greater than 20. If it is greater than 20 then it will be free of cost. It means zero. Else we will use 1.99. After that let's add tax. So just add cost. tax equal to card total multiply by 0.08. After that we'll add the total amount. So just add con total equal to this card total plus delivery fee plus tax. So here we have the total amount. After that we'll add the steps. So just add cons equal to array. In this array just add the object where we will add the key. In this key let's add address. After this key here we'll add the label and uh in this label let's add address. After that let's add icon.
Segment 222: 435:00 - 437:30 So in this icon we will add map pin icon and let's import it from Lucid React. Right. And uh let's add comma and duplicate it. So in the second one we will add the payment. Then we'll add the label. It will be payment. And here we'll add the icon that is credit card icon from Lucid React. Now in the third one we'll add the review label will be review. Then we'll add the icon that is check icon. import this check icon from Lucid React. So we have added three steps. Now we have to add the type also right. So here after this steps we'll add colon and object and provide the key. Key will be any string. Then we will add comma or semicolon and provide label. So the label is also a string type. Then we will add icon and in this icon we will add type of and provide map pin icon and then we will add this empty array. That's it. So here we have added the steps by mistake. We have added the capital K. So let's update it. It will be small K for key. Now it is correct. Now after that let's add one handler function here. So just add con handle place order. So it will be asynchronous add function and in the function we will use the setter function set loading and let's make it true. Then we will use navigate function and provide the path that will be slash orders.
Segment 223: 437:30 - 440:00 So after placing the order user will be redirected to orders page. Right? Let's clear this parameter. So we have added this place order. After this place order, we have to populate the user's address from the user data. Let's add the comment populate address from user's default address. You can see here we have the user. In this one we have the address. So let's populate all the properties. So here let's add user state. In this user state let's add the add function. In this add function we will add if statement. If user is true then dot addresses question mark dot length. So if the user address length is available it means we have some addresses in the user data. In this case just add const and provide the default address variable equal to this user dot address is dot find method. In this find method we have to add one add a function and uh get individual address and then we will add a dot is default property. So if it is true it will be added in the default address. Right? After that we'll add or user dot addresses index zero else it will add the first address. Now after that we will use the setter function set address. In this set address add the object and provide the underscore id. Let me just copy from here paste it here. We will add underscore id. It will be the default address question mark dot id. Then we will add the label. It will be default address dot label. Then we will add address. It will be default address dot address. Then city.
Segment 224: 440:00 - 442:30 After that we will update the state then zip. After that is default then latitude and longitude. Right now after that let's see the item's length. You can see here we have the items that is cart items. So if the cart item is greater than zero right then only we have to return this div else we'll return the other messages. So here we will add if statement if items dot length is equal to zero. It means we don't have any item in the cart in this case. just add the return parenthesis and provide a div. Now in this div we'll add the minimum height and background color and flex center. Then we have to add another div where we'll add the text center and after that we'll add one title here. So just add the title in S2 that is your cart is empty. Then we have to add the small description. Add some product to check out. Then we'll add the button here. So in the button we'll add browse products. Then we'll add the onclick property on this button. So let's add on click. In this on click add the add a function and call the navigate function and provide the path. So the path will be / products. Now let's add the classes one by one for the title. Then we'll add the classes for paragraph text and after that we have to add the classes in the button also. So in this button let's add these classes. Save the changes. Now after that if I just come
Segment 225: 442:30 - 445:00 back here and let's refresh it. Still we have this text check out because we have added this in the if statement when the length is zero. So let me just come here and clear this cart items. Remove everything and after that if I open this checkout page you can see your cart is empty. Your cart is empty. Browse products. Let's update the message here. I'll just come back in this page. We have to add the text in P tag that is add some products to check out. And after that here we have to add the classes like this. Save the changes and come back here. Now you can see here we have this small message and browse products. Let's click on this. Open the product page. Add the product in the cart. Now we have the items in the cart. Let's add more products. I'll add this one. Let's come back and add another product. Now let's go to checkout. So here we have this text called checkout. Let's update this message also. I'll come back to the VS code and come here in the next return. In this return, we'll add the div. And in this div let's set the minimum height and background. After that we have to add another div where we will set the maximum width and padding. And after that here we have to add one back button. So let's add the comment called back button and create a button tag. Now in this button tag we'll add the back arrow icon. So just add arrow left icon and uh import it from lucid react. And here we will set the size four. After this icon we have to add the text called back. Now in this one we'll add the class name. And uh for this button we will use the flex classes to align the back text and icon side by side. And then we'll add
Segment 226: 442:30 - 445:00 the onclick property. In this onclick property add the arrow function
Segment 227: 445:00 - 447:30 and provide navigate and provide minus one. Then we will add H1 tag. In this H1 tag, we'll add the text called checkout. For this text, we will set the classes also to increase the font size, font weight, and text color. Let's come back here. And you can see here we have the back button and this title checkout. Now we have to display the steps here because this checkout page has three steps like adding the address and selecting the payment method and review. So let's just come back here in the VS code and after this title let's add the comment called steps and create one div. Now in this div we will add the flex layout and after that just add a steps dot map method. In this map we will add the add function and uh get the individual step and index in the parameter. After that let's add a div here. In this div we will add the key property. In this key provide the s dot key that is a step key and after that we'll add some classes here. So just add the class name and provide flex item center and gap 2. Now we have to use the button tag here. So let's add the button tag. In this button tag, we'll add the step dot icon. And for this icon, just add the size four. Then we have to add the step label. So just add s dot label. Next we have to add some classes. So the classes will be dynamic. So just add the class name property curly braces back tick and provide these classes. After that here we have to add the onclick property on this button. So just add on click and uh let's add the add a function
Segment 228: 447:30 - 450:00 call set a step and provide s dot key. After that here we'll add cy braces i is less than a step.length. So just add a steps dot length minus 1. If it is true then we will add the icon. So just import this icon from Lucid React. And for this icon let's add the size and uh color. Save the changes and open the web page. So you can see here we have three steps like address, payment and review. If I click on anyone that will get highlighted. After that let's come back to the VS code and uh after closing of this steps div, we'll create another div here. Now in this one we will use the grid layout. So we have added these classes and after that here let's add the comment that is main form and after that we'll add one more comment that is order summary sidebar. Now in this main form we will add a div and here we have to display the step forms right. So we have already created the components for this. So simply mount that component. So first we have to add the class name. We will add medium column span two. Then we'll add curly braces. Use a step equal to address. So when the step is equal to address then we have to mount the checkout address component. So just add and operator and use this checkout address component import it from the components folder. Then we'll provide the props here. So first we'll provide the props called address
Segment 229: 450:00 - 452:30 equal to address. Then we will use set address equal to set address. Then we will pass the set a step equal to this set a step then we will provide user equal to it will be user. So we have provided these props. Now after that let's duplicate it. we will add this space. Let's duplicate for one more time. So in the second one we will add the step equal to payment. Then we will use the component that is checkout payment. Import it from the components folder. And here let's provide the step equal to payment and the payment component. Then we'll add the step here. So step is there. Then we have to add the payment method. So let's add payment method and value is payment method. Then we have to use set payment method and set payment method. Then we will add a step. It will be a step. And here we will remove this user. So we have added three props in this one. Now in the next one we'll add the step equal to review and here we will mount the review component. So just add check out review and import it from the components folder. Here we have to provide the address and uh remove this set address. Provide items here. So just add items and items. After that provide the handle place order equal to handle place order. Then we have to add the loading. So let's add loading equal to loading a state. We are getting the warning here. Let's try to import it is already imported. Check out review is already imported.
Segment 230: 452:30 - 455:00 Here we have added a step equal to review. Then it will display this check out review component where we have added the address then items then handle place order and then we will add the loading and let's add one more data that is total that is cart total. Now let's save the changes and come back here on the web page. So you can see here we have the first step that is delivery address. So here we can choose different addresses. We can click on add new address. It will open the address page. If I click on this continue to payment, it will go to the second step where we can choose the payment method. Let's click on review order. It will come to the third step where we have the order review. We can see the selected address order items. Right after that we have to display the order summary in the right side. For that just come back and here we have added the comment for order summary sidebar. So create a div here. In this div we'll add the background that is white border radius sticky top and here we have added h height fit right now after that here we have to add one title in H3. So the title is order somebody. Now for this title we will set the text size. it will be small font medium and color. Then we have to add a div after this title. So create a div here and in this div we will add all the items. So we'll add some a space here and set the text size for each text. So we'll add the class name provide a space y2 and text size will be small. Now here let's add the div and provide flex layout here so that we can align the data side by side. So in the left side we'll add the span tag and provide the text called subtotal. Then we'll add bracket and use items.length items. So
Segment 231: 455:00 - 457:30 it will display the total number of items. And then we'll add the value in the right side. So again add another span and here we'll use the currency symbol. After this currency symbol let's mount the card total dot to fixed two. Let's save the changes. Come back here. You can see in the right side we have order summary and we have subtotal three items and this is the subtotal amount. Now just come back and duplicate this div. So in this one let's add span. In this span we'll add the text called delivery. Right? In this span we have to add the classes also. So in the previous one just add these classes that is the text color and in this one also we'll add the same thing here we have added delivery. Now let's add a span tag here and provide the curly braces and we will check the delivery fee. So if the delivery fee is zero in this case we will add the span tag let's just clear it and here we will use opening arrow span and close this tag. Now in this aspan tag just add free and we'll add the text color here using this class name and after that here we'll add else statement also. So just add colon and provide back text dollar sign curly braces and insert the currency then dollar sign curly braces and provide the delivery fee to fixed two. Let's save the changes. Come back here. So you can see here we have the delivery free. After that just come back and copy this one. paste it here.
Segment 232: 457:30 - 460:00 In this one, we will use tax. So the title is tax and then we will use the currency and provide the tax dot to fixed two. Save the changes. Come back here. You can see here we have the tax amount. After that we have to add the total amount. So just come back and uh duplicate it. Now in this one we will update the classes. So we have added these classes in the div. Then we have the first span. So in this aspan we will not add any class name. Simply add total. And then we have the second aspan where we will add the currency and provide the total dot to fixed two and provide the green color here. So in this aspan we'll add the class name and provide this color. Save the changes and come back here. So you can see here we have this order summary. So now we have completed our checkout page also where we can set the address payment method, review the order and after that we can place the order using this button and we have the order summary also. So now we have completed the checkout page and let's see the entire page one by one. So first we have created the homepage. Then we have created this product list page. Then we have created the deals page. After that we have created my orders. After that we have created this order tracking. Then address list page. Then we can edit the address. Add a new address. And after that we have added this cart page or popup. Then this checkout page. After that we have to add one more page that is search. If I type something in this search bar like tomato and it will open the search route. Right now you can see the text search result. So let's complete this page also. So let's just come back to the VS code. Open the sidebar. In the pages, you will find search results. TSX. In this one, let's add some states. So, just add
Segment 233: 460:00 - 462:30 con products equal to use a state. And we'll add the setter function also. Set products equal to user state. And let's initialize it using empty array. And we'll add the type here. In the angle bracket we'll add product interface imported from the types and here we'll add the empty array. Now after that we'll add the loading state also. So just add con loading and set function name is set loading equal to user state and uh let's initialize it using true. So by default the loading will be true. And after that let's get the search query from padams. So just add con search params equal to use search params and the use search params has been imported from react routerd. Now from this search params we'll find the search query. So just add con query equal to this search params dot get and provide the key name that is Q or empty string. So we have the query here. After that let's add the use effect. In this use effect, let's add the arrow function and provide the dependency array. And in the dependency array, we will provide the query. So when it is changing, it will execute this function. In this function, we'll add if statement if not of query. In this case, simply add return. Right? Now, after that, let's use set loading make it true. Then we will provide set products and in the products just add the dummy products from the assets. Then dot filter. In this filter provide the arrow function get the individual product and the type is any in the parameter. And after that
Segment 234: 460:00 - 462:30 it will return P dot name that is product name dot to lower case
Segment 235: 462:30 - 465:00 dot includes and it includes the query. So just add query dot two lower case like this. After that we will use set loading and make it false. After finding the product we will set the loading false. Now we have the product data here that we can display on this search page. So just come here in this return and in this div we will use the minimum height and background color. Then we will add another div for the padding and maximum width. So we have added these padding and maximum width for the div. After that here we have to add the breadcrumbs. So let's add the breadcrumbs comment and create the breadcrumbs here. So let's just copy from the other file. I'll just open the pages. Here we have the products. So in this products we have created the breadcrumbs. Right? So let's find it. Here we have this breadcrumbs in the nav tag. Just copy and add it here. So we have added the nav tag where you can see we have the link. Let's import the link from React Router DOM. When we click here, it will open the homepage. We have the home icon. So just import the home icon from Lucid React. Size is four. And uh after that we have this span. Then we have this another span. In this one we have the text. So just clear this text from the span and simply write search result. So we have added this breadcrumbs. After that let's open the web page. You can see when we open this search page, we have this home icon and / search results. Let's just come back. After this breadcrumbs, we'll add the header. So, we will add the comment here called header. And uh let's create a div. In this div, we'll add the margin from the bottom. That's it. And uh after that
Segment 236: 465:00 - 467:30 in this div we'll add the title in the H1 tag. So we'll add the H1 tag here and the title is search results then this quote and provide the query here. So let's add the query like this. Now for this one we will provide some classes for the title. So in this title add the text size 2 XL font semi bold and text color. Then we have to add the P tag. In this P tag we will use the loading. So when the loading is true we'll add the text called searching. And if the loading is false in this case, we'll add back text dollar sign curly braces and use the products.length. Then we'll add items found. And for this one, we have to set the a small font size. and provide the text color. Let's save the changes. Come back here. So you can see here we have one items found. Search result for tomato. Right after that we have to display the result. So let's just come back and uh after this div we will add the comment called results and create this turnary operator. Using this curly braces we'll add the loading. If the loading is true in this case, we will mount the loading component. Just import this component. Else we'll add products dotlength equal to zero. If the length is equal to zero, then add question mark parenthesis. In this one, we will add a div that will display that no product found for this query. else we'll add the colon and this parenthesis and here we'll add another div. Now in this div we will use the grid layout to align all the product card. So we have added the grid layout here and
Segment 237: 465:00 - 467:30 then just add curly braces and use the
Segment 238: 467:30 - 470:00 products dot map. Add the arrow function and get individual product here in the parameter and uh after that let's add this parenthesis and simply provide this product card component. Import this component and here we have to add the props. So first we'll add the key property. Key property will be our product dot id. And then we have to add the product. It will be product. Now after that let's come here in this previous div. In this one just add the class name and let's provide the text center and padding white 20. Then we'll add the search icon here. So let's add search from the Lucid React. import it. Then we will add the classes. So we'll set the size 16. Then color and MX auto and margin bottom. Then we'll add some text in H2 tag. So the text is no results found. Then we'll add the message in P tag. So let's add this message. And after this message, we'll add the link tag. So let's add the link tag here. And in this link tag, we'll add the text called browse all products. Now we'll add the two property. In this two property simply add slash products. Now we'll add some classes also. So here we have added these classes for the link tag. Now let's add the classes for the paragraph. So in this paragraph we have added some classes and now let's add the classes in the title also. So we'll add the classes in this H2 tag. Now we will save the changes and after that let's come back here. So you can see here we have only one result for this tomato. Now let's search anything else here. We'll write
Segment 239: 467:30 - 470:00 bread. So you can see here we have result for bread. Let's just come back and see the
Segment 240: 470:00 - 472:30 product list here. So you can see we have different products here. So let's search for anything else. Let's search for rice. So you can see here we have two results, right? You can see the message also two items found and search result for rice. So this search feature is working fine. Now we have completed all the pages for users. Next we have to create the pages for rider. It means we'll create the pages for delivery partner and we will also create the pages for admin. For that we have already provided the pages and components in the assets. If I come here in the assets folder that you will download from the video description. You will find this pages. In this pages you will find admin and delivery. Right? So just copy this admin and delivery folder from the pages and come to the project folder. In this project folder just come to src and pages and paste this two folder that is admin and delivery. We have provided these pages to save our time. Right after that let's come here and open the assets folder that you have downloaded. Then go to components. In this components you will find the delivery folder. Here we have three components for delivery. So just copy this delivery folder here and come back to the project folder. In this project go to client src components and paste this delivery folder like this. Now let's just come back and uh we will open the sidebar. In this sidebar you can see we have this components folder where you can see delivery folder. We have the components for delivery person or delivery agent. Then we have the pages. In this one we have the admin pages. Then we have the delivery partner pages. Right now let's link these pages in our route. So we will open app dot tsx file. Let's open app.tsx. In this one we have to create the new
Segment 241: 470:00 - 472:30 routes. So in this one
Segment 242: 472:30 - 475:00 we have added this route that is main pages for user right. So after that here we will add comment. Let's add the comment here that is admin pages and let's use the route tag. We will use route opening and closing tag. Here we have to add the path. So just add the path property. It will be / admin. Right? And after that we will use the element. So in the element let's add opening arrow admin layout import it from the pages and admin folder. So we will mount this admin layout and close this. After that within this route let's add self-closing route tag like this. And in this one we'll add the index. For the first one, we'll add index and then use the element. And in this element, let's provide admin dashboard. Close this tag. Now duplicate it. In the second one, we have to add the path. So just copy this and paste it here. Instead of index, we'll provide the path and the path will be products. So just add products, right? And after that provide the element. So in this element just add admin products from the pages. Now duplicate it. Here we'll add the path. It will be products/ new. And here we'll add admin product form and import it from the pages. Now duplicate it. Here we'll add products. Then add the dynamic route that is colon id /edit and provide the same component that is admin product form. So the component will be same. Now
Segment 243: 472:30 - 475:00 duplicate it. Here we'll add the orders.
Segment 244: 475:00 - 477:30 So just add the path orders and provide the element. So in this element just add admin orders pages. After that just duplicate it. And here we'll add delivery partners in the path. And in this element just add admin delivery partners imported from the pages. It has been imported. Save the changes. So we have mounted all the admin pages and created the route for this. Now let's add the comment here for the delivery partner pages. Now let's add the route tag. Let's add route and it will be self-closing route tag. Then we'll add the path here. So the path will be / delivery/ login and provide the element. So in the element just add opening arrow delivery login. import it from the pages. After that let's add the new route. So here we'll add route tag and use the closing route tag also. And here we will add path. So the path is / delivery. So we have added the delivery path. Here we'll add the element. In this element just add opening arrow and provide delivery layout. Import the delivery layout page. And in this one just mount route self-closing tag. And in this route we'll add the index and then we'll add the element. So in this element just mount the delivery dashboard. That's it. Save the changes. And now let's just come back here on the web page. Now if I open the path/admin, it will open this admin panel. So this is the admin dashboard. Right now you can see the dummy data. Let's go to add pages or add product. So this is the add
Segment 245: 477:30 - 480:00 product page where we can add a new product. Let's go to products. So here we can see the product list. Right after that here we have the orders. So we can see the orders list here. Then we can go to delivery partners page. Just click here. So it will display the delivery partners list. And here we have the option to add a new delivery partner. Right? And from here we can exit from this admin dashboard. So let's go to the delivery partner page. So just open this path / delivery / login. So this is the login page for delivery partner. As you can see, we have the message delivery partner login and we have the email id and password. Now let's remove this login. Simply use / delivery. So it will open the delivery partner dashboard. Here you can see the title and this delivery partner name and exit button. Then we have the shared location button. We have the deliveries list. So the first one is delivered and the second one is out for delivery. Right? Let's click here mark delivered. So we have to provide the OTP and confirm it then it will be marked as delivered. Right? So this is the dashboard for delivery partner. Now let me just come back to the homepage. Now we have completed the front end of our full stack grocery delivery project. Now let's start creating our backend server. For that, let me just come back to the VS code and close all these files. So, right click here and select close saved. After that, let's open the sidebar. So, in this sidebar, you can see we have the client folder. So, just fold it. And after that, here in this project folder that is glossy delivery, we will create a new folder and write the folder name server. So in this server folder we are going to create our backend server. After that let's open the terminal. So in this terminal you can see the
Segment 246: 477:30 - 480:00 client project is running. You can see we are in the client directory and the
Segment 247: 480:00 - 482:30 project is running at localhost 5173. After that we have to add one more terminal. We will open one more terminal. So right click on this server directory. So right click here then choose open in integrated terminal. So now we have two terminals. So we can switch the terminals from here. If I go to the previous one, this is the terminal for front end or client and this is the terminal for server or back end. Now here we have to add the command to create our backend server. So we will create the backend server with express and typcript. To create the basic express server with typcript let's just come back to the web browser and open github.com/gratestackdev. Here we have added the dedicated steps to create the basic express server using typcript. So just go to notes and after that you will find this file basic express with typescript. So just open this one. Here you can see guide to set up a basic express server with typcript. So first we have to create the directory like server. Then navigate to this directory in the terminal using cd server. So we are already in the server directory. Now we have to add this command npm init-p. So just copy and uh come back here. Let's paste this command npm init-y. Press enter. After that in this server folder, you can see we have package.json file. Now let's come back here in the documentation and see the next step. We have to install the dependencies. For that we will use npm install and add the dependencies like express course and env. So just copy this and add it here. So you can see we are installing npm install express course and env. After installing it let's just come back and add the types using these npm install. So we'll import the types in the dev dependencies. So just copy this and add it here. And after that let's see the next step. So
Segment 248: 480:00 - 482:30 next step is to create a tsconfig
Segment 249: 482:30 - 485:00 do.json file. And in this JSON file we will add this configuration. To create this file we have to simply add this command. So copy this one. Come back here in the terminal and let's paste this one. Press enter. After that, if I open this sidebar, so in this server folder, you will find tsconfig.json file. Let's open this tsconfig.json. In this file, you can see we have these configuration, right? So in this one we have to include this compiler option. So let's just copy everything from here. Copy this using this icon and come back to the file and let's clear this file and paste the configuration that we have just copied. Save the changes. Now we can close this. After that let's see the next step. So the next step is to create a server file. So let's add the server file server.ts. Just copy this file name and in this server folder create a new file called server.ts. Now in this one we have to create the basic express server using the express instance. So we have to import the express and after that we will create the app using this express. After that in this one we'll add the middleware like course and express JSON. Then we'll provide one port number. After that we will create one route that will be the home route. And after that we will use app.list to start the server on this port number. So let's just copy this and add it in our server.ts file. So in this server.ts file, we have added this code to create a basic express server. Now in this one, you can see we are using port number 30,000. So instead of 30,000, let me use 5,000. Port number I'm using 5,000. And then we have this app.listen that will start the server and it will display the message like server is running at localhost 5,000. Now let's see the next step. So after that you can see we have to update the
Segment 250: 485:00 - 487:30 package.json script. So in the package.json file you will find the scripts. In this one you have to update the start server and build. So just copy this three scripts. Come back to the package.json file. In this package doJSON you can see here we have the a script and we have test let's remove it and we are going to provide a start that is tsx serverts then server that is nodemon exec tsx server.ts TS and then build TSC. Save the changes and let's see the next step. So next step is to add this type module so that we can use the import statements. So here you can see we have the type common JS right. So instead of this common JS we will use module. Let's update it. If it is not there just add it. Save the changes and see the next step. So we can run our backend server using npm run server. So let's open the terminal again. You can see we are in the server directory in the terminal. Just add npm run server. Press enter. So it will start our backend server. You can see server is running at localhost 5000. Now let's open this link in the web browser. So on this web browser you can see the message server is live that is coming from our home route. Let's open the server.ts file. You can see here we have this message server is live when we open the home route. And here we have added the get method. So we can access the get method using the browser also. That's why we are getting the message server is live. So we have created the basic express server. After that we have to connect our project with the database so that we can store our project data in database right to store our data we are going to use neon database. Neon is a fully managed serverless Postgress database built for modern application. Neon helps developers to build a scalable and reliable app faster. It comes with
Segment 251: 485:00 - 487:30 powerful feature like branching and
Segment 252: 487:30 - 490:00 autoscaling that simplifies development and management. With Neon free plan, you can create up to 100 projects and store up to 500 MB of data at no cost. So just click the link given in the description and sign up on Neon to start using Neon for free. So I'll click on this sign up button and you can sign up using the Google GitHub or Microsoft account or you can also create an account using the email id. So let me sign up with my Google account. I already have an account here. So I'll use the same Gmail ID to login. After sign up, you will see this screen where we have to create a project. So let me write the project name grocery delivery. After that from this drop-down we will choose the nearest region. So let me choose this Singapore. After that click on this create button. After that click on this connect button and here you will get the connection string. After that we have to store this connection string in our project. So let's come back to the project and uh in this server folder create a file with the name env where we will store all the secret variables and code. So here we will add one environment variable name. So let's add database URL. We'll add like this database URL. And in this one just paste this connection string. So just copy this one using this link. Copy snippet and paste it here. So we have added the database URL. And before that let me add the comment also. So we will use the hashtag to provide the comment like this neon database postgress. After adding it, we have to create the configuration to store the data in this database. So let's see the documentation. We'll open neon.com then go to docs. After that go
Segment 253: 490:00 - 492:30 to develop and so we are going to use the Prisma OM. Here you will find this Prisma. Let's just click here. After that scroll down. So here we have the steps to install the dependencies. So first we have to install Prisma client and Prisma adapter neon and env is already there. And uh after that we have to add this npm install Prisma tsx save div. So let's just copy both copy from here and come back to the VS code. Let's open the terminal and uh in this terminal the project is running. So stop the project using Ctrl C. After that let's paste the commands that we have copied. So are you sure you want to paste two lines? So yes, I'll click on this paste and press enter. So it is installing the dependencies using these commands and let's see the next step. So we have to get the connection string. So we have already copied the connection string from the neon dashboard. After that we have to add this in the environment variable. So we have already provided the name database URL and connection string. After that we have to add the Prisma schema. So the Prisma schema contains all the data or table model like you can see here we have the user model that contains the user's ID, email, name and created at right. So similarly we have created the schema and provided in the asset file. So we have to add it inside the Prisma folder and in the Prisma folder we have to add a schema.prisma file. So let's just see the installation. So you can see the installation has been completed for the first line. Right? Let's click on enter
Segment 254: 492:30 - 495:00 again. It will install the second dependencies and it is installing the dependencies. Till then we can copy our schema. So let's just come back here in the assets. So once you will download the project asset. In that one you will find this Prisma folder. In this Prisma folder we have a schema.prisma. So let's just copy this Prisma folder from here. Then go to project folder. then server and in this server just paste the Prisma. In this Prisma we have schema dotprisma. Let's just close this and open the VS code. Now the installation has been completed. Correct. And after that let's hide this terminal and see the sidebar. In this one you can see we have the Prisma folder. In this Prisma folder we have a schema.prisma. So in this schema.prisma Prisma we have the same generator client provider output. Then we have the data source it will be DB provider postgress SQL. Then we have the user model. In the user we will store the ID, name, email, password, phone, avar address, orders created at updated at. Then we have the addresses. After that we have the product. Then we have order then delivery partner data. So we will store these data and create the table for each. Right? So after adding this schema file, let's just come back to the documentation. Now after creating this Prisma schema, let's see the next step. So the next step is to create the Prisma.config.ts file. And in this one, we have to add this configuration. So let's just copy the file name Prisma.config.ts and come back to the VS code. Let's open the sidebar. In this one we have the server folder. So in this server folder create a file called prisma.config.ts. And in this one just paste this configuration.
Segment 255: 492:30 - 495:00 So here you can see we have imported the env. Then define config env from Prisma/config. After that here we have function that is define config where we have added the
Segment 256: 495:00 - 497:30 schema. Right? So in this schema you can see we have provided Prisma folder then a schema. Prisma file then we have data source and URL then env. So from the env we are getting the environment variable name. So we have added the environment variable name called database URL. So just copy this database URL and paste it here. Instead of direct URL, we will provide database URL. Let's save the changes. Just update this one. That's it. After that, let's see the next step. So in the documentation you can see the next step is create your Prisma client. For that we have to create a file and in that file we have to add this configuration. Correct? So to create it let's just come back to the VS code and uh in this one you can see we have the server folder. So in this server folder create a new folder and write the folder name config. In this config folder create a file with the name prisma.ts and in this file let's just paste this configuration. So we have provided importv. Then we have import Prisma client from and uh then we have dot generated / Prisma. So let's add double dot. We have to provide the correct file name here. So here we'll provide generated / Prisma/ and file name client.js. After adding it, save the changes and let's come back here and see the next step. So in the next step, you can see we have to execute these commands that is npx prisma generate. Just copy this one and add it in the terminal. Let's open the terminal and provide npx prisma generate. And after that execute this second
Segment 257: 497:30 - 500:00 command npx prism db push. Let's copy and paste it here. So it is executing this npx prisma db push. So here we are getting this error. Cannot reach database at this link. So maybe my Wi-Fi connection or DNS provider is restricting this URL. So let me change my internet and try again. So I'll change my ISP and uh I'll try this command again. So now you can see the command has been executed. Your database is now synced with your Prisma schema. Right? It's completed. After that let me just come back to the Neon dashboard and uh before that you can see the next step. So we can simply import the Prisma client anywhere in the file and we can access the database like Prisma dot user model find many we can find the users from here like that we can import the Prisma model for updating the user data or anything in the database. So we can simply use it using this Prisma client import it from the file that we have just created. Now let's see the neon dashboard. So in this one just come here in the tables and in this tables you can see all tables has been created like address. We don't have any address yet. Then we have delivery partner table. In this one you can see we have ID, name, email, password and phone. After that we have order. In this order table we have ID, user ID, items, shipping address and payment method. Then we have the product. In this product table we have ID, name, description, price, original price and scroll here. So you can see we have image, category, unit, stock is organic. Then we have rating, review count and created at. After that we have updated at. So we have these columns in this table. Then we have the user table also. In this user table we have id, name, email, password, phone and uh aftar created at updated at and
Segment 258: 500:00 - 502:30 address and orders. So all tables has been created in this neon database and here we can access all the data when we upload the data in this table using our project. Right? So after connecting the project with the new own database, let's just come back to the VS code and start our project again. So in this server terminal, let's add npm run server. So now you can see the message server is running at this URL localhost 5,000. Now in this VS code, let's open the terminal again and the project is running. So just add Ctrl C to stop the backend server. Now here we will add some other packages that will be used to create our backend server and to create the APIs. So first we are going to add the JSON web token. Using that we can create the authentication token. Then we will add brypt package. Using that we will encrypt the user's password. After that we will add the malter package. Using that we can parse the form data and then we will add the cloud n package. Using that we can store the images in cloud storage. So let's add npm install JSON web token. Then we will add brypt. After that we will add molter and then add cloudy. Press enter. After installing it, let's install the dev dependencies where it will install its types. So let's add npm i dash d. Then we'll add at types slash this JSON web token. Then we'll add at types slash brypt. Then at types /
Segment 259: 502:30 - 505:00 molter press enter. So all dependencies has been installed. Now start the back end again using npm run server. Let's hide this terminal and see the package.json file. So in this package.json JSON. You can see here we have the dependencies where you can see brypt cloud nerd JSON web token and molter. And in the dev dependencies you can see we have the types of malar types of JSON web token and types of brypt. Right now let's create the routes one by one. We'll create the different API route and we'll add multiple APIs for multiple features. So first we'll create the API for authentication so that we can authenticate the user. User can login and register on this application. For that we will create the folder called controllers. So in this server folder create a new folder. Folder name will be controllers. Now in this controllers folder create a new file. So the file name is ocontroller.ts. In this ocontroller ts, we have to create the controller for user registration. So let's add the command called register. Then we'll add one more comment that is API type. it will be post and the API path will be / API/register. Then we have to create a function. So export this function from here using export con register equal to asynchronous add function. Now in this function parameter we will get the request and provide the type. So the type will be request and import this request from express. You can see request has been imported from express. Let's move it here in the first line. Then we'll add comma response and the
Segment 260: 505:00 - 507:30 type will be response. Let's import this response also. So you can see the response has been imported from express package. Now after that here let's get the data from request body. We are creating the user registration right. So let's add con curly braces and get the name. Then we will get the email and password. For registration we need email, name and password and let's get it using the request dot body. So in the request body we have to provide this data. After that we'll add the if statement and write not of name or not of email or not of password. If any of this data is missing in this case, let's add return and response dot a status. So the status will be 400. Then dot JSON. In this JSON, we'll add the object with message. So in this message property, let's add the custom message that is please provide all fields. Now suppose all fields are available then it will come to the next step. So here we have to check the existing user using this email. We are creating the account right. So before creating the account we have to check the user already exist with this email id or not. So let's add con existing user equal to await and then we will use the prisma model. You can see we are getting this suggestion. Import Prisma from config folder. Prisma do.js file. It has been imported. Now we'll add dot user model dot find unique. Then we have to add where in this where property let's add the object and then add the email property. So the email will be email dot to two lowerase.
Segment 261: 507:30 - 510:00 So if any existing user is available, we will get that user here. Right? So let's add if statement if existing user. So if the user is already registered with this email id in this case, we'll send the response. So just add return response a status 400 and then JSON message and in the message we will provide user already exists with this email or this email id right now suppose the existing user is false if there is no existing user with this email id in this case we have to encrypt the user's password that we are receiving here from the request body. So let's add const hash password equal to await. And now we will use the brypt package. So let's import it. Here we'll add import and provide the brypt from brypt and let's add it here. We'll add await vicry dot hash method. Here we have to add the original password. Then digit 10. So now we have the encrypted or hashed password. After that we can create the data in database. So let's add const user equal to await and provide the Prisma model. then user dot create. So here we have used the Prisma client dot user model and create method. In this create we have added the object and here we have to add the data property. In this data property let's add the name. Then we have to add the email. In the email let's add email dot to lowerase. After that let's add the password property. In the password we'll add the hashed password. So we will provide these data to create a new user in database. After that we have to return a token for authentication. Right? To
Segment 262: 510:00 - 512:30 generate the token let's create a separate function. So scroll up here we'll add the comment generate JWT token and write con generate token equal to add a function. Then we have to add the id. So the id will be a string. Now after that here we'll add return. In this return just add JWT and we have to import this JWT from JSON web token. So you can see here we have import curly braces from JSON web token and just remove this. We will simply use JWT. And now let's add JWT dot sign. In this one, we have to provide the id that we are getting from parameter. So let's add curly braces id. And after that we have to provide a secret key. So let's add this secret key in our environment variable. Let's open env file and uh here let's add comment that is JWT secret and write the environment variable name that is JWT secret equal to and here we will add one string it could be anything so I'm adding any strong secret like that here we have to add one more thing let's add admin emails. Let's add the environment variable name called admin emails. Here we can add multiple email ids. So these emails will be admin of the store. So let's add my email id here that is user.grastack@gmail. And we can add other email also. So let's add comma and provide admin.com. Let's add one dummy email id. Let's save the changes. We will use it to check the signed in or logged in user is admin or not. Now let's come here in the O controller and here to generate the token we have added the ID and after that we have to provide our secret key. So let's add process
Segment 263: 512:30 - 515:00 env secret just copy and paste it here. After that we will add as a string. Then we have to add comma object. In this object we will add expires in and let's add the expiry time 30 days. So this token will be expired in 30 days. So we have created a function using that we can generate and return a token. Right? Now after that let's come here. After creating the user data in database we have to get the token. So let's add con token equal to and use the function that we have just created that is generate token. Let's just copy the function name from here generate token and here we have to provide the user ID. So let's add user dot id. Using this ID it will generate a unique token. Right after generating the token, we'll add one variable just at con user data. We will send this user data in the response. So we have added con user data and the type is any equal to object and we will add a spread operator user. But in this one we have to exclude the password. So just add delete user data dot password. So the password property will be removed from this user data object. Right? After that here we'll add user data dot is admin. We have to check the user is admin or not. Right? For that we'll create one another function. So here let's add the comment that is check if user is admin. For that just add const and the function name get admin status is equal to add a function. In the parameter we'll get the email
Segment 264: 515:00 - 517:30 and the type will be a string. Then we'll add or null or undefined. And uh then we have to add type here it will be boolean. So we have added colon boolean. Now in this function let's add if not of email. So if the email is not available in this case we will simply add return and we'll return false. Now suppose the email id is available in this case just add const admin emails equal to let's get the admin emails from the environment variable. So just add process environment variable name called admin emails question mark provide process envirl it using comma Uh right then dot map in this map let's get the individual email in the parameter and after that let's add e dot trim dot to lowerase. So it will return all the emails in this admin emails. Right? Else we will add empty array. Now let's add return here. In this return, we'll add admin emails dot includes and provide the email dot to two lower case. That's it. So here we'll get the status either true or false whether the user is
Segment 265: 517:30 - 520:00 admin or not. So let's come here in this controller function for user registration. In this one here we have added this delete user data dot password. After that let's add user data dot is admin property equal to get admin status and provide the user data dot email. So provide the email here and it will provide either true or false that will get stored here in this is admin property. Now after that we can send this user data in the response. So let's add response dot status. So the status is 2.1 then dot JSON and in this JSON add the object where we will add the user property. So the user property will be our user data. Then add comma. Here we will provide the token also. So let's provide this token in the response. So we have created the function for user registration. Similarly we have to create the function for user login. Right? So let's just copy everything. Paste it here. Let's update the comment first. So the comment is login. After that we'll add the type. type will be post and the path will be / ai/ o/ login. Then we will add the function name. Function name is login. And after that here we will get only two data that is email and password. For login we need email and password from request body. Now let's remove this name from here. Now suppose the email or password is not available in the request body. In this case we will send the message that is please provide email and password. Now suppose the email and password is available. In this case we have to find the user from database. So just add con user equal to await then prisma dot user dot find unique where email is email dot to lower case right and after that in this one we will include the address data also so let's add comma
Segment 266: 520:00 - 522:30 and provide include put at the object where we will add the addresses and let's make it true. So here we'll get the user. After that let's add the if statement if not of user. So if the user data is not available in this case just add return 4.1 and the message is invalid email or password. After that here you can see we have this hashed password. So remove it. Here we have user from database. Remove it. Now after this statement that is invalid email or password when the user is not available. Here we'll add another statement. Suppose the user data is available with this email id. Then we have to match the password. Right? For that let's add const is match equal to await then use bcrypt dot compare. In this compare we will provide the password that we are getting from the request body and then let's add the user dot password that is the password stored in the database. Now let's add if statement if not of is match. If it is not matching then we will add the return and provide the response. So let's add the status 4 not one and the message is invalid email or password. Then we have to generate the token. Suppose the password is matching. Then we'll generate the token using this generate token user do ID. Then we will create the user data and provide a spread operator user. Then here we will remove the password using delete user data dot password. Then we will add user data dot is admin and provide get admin as status user data do email. After that we will add the response. So simply add response dot JSON and provide the user property and token.
Segment 267: 522:30 - 525:00 That's it. So we have created the login controller. Using that user can login. After that we have to create the routes. To create the routes, let's open the sidebar. In this server folder, create a new folder. Write the folder name routes. In this routes folder, create a file. Write the file name o routes.ts. In this one, we will use the express package to create the router. So just add import express from the express. Then we'll add const router equal to express dot router. Now in this router we'll add different endpoint. So just add router dot post method. First we'll provide the path. So the path is register. And then we'll add the controller function that is register from this controller folder. You can see register function has been imported from controllers folder ocontroller.js file. After that duplicate it here we'll add o routout.post then provide the path. It will be login and then we'll add the function that is login. import this login function from this ocontroller.js file. Next, we have to export this o router from this file. So, let's add export default o router. Now, we can call it in our main file that is server.ts file. So, in this server.ts file after this home route, let's add app dot use. In this one add the path it will be / ai / then we'll add comma and provide the o router. So we have added o router. Let's open this file. Here we have o router right. So let's come back. You can see
Segment 268: 525:00 - 527:30 O router has been imported from the routes folder. O routes js file. Save the changes. So now we have completed the API for user login and registration. Now we'll create the next API for other functionality. Before creating our next API, let me handle the error also. So just after this route, let's add comment for error handling. And here we have to add this app dot use. And in this app dot use we have to provide four parameter. So let's add one arrow function like this. And in this arrow function we have to provide four parameters. So the first one will be our error and provide the type. It will be any. Then we have to add the request. Let me just copy the request and response from here. And after that we'll add next. Let's add next function from express. You can see next function has been imported from express. So we have four parameters in this arrow function that is error, request, response and next function. Now in this arrow function let's add console dot error and provide this entire error. After that let's add response. In this response we'll add the status. So let's send the status 500. After that we have to provide the message also. So just add JSON and provide one object. Here we'll add the message property and let's get the message from this error. So let's add error dot message. So this function will catch all the errors when the error comes in any route or any controller function. Now after creating this error handling let's create the API for products.
Segment 269: 527:30 - 530:00 For that let's open the controllers folder. In this controllers folder create a new file and write the file name product controller.ts. Now in this product controller we have to create the controller functions for different features. So just add the comment here that is get. So the API type is get and the path is / API/ product/ deals. So here we will list out all the products where we have some deals. So just add a function and export it. So just add export con get flash equal to async arrow function. Now in this function we will add the parameter that is request and provide the type. So the type will be request that will import from express then add comma response and it is also imported from the express. So request and response has been imported. Now after that in this function just add con products equal to await and then use the Prisma client from the config folder/prisma.js file. Then we'll add dot product model dot find many. And here we'll add the where property and provide the stock. So the stock should be greater than zero. So just add calibraces gt0 then add comma provide order y and in this order y let's add original price descending. So here we have added a stock greater than zero and order by original price descending. Now we have the list of products here and in this one we will find the products where we have some discount. So let's add const products with discount equal to this products
Segment 270: 530:00 - 532:30 dot map. In this map add the arrow function. And then let's add individual product in the parameter and the type is any. Then we have to add con discount is equal to this product dot original price and P dot price that is product dot price. So we have added product dot original price and product dot price turnary operator. So just add question mark math dot round. In this one just add this parenthesis. And in this one again add this parenthesis and provide P dot original price minus P dot price / P dot original price then multiplied by 100. So we'll get the percentage discount and then we'll add else statement zero. So here we'll get the discount amount and uh after that let's add return object provide the product using this as spread operator then this discount percent. Now we can send the response. So let's add response dot JSON. In this one, add the object where we'll add the products. So in this products, let's add this products with discount dot slice. And here we'll add 0, 8. So we'll return only eight products. So we have added the controller function to return the flash deal products. Now let's add the controller function to get the product list. Right? So just add the comment again that is / API/ products. It will be the API route and the type is get. Then we have to add a function. So let me just copy
Segment 271: 532:30 - 535:00 this one. Paste it here. update the function name. So the function name will be get products. So we have added the function name get products. Then here we'll add some data from request query. So let's add const curly braces. We will get the category. then search then min price max price and sort. So we'll receive these queries from the request. So just add request dot query. After that let's add const where type will be na and it will be object. After that let's add if statement if category is available and category is not equal to all in this case in this where we will add the category. So just add where dot category equal to the category that we are getting here as a string. After that let's duplicate it. We will add the if statement if search is available. In this case we'll add where dot name and add the object contains search as a string. Then we'll add the mode. In this mode, let's add insensitive. Now let's add another if statement. If mean price or max price if it is available in the query. In this case just add where dot price empty object then we'll add if statement if min price is available then we'll add where dot price dot greater equal to number function and provide min
Segment 272: 535:00 - 537:30 price. Now just duplicate it. Here we'll add if max price and here also we'll add number max price where price dot less than. After that we have this sort also in the query. So let's add con order by and the type is any equal to empty object. Then we'll add the if statement. If sort is equal to price low order by dot price equal to ascending. After that let's duplicate it. And here we'll add else if else if sort equal to price high. Then we'll add order by dot price equal to descending. After that let's duplicate it. And here we'll add the else. else order by dot created at and provide descending. Next we have to find the products. So just add con products equal to await and use the Prisma client dot product model dot find menu. In this find menu just add the where and also provide order by that's it. Now after that here we will add con product with discount equal to this products dot map. So here we are finding the products discount because with the product we'll return the discount percentage also right. So let me just copy from the previous controller. I'll just copy this one and paste it here. You can see we have added
Segment 273: 537:30 - 540:00 product with discount and returning this object with product data and this discount. Now after that we can set the response here. So just add response dot JSON and let's add the products property. In this products property, let's add products with discount. So we have created the controller function to get the product list. Now we have to add the controller to get individual product using ID. So just add this path / API/ products/ colon id and the type will be get. So let's add the function. So so I'll just copy this one paste it here. Now in this one we will add the function name called get product to get the individual product. Right after that here let's add con product equal to await then we will use Prisma dot product model dot find unique. In this find unique let's add the where property. It will be object and provide the id and the id will be our request dot params dot id. After getting the product here let's add the if statement if not of product. So in this case let's add a response. So just copy this paste it here. We'll add response dot a status. In the status, we'll add 4.4. And after that, we'll add the JSON. And in this JSON, we'll add the message property. And in the message, let's add product not found. Right? And uh after that here simply add return. So it will stop executing this function if the product is not found. Now suppose the product is available here. So in this case we have to calculate the discount also. So I'll just copy this statement. Paste it here. So we will get the
Segment 274: 540:00 - 542:30 discount amount. Here we are getting P. So instead of P we will use product dot original price product. Then product dot original price product. price and product dot original price update it. Next, we can send the response here. So, let's add response dot JSON. In this JSON, add the product and add one object. Use the spread operator product and here we'll add one more property that is discount. So it is returning individual product data using this route/ API/ products/ colon id but in this controller function you can see we are getting the warning here for this ID because we have to add the type. So here after this request dotparence do id let's add as a string. That's it. Save the changes. Now let's create our next function. So the next function will be create product. So let's add the command here that is post method/ API/ products. Right? And create a function. So copy this one, paste it here. Now in this function we'll add the function name called create product. Right? And for this create product let's get the data from request body. So simply add con product equal to a weight then we will add the Prisma client then dot product table dot create method. In this create method we have to provide the data. So let's add the data property and it will be the request dot body right now after that we will send the response. So simply add response dot a status and let's set the status to not one. Then dot JSON method in this JSON method add the product. So it will be sent in the response. Now you can see here simply provided the
Segment 275: 542:30 - 545:00 data from request body but while adding the product we have to upload the images also right so for uploading the image we will create separate controller function and uh after creating this create product let's create the next controller that is update product. So duplicate it. We will add the type put then / API/ products/ colon id. Then we'll add the function name update product. After that let's add con product equal to await prisma.product.update. In this update we have to add where. In this where let's add the object and provide id colon request dot params dot id. After that add comma and here we'll add the data that needs to be updated. So just add request dot body. So it will find this product using this id and update this data that we are providing in the request body. Here also we have to provide the type. So after this request dotparams do ID we will add as a string. Next we have to send the response. So in response we'll simply add response dojson and provide this product. That's it. So we have created this function to update the product. After that we'll create the next function. So just duplicate it. And here we'll add the API type. It will be delete. And the path will be / API/ products colon id. Then the function name is delete product. Let's add the function name delete product. Then we will add the await prisma dot product table dot delete method. In this delete method just add where id is equal to or colon request dotparence do id as a string and remove this next data. So we will remove this one.
Segment 276: 545:00 - 547:30 Now it is correct. After that in the response we'll simply send the message. So let's add the message property here and the message will be deleted. That's it. So we have created the controller function for delete product then update product. After that create product then we have added the function to get individual product. Right? And let's update this function name. It is get product for individual. Right? It's correct. And here we have get products that will provide all the product list. Right? And after that here we have the function get flash deals that will return the product in deals. Now using these controller we have to create the API. It means we have to create the API route. But before accessing these controller like create product, update product and delete product, we have to check the user is authenticated or not. And we have to check the user is admin or not. For that we have to create the middleware that will get executed before executing these functions. So let's open the sidebar. In this server, we'll create a folder called middleware. In this middleware folder, we have to create the file. So, let's add new file admin. TS and we'll add one more file that is o.ts. Now, let's complete this o.ts file. In this one we have to create a function. So simply add con equal to add a function. Now in this function we have to add three parameter that is request response and next function. So let's add request type is request response type is response next and the type is next function. Let's import these types. So import the request then response then
Segment 277: 547:30 - 550:00 next function from the express as you can see here. After that here we will add try catch a statement. Now in this try block let's add con header that is authentication header equal to request dot headers dot authorization. Here we'll get the O header and after that we will add the if statement if not of O header or not of O header dot a starts with beer and space. So in this case we will simply return the response with one message. So let's add return response status for not one and JSON object with the message no token provided authorization denied. Now suppose the token is available then we have to verify the token. So let's add con token equal to o header dot split and we will split it using empty space and let's get the index one. We'll get the second part using index one. After that we have to decode the token. So let's add const decode or decoded equal to JWT and let's import the JWT here. So let's add import JWT from JSON web token and use JWT dot verify and provide the token here. Then provide process env dot secret variable that is JWT secret as a string right after that here we'll add as id string after that here we'll add request dot
Segment 278: 550:00 - 552:30 user it will be object where we have to add the ID and the id will decoded dot id because while creating the token we have used the id that's why we have added request dot user it will be id colon decoded dot id and after that we'll call the next function like this. Now let's come here in the catch block. In this catch block simply add console.log and provide this error. And then we will add return a statement. So let's add return response dot a status. So the status will be 4.1. Then dot JSON. In this JSON we'll add the object with message. And in this message we will add token is not verified. Right now here we are getting this warning in the user because we have to define the type. For that let's open the sidebar in this server folder create a file and first we have to create a folder. So let's create a folder with the name types. So we have added the types folder. In this types folder create another folder called express. And in this express folder create a file and write the file name index d.ts. Now in this file we have to add declare global and it will be object. After that let's add name space express and after that let's add interface and provide the request in this request add the user question mark colon and object where we'll add the id. ID will be a
Segment 279: 552:30 - 555:00 string. Then add comma is admin question mark colon provide boolean. After that here we have to add the partner question mark colon. So after adding this partner here we have to add the delivery partner type. So let's import it. We'll add delivery partner and import it from this suggestion. So you can see delivery partner has been imported from this generated Prisma client. TS file right here we'll import the user also. Let's add user, delivery partner. Save the changes. After adding it, let's open o.ts file. So you can see that warning has been removed. Now here at the end, we'll add export default and provide this o. Let's provide o only. Do not call it. So we have created this o middleware. Now let me just come back to the previous file that we have just created. So we have created this index d.ds file. So in this one we have to add export and empty object. Save the changes. Now let's create another middleware that will be for admin. Right? So here we have admin.ts file. In this one, let's just copy this previous file. Just copy and paste it here. Here we will import next function request and response from express. After that remove this JWT. Then we'll add the function name called admin. So just add con admin equal to add a function. And here we will use the asynchronous function. So just add async arrow function right and uh after that here we will add the try catch. In this try block we will update the code. So let's clear this try block. Then we have
Segment 280: 555:00 - 557:30 this catch block. In this catch block we have this error. So let's add colon any. We will add the type and provide console.log error. Then we'll add the response status 500 and provide JSON where we'll add the message. So the message is admin verification failed. Then we have to add the error property. In this error property, let's provide error dot message. After that here we will export this admin. So this is the admin middleware to detect the user is admin or not. So let's complete this try block also. In this try block we'll get the user ID. So just add con user ID equal to request dot user. This user property will be added using the middleware that is here o.ts. It is adding the user property. Now from here let's get the ID. So just add question mark dot id. Now we'll add the if statement if not of user ID. Suppose user ID is not available. In this case we'll add the return response dot a status and set the status 4.1. Then dot JSON and in this JSON we will add the message that is unauthorized. Now after that here we'll add con user equal to await. Then we'll add the Prisma client. Import it from the config folder/prisma.js file. Then we will add dot user table dot find unique. Then we have to add where and let's add the id. It will be user id. So it will find the user. Now let's add the if statement if not of user. If we could not find the user in database. In this case let's add the return statement again that is response status for not four and the
Segment 281: 557:30 - 560:00 message is user not found. Now suppose the user is available then we have to check the admin email id. So let's add con admin emails equal to process dot env dot admin emails if it is available in this case just add this process.env env dot admin emails dot aplate and a split this using comma and after that we'll add dot map in this map add the arrow function get individual email id and after that it will return e dot trim dot to lowerase. So it will return all the emails. Here we'll add else statement also. So just add colon empty array. So we have the admin emails list. Now after that let's add if statement. If this admin emails dot includes the user dot email dot two lower case it means the logged in user is admin. Right? So let's add if statement if request dot user then request dot user dot is admin property equal to true and after that it will call the next function. So let's add next function. Now let's add the else statement also. So just add the else statement and here we'll add the return. So just copy this one paste it here. We'll add return or we can simply use response dot status 43 then JSON message and the message is admin access required. That's it. So we have created this
Segment 282: 560:00 - 562:30 middleware that will get executed before executing our controller function and it will check the user is admin or not. Now let's create our routes for product. So just open this sidebar. Here you can see we have the routes. In this route folder create a new file called product routes.ts. Now in this product routes.ts we have to import the express because using this express will create the router. So let's add con product router equal to express dot router. Now in this router we have to add different endpoint. So just add product router dot get method and provide the path. It will be / flash deals. So this is the API path and here we have to add the controller function. So let's add the controller function. Get flash deals. It has been imported from controller folder. Then product controller dot js file. Let's duplicate it. In the second one, we'll add the type get and the path will be slash. Here we will use the function get products. So get products function has been imported here. Now duplicate it. Here also use the type get and the path is / id. And here we'll use the function that is get product. So this get product function has been imported to return the individual product data. Now duplicate it. Here we will use the type post then path will be slash. So this will be used for creating a new product. So just add create product. So the create product function has been imported from the controller. Now in this one we have to add the middleware also. So here we'll add comma o and import this o from middleware. And after that we'll import the admin and import this admin from middleware pair at comma. So you can see o has been imported from o.js and admin has been
Segment 283: 560:00 - 562:30 imported from admin.js. So before executing this controller
Segment 284: 562:30 - 565:00 function this o and admin will be executed. Now let's duplicate it. In this next one we'll add the type. Type will be put and the path will be / id. Using that we can update the product. So just add update product controller function. Import this update product. It has been imported here. Let's duplicate it and add our next route that is delete. The path will be same / id. Then we'll add the function delete product. It has been imported. Now let's export this router from this file. So let's add export default and product router. Next we have to add this router in our main file. So let's open the main file that is our server.ts file. And here after this o router let's add new route. So just duplicate it. It will be app dot use/ API/ products and provide the product product router. You can see the product router has been imported from routes folder product routes.js file. So we have created the APIs for product. Using that we can get the individual product and all product list. We can create the product, update product and delete the product. And we have added the middleware also so that only admin can create, update and delete the product. After creating the API for product feature, next we have to create the API for product image upload. Right? So let's open this sidebar. Here you can see we have the controller folder and uh we have this route folder. So in this one only we'll create a new file in this routes folder. Let's create upload routes.ts and here let's create one route. So just add import express from the express package. And after that let's add con router equal to
Segment 285: 565:00 - 567:30 express dot router. Now after that here we'll add this router dot post method and provide the path it will be slash then we'll add comma o middleware it has been imported then comma and here we will use the asynchronous arrow function. So just add async arrow function. Now in this function parameter we'll get the request and response. So just add request comma response right now in this one we'll add the try catch block. Now here we have to handle the image upload and uh we will send the image in the request body inside the form data. To extract the image from the form data, we are going to use the middleware that will be molter. So let's configure the molter here. We have already added the multter package, right? So let's create the configuration for that. So we will add import malter from molter package. And after that let's add con storage equal to multter dot memory storage and after that we'll add con upload function equal to this multter and in the multter we'll provide the storage from here. So we have this upload function using that we can handle the file upload. So here before executing this function after this o middleware let's provide this upload. Now in this upload we'll add the dot single because we'll upload the images one by one. Right? So we will add upload dot single and provide the key name for the image. So it will be image. So we'll upload the
Segment 286: 567:30 - 570:00 images using this name property name will be image. So it will be handled using this upload function. Now after that let's come here in this try block. In this try block we'll add if statement. if not of request dot file. So what will happen when we handle the upload using this middleware upload dots single it will create the file property and in the file property it will add the uploaded image right. So let's check the file property is available or not. So let's add if not of request dot file in this case just add the return and provide response dot a status 400 then dot JSON and provide the object with the message no image file provided right now suppose the file is available in this case we have to upload this file on cloud storage for that we are going to use cloud ner so let's open the web browser and search for search for cloudn open cloudnary.com and here we need to create an account so I'll continue with my existing account. So after sign up you will come to cloudary dashboard. After sign up you need to click on this API keys and here we will create a new API key. So click on this button generate new API key and it will send one confirmation code on your email. So enter the code here. Then click on upd button and a new key has been generated with key name untitled. So let's add the key name grocery delivery and after that from here you will get the API key and API secret and here we have this cloud name as you can see here in this line you can see we have the cloud name right so we have to store all these details in the environment variable so let's just come here in the VS code open env file In this one
Segment 287: 570:00 - 572:30 here, first we'll add the comment that is cloud ner and provide the environment variable name like cloud ner cloud name. Then we will add cloud API key. After that we'll add cloud API secret. Now we have to provide the values here. So let's remove this comma from here and provide the value. Let's copy the cloud name from here. Paste it here. Then provide the API key from here. Copy and paste it here. Then provide the API secret from here. Reveal it and copy. Now after adding it, we have to create the configuration. Right? So let's open the sidebar. In this config we will create a new file and write the file name cloud ner dot ts. And after that here we have to import the cloud nary. So let's add import curly braces from cloud n. And here we will import v2 as cloud ner. After that let's add cloud ner dot config. And here we have to add the object with the properties cloud name. Then we have to add the value from the environment variable. Let's add process.env env dot cloud cloud name. Let's duplicate it. Add the comma also. And in the second one, we'll add the API key. In the third one, we'll add API secret. And here we'll add the environment variable name that is API key and API secret. That's it. Next, we have to export this cloud ner from here. So just add export default cloud n. Now using this we can upload the images on this cloud nia storage. So just come back again in the upload routes.ts file and after that
Segment 288: 572:30 - 575:00 here let's add con 64 or b 64. We have to convert the image in base 64. For that we will use this buffer dot from and provide the request dot file dot buffer dot to a string and in this one just add base 64. After that let's add con data uri equal to data colon and then we'll add plus this request dot file dot mime type then plus here we'll add semicolon base 64 comma then plus and provide this B64. That's it. So here we have the data URI. After that we can upload it on cloud. So let's add const result equal to await and provide this cloud ner and import this cloud ner from the config folder. You can see it has been imported from cloudy dot js file. Right now after that we'll add dot uploader dot upload and in this upload just add this data URI then add the object and in this object we'll provide the folder name. So let's add the folder name grocery delivery and then we'll add the resource type. It will be auto. That's it. So it will get uploaded. After that in the result we will get the URL. So let's add response dot JSON and in this JSON we will add the object with the URL property and in this URL provide this result dot secure URL. That's it. Now come here in
Segment 289: 575:00 - 577:30 the catch block and here we'll add the type any. Then let's add response. So just add response dot a status 500 dot JSON. In this JSON we'll add the object with the message property and it will be error dot message. Next we have to export the router from here. We have this router right? So let's export it. Just add export default router. Now we have to add it in our server.ts file. So let's open server.ts. And here we have to add a new route. So let's duplicate it. We will add app dot use/ API/upload. And after this upload, let's add the upload router. And let's import it. Let's add import or let me change the name here. I'll come back to the upload routes.ts TS file and here we will change the name like upload router and uh here also upload router.post and here we will export the upload router right and come back here. Let's type upload router and import it from the routes folder. You can see upload router has been imported from routes/upload routes.js file. So we have created the API to upload the product images and after the images upload we can upload the product also using the product API. Now we have to create the APIs for placing the order and we can get the order data for admin and for user to create this order API let's create the controllers. So in this controller folder we will create a new file. So let's add the file name order controller.ts. Now in this order controller ts file. First we'll add the comment that is create order. After that we'll add the comment again where we'll add the API
Segment 290: 577:30 - 580:00 type and the path is / API/ orders. So using this function we have to create a new order. So let's create a function and export it that is create order equal to asynchronous add a function. Now in this one we'll get the request and response and we'll add the type also. So the type is request and response. Import this request type from express and response type from express. It has been imported here. Let's add it in the first line. Now in this function we will get the data from body. Right? So let's add con curly braces equal to request dot body. So from this request body we will get the items that will be order item. Then we'll add the shipping address and after that we'll get the payment method. We need these data to place the order. After that let's add the if statement if order items are empty. So let's add check if order items are empty. And we'll use the if statement if not of items or this items dot length is equal to zero. In this case, we'll add the return statement with the status 400 then dot JSON and provide the message that is no order items. Now suppose we have the items for the order. In this case, let's add the comment that is look up actual price from the database. So here we'll add con product ids equal to use the items dot map. In this map add the add function get the item and type will be any and after that let's add the item dot product.
Segment 291: 580:00 - 582:30 Now after that let's add the con products equal to await and here we will use the Prisma client. import the Prisma client from the config folder. Then dot product table dot find many. In this find many we have to add the where and provide the id. So let's add in product ids. Right now it will return all the products. After that let's add con product map colon and here we'll add the record angle bracket and provide the a string comma provide the type of products index zero equal to empty object. Now after that let's add this products dot for each and provide the arrow function again and provide p colon any and uh it will return product map index p do ID equal to P. After that we have to check the product is in a stock. So let's add comment check if product is in stock. Here we'll add for const item of items const product equal to product map and provide the item dot product. Next we have to add if statement if not of product or product dot a stock
Segment 292: 582:30 - 585:00 question mark zero less than item dot quantity. So in this case just return the response with a status 4 not4 and we'll add the message that is product out of a stock. Now after that here we'll add con order items equal to items dot map. Now in this map we have to add the add function where we'll get the item and the type will be any and then we have to add the object. In this object we'll add con DB product equal to product map and then we'll add item dot product. Then we have to add if not of DB product. Then we have to throw the error. So just add throw new error and provide the message in template lit. So just add back text and provide product then dollar sign curly braces item do.t product not found. After that here we'll add return and provide the object in this object just provide the product colon DB product do id. Now duplicate it here we'll add name. So the name will be db product dot name. Duplicate it. Then we'll add the image. It will be DB product dot image. Duplicate it. Here we'll add the price. It will be DB product dot price. Let's duplicate it. We'll add the quantity. And then we'll add unit here. In this quantity, we will use the item dot quantity. Let's update this one. It will be item dotquantity and remaining
Segment 293: 585:00 - 587:30 is DB product. Right? Now after that here let's add con subtotal equal to order items dot reduce. In this reduce add the arrow function and provide the sum and item in the parameters. Sum will be number item will be any type. Then we'll return the sum plus item dot price multiplied by quantity. So let's add item dot quantity then comma zero. After that we'll add cost delivery fee equal to subtotal greater than 20. If it is true then the fee will be zero. Else we'll add 1.99. After that we'll add the tax. So let's add con tax equal to math dot round and provide the subtotal multiplied with 0.08 multiplied with 100/ or divide by 100. After that we have to add the total amount. So just add total equal to math dot round and provide subtotal plus delivery fee plus tax multiplied with 100 divide by 100. Now after that we can create a new order in the database. So just add con order equal to await and then we'll add the Prisma client dot order table dot create method add the object and here we'll add the data property. So this data will be added in the database. So in this data property first we'll add the user ID. So
Segment 294: 587:30 - 590:00 the user id will be the request dot user not null dot id. Then we will add items. It will be order items. After that we'll add shipping address. Then we'll add payment method. After that we'll add the subtotal and delivery fee. Then we will add tax and total amount. Then we will add the status history. It will be add a provide the object where we will add the a status. It will be placed. Then we will add note. In this note, let's add order placed successfully. And after that we'll add the time stamp. So let's add the time stamp property. It will be new date. That's it. So it will create a new order in the database. After that here we will add the if statement. If the payment method is equal to card in this case let's add comment that is a stripe payment link. So we will create the payment link for placing the order when the payment method is card and suppose the payment method is cash. In that case here simply use the response dot JSON and in this response we will provide this order. Right? After placing the order we have to reduce the stock. So let's add comment decrease the stock. Let's add for con item of items and then we'll add the await prisma dot product dot update.
Segment 295: 590:00 - 592:30 Add the object here. Let's add where provide the id and then we'll add the item dot product. So it will find the individual product and after that we have to update the data here. So let's add the data property and provide the a stock and in this stock let's add decrement and provide the item dot quantity. So it will decrease the quantity after placing the order from the database. Let's save the changes. After this create order controller, let's create the next controller. Using that we can get the users order data. Right? So let's add the comment that is get users orders and add the API type will be get and path/ API/ orders. And after that let's create a function. So simply copy this function from here, paste it here and provide the function name. So the function name will be get user orders. In this get user orders function, let's get the query from body. So let's add con a status equal to request dot query. After that we'll add con where type will be any equal to object and provide the user ID property. In this user id property provide the request dot user exclamation dot id comma we'll add not add a and provide the payment method card is paid false. After that we'll add the if statement. If a status is available and uh then
Segment 296: 592:30 - 595:00 we'll add the a status not equal to all. Then we'll add the where dot a status equal to a status. After that we have to find the order from database. So let's add con orders equal to await. Then use the Prisma dot order table dot find many. Here we'll add the where property then comma include. In this include just add the delivery partner property and provide the select and provide the name true and phone true. So for users order data it will include the delivery partner details also like delivery partner name and phone number. After that let's add comma and provide the order y. In this order y we'll add created at descending. After that we have to send the response. So simply add response dot json and provide the object with the orders. Next we have to create the controller to get the single order data. Right? So let's add get single order and provide the API type. It will be get and the path will be / API/ orders/ colon id and create the function. So let's copy this one. Paste it here. Here we'll add the function name get order. In the previous one you can see the function name get user orders and this is the get order for single order. Right after that in this one let's add con order equal to await and use the Prisma dot order table dot find first in this one just add the where property and uh let's add the id so the id will
Segment 297: 595:00 - 597:30 be our request dot padams dot id then we'll add comma user id and in the user id let's add the request dot user exclamation dot id here in this id we are getting this warning so let's add as a string now after this where add comma and provide include. In this include let's add delivery partner and uh after that let's add select in this select just add the name phone avar and vehicle type. So make it true. After that let's add the if statement if not of order. If we could not find this order using that ID. So let's add the return statement with the response dot status 4 not4 then dot JSON message is order not found. Now if the order is available simply add return. So just copy this return or simply response response dot JSON and provide this order which is here. So we have added the controller function to get the individual order data. After that we have to add the controller function to get the order status for admin. So let's add the comment here update order status for admin and the path will be / API/ orers col ID/ status and the API type will be put. Let's create that function. So copy this one, paste it here. Update the function name. It will be update order a status. Only admin can update it. So here we need the status from request body. So let's add con status and note equal to the request dot body. After that we have to find this order in the database. So let's add const order equal to await and use the Prisma dot order
Segment 298: 597:30 - 600:00 then dot find unique. In this find unique provide the where and it will be object with id and provide the request dot padams dot id. After that we'll add as a string. Now after that let's add the if statement again like this. Just copy this one paste it here. If not of order then return response dot status 44 and the message is order not found. After that let's add con history equal to array dot is array and provide the order from here order dot a status history question mark. Then we'll add order dot a status history. Else we'll add empty array. Then we'll add as any array. Now we have to add history dot push. In this one add the object with the status. Then we will add the note. In this note we will add the note or we will add the message in the back tick that is order then a status. After that we'll add the time stamp also. So just add comma time stamp and it will be new date like this. After that let's add con update order equal to await prisma dot order dot update. Then we'll add the where property. In this where property provide the id and the id will be request.parence parents do id and after that we'll add as a string then add comma here and provide data in
Segment 299: 600:00 - 602:30 this data provide a status comma a status history colon history. So it will update the order. Right? After that let's add response dot JSON. In this JSON we will return the order and the order will be our updated order. That's it. So we have created this function to update the order status by admin. After that we have to add the next controller function. So just add the command that is get all orders for admin and then we'll add the API type get the path will be / API/orders/all. So let's create this function. So simply copy the previous one. Here we have get users orders. Right? So let's just copy this one. copy and paste it here. In this one, we'll update the function name. It is get all orders equal to async arrow function. We will add con orders equal to await prisma dot order.find many. Then we'll add the where. In this where let's provide not colon array and provide the payment method card is paid false right and add the comma here after that we'll add include right so in this include Let me provide user and uh it will be object. In this user we'll add the select and then we will add name true email true. Right? Then we have the delivery partner. Then select name phone and
Segment 300: 602:30 - 605:00 provide the email id also. So let's add the comma email true. Then we'll add order by created at descending. Then we'll add response dojson and provide this orders. So we have created the controller function to get all orders for admin. Right now after that we'll add the next controller function to get the order location. So just add the command get order location and then we'll add the API type. it will be get and the path will be / API/ orers/ colon id/ location let's copy this function from here paste it here now in this one we will update the function name so the function name is get order location and after that just add con order equal to await then we'll add prisma dot order dot find first. In this find first, we'll add the where property and it will be object. In this object, let's provide the id and the id will be our request dot pads dot id as a string. Then we will add user ID. Let me check it. Here we have added con order equal to await. Then prisma dot order dot find first. Here we have to add the object like this. And in this object we will move this where now it is correct. Here we will add the user ID. So the user id will be our request dot user exclamation dot id. Then we will add the select. In this select property let's add the live location property true, a status true. After that let's add if statement if not of order. Suppose we could not find the order in the database then we'll add return response dot
Segment 301: 605:00 - 607:30 a status and send the status 44 then dot JSON and in this JSON we'll add the message that is order not found. Now suppose the order is available. In this case, we'll add response dot JSON and provide object here where we will add the live location property. In this live location property provide the order dot live location, comma status. So in this a status property let's store the order dot a status that's it. So we have created this controller function using that we can get the live location of the order. After creating all these controller function we have to create the routes. Right? So let's come to the routes folder. In this routes folder, we'll create a new file and write the file name order routes.ts. Now in this one, we'll import the express from express package and then create the order router equal to express dot router. Now in this router we have to add different endpoint. So just add order router dot post method and provide the path it will be slash. Then add the authentication middleware that is o and you can see it has been imported from the ojs file. And then we'll add the create order function. So create order controller function has been imported from the controllers order controller.js file. Now let's duplicate it. Here we'll add the type get. So the type will be get and the path will be slash. And here we'll add the o middleware. And then we'll add get users order. So we'll import get user orders function. Now duplicate it. In the third
Segment 302: 605:00 - 607:30 one we'll add the type get and/all.
Segment 303: 607:30 - 610:00 And then we'll add o middleware then comma admin middleware add comma admin has been imported from admin.js file. After that here we'll add get all orders controller function. Let's duplicate it. Here we'll add the type get and the path will be / colon id. So it will provide the individual order. Right? So just add the O name remove this admin and here we'll add the controller function that is get order. So get order controller function has been imported. After that let's duplicate it. Here we'll add put. Using that we can update the status. Right? So just add put / id / a status then o middleware then admin middleware add comma and then we'll add the controller function that is update order a status imported from the controller file. Let's duplicate it. In the last one we'll add the type get. Then we'll add the path colon id / location. And here we'll add the o remove this admin. Then we'll add the controller function name that is get order location. So get order location controller function has been imported. After that let's export this router from this file. So let's add export default and order router. Next we have to add it in the server.ts file. So let's open the server.ts and uh here before this error handling let's add app dot use provide the path / API/ orders and provide order router import this order router. You can see order router has been imported from routes folder order routes dot dot dot dot dot dot dot dot dot dot dojs file. So now we have created the APIs for creating the order and getting the order data for admin and user and we can get the
Segment 304: 607:30 - 610:00 order location and we can update the
Segment 305: 610:00 - 612:30 order status only admin can update that status. Now we have to add some background task like sending low stock emails to admin and auto assign the delivery partner to a new order when the order gets created and we will also send the monthly email to all users that contains the offer information. For that we are going to use inest functions. It provides multiple features to manage the background jobs, scheduling and chron jobs. So just click the link given in the description and open this inest website. Here I'll go to pricing. So you can see here we have the hobby plan that you can use for free. So just sign up for this hobby plan on ingest. I'll click on this button get started and let me login with my existing account using this sign in with Google. After sign up, it will ask you to create the organization where you can upload one organization logo. Mention the name and slug. So let's add the name grocery delivery. Create organization. After that in the left side you will find this key icon. Just click on this key icon and click on this event keys. Let's click here default inest key and uh after that it will reveal the key here. You can see this is the ingest event key. We have to add it in the environment variable. So let me just come back to the VS code. Open env file. Here we will add one comment. So let's add the comment here that is ingest and provide the environment variable name that is ingest event key equal to this code and here we will provide the key. Let's copy and paste it here. So we have added event key. After that we have to add the sign-in key. So let's add the invite variable name in justest
Segment 306: 612:30 - 615:00 signin key equal to quote and after that come back here and again click on the key icon then click on signin keys and here you will get the signin key. Let's just copy this signin key and paste it here. So now we have the inest event key and signing key. After that let's see the documentation to create the ingest function. So we will open the ingest.com again. Then go to docs. After that in the left side you will find the quick start. Let's click on this NodeJS. then choose express. So you can see here we have express quick start guide. Let's scroll down. So here we have the steps to create the ingest function. So let's start with the first step. So the first step is to install the ingest SDK. Right? So let's add it in our project. I'll copy this one. npm install ingest and come back to the VS code. Let's open the terminal and right now we are in the backend terminal right. So here we'll add control C to stop this. You can see we are in the server directory. So here we have to use that command to install the ingest package. So just paste npm installing inest. Press enter. After installing the package, let's see the next step. So you can see the next step that is run inestdev server. So we will skip this one. Let's go to the next step. So the next step is to create inest client. To create the ingest client, we have to create the ingest folder and index.ts file. Correct? So let me just create a folder in our project. So come back to the VS code. Start this project using npm run server. Let's hide this terminal and open the
Segment 307: 615:00 - 617:30 sidebar. And in this sidebar we have the server folder. So in this server create a new folder called ingest. In this ingest folder create a file called index.ts. just create this file here. After that in this one we have to paste this script. So copy this one and paste it here. So you can see we are importing the inest from inject package. After that here we have this create a client to send and receive events. And after that we are exporting this function array. And in this array we have to add all our functions that we will create here. So you can see here we have one ID. So let's add our own ID. We can write anything. So I'll write grocery delivery. So this will be the app id for ingest. Right now we'll create the functions here. For that we have the document here. Let's scroll down. You can see here we have step four that is set up the ingest HTTP endpoint. So we have to create the HTTP endpoint for ingest. For that we have to import the ingest and functions from the path. After that we have to import the ser from this ingest/express right and import the express also. So let's copy all three import statement and come back to the VS code and we will open the main file that is index dot ts or server.ts. So the server.ts is the main file. So in this server.ts let's paste all the import statement that is import express. from express it is already there. Remove it. Then we have import serve from ingest/express. Right? After that importing inest and functions from the path. So let's provide the path here. It will be dot / inest folder/index.js file. Just correct this import path.
Segment 308: 617:30 - 620:00 After that we have to add the route like this. We have to use app dot use/ API/est and serve. Let's just copy this one. And after that let me just come back here in the VS code and we can add this end point anywhere. So after this order here you can see we have this order route. So after this simply add app dot use/ API/ ingest serve then client and functions save the changes. So we have created the ingest functions endpoint. Right now we have to create the ingest functions. For that we have this structure here. We have to import the ingest. Then we have this instance that we have already created. And here we have the first function. Right? So let's copy this function from here. Come back to the documentation. So we will open the index.ts file. And in this one, let's add our function that we have just created. Let's remove this comment from here. And uh here we have this comment that is your new function. So let's update the comment here. Let's add low stock alert to admin. So we will send the alert email to admin when the stock is low right and we will set the threshold for the low stock. So just add con low stock threshold equal to zero. So when the stock gets reduced to 10 then we will send the email for every product. So here we have this function. So just update the function name. Let's add check lower stock equal to ingest dot create function. In this create function, first we have to add one object where we'll add the ID and triggers. After that we'll add the function that
Segment 309: 620:00 - 622:30 gets executed. So in this object first we have the ID then we will add the triggers like this. So in the ID we will add our own ID like check low stock. After that we have to add the name also. So let's add the next property name. Add the comma here. And in the name we'll add low stock alert. After this name we have triggers. So in the triggers we'll add the event. And let's add the event name. It will be inventory slash a stock dot updated and after that here we have this asynchronous function that will get executed when we trigger this event. So in this function parameter we will get the event and a step right. So let's just clear this function and from this event we will extract the data. Just add con curly braces product ID equal to event dot data after that let's add con product equal to await then step dot run and here it will add fetch product. So the step name is fetch product and after that we'll add the async arrow function. Now in this function just add return await and use the Prisma client. import it from the config folder. Then dot find unique. Let's add the table name also. So in this Prisma we'll add the product table. Then dot find unique.
Segment 310: 622:30 - 625:00 Then we'll add the wear property. In this where property just add the id and the id will be product id. After that here we have to add the if statement. If not of product or product dot a stock equal to null or product dot a stock greater than equal to this low stock threshold In this case, we'll add return and provide a skipped true. Then a stock property will be product dot a stock. So if the product is not available using this product ID or a stock is null or a stock is greater than 10 then we will skip this. And suppose the stock is available and it is less than 10. In that case we have to send the email to admin that is the product stock is getting low. For that after this if statement let's add await and provide step dot run and add the step name that is send low stock email. then comma and here we'll add the second function that is async add function. Now in this one just add const admin emails. First we have to find the admin emails. So just add process.env dot admin emails if it is available in this case just add process.envadmin env dot admin email image dot a split and we will split it using comma then we will add dot map provide the event in this parameter and uh after that we'll add e dot
Segment 311: 625:00 - 627:30 trim or empty array. So here we'll get the admin emails. After that let's add if statement. If admin emails dot length is equal to zero. It means there is no admin email in this case. Simply add the return and provide this escape. So let's add this one. Paste it here. We'll add a skipped true. And then we'll add the reason. And the reason will be no admin emails like this. Now suppose the email length is greater than zero. It means we have the admin email, right? So we have to send the email to each admin. Right? So for that we have to use the node mailer. Using that we will send the emails. To use the node mailer let's open the web browser again. Search for nodemiller. Open this link nodemiller.com. Here we have the step to install it. So let's add npm install node mailer. Just copy this one. Come back to the VS code. Let's open the terminal and stop this project using Ctrl C and paste this npm install node Miller. After that we have to install its type also right. So for that we'll add one more command to install the node miller type. So after installing it, let's add npm install dash d then at types / node miller. So it will install the types in dev dependencies. It's done. After that, start the project using npm run server. So, it will start the backend server and hide this terminal. After that, let's see the documentation here. So, we have to create a transporter to send the email. Right? As you can see
Segment 312: 627:30 - 630:00 here, we have to use this script to create the transporter. For that, let me just create a new file. I'll come back here. In this config, we'll create a new file and write the file name node mailer.ts. In this one, just paste this code. Now, here import statement is required. We'll remove this required. So just add import and uh we will import the create transport from node miller. So from this node miller we have imported the create transport and after that let's simply use this transporter equal to create transport. Now in this create transport we have to add the host port then secured let's remove it we can use the O in this O we have to provide the user and password right now after that let's see the next step so we have to create the send email function as you can see Here on this transporter we have this dot send email function and in this one we have to provide the from email that is the sender email then two that is the receiver email then subject and message in the text or HTML both will work right for that let's just come back to the VS code here let's add con send email equal to async arrow function and after that here we will get the data in parameter. So just dstructure it here we'll get to subject and body right and here we have to add the type also. So just add colon curly braces. Two will be a string. Then we'll add the subject.
Segment 313: 630:00 - 632:30 Subject is also a string. Then comma and provide the body. So the body will be a string too like this. Now within this function just use await. Then this transporter dot send mail. In this send mail we have to add from and in the from just add the sendered email id. Right? So we will store the sendered email id in the environment variable. So let's add the empty string for now. After that we'll add two. Then we have to add the subject. Then we will add the HTML. In this HTML provide the body. And after that here we'll add the return and uh this will return some data. So just add const response equal to await and from this function we will return this response. So just add return response right and after that export this send email function from here. So we can access it in any other file. So we have added this export default send email. Now here we have to provide comma instead of this semicolon. Now we have to provide the sender email. Then provide the host name and SMTP username and password. To get the SMTP details we are going to use Brebo. So let's open the web browser and search for Brevo. Open this. Let's sign up here for free. And uh after sign up you will get the SMTP credentials to send the emails. So let's just click here and go to settings. After that come here in the SMTP API. After that here you can see we have this SMTP
Segment 314: 632:30 - 635:00 address. So just copy this one and paste it here. We will provide this smtp relaybrao.com. Then the port will be same. After that we have to add the login email id and password. So just click on this button generate new SMTP key that will be the SMTP password and this will be the SMTP username. to store these credential. Let me just come back to the VS code and uh open env file. In this env file, let's add SMTP credential. So just add the comment here that is SMTP credentials and here we'll add sendered email. After that we will add the SMTP user. Then we will add SMTP password or pass. Now let's paste the credentials here. So just come back here. We will copy this SMTP user. Here we have to provide the sender email. So the sender email will be same that you have used to create your account. Right? So let's paste my email id here that I have used to create the brao account. And after that here we'll add the password. So click on this generate new SMTP key and provide one name here grocery delivery and key has been generated. copy and paste it here. So we have added the SMTP user password and sendered email. After adding it, let's come here. You can see we have already provided the SMTP user and password from process.env. Right? Similarly, we have to provide the sender email. So just copy this one and paste it here in this form. We will add process envir save the changes. So now we can use this send email function. We will provide two
Segment 315: 635:00 - 637:30 subject and body. That's it. It will send the emails for us. So let's just come back to the ingest functions that we are creating in the index.ts file. And uh here we have to send the email. So let's add await then send email and let's click on this suggestion. So you can see send email has been imported from the config folder node mailer.js file. Now in this one we have to add the object right and in this object we'll add the two. So the two property will be receiver email id right. So it will be admin emails dot join and join with comma. So it will send the multiple emails if we have multiple admins. Right? After that we have to add the subject. Let's add the subject here. And after that we have to add the body. So let's add the body here. So we will provide the two subject and body. So in this subject let me add the message that includes the variable also. So just add the back text here to insert the template. We will add the subject like low stock alert and after that we'll add dollar sign curly braces and provide the product dot name. So here you can see we will get the product from the event. You can see we have the product ID from the event dot data. And using this product ID we will find the product. And after finding the product we have to check the stock right. So we will send the message low stock alert and then product name. Then we have to add the detailed message. So instead of plain text message we are going to use the HTML template here. So we have provided this template in the asset file. Just copy from there. So let me just come back to the
Segment 316: 635:00 - 637:30 downloaded asset. Here you will find the email folder and here we have low stock email template. Let's just copy everything from this file and uh paste
Segment 317: 637:30 - 640:00 it here. So in this body we have to paste the template. So just add the back tick here. In this body, we will add the back text and then paste this HTML template. After adding it, let's scroll down and here just before this last parenthesis, we have this last curly braces. So before this curly braces, we'll add the return statement. Let's add alerted true. Then we'll add the product also. So just add product. It will be product dot name. Then we'll add the a stock. In this stock, let's add the product dot stock. That's it. So what will happen? It will check for the available stock. If it is less than 10 then it will send the reminder email to admin. Now we have to pass this function. So just copy this function name that is check low stock and add it here in this functions adding. That's it. Now we'll create our next ingest function. To create that here first we will add the comment that is monthly offers email first of every month payday. So what will happen? It will send the email on first of every month right? So it will be a chron job. So let's add the function name here. const send monthly offers equal to that inest instance then dot create function. In this create function add the object. After this object we have to add the asynchronous function. So just add this async function here. Now in this first object we have to add the ID. So let's add the id called send monthly offers. Then comma provide the
Segment 318: 640:00 - 642:30 name also. So the name is monthly payday offers. After that we'll add triggers. So just add the triggers property. In this triggers property, we will add the add a and provide the chron. In this chron, let's add zero 10 1 star and star. Right? Now let's come here in this async function. Here we'll get the parameter. So in this parameter we'll add the step. After that just add con deals and users equal to await and use the step dot run. In this a step dot run we will add the step name that is fetch deals and users. Then we will add comma and provide the asynchronous function again. And in this function let's add the command get top discounted products as featured deals. Here we have to add this angle bracket. Now it will be add a function. So after this comment let's add con products equal to await and provide the Prisma client dot product table dot find menu. In this find menu just add the where property and in the where let's add the stock greater than zero. Then add comma and provide order by original price descending. Then comma and we'll add take six. So it will give the six product only. After that here let's add con all users equal to await and provide the Prisma instance dot user
Segment 319: 642:30 - 645:00 dot find menu in this find menu let's add the select in this select just add the name pro true then we'll add the email through. That's it. After that, let's add the return. So, we will return the deals. In the deals, we will get the products. Then, we'll return the users. In the users, we'll return all users. Correct? After that here we'll add the if statement. If users do.length is equal to zero or deals do.length is equal to zero. If there is no user or no deals in this case we will skip this step. So let's add return a skipped true and provide the reason no user or deals. Now suppose the deal is available and we have the user also. So let's add let count equal to zero. We will send the emails in chunks. We will not send all email at once. Right? So let's add the comment here. Send in batches of 10 to avoid overlimiting email server. So we will send the 10 emails at a time. For that let's add con badge size equal to 10. Then we'll add for let I equal to zero semicolon I less than the user dotlength then semicolon I plus equal to batch size. Here we'll add con batch equal to
Segment 320: 645:00 - 647:30 users dot slice and provide the i that is index comma i plus batch size. Next we'll add the await and provide a step dot run. In this a step.r run we'll add the back tick and provide the step name that is send offers batch and index i. Then we'll add the arrow function. So just add asynchron function here. In this function we will use for. Now in this for just add con u of batch. In this case just add await send email. In this send email just add two property and provide you dot email that is user email. Then we have to add the subject here. So let's add the subject. In the subject we'll add back text and provide fresh pics just for you. Then add comma and provide the body. So in this body again add back tick. Using this back tick we can insert the variables also using the template lit. So here also we'll use the HTML template that is already provided in the asset. So in the asset you will find the email folder and here you will find offer email template. So just copy this one and uh paste it here within this body. So we have provided this HTML template for sending the email. Right now after that here let me add send count plus equal to batch dotlength and after that here we'll add the return statement. So just add the return and provide sent and it will be sent count. That's it. So we have created the next
Segment 321: 647:30 - 650:00 ingest function. Using that we can send the emails for monthly offers. Right after that we have to create the ingest function where we will auto assign the rider to a new order after 5 minutes. So let's add the comment first that is auto assign rider after 5 minutes. Then we have to create the inest function using create function. So just add con auto assign writer equal to justest dot create function. Before creating this function, let's pass this one also. Let's just copy the function name that is send monthly offers and paste it here in this array. Now let's continue this function create function. Here we'll add the ID. Let's add the custom ID that is auto assign rider. Then we'll add comma and name. In this name let's add auto assign delivery rider. Then we'll add comma and provide the triggers. In this triggers, we'll add the array and provide the object with event. In this event, let's add the order/plaged. So when the order will get placed, we have to execute this. That's why we have added this trigger. And uh after that here we'll add the comma and provide the next function. So just add async add a function. Now in this asse function we'll get the parameter. So just dstructure it. We will get the event and a step. So after that let's add cones order id equal to this event dot data. So from this event data we will get the order id. While calling this event or triggering this event, we will provide the order id in data property. Now here we have to wait for 5 minutes. So let's add the comment that is wait 5
Segment 322: 650:00 - 652:30 minutes before attempting assignment. So here just add await a step dot sleep and then we'll add wait 5 minute that is the step name then comma 5 m added in string. Now after that let's add con result equal to await a step dot run. Here we'll add the step name assign writer comma and provide async arrow function. Now in this function we'll add const order equal to await provide the prisma dot order dot find unique in this one just add the where property and let's add the ID and the ID will be our order id. That's it. Now after that let's add the comment here that is escape if order does not exist already assigned or cancelled. So here we have the order details right now after that let's add the if statement if not of order then return and provide the skipped true and provide the reason that is order not found. Now let's duplicate it. Here we will add if order dot deleted partner id if it is already available. In this case we'll add return a skipped true and then we'll add the reason that is already assigned. Now let's add another if statement. Here we'll add if and uh in this if statement just add cancelled comma delivered dot includes order dot a status as a string. So if the order status is either
Segment 323: 652:30 - 655:00 cancelled or delivered then also we have to skip this step. So just add return a skipped true and reason is order is and then a status. So just add the back text here. In this back text provide order is then order dot a status order is cancelled or order is delivered. Now suppose the order is available and it is not cancelled and delivery partner is not assigned. In this case just add comment that is find an active rider not currently delivering. It means we will find the rider who is available. So just add con busy orders equal to await and provide the Prisma dot order dot find many. In this find menu add the object and provide the where property and let's add the a status. In the status we'll add this object and provide in an array. In this array just add assigned packaged art for delivery. Then we'll add the comma and provide the delivery partner ID. So let's add the object and provide not null. After that just add comma select. In this select just add object and provide delivery partner id true. That's it. Now let's add con busy rider ids equal to busy orders dot map. Here we'll get individual order in the parameter and then we'll add order dot delivery partner id and uh after that let's add con available rider equal to await then provide prisma dot
Segment 324: 655:00 - 657:30 delivery partner dot find first in this Find first just add the object and provide where is active is true. Then we'll add id and provide not in not in this busy rider ids as a string and empty array. Now after that let's add if statement here. If not of available writer then we'll add return and provide the object with escaped true and then we have to add the reason for escape this step. So just add the reason it will be no writers available and if it is available it should be assigned right. So just come here and provide one command generate sixdigit OTP. Just add const equal to math dot floor and provide this number that is 100k and after that we'll add plus math dot random multiply with 900k then dot do a string call this two string function. After that we will add con history equal to array dot is array. In this one just add order dot a status history. Then question mark if it is true then we'll add order dot a status history. Else we'll add the empty array. Then we'll add as any and empty array. After that we'll add history dot push. In this history dotpush we'll add the a status. So the a status will be
Segment 325: 657:30 - 660:00 assigned. Then we'll add note. In this note we'll add the back ticks and write auto assigned to and provide the writer name. Then we'll add the timestamp. In the time stamp, let's add new date. That's it. So, a new writer has been assigned here. And after that, let's add await and provide Prisma dot order dot update. In this one, just add where and provide ID is order ID. Then we'll add the data here. In the data, let's provide the delivery partner ID colon available writer dot id. Then we'll add the delivery OTP. So the delivery OTP will be this OTP. Then we'll add the status. So the status will be assigned. After this a status just add the status history and uh provide this history. That's it. Save the changes. Next we have to return the data here. So let's add return and provide object where we'll add assigned property true then add comma provide rider ID it will be available rider dot id then we will add the rider name it will be available writer dot name then we'll add order ID it will be order ID that's it now here we have to add the return. So let's add return and provide this result. So we are getting the result here. You can see here we have this result. So it will be returned from this function. Now after that we have to add this function in our array. So let's add auto assign rider in this array. So we have created three functions using that we can send the reminder email to admin when the product stock is low. Then we are sending the email to all users that
Segment 326: 660:00 - 662:30 will be sent on first of every month that includes the offer data. Then we have added the ingest function that will auto assign the rider after ordering the product and after 5 minute of the order. Right now after creating these ingest function we have to call this function using the event. Right. So the last one is called using the event that is the third one. Here we have used the event. Right? But in the second one you can see we are using chron job that will execute this function every month on first. Right? So we don't have to trigger this one. It will be triggered automatically on 1st of every month. And in the first one we have to trigger the event and the event name is inventory/ a stock update. So let's call this event in our controller. So we will open the controller folder and order controller js file. Let's open this. You can see here we have this controller file. Let's update this one. You can see the spelling is incorrect. Let's rename it. We will add order controller. I think it was correct only. No, it's C. Let's add order controller.ts. Now it is correct. Let's save the changes and after that update imports of order controllers. Yes, import statement should be updated everywhere. Let's click yes. Save the changes. And after that, let me see the imports in the file. Let's open the order routes. Here we have order routes. And in this one, you can see the order controller has been updated. Now it is correct. Next in this order controller we have this create order function. So a new order will get created using this controller. So in this one just scroll down till end. So in this one you can see here we have created the order
Segment 327: 662:30 - 665:00 and the order data is getting saved in database. After that here we are sending the response. After sending the response to user, we are decreasing the quantity right we are decreasing the order stock in the database. After that we have to trigger the event. So let's add the comment here that is send a stock update events for each product in the order. For that let's add for then add cone item of order items. Then we'll add await ingest. import this inest from the ingest folder/index.js file. Let's scroll up. You can see inest has been imported from inest folder index.js file. Now here we'll add await inest dot send. In this send at the object where we'll add the name. So it will be event name right. So let's add the name that is inventory/ stock updated. So we have added inventory/ a stock dot updated. Then we have to provide the data here. So after this name let's add comma data property. In this data let's add the object and here we have to provide the product ID. So let me type the product ID here and the product ID will be the item dot product like this. So it will trigger this event and it will send the email when the stock is less than 10 for any product. After that let's add another event also. Just add await. Use this ingest dot send. Here we will add the name. So the event name will be order/placed. So when the order gets placed,
Segment 328: 665:00 - 667:30 we'll auto assign the rider after 5 minutes. So just add the data and then we'll add the order id in the data. Order id will be our order dot id. Right? So what will happen when we place the order it will check for the stock of all the product and if the stock is less than 10 it will send the email to admin. After that it will trigger this event. So this event will be triggered and it will be sleeping for 5 minute. After 5 minute it will check the status that rider is assigned or not. If the rider is not assigned after 5 minute then it will auto assign the available rider. Right now to run this inest functions we have to deploy our backend server. For that first we'll upload these codes on GitHub. After deploying this project on GitHub we will deploy it on Worel. For that let's open this sidebar and uh here we have the client folder and server folder. So after that in this main folder that is the project folder called grocery delivery. Here we will create a new file. So add a file here and write the file name dot get ignore. In this getit ignore file, let's add node modules. So it will exclude this node modules folder. Then we'll add env. So it will exclude env file also. After that we have to add the versal json configuration. For that just open the web browser and open github.com/greatdev. Just open this nodes folder and in this one you will find the versel JSON config for MER. Let's open it. Here we have versel.json
Segment 329: 667:30 - 670:00 file name and this is the configuration for backend server. Right? So just come back and uh in this server folder create a file called versel.json. JSON. Let's copy the file name again. Versel.json from here and create it here in this server folder. So we have added versel.json in the server folder and paste this code. Save the changes. Now close it and uh copy this file name and add it in the client also. So here we have the client. In this client, let's add versel.json file and paste this code. You can see vers JSON config to support React router in front end. Right? So just copy this one, paste it here. So we have added the versel JSON configuration for both client and server. After that just click on the source control icon. Click on initialize repository. You will see this button when the VS code is configured with GitHub. After that here we'll add the commit message. First commit. Let's choose the repository type. We'll choose GitHub private repository and the name is grocery delivery. So it is uploading this code on GitHub. Now it is done. Let's click here to open this repository. Open on GitHub. So now you can see the grocery delivery project has been uploaded on GitHub. Here we have the repository where we have the client and server. Right now after that we have to deploy our server which is the back end. So just open the versel.com and here you need to create an account and after that come to the dashboard. In this dashboard you will find this button add new in the right side. So click on this button and choose project. So here we'll add a new project. So you can choose the repository from this list. So let's import this repository that is grocery delivery. Click on this import. And we have to deploy the back end only for
Segment 330: 670:00 - 672:30 now. So just add the grocery delivery server. We are adding the project name grocery delivery server and provide the root directory. So click on this edit and the root directory will be our server directory. Click on continue. Then we have to add the environment variables. Just expand it and here we will paste all the environment variables. So just come back here and open the server env file and copy everything from here. Copy and let's paste it here. So you can see we have added JWT secret admin emails database URL cloud nary cloud name API key API secret inest event key signin key and sender email SMTP user and SMTP password. All the environment variables are added here. Simply click on deploy. So it will start deploying our backend server on versel. After deployment we will get the live link where it will run our backend server. So you can see this message congratulation you just deployed a new project. But here we are getting some error. So let me first see our backend server that is running in the local host. So in this local host let's open the terminal and here you can see it is successfully running but it is not running on the live server. So just click on this continue to dashboard right. So here we have to add one more thing. Let's just click on continue to dashboard for now. And before deployment we have to update our script in the package JSON right. So just come back here in the VS code. You can see here we have package dojson file in the backend server. Let's open it again. And in this one you can see we have this start server and build right then we have to add one more uh script here. So let's add
Segment 331: 670:00 - 672:30 post install.
Segment 332: 672:30 - 675:00 In this post install we'll add colon and provide comma here and provide npx prisma generate. So we have added post install npx prisma generate and then we have this a start server and build. Let's save the changes and commit this changes. Just click on this source control and here we'll add post install added in package json. commit changes and sync changes. So once we make any changes in the GitHub, it will automatically redeploy our versel project. So just come back here and then we'll go to deployments. You can see here a new deployment has been created and it is ready. Right? Let's go to project. I'll go to overview. And uh after that let's come here in the logs. We don't have anything in this logs. I'll just come back go to overview and open this URL. To fix this issue, let me just come back to the VS code and uh let's open the versel JSON file that we have created. So you can see in this server we have created versel.json file and in this one we have this file name that is builds src server dot js. So let's update it. It is written according to the javascript. So let's change it to ts. We are adding server.ts. Then here also we will update the server ts. Save the changes. After that let me open the client project also. In this client we have versel.json. And here we don't have to update anything. It will be same. So let's click on this source control icon. And we'll add the message vers JSON updated and commit.
Segment 333: 675:00 - 677:30 then sync changes and after committing the changes it will update the file on GitHub and once the file gets updated it will redeploy the project. So you can see here we have the third deployment which is building right and we can open the project once it is ready. So just wait for a few seconds until the deployment gets completed. Now you can see the status is ready. Let's go to overview. And now you can see here we don't have any error message. Let me open this domain in new tab. So this is the live link of our backend server. So the backend server is successfully running. And here we have this message server is live. So this is the live link of our backend server. Now just copy this live link. After that let's sync our inest application. So just come back open the inest dashboard. We have this inest dashboard. Then go to app. In this apps in the top right corner you will find this sync new app. Just click here and here we have to provide the app URL. So let's provide this URL. Then provide slash API/est. Let me show you in the file also. In this server.ts file, you can see we have added this path / API/est. Right? So after our domain we have to add this path like / ai/ingest and click on sync app. Now the application is synced and here we can see all the three functions that we have created in our project that is auto assign delivery writer low stock alert and monthly payday offers. Right. So these two functions are triggered using the event trigger. Right? And the third one is chron job that will get executed every month on
Segment 334: 677:30 - 680:00 first. That's it. Now let me come here in the sidebar. Click on this functions. So here also you can see all three functions. Now it will get executed when a new order get placed. The second one will get invoked when the order get placed. Here we have to provide the product data then only it will check the stock of that product. But in the third one you can see it will get executed automatically every month. So we can test it right now also. Just click on this inest function and in the top right corner you can see all actions. Just click here and click on this invoke. So it will invoke this function just now. Let's click on this button. After that I'll come here in runs. Let's refresh it. So now you can see here we have the status completed. It means this inest function run has been completed. And if I click here it will display the details also. So in this one you can see we have this run. Here we have the step that is fetch deals and users. Just click here. So you can see the output in the right side that is deals that is empty array users empty array because we don't have any product in the database and we don't have any user also in the database. So once we have the product and we have the user data in database then it will send the deals on the user's email id. So this ingest function is successfully working. After that let me come back to the VS code and create the next features. We'll create the API for our next feature. Now we have to create the APIs for address feature. Using that user can add a new address, get the address list, update the address and delete the address. For that we have to create the controllers. So let's open the server. In the server we have controllers folder. So in this controllers folder create a new file
Segment 335: 677:30 - 680:00 that is address controller.ts. In this one let's add the comment. So we will write get user address. So the
Segment 336: 680:00 - 682:30 first API will be for getting the user's address list and the type will be get. Then we will write the comment that includes the path. So the API path will be / API/ addresses. Now let's create the function and export this function. So let's add export const and the function name is get addresses equal to asynchronous add function. Now let's add the parameter. So we will get the request and response in the parameter and we have to import the types also. So just import this request type from express. After that import this response type from express. So you can see this import statement request and response has been imported from express package. Now in this function let's add cones equal to await and use the Prisma client. So import the Prisma client from config folder Prisma dot js file. Then let's add dot address table dot find menu and after that here let's provide where property we have to add it in the object. Just add the object like this and provide the where property in this where let's add the user ID and the user id will be the request dot user dot id. Then add the comma and provide the order Y. In this order Y just add created at and ascending. After that here let's add the response. So just add response dot JSON and in this response provide the addresses.
Segment 337: 682:30 - 685:00 So here we are finding the addresses list from the database and we will filter the addresses using the user ID. So it will return all the addresses of the particular user and we are returning it in the response. Now let's add the next API that is for the adding a new address. So we will write the comment here that is add address and then we'll add the type. Type will be post. so that we can send the data on this API and the path will be / API/ addresses right now after that here we have to add the function so I'll just copy this function paste it here and we'll change the function name so let's write the function name called add address for adding a new address now here we will get some data from the request body so let's add con curly braces is equal to request dot body. So from this request body we will get the address details like we'll get the address label. After that we'll get the address that will be a street name right then we'll add the city state zip is default latitude and longitude. Now after that here let's add the if statement. We'll write required coordinates. We'll add if statement. If coordinates that is latitude or longitude is not available. It means is equal to null. In this case, simply add return response dot a status will be 400. Then dot JSON and in this JSON we have to add a message. So let's add the message that is location coordinates are required. Please allow location access. Right now after that here we'll add con current addresses equal to await and use this paste it here.
Segment 338: 685:00 - 687:30 So we have added await prisma dot address dotfind many where user id will be request dot user dot id. remove this order Y. So we'll get the current addresses list. Right now after that let's add let make default equal to is default. Now let's add if statement. If current addresses dotlength is equal to zero in this case just add the make default equal to true. It means when we don't have any current address available then the new address that we are going to add is going to be default address. Let's add if statement again. Here we'll add make default true. If it is true in this case let's add a wait prisma dot address dot update menu and uh after that add the object here. Now let's add where. In this where again add the user id from here. Then add comma and provide the data that needs to be updated. So in the data let's add is default false. So what will happen? So it will make the is default false for other addresses. And after that let's add the new address in the database using await prisma dot address dot create method that will create a new entry in the database. Here we will provide the data property. In this data property let's add the user ID. It will be request dot user exclamation dot id. Then we will add the label. After this label, we will add the address. Then we will add city. Then let's add
Segment 339: 687:30 - 690:00 a state. Then we'll add zip. Then is default. Is default will be make default. After that let's add the latitude and convert this into number. So just add number function and provide the latitude that we are getting from the request body. Duplicate it. Here we'll add comma and provide longitude and convert it into number. So a new data will be created. It means a new address will be added in the database. After that, let's return this address. So just add constress is equal to await. Use the prisma dot address dotfind many. And uh after that here let's add the object in this one. paste this where and order Y. So let's add where user id is request dot user do ID then order Y it will be created at ascending and uh after that we can send the response. So just add response dot a status in the a status we'll add 2.1 then dot JSON in this JSON just add the addresses that's it let's save the changes and uh after that let's create the next API we have created the controller function for getting the address list and updating the new address. It means adding a new address. After that, let's fold it and create the next API controller function that is update address. Then we'll add the type. So the type will be put and path will be / API/ addresses colon id so that we can find the individual address using this id and update that address. So just add the function here and update the function name that is update address. Now in this update address again we will
Segment 340: 690:00 - 692:30 get the same data. So just copy the previous one copy and paste it here. So let's get the label address city zip default that is is default latitude longitude from request body. After that let's just copy this one also that is required coordinates paste it here and after that let's add if statement from here just copy and paste it here if is default that we are getting here if is default is true in This case we'll use await prisma dot address dot update menu and provide where user id request dot user do ID and data will be is default false right and after that let's add con data and the type is any equal to object then we'll add the if statement if the label is the data dot label equal to label. Now duplicate it. Here we'll add address. If address is available then we'll add data dot address and it will be address. Duplicate it. We'll add the city. Let's duplicate and provide the estate. Then we will provide zip. After that let's provide if is default is not equal to undefined. In this case just add data dot is default equal to is default. Now duplicate it. Here we'll add if latitude not equal to null then we'll add data dot latitude equal to number function and latitude duplicate it here we will update it to longitude that's it now after that let's
Segment 341: 692:30 - 695:00 update this data in our database for that here we'll add try catch a statement and in this try block we'll add await and provide the Prisma dot address table dot update. Now in this update first we'll add where and in this where just add the id. So the id will be request dotparents do id right in the request params we are getting the individual address id and after that here we'll add the data so this data will get updated in database now come here in the catch block here we'll get the error and after that let's add the return and provide the response dot a status 44 four then we'll add dot JSON and in this JSON simply add message that is address not found right now after that here let's add con addresses equal to await and provide prisma dot address dot find many and here let's add the same thing that where user id is user do id from the request then order y so it will return all the addresses right and after that here we have to add comma and then we can send the response so let's add the response dot json and provide the addresses from here. That's it. Now here we are getting the warning in this ID. So here let's add as a string. Let's save the changes. So now we have created the controller function to update any address. Next we have to add the controller function to delete the address. Right? So let's add the comment that is delete address and the path will be / ai/ addresses / colon id and the type will be delete. So using this padams we can get the individual address
Segment 342: 695:00 - 697:30 and we can delete that right. So let me just copy one function name from here. copy this paste it here and let's update the function name. So the function name will be delete address and after that here let's add try catch in this try block simply add await and use the prisma dot address dot delete. In this delete let's add the where and in this where let's add the id. So the id will be request dot paradams dot id. Here also we'll add as a string. So now let's come here in the catch block. Here let's add error. And in this catch block simply add console.log log and provide this error dot message and here we'll add colon any that's it and after that here let's get the new address list so I'll copy this one and copy this one also paste it here so we will find addresses using await prisma dot address dotfind many provide the user id and order by created at then return the response that is response dojson and addresses that's it so now we have created all the controller function to manage the address next we have to create the API endp point for that we have to create the routes correct so let's open the sidebar Here you can see we have the routes folder. In this routes folder create a new file and write the file name address routes.ts. Now here let's import the express from express package and then we'll add con router equal to express dot router.
Segment 343: 697:30 - 700:00 Now in this address router we will add all the endpoint and let's add the type get for the first one. Then the path will be slash and then we have to add the middleware that is o because these features are only accessible for logged in user. Right? So we have added this middleware o. Then we'll add the function that is get addresses. So import this function from controllers folder address controller.js file. Now let's duplicate it. In the second one we'll add the type post. The path will be same. Then middleware o and provide the function add address. Now in the third one we will use the put method. Then the path will be / id. Then o middle pair and provide update address function. Next we have to add the type delete in the last one. Then the path will be colon id and here we'll add delete address controller function. So we have get addresses, update address, add address and delete address. Now let's export this router from here. So let's add export default address router. Now let's add this router in our main file that is server.js file. So just open the server dot ts and in this one after this in justest just add app dot use and provide the path that is / ai slash addresses and then comma and provide this address router import it from the routes folder. You can see address router has been imported from routes folder address routes dot js and here we have added this path that is / ai/ addresses. Save the changes and now we have created the API to manage the user address. Now we will create the APIs for admin like we will display the admin dashboard data. After that we will add the API so
Segment 344: 700:00 - 702:30 that admin can get the list of delivery partners. Then admin can create the delivery partner profile or register the delivery partner and admin can update the delivery partner and admin will have the access to assign delivered partner to any order. Right? So to create these APIs for admin, let me just come back here in this controller. In this controller, create a new file and write the file name admin controller.ts. Now in this one just add one command that is get admin dashboard data. To get the admin dashboard data, we'll create an export a function. So let's add export const and get admin stats equal to asynchronous add function. In this function parameter, we will get the request and response and we will provide the type also. So let's import this request type from the express and response type from express. Now after that in this function let's add const and provide the array. In this array we will destructure the data. So just add array equal to await and here we will use promise dot all in this one just add the array. Now first we have to get the order count right it means total order. So let's add it here. In this array we'll add total orders. And to get this total orders let's add Prisma client. Let's add Prisma. Import the Prisma from config / Prisma.js. Then dot order dot count. In this count, let's add where let's add curly braces not. In this note, let's add the square bracket and this curly braces. Then provide the payment method is card
Segment 345: 702:30 - 705:00 but the status is false. It means the payment status is false. So just add comma and provide is paid property false. So we have selected the payment method card but the payment is not completed. So we will exclude this list and provide the total number of order. Now after that add the comma here and here we'll get the total user count. Right? So just restructure it here. We'll add comma total user and let's get the total user using the Prisma dot user table dot count. After that we will get the total number of products. So here just add comma total products. And to get the total products let's duplicate it. We'll add prisma dot product dot count. Now after that we have to get out of a stock product. So let's add comma and provide out of a stock in this array. And here let's get that out of a stock data. So just duplicate it. And after that provide product dot count. And here let's add the object and provide where stock is zero. Right? Now we have to get the total number of partners. So just add comma here and provide the total partners in this array. And uh after that let's duplicate it and provide Prisma dot delivery partner table dot count. That's it. So it will return total number of delivery partners. After that we'll provide the recent orders. So here just add comma recent orders. And then let's add this duplicate and uh provide Prisma dot order dot find menu. In this find menu, let's add the object and just add where property and provide this one where
Segment 346: 705:00 - 707:30 not payment method card is paid false. Then add comma here. And then we will add the order Y by in this order Y by just add created at descending. Then we will add take eight. So it will provide eight orders in recent orders. Right? After that let's add the include. So in this include we'll add user data. And in this user data we have to get the name and email. So just add the select and in this select let's add the name and email true. Now add the comma here and duplicate it. Here we'll add delivery partner. After this include in this delivery partner let's add this select only. So let's remove this curly braces from here or let me just undo this. You can see here we have this curly braces. So just send it to new line and here we'll add the comma. So in this include we'll add the next data that is delivery partner then colon curly braces and provide the select. In this select just add name true and provide the phone true. This is for the user and uh after this user we have added this delivery partner. So just remove this curly braces from here and here also. Now it is correct. So you can see now it looks clear in this include we are including the user and delivery partner. In the user we have selected the name and email. In the delivery partner we have selected the name and phone. Right now after that we have to send the response. So just come here before the closing of this function here we'll add response dot JSON and in this one just return this things. Let's just copy and paste it here. We will return the total orders, total users, total products, out
Segment 347: 707:30 - 710:00 of a stock, total partners and recent orders. That's it. So we have created this function. Using that we can return the dashboard stats. Now let's add the comment here for the next controller function that is for getting delivery partners list for admin. Right. So let's just copy this line to create our new function and add the function name that is get delivery partners. And to get the delivery partners simply use con partners equal to await and use the Prisma model I mean Prisma client then dot delivery partner dot find many. Now in this find many let's add order by and simply provide created at descending. Now we have to send the response. So let's add the response dot JSON and in this one simply provide this partners list. So we have created this function using that admin can see the delivery partner list. After that we have to create the next function. Using that we can create a new delivery partner profile. So let's add the function here. Copy this one. Paste it here and add the function name that is create delivery partner. Now in this create delivery partner we'll get the data from body right. So let's add cones equal to the request dot body. Now from this request body we will get the email name, password, phone and vehicle. These details are required to create a new profile for delivery partner. After that we'll add the if statement. if any of this data is missing. So just add if not of name, email, password, phone. In this case, let's add the response dot a status and a status will be 400. then dot JSON and in this JSON we'll add the message property where we will write please provide all required fields and after that
Segment 348: 710:00 - 712:30 stop this execution so simply add return that's it now suppose all fields are available in this case we'll save the data in database but we will not save the exact password we will encrypt the password so just add const hash password equal to await and here we will use the decrypt package. So let's add brypt and uh let's import it here. We'll add import brypt from brypt package. Now let's add brypt dot hash method and here we'll add the actual password then comma 10. So we'll get the encrypted password or hashed password that we can store in the database. So let's add con partner equal to await and use Prisma client dot delivery partner table dot create method to create a new entry. Now add the object and provide the data that needs to be added. So in this data let's add this one. Provide name, email, then password, then phone and vehicle. Now let's update the data here. In this email just add colon email dot to lowerase. So we'll convert the email in lower case only. And after that here we'll add the password. So the password should be our hashed password then phone and vehicle. That's it. Now let's add the return statement. So just simply add response dot a status. So we will send the response here with a status 2.1 and then JSON in this JSON provide our partner detail that is added right. So we have created a function using that admin can create a new delivery partner profile. After that we have to add a function to update the delivery partner. Right? So just add the comment update delivery partner and uh let's just copy this one paste it here and update the function name that is update delivery partner. And for updating the delivery partner again we
Segment 349: 710:00 - 712:30 need the data from body. So let's add
Segment 350: 712:30 - 715:00 this one. con name, phone, vehicle type. We will not update the email and password. We will update name, phone, vehicle type. And let's add is active and get it from request dobody. After that, let's create one data object that needs to be updated. So just add con data and the type will be any equal to empty object. Now in this one let's add all the data that needs to be updated. So just add if statement if name. If we are providing the name from the body then we will add data dot name equal to name. Now let's duplicate it. We'll add if phone we are providing the phone. Then data dot phone will be phone. If we are providing the vehicle type then let's add data dot vehicle type equal to vehicle type. If we are providing is active then data dot is active will be is active. Remove the last one. So we are updating the name phone vehicle type is active. Now after that let's add the try catcher statement. In this try block, let's add con partner equal to await and use the Prisma client dot delivery partner table dot update method. In this update method, let's add the where. In this where we'll add the id. So the id should be the request dot paradams dot id and here we'll add as a string. Now after that we'll add comma and provide the data that we are going to update. That's it. Now after that here we'll send the response. So in this try block let's add response dot JSON. In this response dojson provide the partner. Now come to the catch block. In this catch block just add response status 4.4 then dot JSON method and provide the
Segment 351: 715:00 - 717:30 message that is partner not found. That's it. So here we have created the controller function. Using that we can update the delivery partner. Next we'll create another controller function. Using that we can assign the delivery partner to any new order. So let's create a function here. So copy this function paste it here and update the function name that is assign delivery partner. Now in this assign delivery partner we need the partner ID from request body right. So let's add con partner ID is equal to the request dot body. So we have to send the partner ID in the request. After that just add con order equal to await and provide the Prisma dot order model or order table dot find unique in this one let's add the where provide the id will be the request dot dot params dot id let's add as a string. So here we'll get the individual order for which we have to add the delivery partner. Now after that let's find the partner using this partner id. So just add con partner equal to await use the Prisma client dot delivery partner dot find unique. In this find unique just add the where and provide id and the id is our partner ID that we are receiving from the body. Now after getting the order data and partner data we have to generate the OTP. When the partner is assigned one OTP should be generated. So just add cost con OTP equal to a string function and here we'll add the math dot floor and after that here let's add 100k plus math dot random
Segment 352: 717:30 - 720:00 and multiply by 900k. So we'll get the unique OTP here. And uh after that let's add let a status is equal to order dot a status. Here we'll add exclamation. After that let's update the a status history. So just add con history colon any array equal to array dot is array and provide the order dot a status history. If it is true in this case just add order dot a status history as it is. else we'll add empty array. Now after that let's add if statement. If order dot a status is equal to placed or order dot a status is equal to confirmed. If the order is placed or confirmed then only we will assign the partner. So just add a status is equal to assigned. Then we'll add the history also. Just add the history dot push. And in this one just add a status. So the a status will be assigned. Then we have to add the note. In the note, let me provide the message. So let's add the back tick so that we can insert the template lit. So just add assigned to and then we have to provide the delivery partner name using dollar sign curly braces and provide the partner exclamation dot name and then add comma and provide the timestamp. So in the time stamp let's add new date that is the unique time stamp. Now after
Segment 353: 720:00 - 722:30 that here simply add await prisma dot order dot update. We have to update the order data in database. So simply add where property and uh find the order using the id. ID will be this order exclamation do id then comma provide the data. So in the data let's add delivery partner id and the delivery partner id will be partner exclamation do ID then we have to update delivery OTP it will be OTP then we'll add the a status then comma a status history so the a status history will history. After that, we can send the response. So, let's add response dot JSON and provide the object with this order that is the updated order data where we have the delivery partner detail. So, admin can assign the delivery partner to any order. Now, let's create the API routes using these controller function. For that let's open the sidebar. We have the routes folder. In this one create a new file and write the file name admin routes.ts. Now here we'll add express from express package. Import it and then we will create the router. So let's add admin router equal to express dot router. after that. So first we will add the API route using get method and provide the path that is / stats. In this stats we will return all the dashboard data. Here we'll add the O middleware. Then we'll add the admin middleware. So you can see it has been imported from middleware. Ojsad admin.js. Now just add the controller function that is get admin stats. It has been imported from admin controller.js. So this is the first route for admin.
Segment 354: 722:30 - 725:00 Now duplicate it. In the second one we will use the type get and the path will be delivery partners that will return all the partners list. Here we'll add o and admin middleware and then controller function get delivery partners. It has been imported. Now duplicate it. In the next one we will change the type type will be post here and then the path will be delivery partners. Right? Using that we can create the delivery partner profile. So just add the controller function create delivery partner and it has been imported. Now duplicate it. Here we'll add the type put and the path will be / delivery partners/ colon id so that we can update the particular delivery partner. So here we'll add the controller function update delivery partner. It has been imported. Now duplicate it. In the last one we'll add the type put and the path will be /ders/ colon id/ assign. Right? So we are adding the path orders/ colon id/ assign using that we can assign the delivery partner in the order. So just add o middleware admin middleware and just add the control function that is assign delivery partner. It has been imported. After that let's export the router from here. So let's add export default admin router. And after that let's add it in the main file that is server.ts file. Just duplicate this line. Here we'll add the path that is / API/ admin right and then provide the admin router. Let's import it from the admin router from admin routes.js file. So we have created the APIs for admin feature. After creating the APIs for admin
Segment 355: 722:30 - 725:00 feature, now we will create the APIs for delivery partner. For that, first we'll create the controllers. So just open the sidebar. In this server, you will find
Segment 356: 725:00 - 727:30 the controllers folder where we'll create a new file and write the file name delivery partner controller.ts. Now in this one let's add the comment that is login delivery partner. So first we'll create the API for login feature. Then the API method will be post and the path will be / API/ delivery/ login. Now let's create a function and export the function. So just add export con login partner. Now let's add asynchronous add function here and in the function parameter we'll get the request and response and provide the types also. So just import this request type from express and response type from express. Let's move it in the first line. Now in this one we will get some data from request body. So we'll get the email and password from the request body. So let's add request dot body. After that let's add the if statement. If not of email or not of password. If any of this data is missing then we'll add the return response dot status 400. Then we'll add JSON object where we'll add the message that is please provide email and password. Now after that here let's add con partner equal to await and provide the Prisma client. Then we'll add dot delivery partner dot find unique. In this find unique let's provide where object. In this object just add the email and the email will be email that we are getting from the request body then two lower case. That's it. Now after that we'll add the if statement if not of partner. Suppose we could not find the partner using this email id. In this case let's add the return statement. So just copy this one
Segment 357: 727:30 - 730:00 paste it here. We'll add the status 4.1 and then we'll add the message that is invalid email or password. After that let's add if not of partner dot is active. It means the delivery partner is inactive. In this case, let's add the return statement again with the status 4.3 and we'll add the message your account has been deactivated. Now we will match the password. So just add con match equal to await and then we will use the brypt package. So let's import it. We'll add import brypt from brypt package and uh after that let's add decrypt dot compare in this compare provide both passwords. So let's add the password that we are getting from the request body. Then we'll add the partner dot password that is stored in the database. Now after that let's add if statement if not of is match. If it is false in this case, let's provide this return. We'll add return response a status 4.1 and the message is invalid email or password. Now suppose the password is correct. In this case, we will allow user to login and we will generate a token that will be sent in the response. For generating the token, let's create the function here. So here let's create a new function called generate token and equal to add a function. To generate the token we'll provide the id and the type will be a string. Now after that let's add return and provide the JWT. Import this JWT from JSON web token. So let's add import JWT from JSON web token and return JWT dot sign method. In this sign method just add the id. Then we will add role and the role will be delivery
Segment 358: 727:30 - 730:00 and uh after that we'll add the comma
Segment 359: 730:00 - 732:30 and provide process env dot and the data from environment variable that is JWT secret as a string. So you can see we are creating the token and returning it here. So here we have added JWT dot sign and provided the object that contains the id and ro delivery. Then we will add comma and provide the expiry time. So let's add expires in 30day. So this token will get expired in 30day. So we will just call this function and provide one id to get a token. So let's come here in this controller function. Let's add con token equal to generate token function and provide the partner dot id. That's it. Now we'll get the token and after that we have to return this token and we'll also return the partner data. But the partner data contains the password also that we will not return. To remove the password, we'll add curly braces as equal to partner. And let's restructure the partner data. So first we'll destructure the password colon and underscore then comma and provide the a spread operator provide the partner data. So this is the remaining data after excluding the password that we can send in the response. So here let's add response dot JSON and in this JSON we'll provide the partner it will be partner data then comma token that's it. So we have created the function using that delivery partner can login in the application. Next we have to create the function to get assigned deliveries for any delivery partner. So we have added the comment get assigned deliveries and then we will add the type. It will be get and the path will be / API/ delivery my deliveries. Let's add the arrow function here. So just copy this one and paste it here. And after that we'll update the function name. So the function name is get my
Segment 360: 730:00 - 732:30 deliveries. So that delivery partner can get all his
Segment 361: 732:30 - 735:00 deliveries. So here let's get the data from request query. We'll add con a status equal to request dot query. After that we'll add const where and the type will be any equal to the delivery partner ID and the delivery partner ID will be the request dot partner notal dot id. So here we have added request dot partner. This will be added using a middleware that we will create later. So in this partner we'll get the id also. So here we have added the delivery partner ID and after that let's add the if statement if a status is equal to active. So we are getting the status from query right. So in this case just add the where dot status equal to curly braces include and provide this array with the data like assigned tagged and out delivery. So these status will be returned. So the order with these status will be returned on the dashboard. Now let's come here in the else if else if we will add the status is equal to completed. So when the status is equal to completed then we'll copy this paste it here and provide where dot a status include delivered or cancelled remove the third one. Now after that we have to find the order data from database. So just add con orders equal to await and use the Prisma client. Let's scroll up. So you can see Prisma has been imported from config/prisma.js. So after that we'll add dot order table
Segment 362: 735:00 - 737:30 dot find menu. In this find many add the object and simply provide where. Then provide include. In this include add the object and provide the user. And in this user just add the select. In this select provide the name. Name will be true. Then we'll add the email. True. Then we'll add phone true. After that add the comma. And here we'll add order Y. In this order Y simply add created at descending. That's it. Now after that here we'll add response dot JSON. And in this one let's add the orders. Save the changes. So here we have created the controller function that will return all the orders assigned to any delivery partner. Now we'll create the next function that is for the getting a single delivery details. So just add the comment here get single delivery details and then we'll add the type it will be get then the API path will be / API/ delivery/my deliveries colon id. Now let's create a function here. So just copy this function and uh add it here. Now let's add the function name that is get delivery details. Now here we'll add con order equal to await and use the Prisma dot order table dot find first. In this one simply add where and provide id. So this id will be the request dot Adams dot id and after that we'll add as a string. Then we'll add comma and provide the delivery partner ID. So let's add delivery partner ID. It will be the request dot partner
Segment 363: 737:30 - 740:00 not null do id. So it will be added using middleware. After that here we'll add include. In this include add the object and provide this one from previous function. Let's just copy this. We will include the user select name email and phone. That's it. After that let's add the if statement. If not of order. If order is not available then let me add return and provide the response with a status 4 not four. Then we'll add the JSON object where we have to add the message that is delivery not found. Correct? Now suppose the order is available. Simply add response dot JSON and provide this order data. That's it. So now we have created the controller function. Using that we can get the single delivery details. Now let's add the next function that is complete delivery with OTP. Then we'll add the API type put and the path is / API/ delivery. my deliveries colon id and complete. Now let's create the function. So we'll copy this one. Paste it here. In this one just add the function name complete delivery. To complete the delivery we need to provide the OTP. Right? So just add con curly braces OTP equal to the request dot body. So from request body we will get the OTP. After that we have to find the order for which we have to mark the status completed. So just add con order equal to await use the Prisma dot order dot find first. Now provide the where in this where let's add the ID. I'll copy from here. Paste it here. So we have provided id it will be request dotpadams do id as a string then delivery partner id it will be request dot partner do id. So it will find the order. After that let's add the if statement if
Segment 364: 740:00 - 742:30 not of order or order dot a status is equal to cancelled. It means the order is already cancelled or order dot status is equal to delivered. It is already delivered. So in these cases we'll return the response. So just add return response dot status 400 dot JSON and object provide the message that is invalid request. Now after that suppose we have the order data and the status is not equal to cancelled or delivered. In this case we will verify the OTP. Let's add if statement if order dot delivery OTP not equal to OTP. So in this case let's add the return and provide the response dot status and set the status 500 and then message will be invalid OTP. Now after that here we'll add the history. So just add con history equal to order dot a status history as any array. Now let's add history dotpush. In this one we'll push the new status. So just add history.push object and provide the a status. So the a status will be delivered. After that here we have to add the note. So in the note let's add delivered by partner. Then we'll add comma and provide the time stamp. So in the time stamp we'll store the current date timestamp. So just add new date. That's it. Now after that we have to update the data in database. Let's add const updated order equal to await and provide the Prisma client dot order table dot update. Now in this update let's add the where
Segment 365: 742:30 - 745:00 and in the where we'll add the id. ID will be order dot id. Then we'll add comma and provide the data that needs to be updated. So in the data just add the status and set the status delivered. Then we will provide the status history. In this status history just add the history. Then we'll add the delivery OTP and we'll set the delivery OTP empty string. That's it. Now after that we'll return this updated order in the response. So let's add response dot JSON and provide the object. We'll provide the order. It will be updated order. Then we'll provide the message and in the message let's add delivery completed successfully. Add it as a string. So we have created the controller function. Using that we can mark the delivery as completed after adding the OTP. Now let's add the API for cancelling the order. So just add the comment cancel delivery and then we'll add type put and the path is / API/ delivery/my deliveries colon id/c cancel. And I'll just copy this one from here. Paste it here. And in this function we'll add the function name cancel delivery. Now to cancel the delivery we need the reason from request body. So just add con reason equal to request dobody. After that we'll add con order. We have to find the order right? So we'll find the order using this code. Copy this one. Paste it here. const order equal to await prisma.order.find Find first where id is request param dot id as a string then delivery partner id will be request dot partner do id. So it will find the order. After that let's add if statement if the order a status is delivered. So in this case we cannot cancel it. Right? So let's add the return a statement that is return response dot a status 400 then dot JSON in the JSON
Segment 366: 745:00 - 747:30 we'll add the message that is cannot cancel a delivered order. Now after that we have to update the order status history. So just add history here. Let's just copy this one paste it here. So we will write history equal to order not null a status history as any array then history dotpus and in this one provide the a status cancelled then we'll add the note. So in this note let's add the reason or and let's provide the empty string. Then we will add the time stamp also. So we have added the a status history and after that we have to update the order. So let's copy this one paste it here. So in this one we have added updated order equal to update prisma dot order.date where id is order not null do id. Then data it will be a status cancelled. Then we'll add the a status history. It will be history. And here we will remove this one. That's it. Now we have to send the final response. So just add response dot JSON. And in this one provide the order that will be updated order. Then provide the message. So the message is delivery cancelled. So we have completed this function. Using that we can cancel any delivery. After that we have to add the controller function to update the order status by delivery partner. So we have added the command update order status and then we'll add the API type will be put and the path is this one. So here let's create the function. Copy this one. Paste it here. Now add the function name update delivery status. Now after that we have to find the status from the request body. So copy this paste it here. We will write con a status is equal to request do body. After that let's add the array that contains the allowed status. So just add con allowed a status
Segment 367: 747:30 - 750:00 equal to add a and it could be packaged or out for delivery. So delivery partner can only set these status that is packaged or out for delivery. Right? Now after that let's add if statement if not of allowed a status dot includes the status that we are getting from the body. In this case we'll add the return with the status 400 and then we'll add the message in JSON. So let's add the JSON message is invalid a status update. Now after that suppose the status is valid. It is one of this packed or out delivery. So in this case we will find the order. So just add con order equal to await and use the Prisma dot order model dot find first. In this one, let's add the where property. In this where property, add the object and provide the id. ID will be the request dot paradams dot id as a string. Then we'll add the delivery partner ID. And the delivery partner ID will be request dot partners not null do id. So we will find the order. After that we have to update the a status history. So just copy this two line paste it here. We will add con history equal to order a status history as any array. Then history dotpush and provide the a status. So simply provide the a status here. Then provide the note. So in the note let me remove this and provide the back tick. Provide a status updated to then dollar sign curly braces and provide this status. Then we'll add the time stamp. It will be new date. That's it. Now after that we have to update the data in database. So just add const updated order equal to await
Segment 368: 750:00 - 752:30 prisma dot order model or table dot update. Now in this update let's provide where and in the where we'll add the object with id. ID will be our order not null dot id then comma data that needs to be updated. So in the data just add the status comma a status history it will be history. That's it. Now we have the updated order that we can return. So here let's add response dot JSON. In this JSON provide the order. order will be updated order. That's it. So we have created this controller function using that we can update the order status and the previous one for the cancelling the order right and before that we have created this complete order with OTP right now let's come here and create the last controller that is update live location then we'll add the API type it will be put and the path is / API/ delivery my deliveries col ID/ location. Now let's add this statement. Copy this one, paste it here and update the function name that is update location. Now in this update location, we will get the latitude and longitude from the request body. So just add this statement to get the data from request body. After that we have to find the order. So let's add con order equal to await and then provide the Prisma dot order dot find first. In this find first let's add the where in the where provide the id. ID will be the request dot padams dot id as a string. Then add the delivery partner id. Delivery partner ID will be request dot partner not null dot id.
Segment 369: 752:30 - 755:00 After that we'll add the status. So in the status we'll add the object includes array and here we'll add the assigned comma packaged or out for delivery. So when the status is assigned pegged or out for delivery then we will update the latitude and longitude. Right now after that let's add await use the Prisma dot order table dot update. So after finding the order data we will update it. So let's add this update. And here let's add the where property and provide the id. So the id will be the order not null dot id comma data. Now in this data just add the live location. Live location will be object that contains the latitude, longitude and uh after that we'll add updated at property. So in the updated ad just add the current time stamp using new date. Now after that we will send the final response using response.json JSON and in this one just add the object that contains success property and let's make it true. So we have created this API controller function to get the live location. Now using these controllers we have to create the API routes. For that you can see we have the routes folder. In this routes folder create a new file that is delivery partner routes.ts. Now in this one import the express from express package and using this express will create the router. So just add const delivery partner router equal to express dot router and after that in this file we will add export default delivery partner router. Let's export this router from this file. Now in this router we will add multiple endpoints. So let's add delivery partner router dot post method. In the post method provide the path that is login.
Segment 370: 755:00 - 757:30 After that we'll add the controller that is login partner. It has been imported from controller/ delivery partner controller js. Now let's duplicate it. Here we will add delivery partner router dot get method. Now in this get method provide the path that is my deliveries and then we have to add the controller that is get my deliveries. Let's import it from the same controller. Now you can see this route should be accessible only for the delivery partner right that's why we have to create a middleware that will verify the logged in user is delivery partner or not for that let's open the sidebar here you can see we have the middleware we have the middleware folder in this one let's create a new file and write the file name delivery ots Now in this delivery o.ts let's add one function just add con delivery o equal to asynchronous add function. Here we'll get the request response and next function. Now let's import the type import this request from the express import the response from express and import this next function from express. Now here we'll add the try catch a statement and in this try block let's add con header equal to request dot headers dot authorization. After that let's add if statement if not of o header or not of o header starts with v error and provide one space here. So in this case just add the return and we'll return the response dot a status and the a status will be 4.1 then dot
Segment 371: 757:30 - 760:00 JSON in this JSON add the object with the message no token provided. Now after that suppose the O header is available. So here we will extract the token. So just add con token equal to o header dot split and provide this space then index 1. Now after that let's add con decoded equal to JWT. We will import the JWT here from JSON web token. So just add import JWT from JSON web token and provide the JWT dot verify and provide the token then comma process dot env dot JWT secret as string. After that here we'll add as and provide the id it will be string then comma ro it will be a string. Now after that here we'll add the if statement if decoded dot roll is not equal to delivery. Here we are getting decoded right. So decoded dot roll not equal to delivery. Here we are getting some warning. So let me fix it. You can see here we have added this parenthesis. So let's update it. It will be curly braces. Close it here. So in this curly braces we have added the id string ro string. After that we are checking if the decoded dot ro is equal to or not equal to delivery. In this case we will return the response with a status 4 not3 then dot JSON and in this JSON we'll add the message that is access denied delivery partner only. Right now suppose the role is equal to delivery then we'll add con partner equal to await and use the Prisma client
Segment 372: 760:00 - 762:30 import it from the config folder. Then dot delivery partner table dot find unique. In this find unique add the object and provide where and uh let's add object and provide id. So the id will be decoded dot id. So it will find the particular delivery partner. Now here let me add the if statement. If not of partner or not of partner dot is active. It means if the partner is not available with this ID or the status is inactive in this case we'll add the return again. So just add this return with the status 43 and the message is account is deactivated. Right now after that let's add the request dot partner equal to this partner. So in the request we'll add the partner property and provide this partner that we are getting from the database. After that we'll simply call the next function that will execute our controller function. Now come here in the catch block. In this catch block simply add console.log and provide this error. And then we'll add return response status for not one then dot JSON. In this JSON we'll add the object with the message that is token is not valid. That's it. So we have created this middleware and after that we have to export it. So just add export default and this delivery o that we have created here. So now we can use this middleware before executing our controllers. So let's come back here in the delivery partner routes.ts file and here let's add that middleware. So just add the delivery o import it from the middleware and provide the comma. You can see it has been imported from the middleware folder delivery.js file. Now let's duplicate it.
Segment 373: 760:00 - 762:30 In the third one we'll add the type get and the path will be / my deliveries/ colon id. Here we will use the same middleware and then provide the function that is get delivery details.
Segment 374: 762:30 - 765:00 So it will provide the individual delivery details. It has been imported here. Now duplicate it. In the next one we'll add the type put. Then the path will be my deliveries colon id / complete. And here we'll add the controller function that is complete delivery. Now duplicate it. Here we'll add the type put. Then the path will be / cancel. And here we'll add the controller function cancel delivery. Cancel delivery has been imported. Now duplicate it and here we'll again add the type put right and here we'll add my deliveries colon id/ a status now here we'll add update delivery a status correct after that let's duplicate it here also we'll use the put and provide path my delivery is colon id/ location in this one just add update location controller function it has been imported. So you can see first we have added the route for login then my deliveries that will return all the deliveries for particular delivery partner then my deliveries colon id that will return the individual delivery detail then we have deliveries colon id/complete using that delivery partner can complete the delivery then we have this cancel using that delivery partner can cancel the delivery then we have the status Using that delivery partner can change the status and then we have location using that we can get the exact delivery location. So we have created all the routes. Now we have to add this router in our main file. Just open server.ts file and here we'll add app dot use and provide the path that is / API/ delivery. Then we'll add comma and provide the
Segment 375: 765:00 - 767:30 router. So let's copy this router that is delivery partner router. Add it here and import it from the routes folder. You can see it has been imported from the routes delivery partner routes.js file. So we have created all our APIs. After that we have to add one script using that we can sync or upload the dummy data in the database so that we can display it on our web page. To add the dummy data in our database we will create a new file. So just open the sidebar and server folder. In this server folder create a file and write the file name seed.ts. Now in this one we'll create a function. So just add const seed DB. It means seed database and create the asynchronous function. So let me add asynchronous add a function. After that we will add the try catch block. Now in this try block first we will add a weight then use the Prisma client. So I'll provide Prisma and let's import it from the config folder. It has been imported. After that we'll add dot product table dot delete many. So before importing the dummy data let me delete all other products from the database. So just add the empty object right after that we'll add the message in console. So let's add console dot log and provide the message that is cleared existing products. Now after that here we have to add the product list. So just add cost products equal to array and in this array we will add all the products in different object. We'll add each product in separate object. Right? So here we have to add the type also. So let's add the
Segment 376: 767:30 - 770:00 type using this colon and provide Prisma and import this Prisma from generated Prisma client.js. From this path we have imported Prisma. You can see the path dot generated Prisma client. JS. Then we'll add dot product create many input. Use this Prisma dot product create many input and provide the array. So this is the type. Now let's come here. In this array we will add the product in different object. Right. So we have already provided the dummy data in the asset. Let's fold this server and open client. In this client we have the src and assets and assets.ts file. So if you open assets.ts file. Here you will find the dummy data. Right? So first we have the categories data. Then we have hero section data. Then we have delivery partner. Then app promo banner. Then footer data. After that we have a status colors icons and dummy products. So here we have some dummy products. But in this one you can see we have the ID. So we will remove this ID. The ID will be autogenerated by database that is the neon database. So let's just copy everything from here. Let's just copy this entire array that contains multiple object where we have multiple product data. So just copy the entire array. Let me scroll down and select all the products here. Let's copy and come back here in the seed.ts file. Now in this seed.ts let's replace this empty array. Here we have the empty array. So just paste the array that we have copied. Now in this one we have to update the properties. So
Segment 377: 770:00 - 772:30 you can see we have the ids in each product. So let's just copy this. Scroll up. Here you can see we have the ID. So remove this ID and after that we will remove this V and remove this one also that is created at updated at it will be autogenerated after adding this data in database. We will remove this discount also because it will be autoc calculated and remove this ID again. So you can see we have to keep only this data that is the name, description, price, original price, image, category, unit, stock is organic, rating and review count. That's it. So in each product we will add these details. So just update each object here also we will remove these data in the second product. Now come to the third one. Remove this underscore id and remove this data. Come to the next product. Remove this one. And let's remove this one. Similarly, remove the underscore id and these other five properties from each object. So let me pause this video and remove it from all the object. Now I have updated all the object. So you can see in each object we have the name, description, price, original price, image, category, unit, stock, organic rating and review count. Now after that let me fold this. So here you can see we have this products right now using this products we'll insert the data in database using the Prisma client. So let's add await Prisma dot product dot create menu and provide the object with the data property and in this data property provide this products.
Segment 378: 772:30 - 775:00 So this products have multiple product data. After that it will add the product data in the database. Then we'll print the message in console. So just copy this console log paste it here and here just update the message. So we will insert the variable also just add the back text here. In this back text, we'll add created then dollar sign curly braces and provide the products dot length. So it will display like created 50 products, right? It will display the total number of products. And after that we will add one more console log. So just copy this one, paste it here and here we'll write seed completed successfully. After that we have to exit from this process. So just add process dot exit zero. Then come here in the catch block. In this catch block we are getting the error. So let's add console dot error. And uh let's add the message that is seed error and we will provide the actual error here. So just add the comma and copy this error. Now after that we'll add process dot exit and here we'll write one. Now we'll add the finally block. So let's add finally. And here let's add await prisma dot dollar sign disconnect. That's it. Now we have to call this function. So simply add this seed dv and call it. That's it. Next we have to add a script in our package.json file that will execute this code. Right. So let's open sidebar. Then in the server you will find package.json. Just open it. And in this one you can see we have this post install then start then server and build. After that we'll add the comma here and provide a new script that is
Segment 379: 772:30 - 775:00 seed. Let's add seed colon and provide
Segment 380: 775:00 - 777:30 quote and provide this tsx and then write the file name that is seed.ts that we have just created. So when we will run this command npm run seed it will execute this tsx seed.ts. Let's save the changes and open our terminal. In this terminal, you can see the project is running. We can see the message server is running at this local host col 5,000 that is the backend server. So we'll stop it using Ctrl C. And after that we'll add npm run seed. That's it. Then press enter. So it is executing our script that we have created and you can see first it is clearing the existing products. Then it says the message cleared 27 products. After that seed completed successfully actually we have to update the message here. You can see in this seed dot ts here we have added the message cleared product length and product. So instead of cleared here we have to add the message that is created. So let me update it. We'll write created. So it will display the message like created 57 products as you can see in this terminal. And after that seed completed successfully and now we can run our project again using npm run server. So it will again start the backend server. Now to verify our data, let me just come back to the web browser and open our neon database. So just come here in the neon dashboard. Refresh it using this icon and after that we'll come here in the product. So now you can see in this product table we have all the product where we have the ID that is autogenerated. Then we have the product name, description, price, original price. Let's see the other data like image URL, category, unit, stock is organic, then rating, review count, and this created at and updated at which is autogenerated.
Segment 381: 777:30 - 780:00 Right? So now we have successfully added the dummy product in the database so that we can display it on our web page. So now we have completed our backend server. It means we have created all the APIs using that we can add the product data. We can get the product list. We can place the order. We can get the order list and we can display the data in dashboard also and user interface also. So now we have completed the backend server and uh in the backend server we have created the APIs to get the product list add the new product place the order and get the order data for admin user and delivery partner. Next we have to integrate these APIs with the front end. As you can see we have created this front end here and right now we have the dummy data only. Right? So these are a static data coming from the asset file. But now we will link our backend APIs so that we can display the data from the database and we can create the account also like we can sign up and uh sign in using original account and we can place the order. For that we have to integrate the backend APIs with this client. Before connecting the APIs with this front end, let me just come back to the VS code and commit these changes. So just right click on these file name and select close saved. Now let's collapse this folder. You can see in this source control we have count 10. Just click here and here we will add one commit message. So let me provide back end completed commit and sync changes. Click okay. After that let me just come back to the web browser and let's see our GitHub repo. So you can see our back end has been completed. We have committed the changes here. Now after that it will automatically redeploy the project on Versel. If I go to
Segment 382: 780:00 - 782:30 deployments, you can see here we have a new deployment right and it is working fine. If I refresh it, you can see server is live. Now let's integrate this backend server with the client. So just come back here in the VS code and uh we will open this client directory and let's open the terminal also. So you can see here we have the backend terminal where the back end is running and this is the client terminal. You can see here the front end is running at this URL that is localhost 5173 this one. Now here in this client we have to add a new package. Using that we'll make the network request. So just add Ctrl C to stop it. And here we'll add npm install and write the package name XIOS. So it will install this AIOS package in client. After that we will start the project again. So let me just wait for a few seconds until this XOS package gets installed. Now let me start the client using npm rundev. So it will start the client project again. You can see the client is running at localhost 5173. Now we will hide this terminal and in this client we have env file. So in this env we have the currency symbol. So here we'll add one URL also that will be the backend URL. So let's add the variable name that will start with weight. So just add weight base URL equal to and provide the backend URL. So the backend server is running at localhost 5000. Let me use the local backend link. Let's just copy it and paste it here. And here at the end we'll add / API. So this is the base URL for our API. Right now we have to create the configuration. Using that we can make the network request and in each network request we will add the authentication token also so that we don't have to provide the authentication token in each request separately. So let's open the
Segment 383: 780:00 - 782:30 sidebar
Segment 384: 782:30 - 785:00 and in this src we will create a folder. So in this src create a new folder called config. In this config folder create a file and let's add the file name that is api.ts. Now in this api.ts ts file we will import the axios that we have just installed. So just add import aios from axios package. Next we will create the exio instance. So let's add the name api. We will add con api equal to exios dot create. And in this one we have to provide the base url. So let's add the base url property. And in this base URL let's add the import dot meta dot and provide the URL from here that is wheat base URL. Just copy and paste it here. That's it. So we have created the API. Let me update this statement here. We have added import meta. Then we have to add env. Now it is correct. Import meta.env from wheat base URL. So we have added the base URL in our API. After that let's add one comment here that is inject JWT token from local storage into every request. So if the token will be available, it will be added in each network request. For that, let's add this API. Then dot interceptors dot request dot use. Here we have to add a function. And in the function parameter we will add the config and uh let's add this function here and provide const token equal to local storage dot get item and in this get item just add o
Segment 385: 785:00 - 787:30 token that is the key name of the authentication token Right now let's add if statement if token is available. So in this case let's use this config then dot headers dot authorization. In this authorization, insert back tick beer space dollar sign curly braces and provide the token. That's it. So it will be added in each request if the token is available in local storage. Now let's add return and return the config. That's it. Now we have to add the code using that we can handle the authentication error globally. For that let's add the comment here that is handle errors globally. Here we will use this API dot interceptors dot response dot use In this one, let's add the add a function. So, let's add this function like this. And here we'll get the response and provide the response here. Then, comma and provide function where we'll get the error. And after that in this one we'll add the if statement. If error dot response question mark dot a status is equal to for not one. In this case let's add local storage dot remove item. And in this remove item we'll add the key name that is O token. After that we'll add
Segment 386: 787:30 - 790:00 this statement again. Here we'll add semicolon. We will add local storage dot remove item and then we'll add the key name that is user token. So we'll remove the O token and user token and then we'll add the comment. Let's add the comment that is only redirect if not already on o pages. Right? So here we'll add if statement not of window dot location dot path name dot includes login. So the when the path name does not includes this login in this case we have to navigate the users on login page here we'll add same thing that is not of window.loation dotpath name include register. So if the user is not on the login or register page then we will redirect them. So let's add window dot location dot href equal to provide / login. So when we will get the o error it will execute this function and user will be redirected to the login page. Now after that here let's add the return and we'll return promise dot reject and provide the error. After that we have to export this API from here so that using this API instance we can make the network request. So let's add export default API. That's it. Now after that first we have to create the functionality for user authentication and it will be useful in multiple pages. That's why we will create it in the context file so that we can share the data in multiple components. So we have
Segment 387: 790:00 - 792:30 to create the context here. So let's open the sidebar. You can see here we have the context folder where we have created card context. So here only we will create a new file. In this context folder create a new file and write the file name ocontext.tsx. In this ocontext tsx, first we have to create a context using create context. Right? So let's add const context equal to create create context imported from the react and uh in this create context let's add undefined here we have to add the type so let's add angle bracket and provide o context type. Then we'll add or undefined. Now we have to create this interface that is o context type. So let's add a space here. provide interface o context type and here we'll add the user. So the first property will be user and uh in this one just add the user from the types folder. User has been imported from types. Then we'll add or null. Then we'll add the next property that is token. So the token will be a string or null. After that we'll add next property that is loading. So it will be boolean. It could be true or false. Then we'll add the login. So in this login property we'll add the email. So the email will be a string. Then we'll add the password. It is also a string,
Segment 388: 792:30 - 795:00 right? And uh let's add this add a function and provide promise void. Let me correct it. Here we will add this parenthesis not this curly braces. So here we have the add function with these parameter email and password and promise void. Now let's duplicate it. The next one is register. In this register we will add the name also. So let's add the name a string, email a string, password a string and it will return promise void. After that let's duplicate it. We will add log out. In this logout again add the add a function. We will clear this parameter. It will return wide. Now after that let's duplicate it. Here we'll add update user. In this update user, let's add the user data in the parameter and provide the type here that is partial and uh in this partial add the user. So here we have the o context type that is provided here. Right now here we'll add the O provider function. So let's add export function and the function name is O provider. So we have this O provider function. And in this one we will get the children. So just add curly braces children. And then we have to define the type also. So just add colon and object where we'll add children colon react node import it from react. Now after that in this o provider function we have to add the return. Let's add the return.
Segment 389: 795:00 - 797:30 In this return, we will add the O context dot provider tag. Close this one. So here we are returning this O context dotprovider and uh within this we will provide the children. So just add curly braces children and here we have to add the value. So this value will be one object where we will pass all the state and functions that will be useful in multiple components. Right? Now we'll add the function here. Using that we can easily use the data from this context. So let's add export function and the function name is use o. Now in this use o function just add con context equal to use context import it and in this use context we'll add the o context. After that we'll add if statement if not of context then throw the error. So just add throw new error and provide this message. Now let's add the return and provide context. Right? Now let's come here within this o provider we will add all the states and functions that will be useful in multiple components. So here first we'll add the navigate function. So just add con equal to use navigate imported from react router DOM. After that we'll add the state that will be user state. So just add con user set user equal to user state and let's initialize it using null. By default the user will be null and here we have to add the type. So just add the angle bracket then user interface then null. Now duplicate it. Here we'll add the token. Setter function is set token. Use a state and here we'll add the string type. Type is a string or null. Then duplicate
Segment 390: 797:30 - 800:00 it. Here we'll add the loading state and the setter function name is set loading. Then use a state and here we will add the initial data. So let's initialize it using true. That's it. Now we will add the use effect. Here we'll add use effect. that will get executed once the component gets loaded. So in this use effect we'll add the dependency array that is the empty array. Now here we will add con saved token. We will check the saved token in local storage. So just add con save token equal to local storage dot get item and provide the item name that is o token. Now duplicate it. Here we will add saved user equal to local storage get item and provide the name that is o user. Now after that let's add the if statement if saved token and saved user is available. If it is available in this case let's use the set function set token and provide this saved token. After that we will use set user and provide this JSON dot parse and provide saved user. That's it. After that here we will use set loading and make it false. By default this loading is true. So after loading this we will use set loading and make it false. Right now we have to create the functions using that we can enable the login and registration. Then we'll create the function for logout and after that we'll add the function for update user. So let's start with the login. So after this use effect
Segment 391: 800:00 - 802:30 here let's add con login equal to asynchronous add function. Now in this one we'll get the email as parameter and the type will be a string. Then we'll add comma and provide the password and the password type is also a string. For login we need the email and password. Right? Then we'll add the try catcher statement. And in this try block, we'll make the API call using API instance. So just at const data equal to await and use the API, import it from the config folder/ API folder, right? I mean config folder/ API file. So here just add dot post method in this one provide the path that will be / login that is the API endpoint / login then we have to provide the data here. So just add comma object provide the email and password. So we are providing the email and password and making the network request using the post method for the user login. After that here we'll get the data. So let's use the setter function set user and we will provide the data dot user. In the response we will get the token also right. So just duplicate it. Here we will use set token. In this set token provide data dot token. Right now after that we will update the local storage. So let's just copy this one. Paste it here. We will add local storage dot set item. It was get item. So update it. We will use set item. In this set item we will add o token. That is the key name. And then we'll add the value. So the value is data dot token right now duplicate it here we will use local storage dot set item and provide
Segment 392: 802:30 - 805:00 the o user in this o user let's add json dot a stringify and provide the data dot user Right now after that we have to add the toast notification. So let's add toast import it from react dot toast then dot success and provide our message that is login successful and after successful login we will redirect the users on homepage. So just add the navigate function provide the home path. Now come here in the catch block. Here we'll get the error and the type will be any. So just add colon any. Then we'll add the toast dot error. Here just add error dot response dot data dot message or error dot message. So we have created this login function. Now let's duplicate it. Now update the function name that is register. So this is the user registration function. In this one we'll add the name also in the parameter. So here we'll add name. Type is a string. Then we have the email and password. After that we'll make the API call using await API. and provide the end point that is / register. In this one provide the name, comm, email, comm, password. Then we will use the same thing that is set user set token local storage dot set item o token local storage dot set item o user and then we'll add the success message that is registration successful then redirect the user on homepage and the same statement in the catch block. So this is the user registration function. Now we'll add the logout function. So simply add con log out and create the add function.
Segment 393: 805:00 - 807:30 So when we will log out we will reset the user token and local storage also. So just copy these four statement paste it here. Here we'll add set user and the user will be null. Then set token. Set token will be null. Then local storage dot remove item. We will add remove item and provide the item name only that is o token. Here we will add local storage dot remove item and the item name is O user. That's it. So using this function user can log out from the application. After that we have to add the function for user data update. So let's add const update user equal to add a function. In this one, we will add user data and provide partial angle bracket provide the user. In this one, just add if statement. If user is logged in then only we will add con updated equal to curly braces a spread operator user comma a spread operator user data that we are getting from here. Right. After that let's add set user. In this set user just provide this updated. Right. After that let's add local storage dot set item. In this set item we'll add the key name. Key name is O user. And then we'll add comma JSON dot a stringify and uh provide this updated.
Segment 394: 807:30 - 810:00 So this is the function for update user. Now we have to pass these functions and state variables from this context using this value. So in this value let's add one object and provide the user then provide token then loading then login then register then log out and update user. That's it. So we have created the user login registration and log out function and provided these functions and state in this value so that we can access it in another file. So let's enable this o context for all the files. So just open the sidebar and you can see here we have main.tsx file. In this main tsx you can see first we have the browser router right. So in this browser router we have card provider. So before this card provider let's add the o provider. So let's add opening ido o provider. Import this o provider. You can see o provider has been imported from context ocontext.tsx. Now let's move this card provider here within this O provider. Now you can see the structure. First we have the browser router. Inside this we have O provider. Inside this we have card provider. And then we have the app. So now we can access the data in our application from the O provider. Next we have to open our pages where we have created the login page. So let's open the pages folder. You can see here we have login.tsx file. So in this one we have created the login and registration form. Right? So let's add the functionality also. So as you can see here we have created this function that will get executed when we submit the form right. So here we have added e.t prevent default and set
Segment 395: 810:00 - 812:30 loading true. After that we have this set timeout. So let's remove it. Here we'll add try catch and in this try block we'll add the if statement if is login state. So when the state is login in this case we have to call the login function. So simply add await and call the login function. So we have to get the login function from the context. Right? So here let's add const curly braces equal to use o use o has been imported here. Now from this use o we can get the login and we will get the register. Right now let's call the login function and for login we have to provide the email then provide the password. Let's update it. It will be login. So in the login function we have provided email and password. Let's add the else statement also. In this else statement, we'll add await register and provide the name, email, password. That's it. And after that, come here in the catch block, we'll add error colon any and provide the toast notification. So, let's import the toast here from React hot toast. Then we'll add to dot error and provide these error. Then we'll add the finally block. In this finally block simply add set loading and make it false. That's it. Now after that we have added the login functionality in our application. Now let me test this feature. We will come back to the web browser. Let me refresh it. come here and now I'll click on this log out it is not functional yet right so let me open the login page manually and here we have the
Segment 396: 812:30 - 815:00 login page so first you can see we have this login page but we don't have any account yet so I'll click on this create one so it will open the sign up form right where we can create an account So for sign up we have to provide the name, email id and password. So let me add the name here great stack. Then we'll add the email id. So let me use the same email id that we have added inv as admin. So we'll have the admin access also. So let's open the server then env you can see here we have added the admin email image that includes this one user.grast at Gmail. So when we'll create the account using this email id then we'll get the admin access also right. So just come back here add this email id and here we'll add the account password. So let me set one simple password then click on sign up. So now we have created the account. You can see the notification here registration successful and after registration we are redirected to homepage. Right? But you can see here we have the dummy name right. We have the dummy name and email id in this snap bar. So we will update this snap bar also. So now let's come back to the VS code. Let's open this components. In this components you will find navbar.tsx file. In this navbar.tsx you can see here we have the dummy user where we have added the name, email id and is admin true. Right? So let me remove it here. Simply add const equal to use o import this use o and from this use o we will get the user and let's get the logout function also. So let's add comma and provide
Segment 397: 815:00 - 817:30 log out. Correct. Now after that here you can see we have this handle logout. In this handle logout let's just call this logout function. Then set user menu open false navigate to homepage. Save the changes. Now after adding it let me open the web page. So here you can see we have the exact icon for name. We have added the name greatest tag. So it is using the first character that is G. Now here we have the name greatest tag and then email id. And here we have the log out button. If I click on log out now you can see here we have the signin button because we are logged out right. And after successful login, we will see the icon here with the user's name, email id. After log out, if I try to open the producted pages manually, if I open the path /ders, where it will display the orders list. So you can see it is displaying this orders page, but it should be protected. It means only logged in user can access this page. And right now we are not logged in. You can see here we have the sign in button. So we have to protect this page. Let me open the other pages also like check out it is also visible. If I open addresses it is also visible. Right? So we will protect these pages. For that come back to the VS code and uh let's open the components. In this components folder you have protected routes that is protected route.tsx and in this one here you will get the data from context. So just add const braces equal to use o right and the use o has been imported. After that from here we'll get the user and with that we'll also get the loading. Now let's add the if statement. If loading
Segment 398: 817:30 - 820:00 then we'll add return and provide the loading component imported from the components. Right now after that let's add the if statement if not of user. So when the user is not available in this case just add the return and provide navigate import it from the react router DOM close this tag here we will add the two property in this two property let's add the path that is / login right and after that we'll add the replace that's it now after that if I open the web page, you can see here we are redirected to login page. Let me open the homepage. So we can access the homepage, we can access the products page. Let's type something here like bid. We can access the search page. We can go to deals page. And if I try to open the orders page, you can see it will redirect us to login page because we are not logged in. Next, let's come to homepage and we will try to open the admin pages directly. Right? So in this URL, let me type / admin So you can see the admin panel is also accessible. So we have to protect this admin panel. Only admin can access it. So let me just come back in the VS code and uh open the pages. We have the admin. In this one we have admin layout.tsx file. Right? So in this admin layout.tsx tsx file we have to get the user data from context. So here let's add const user equal to use o use has been imported and after that here before this return let's add if statement if not of
Segment 399: 820:00 - 822:30 user question mark dot is admin. So if the user is not admin in this case let's add the return and let's navigate we will navigate to homepage. So import this navigate from react router DOM. Close this tag and provide two property. In this two property let's add slash. Then we will add the replace right. So now only admin can access this page. If I just come back here you can see we are reacted to homepage. If I open / admin you can see it is opening the homepage right? We cannot access it. So we will check for the user and user is admin property. Now let me try to login with my existing account. But before that let me show you the database also. So let's open the neon database. And here we have the products. Let's click on this user table. So here you can see we have only one user. You can see the ID name it is greatest stack. Then email id and we have the encrypted password. And uh after that we have created at updated at addresses and orders right so these are empty now let's log in with this account so I'll just come back here let me just copy the email id and open our application click on sign in and now we'll provide the email id and use the password click on sign in. So now we are logged in. You can see the message login successful. Correct. After that we have the log out button and here we have the link that is admin panel. So this link will be visible only when you have the admin access. Right? If you create the account with another email id like I can show you again. I'll go to login page. and create account and provide another email id like test at
Segment 400: 822:30 - 825:00 test.com. We will add the email id here. We will add the test name. Then we will add the password. Click on sign up. So here it will create the account. But after that if I open this drop-down here you can see we don't have this admin access right we don't have the link to open the admin panel because this is the regular user if I go to homepage after log out and sign in again using the email id. So let's copy this email id provide the password and when you login with admin email id you will see this admin panel link and click here. So it will open the admin panel. Now we can access the my orders also. We can access the checkout page also. Right? But right now you can see here we have the product data that is the dummy data coming from the asset. So let me remove it. We will get the product data from the database. For that we will integrate the product APIs to display the products from database. Let me just come back to the VS code. We will open the src assets. Then open assets.t TS file and in this one you can see here we have added this dummy products data right that is displayed on front end so in the assets.ts ts you will find this dummy products array right so let's clear this array I'll collapse it and clear this one here we'll add the empty array like this so you can see here we have export con products it is empty array now after that if I just come back and you can see here we don't have the product in this popular products we don't have any product if I go to products page here also we have no products If I go to deals, we don't have any product here,
Segment 401: 822:30 - 825:00 right? Let me go to cart. Refresh it.
Segment 402: 825:00 - 827:30 So in cart we have the dummy data. So we will remove this one also. But for now let's close it. And uh we will add the product data from database. For that let's just come back to the VS code and we will open the sidebar. Then open this components home and open popular products. TSX. So in this popular products you can see we have added the use effect where we are getting the dummy product. Right? So let's remove it. We will remove this dummy product from here and remove this import statement also that is importing dummy products. After that in this set products we have to add the product data from API call. So before this set products let's add the API import this API from config. You can see it has been imported from config folder/ API. Now we'll add dot get method and provide the end point that is / products then question mark and here we'll add the limit. So we'll add the limit equal to 8. Then we'll add and provide the sort and provide equal to rating. Then we'll add dot then method. In this then method we'll add the add a function. Here we are getting the response that will be curly braces data. After that we'll create this function here. In this function we will provide this set products. Let's move it here. In this set products simply use the data dot products. After that here we'll add dot catch. In this catch add the arrow function and get the error in the parameter and the error type is any. Then we'll add the toast. Import the toast. Then dot error and provide these error message.
Segment 403: 827:30 - 830:00 That's it. Now let's save the changes and open the web page. So here you can see we are getting the products from the database. In the popular products, we are getting these products. Here in this popular products, you can see we are getting all the products, right? So, we have to reduce the number of products here. To fix it, just come back to the VS code. And you can see here we have provided this popular products.tsx tsx and uh we have this limit equal to 8. So let me remove this limit. We have not added the functionality of this limit in the product controller. So just remove it. We will simply add question mark sort equal to rating. That's it. And after that come here. Here we have the products dot map. So before this map we'll add dot slice. In this slice let's add zero comma 10. So we'll get the 10 products only. Let's update it. It will be slice products dot slice 0, 10. Now save the changes and come back here. So now you can see we have only 10 products in this popular products, right? But if I click on any product, you can see the URL is / undefined. It is because we have to fix the ID. Let me just come back and you can see we are using dot id. If I go to product card here also you can see we have the product dot id. Right? So while creating the front end we have used underscore id everywhere. So we will change it because we are using the neon database where the id is saved with the plain ID not including this underscore. So let's click on this file icon and here I'll click on this search icon. In this search icon we will search for underscore id. So we have total 101 result. Right? So let's replace it. We'll add underscore id here. And in this replace we'll provide ID. That's it. and press enter.
Segment 404: 830:00 - 832:30 I'll click on this icon to replace all. It's done. After that, if I open this, you can see here we have product do ID. It is correct. If I go to popular products here also, you can see we have product do ID. Now, let me save the changes and come back here and click on the first product. Now you can see the URL is correct. We have the product/ the product ID. After that come back, click on the second one. Here we have the second product ID. But we have to display the product detail when we open on any product. But before that let me display the product list in other pages also like this products page, deals page and search result. So let's just come back and open the VS code and open pages. In the pages you will find products.tsx. In this products tsx again we are using the dummy products. Right? In this fetch products we have dummy products right? So let's replace it. In this fetch products we will use set loading make it true. After that remove this statement or before this statement simply add try catch. Now in this try block we will add conams equal to new URL search params and in this one provide the if statement. Let's add category. It will be this params dot set category comma this category. Let's duplicate it. We will add the organic. Provide the organic here. Then provide sort.
Segment 405: 832:30 - 835:00 Then provide mean price. Then max price. Right? After that here we will add params dot set and provide the page comma provide a string page. Now duplicate it. Here we'll add limit and provide 12. Now after that here let's add con curly braces data equal to await and provide the API. import this API from config folder then dot get method and provide the endpoint using back text/ products. Then we'll add question mark dollar sign curly braces and provide the params dot to string. Now after that let's use the setter function that is set products. In this set products just add the data dot products and after that we'll add set total pages and provide data dot pages. Right? Now after that come here in the catch block. In this catch block just add error and the type will be any. Then we will add toast notification. So import the toast from react hot toast. Then dot error and provide this error message. After that we'll add the finally and in this finally block use the set loading and let's make it false. After that just remove this one.
Segment 406: 835:00 - 837:30 After that scroll up. You can see here we have the dummy products imported from assets. So just remove this dummy products. Let's save the changes. And uh after that let me open the web page. So you can see here we have all the products that is coming from the database. We can click on this product like this. Let's come back and go to homepage. Click on this fruits. So you can see here we have the fruits only right because we have this parameter in URL. Now come to homepage and click on this bakery. So you can see we have the bakery products only right. It is coming from this parameter. Now we can click on any category from this sidebar. So it will display the product of that category. Right here we can enter the minimum price, maximum price to filter the products. Now after that let me just come back to the VS code and we'll add the API call in the flash deal. Let's open this flash deals and uh in this one you can see here we have the use effect where we are getting the dummy data right so in this one let's just clear this code and add the API import the API from config then dot get method in this one just add the end point that is / products/ flash deal. Then we'll add dot then method and provide the add function here where we'll get the response and then we'll use the set products. provide this response dot data dot products. After that we'll add dot catch method. In this one add the arrow function. Here we'll get the error colon any then we'll add the toast
Segment 407: 837:30 - 840:00 notification. So import the toast then dot error here we'll add the error message like this. Now after that we'll add dot finally and in this one add the add a function where we will use set loading and make it false. That's it. Save the changes. Let's open the web page. Go to deals. So on this deals page you can see here we have some products where we have some discount like 5% 7%. Right? So we have the product where we have some deals. Next we'll add the data in the search page. If I come here, click on this search icon and type something like bread. So you can see this is the bread page. But here we have zero result, right? So let me just come back and uh open this pages and search result dot tsx file. So in this search result we have this use effect. Right. Before that let me just come back to the previous file that is flash deals. And here also we have the import that is importing the dummy product. Remove this import statement. Save the changes and come here in the search result. Now in this search result we have the use effect where we have added if not of query then return. That's it. Then set loading true and after that we have set products. Remove this set products and uh remove this set loading also. And here we'll add the API call. So let's add the API import it from config. then dot get method. Then we'll add the back ticks here. In this back tick provide the path / products question mark search equal to dollar sign curly presses and use the encoded URI component and provide the query. After that
Segment 408: 837:30 - 840:00 let's add dot
Segment 409: 840:00 - 842:30 then and this dot then we'll add the arrow function. Here we'll get the response and uh just use set products. In this set products use the response dot data dot products. Then we'll add the catch. So just add dot catch and add the add a function. Now here we'll add the error colon any and uh then we'll add the function where we'll add the toast notification. So import the toast and provide toast dot error and provide this error message. Then we'll add dot finally. And in this finally simply add the add function and use the set loading make it false. Now after adding it come back here. So you can see we have the bread product here. When we searched for bread it works fine. Let's come back here. Now I'll click on any product. So it should display the product details right to display that let me come back to the VS code. We will open the pages and in this one you will find the product page. In this product page you can see we have the dummy product. Right? So here we will get the product data from database. But before that just come back to the previous page. Here we will remove this import statement. Save the changes. Come back here in the product page. Now in this product page we have use effect where we have added set loading true. Set local quantity one. Then window data scroll. Then we have this product. So just remove this. Remove this related product also. Remove this set loading also. Right now in this one just add API import this API then dot get method in this get method provide the path that is back/
Segment 410: 842:30 - 845:00 products and then we have to provide the ID. So just add dollar sign KS as id. Now after that we will add dot then in this dot then add the arrow function get the data in the parameter and uh just use the set product in this set product just add data dot product right then we'll add the return statement in this return use the API dot Get then we'll add D text provide the / products question mark category equal to dollar sign curly braces provide the data dot product dot category. Let me add the curly braces here. So it will destructure the data. Now it is correct. Now after that here we'll add dot then in this one again add the arrow function. Here we'll add calibr uh then we will use set related products. In this set related products, we'll add the data dot products dot filter and in this filter add the arrow function with the individual product and type is product. import this product type. Then we have the P dot id not equal to id. Right? Now after that here we'll add dot catch. In this catch create the arrow function and use the navigate function. In this navigate function provide the path that is / products. After that let's add dot finally. In this finally add the arrow function and use set loading. Let's make it false. Save the changes. And after that, let me
Segment 411: 845:00 - 847:30 just come back here. So you can see here we have the product details. When we open any product, we have the product image, other details, add to cart button, and here we have customer reviews that is the demi data. And here we have the related products also, right? And here we have the link for view all product. Let's come back. Let's click again. So you can see it will display this product that is the related product. It works fine. After that let me just come here go to addresses. So here you can see we have the dummy addresses right. So we will display the address from database. So let me just come back to the VS code. We will open the sidebar. Then go to pages and in the pages you will find addresses.tsx. Right now in this one here we need the update user from the use o. So just add const curly braces equal to use o use has been imported. And from here let's get update user right now after that here you can see we have this handle submit right using that we can submit the new address correct so in this handle submit we have e.t prevent default. So just after that we will add try catch a statement. Now in this try block just add con coordinates that is chords equal to a weight and here we have to use a function that will help us to get the coordinates right. So we have to create that function first. So here let's add const get location equal to
Segment 412: 847:30 - 850:00 this add a function and uh here let's add retries equal to three. Then we'll add colon and provide the promise angle bracket and provide curly braces. Here we'll add latitude that will be number. Then we'll add the longitude. It is also number. So just add the semicolon provide longitude. So here we have the get location function. Now in this one let's add return new promise and provide the arrow function in this promise and here we'll get resolve and reject. Let's add the if statement if not of navigator dot geoloccation. So in this case simply add reject provide new error and provide the error message that is geoloccation not supported and after that simply add return. It will stop the execution here. Now after that let's come here and add const attempt and add the add a function here. Here let's add the navigator dot geolocation dot get current position. Now in this one just add the position and create the arrow function. Here we'll add resolve. In this resolve we'll add the object where we'll add the latitude. It will be position dot coordinates dot latitude comma provide the longitude using position dotcoordinates dot
Segment 413: 850:00 - 852:30 longitude. Now after that here we'll add comma and provide another arrow function where we'll add the error colon any right here we'll add if retries greater than zero in this case just add retries minus minus then we'll add set time out we will add the attempt 1,000 milliseconds. After that we'll add the else statement also. In this else statement we'll add reject and provide new error. In this new error we'll add error dot message or failed to get location after retries. Correct? Now here we'll add the comma and add another object. Here we'll add enable high accuracy and make it false. Then we'll add the timeout. After that we'll add the maximum age. Right? Then we'll come here. Here we'll add attempt and call it. That's it. So here we have added this attempt. We have some mistake here. Let me fix it. We'll add the equal to like this. Attempt equal to. Now it is correct. And after that we can use this get location function. So I'll scroll down and here let's add a weight get location and call it. Now let's add con payload equal to curly braces a spread operator form then comma spread operator coordinates. So we will send these data on API. After that we'll add the if statement. If editing ID it means we are updating the existing address. Right? So here let's add con curly braces data equal to await
Segment 414: 852:30 - 855:00 and use the API import the API from config then dotput method and uh in this one add the end point that is / addresses we are adding it in back text then /d dollar sign kibes provide the editing ID then we'll provide the payload data. So let's add this payload. Right? After that here simply use the set addresses and in this set addresses let's provide data dot addresses. Then we'll add update user. In this update user add the object with addresses property. It will be data dot addresses. After that we have to add the toast notification. So let's add the toast. Import it. Then we'll add dot success and provide the message here address updated. So using this script we will update the existing address. Now we'll add the else statement when we will add a new address. Right? So let's just copy this one. Paste it here. We'll add await API dot post method. Change the method. It will be post. Then the path will be / addresses. Remove this ID from here. Then we'll provide the payload here. And uh after that let's add set addresses. Let's just copy this paste it here. It will be data dot addresses. After that copy these two line also paste it here that is update user and then toast dots success. And here we'll add the message that is address added. That's it. Now here we'll simply add a reset form. So it will reset the form. And after that come here in the catch block. So just add type any and here we'll add the toast dot error and provide the error message like this save the changes. So here we have added this handle
Segment 415: 855:00 - 857:30 function using that we can submit a new address right and after that you can see here we are displaying the addresses list using this address card. So let me open the address card also. We'll open the components. Then you will find address card. TSX file. Now in this address card you can see here we have handle delete. So we can delete any individual address. Correct? So let's add the functionality here. We will remove this console log and provide the try catcher statement. And in this one first we'll display one confirmation. So let's add con confirm equal to window dot confirm. Are you sure you want to delete this address? Now we'll add the if statement if not of confirm. In this case simply add return. So it will stop execution here. Now suppose the confirm is true then we'll make the API call. So just add con data equal to await and then provide API import this API from config folder then dot delete. In this delete method we will add the end point that is / addresses using the back text slash dollar sign curly braces and provide the ID like this. Now after that we will add setter functions set addresses it will be data dot addresses then we'll use the update user. So let's get this update user from the context. So here let me provide con curly braces equal to use o import the use o and from this use o we will get the update user. Now after that here let's add update user. In this update user we will add the addresses property. It will be data dot addresses. Then we have to add the toast notification. So import the toast then write dot success and provide a message here that is address removed.
Segment 416: 857:30 - 860:00 Then we will come to the catch block. So here we'll add the error type. It will be any and then we'll add toast dot error and provide these error messages. Save the changes. Now let me just come here. Let me refresh it. Here still we are getting this dummy data. So let me just come back here in the addresses because we have just added the functionality to add a new address and delete the address. And here we are using the dummy data to display the address list. Let me remove that one also. So here you can see we have the use effect. In this use effect you can see we are using the dummy address, right? So let's clear it. Here we will add the API dot get method and provide the path that is / addresses. After that dot then and provide the arrow function. Here we'll get the curly braces data in the response. Then we'll add set addresses. In this set addresses, let's provide the data dot addresses that we are getting from the API response. Now after that here we will add dot catch. In this catch add the add function. We will get the error and the type will be any. Correct? Now we'll add the toast notification. So let's add toast dot error and uh we will provide this error message. Then we will add the finally block. So just add finally and in this one again add the add function here. Simply use set loading and make it false. That's it. Now after that let me scroll up and remove this import a statement that is importing dummy address. Just remove it. Save the changes and open the web page. Now you can see no addresses saved. After that click on this add address and here let me add address
Segment 417: 860:00 - 862:30 label like home. Then we'll add the street name sama street. Then we'll add the city name. Then estate. After that we'll add the zip code and save address. It is asking that the browser wants to access the location. So let's click allow. This time it says system location is turned off. So I'll open the system settings and I'll enable the location access. It's done. After that I'll click on this icon and uh it says off. So let's click on this save button. user denied geolocation. So I need to refresh it. You can see location is on location permission is on. Let me reload this application and after that I'll click on add address. Provide the home some street. It says user denied geolocation. Let's open it. Still it is saying turned off. System settings. Allow apps to access your location. I need to turn it on. It's done. Now I'll try again. Let me check this. Yeah, allow access. Done. Now it should work. So we have submitted a new address and after that you can see the white screen. So let me inspect it. I'll go to console cannot read property of undefined reading length in addresses tsx line number 131. So let's come back here.
Segment 418: 862:30 - 865:00 Here we are checking addresses dotlength. It is correct. Let me scroll up. Here we have this addresses. There is no error. After refresh it is working fine. Here you can see our address has been added here. Right? And uh if I open the database, go to addresses. Here you can see the user ID. Then we have the address ID, label and address. And here we have the latitude and longitude also. Correct? And uh after that if I click on this edit, we can edit this address again. And we can also delete this address. Correct. After that we have to come here. Here let me delete all the product. So you can see the cart is empty. I'll go to homepage. Refresh it. You can see the cart items is empty. I'll click on this plus icon. So it will be added in the cart. Let me click here. You can see it is added in the cart. Let me open this product. Click on add to cart. It is also added. Let me increase the quantity from here. From here we can increase or decrease the quantity. Then go to check out. So proceed to check out. So here you can see we have the dummy data. Right? So let me import the actual address data here from the database and add other details. Right? So we will complete this checkout page also. So let me just come back here in the VS code. We will open pages. In this pages you will find checkout.tsx. In this checkout tsx first we need the data from the cart. So we already have the items and uh cart total right here. We need one more item that is clear. Let me add clear card. And uh after that let's link this clear with the function. But before that we have to
Segment 419: 865:00 - 867:30 complete our function that is handle place order. It should be here. We have this handle place order right so let's complete this function in this one you can see we have set loading true after that navigate so let's remove it and provide the try catch statement now in this try block we will add con order data equal to object object where we'll add the items. So in the items property we will add the items dot map and add the add function parenthesis and object. Now here we'll get individual item and after that let's add the product. So this product will be item dot product id. After that we have to add the quantity. So the quantity will be item dot quantity. Now after that here let's add shipping address. So the shipping address will be address. Here we have to add the comma and after that we will add the payment method. Now here we will add con data equal to await then provide API dot post and then we will add the path that is /ders then comma and provide the order data. Let me import this API. So we will import this API from config folder. After that here we'll add console log. Let's provide this data. Now after that here we will add the if statement. If data dot URL so when you make the
Segment 420: 867:30 - 870:00 online payment then you will get the URL in the data. Right? So in this case we'll add window.loation.href href equal to data dot URL and then we'll add the return correct and uh after that here we'll add clear card that we have imported right now we'll add the toast notification also so just add toast dots success so first we'll add the toast import the toast then dot success and then we'll add the message that is order placed successfully then we'll add the navigate function. So just add the navigate and provide the path that will be orders page. So just add the back ticks and provide the path that is /orders/ dollar sign curly braces and provide the data dot order do ID. So it will open this particular order data. Right? And after that we'll come here in the catch block. In this catch block we'll add the error type will be any and provide the toast dot error like this. Then we'll add the finally block and in this finally block we will add set loading make it false and a scroll to zero. So using this we can place the order right and uh after that let's scroll up here you can see we have the dummy address data it is used here in the user correct so let's remove it here we will use the actual address so just remove this here we will at con user equal to use o use o has been imported and here we have the user data after that let me just come here so here you can see we have add new address if I go to address page in the address page you can see we have this address right so this address is not a default address.
Segment 421: 870:00 - 872:30 It is default because we have only one address, right? So if I go to cart page, proceed to check out. You can see now it is default address and you can see it is selected by default. Correct? So you can use this address or you can also add a new one after clicking on this button. So it will open this page where you can add a new address and when the address is selected you can continue to payment like this. Here I'll choose this cash on delivery then review order. So here we have the selected items. Now I click on the place order button. So you can see after that it is opening this page that is order/ this ID. It means we have placed the order and after that it will open the order tracking page. But we have not added the content here. So we will update this page also. But before that let me see the database. I'll come here in the orders. So you can see here we have a new order where you can see the order ID, user ID, items, shipping address, payment mode is cash. Then we have the subtotal, tax, total amount, a status, order history. Right? So we have these data. Now after that we have to create the my orders and order tracking page. So I'll just come back to the VS code. In this one we will open the sidebar and here you will find my orders.tsx. In this my orders.tsx you can see we are using the dummy dashboard data right. It is used here in the fetch orders right. So in the fetch orders we'll fetch the order from database. So just clear this function and here let's use set loading and make it true. After that we will make the API call. So just add try catch and in this try block let's add con padams equal to active tab not equal to all question mark then we'll add the back text question mark a status is equal to
Segment 422: 872:30 - 875:00 dollar sign curly braces active tab then we'll add else empty string then we'll make the API call so just at con data equal to await and use the API instance so import the API from config then dot get method and here we'll add back text then provide /ders this is the API route then we'll add dollar sign curly braces and provide this patterns like this. After that we will use the setter function set orders. In this one just add the data dot orders that we are getting from the API response. Now after that let's come here in the catch block we'll use the error colon any and provide the toast notification. So import the toast from react toast and provide error. Then we'll add the finally block. And in this finally block we will use the set loading and make it false. That's it. And uh after that let me scroll up and remove this import a statement that is importing the dummy data. That's it. Now after that let me open the order tracking page. Let's open order tracking. And in this order tracking, we have dummy data here, right? So let's remove it. You can see we have the use effect. In this use effect, we are using the dummy data. So let's remove this statement. We will use set loading or we can remove it. Let's remove this set loading. Simply add the API. Import this API from config. Then dot get method. And in this get method provide the back text and add the path that is /orders/ dollar signal braces id. Right. After that we'll add dot then in this one add the arrow function. Here we'll get the response and after that we'll add the
Segment 423: 875:00 - 877:30 set order. In this set order provide response dot data dot order. After that we'll add dot catch. In this catch add the arrow function again. And uh here simply add navigate and we'll navigate to orders page. So we have added navigate orders. After that we'll add dot finally and in this finally again add the add function. Here we will use set loading and let's make it false. Save the changes. After that, let's open the web page. So here you can see in this order tracking page, we have the order ID. Then we have the map and here we have the progress. Right? Here we have the order detail like address, items and cart total. So this is the order tracking page. Let me just come here in my orders. So here you can see we have only one order. If I go to place, this is one order out for delivery. We don't have any outro delivery order. We don't have any delivered order. And if I go to all, we will get only one order that we have placed. Correct? Now in the order tracking page, let's open the order tracking. Here we have to fetch the order status when it is out for delivery right after every 10 seconds. For that just come back here in the VS code and uh here let's add the comment that is live location every 10 seconds. So here we'll add the use effect. In this use effect add the add function and provide the if statement if not of order or delivered cancelled placed. Then we'll add dot includes. We will add this here. dot includes
Segment 424: 877:30 - 880:00 order dot status. Then simply add return. After that we'll add con fetch location equal to asynchronous add function. We will not get anything in this parameter here. We will simply add try catch statement. Now in this try block we'll make the API call. So let's add con data equal to await API.get right and in this one we have to add the path using back text that is the API endpoint path. So just add /orders/ id/ location. Right now after that let's add the if statement if data.live live location question mark dot latitude and data dotlive location dot longitude and data dotlive location dot updated ad. We have all these data. In this case, we'll add set live location. In this set live location, add the object where we'll add latitude like this. Then, comma provide longitude. That's it. Now after that here let's add also update order status if it is changed. We have added this comment and we'll add the if statement if order dot a status or we'll add the data dot a status and data dot a status not equal to order dot status. In this case, let's add set order. In this set order, we will add the arrow function and provide the previous data and it will return previous data turnary operator curly braces. A spread operator previous and then
Segment 425: 880:00 - 882:30 update the status property. It will be data dot status. else we will simply return the previous. That's it. And after that here we have the catch block. So just clear this catch block. It will be empty. Let's remove this. That's it. Now after that here we have to call this fetch location function within this use effect. So here you can see we have this use effect which is closing here. So here we'll add the comma and provide the dependency array and uh in this dependency array we'll add the id. Then we'll add the order question mark dot a status. And uh after that here we'll add fetch location function. We'll call this fetch location. And then we'll add the con interval equal to set interval and provide fetch location, 10,000 milliseconds. And then we'll add the return provide the arrow function here. Simply add clear interval and provide this interval. That's it. So here we have added the logic using that we will get the live location after every 10 seconds when the order is out for delivery. Let's remove this import a statement that is not in use now. Right? So we have completed our order tracking page also. Right? So when the order will be out for delivery then we'll get the status every 10 seconds that is the live location. Now let's come here on the homepage. Now we have integrated all the APIs for user feature. Next we have to add the APIs in the admin feature. Let me go to admin panel. So in this admin panel you can see we have the dummy data right that is coming from the assets. So here we get the data from database. But before that let me just come back to the client area. Then we'll go to
Segment 426: 882:30 - 885:00 address in this page. As you remember when we added the address, it was not displaying the address right here. But after refresh, it was displaying the address. So let me fix that. I'll just come back to the VS code. Then open the server. In the server, you will find the controllers. And just open address controller.ts file. In this one you will find the function that is add address. So here we have the controller function for adding a new address. In this one you can see we are returning the response where we have added the add addresses by mistake. So just remove it. And here we will provide this addresses variable. Just copy and paste it here. That's it. Save the changes. Now, whenever we will add a new address, it will instantly display that new address here. Now, let me just come back here in the admin panel and start integrating the APIs. So, we will start with the admin dashboard. So, here we have the dummy data. Let me remove it and get the data from API. Let's come back to the VS code. We will open the client. In this client, you will open pages and then go to admin folder. In the pages, you will find admin folder and here you will find the admin dashboard. So just open the admin dashboard.tsx file. Here you can see we have use effect. In this use effect we have added set stats that is the admin stats and we are using the dummy data that is dummy admin dashboard data. So we have to remove it and here we will get the data from API. So let's just clear this function and simply use the API import this API from config folder. Then just add dot get method. Now we have to add the API endpoint that is /admin
Segment 427: 882:30 - 885:00 / stats. Now after that we will add dot then in
Segment 428: 885:00 - 887:30 this dot then add the arrow function where we will get the response and it will return the set stats and insert the response dot data. Now after that let's add dot catch that will catch the error if occurs. So simply add the add function here. After that just add dot finally in this one again add the add function and here let's use the setter function that is set loading and let's make it false. So it will remove the dummy data. And let's scroll up. You can see here we have the dummy admin dashboard data imported. Right? Let's remove it. Save the changes. After that we will open the web page. So still we have this data. Let me refresh it. I'll come here in the admin panel. So here you can see we have the accurate data from database. We have total one order right. We have two users correct. Then we have total number of products. We have 27 products zero out of stock. Here we have only one order right? So the recent order is here which is this order ID. Then customer detail, number of items in the order, total amount and a status is placed. Then we have the date. So this is the correct data that we are getting from API. After that you can see here we have add product. Let's click here. So it will open this form where we can add a new product. Right? So before adding the new product, let me complete this products page. If I come here in the products page here, you can see we don't have any product, right? So let's come back here. Open the sidebar. In this one you will find admin folder and then go to admin orders. Here we have admin orders.tsx file.
Segment 429: 887:30 - 890:00 So in this admin orders you can see we have dummy dashboard order data. Right? So we have to remove it. Let's scroll down. You can see we have fetch orders function. So we will update this fetch order. Just clear this function here. Let's add try catch block. In this try block, we'll make the API call using this con data equal to await and API instance then dot get provide the endpoint for the fetch order that will be slash orders/all. So here we'll get the response data. Now we can use the setter function that is set orders and in this one simply insert this data and in this data we'll get the orders details. So we are making the orders page. If I come back here you can see so if I click on this second one you can see here we have the products then we have the orders. So we have created this orders page first. Now you can see we are getting the actual data from the database that is the order details correct and after that here let's update the catch block also in the catch block we'll add the error with a type any then we'll add the toast notification so just add the toast dot error provide the error that we are getting from the response or failed to load load orders then we'll add the finally block. So let's add the finally and here we will use the set loading and let's make it false. So the loading will be false. After this fetch orders here you can see we have fetch partners. So we will fetch the partners list so that we can assign the delivery partner for particular order. So here also clear this function and add the try catch statement in this try block make the API call. So copy this statement paste it here. Here we will use the API dot get and
Segment 430: 890:00 - 892:30 provide the path that is / admin/ delivery partners. Right now after that just use set partners and in this one just add the data dot partners. Then we'll add the filter. Now in this filter add the arrow function where we will get the individual partner colon and provide delivery partner and then it will return P dot is active. So we will filter the active partner. Now remove this error from the catch. That's it. So using this we'll find the delivery partner list and after that you can see we will call the fetch orders and fetch partners. Then we have this handle status change. Right? So we can change the order status from the admin dashboard. Right? So just remove this console log. Here we'll add try catch. In the try block we'll make the API call. So copy this statement. Paste it here. That is await API do.put method. Then the path will be orders/ ID. We have to insert the ID here. So just add the back tick. Let's add the back tick here and end with back tick then slash orders slash dollar sign curly braces and insert the id then slash a status. So for this particular order we will change the status and here we have to send the data also. So just add the comma object. In this object we will provide the a status property and in this status property let's send the new status.
Segment 431: 892:30 - 895:00 Now after that we can display the toast notification. So let's add the toast dots success and provide order status updated. Then we have to add fetch orders again. So it will display the fresh data after updating the order status. Now come to the catch block. Here we'll add colon any then we'll add the toast dot error and here we have added the message failed to update a status. So we can change the order status also. After that here you can see we have the handle assign using that we can assign the delivery partner right. So let's complete this function also. So if the assign model is false or selected partner is false then return nothing right it will stop execution. Now suppose the assigned model is there and selected partner is there then we can assign the partner. So just add the try catch block after this if statement. Now in this try block, copy this statement. Paste it here. It will be API dotput. Then we'll add the path that is admin/orders slash. And here we'll add the dollar sign curly braces assign model/ assign. So this is the endpoint of the API. After that we'll add the object and provide the partner ID. So in this partner ID property let's provide the selected partner. After that this partner will be assigned right. So we can display the toast notification using toast dots success delivery partner assigned. Then we will use the setter function set assign model make it null and set selected partner provide empty string and after that we have to fetch the orders again. So just copy paste it here fetch orders. After that come to the catch block. Here we'll
Segment 432: 895:00 - 897:30 add colon any and then we'll add the toast notification like this. Here we have added the custom message failed. That's it. Save the changes. So after adding it, if I come back here, so in the admin dashboard, we have the orders. And if I click on this drop-down here, we can change the status. So let's change the status to confirmed. So you can see order a status updated. And here we have the new status that is confirmed. Next we'll come here in the products. And here we'll display the products list. Right? So let's come back to the VS code. In this admin folder, you will find the admin products. Just open this admin products. And uh here you can see we have the fetch products. So let's complete this fetch products function. Before that, let me just come back to the previous file admin orders. Scroll up and remove this statement that is importing the dummy data. Remove this one that is not in use. and come here in the admin products and here in this fetch products we have the demi products right so just clear this function and in this one we'll make the API call so let's add the try catch statement now in this try block we'll add API call using API instance so just add con data equal to await then API import it from config folder then dot get method Now after that we'll add the path. So the path is / products. After that here simply use the setter function set products and provide the data dot products. Now come here in the catch block we'll add error col and provide the toast notification. So
Segment 433: 895:00 - 897:30 import the toast then dot error and provide error response data message or error dot message
Segment 434: 897:30 - 900:00 then come here in the finally block in this finally use set loading and make it false. So it will fetch the product list. It will display the product list. But after that we have to add one more functionality using that we can reduce the product a stock and we can make the product out of a stock so that it will be there for the user's order history but we cannot display the product on the front end. Right? So let's remove this console log. And here first we'll add if not of window dot confirm then return and if it is confirm then we'll add the API call. So just add try catch and here we'll add await API dot delete. In this delete method provide the path. So just add the back text slash products then slash dollar cur ID. So we'll get the individual product with the id and we will make the stock zero using this API endpoint. So after that we can display the toast notification. So just add toast dots success and provide product marked as out of stock. And after that we have to fetch the product again. So just call this function here. Now come here in the catch provide the type any. And here we'll add the toast notification. So just add toast dot error like this. Save the changes and after that we can come back here. So here you can see we have total 27 products. Right now here we have the cross icon. When we click here, this product will be marked as out of a stock. Right. Let's click on the first one. Click okay. So now you can see the stock has been updated. When I click here, it is deleting the product instead of removing the stock. And when we delete the product and
Segment 435: 900:00 - 902:30 someone has ordered that product then they may get the error in their order page. Right? That's why we will not delete it. We will just make the stock zero. So let me update our controller. We'll come back to the VS code. Open the server then controller and uh order controller or we will open the product controller.ts. ts file. So in this product controller you can see at the end we have the delete and API product and id. So this is the delete product. So let me update it. Here we'll update the logic like prisma do.t product dot update. In this update, we have added where ID then we'll add comma data. In this data, just add the stock and provide the number function and provide the stock zero. That's it. And let's update the response message also. So just add product updated. Let's save the changes. After that, let me just come here and uh refresh this web page. Then we will open this admin panel and uh click on this cross icon. Click okay. Now after that, let's scroll down. So here you can see we have that product, right? But the status is out of a stock. It is working right now. After that, let's come here and add the functionality for add product. If I click on this edit icon. So here we are getting the wider screen on this product edit page. Let me just come back. Go to products in the admin panel. So if I click on this edit, it will open the product edit page. And here we have the add product page. So we are using the same form for adding a new product and for product edit. So let me complete this one. I'll just come back to the VS code.
Segment 436: 902:30 - 905:00 Open the sidebar. Then let's come here in the client. then pages admin and uh admin product form. Here we have the admin product form and in this one you can see we have used the dummy products right. So let me update our code we will get the data from API. So first we are getting the id from use params and if the id is available then is it will be true. Then we will get the navigate function here. Just add const equal to use navigate imported from react router down. And after that we have the loading, saving and image file. And uh after that we have the form data here right that will be sent on the API request. Then we have use effect where we are fetching the data. So here you can see if is edit is true then we are getting the dummy product data. Right? So just clear this if statement. In this if statement we'll add constra data and here we'll add the product data equal to await then use the API import it from config folder then dot get method and then we'll add the back tick provide the products / id using this template lit. Now after that we'll add con equal to product data dot product. So from the response we'll get the product and after that let's add the set form data. So in this set form data let's add the object. In this object provide the name. It will be P dot name.
Segment 437: 905:00 - 907:30 That is the product name. After that we'll add the description. Description will be P dot description. Then we'll add the price. After that we'll add original price. Then we will add image. After that we'll add the category. Then we'll add the unit. Then stock. And uh after this stock we will add is organic. So we have added all the data for the form. So it will fill the product details in the form right and after this we have to include this code in try catch. So here simply add the try catch block and let's move this entire if statement in the try block. Here we have the if statement. Let's move it inside the try block. Now let's come here in the catch and provide the colon any. Then we'll add the toast notification. So just add toast dot error and provide this error and uh after that we'll add the finally. Now in this finally use the set loading and let's make it false. So after adding this set loading false here you can see we have this if statement. So it should be above. Let me cut it from here. Scroll up. So let's start with this fetch data function. Here we have added the try block. So in this try block first we'll add this if statement. If is editing is true. In this case we will make the API call like this. Right. And uh after that this API call will end here. Then we
Segment 438: 907:30 - 910:00 have the catch block and then we have finally right and uh after that we have set loadings. Just remove this set loading because we have already added the set loading false in this finally. And after that we are simply calling this fetch data function. Now after that you can see here we have handle submit using that we can add a new product. This was for adding or updating the product right that is is edit we can edit the product. So here we have handle submit using that we can submit a new product. So here first we have added e.t prevent default then we'll use set saving and let's make it true. Now after that here also we'll add the try catch statement. Now in this try block we'll add let final image URL equal to form data dot image. Now after that we'll add if statement. If image file. If we have the image file in this case just at con form data upload equal to new form data and in this one we will insert the image property. So just add form data upload dot append and in this app end we'll add the image and after that we'll add the comma provide image file. Next we'll add the API call here. So just add con data equal to await and use the API dot post method to add a new product. Here we'll add the path that is /upload. This is the API endpoint. Then we will provide the data that is form data upload.
Segment 439: 910:00 - 912:30 After that here just add final image URL equal to data dot URL. So it will upload our image file right and after that let's add if not of final image URL in this case just add the toast dot error and provide please upload a product image and then we'll use the set saving and let's make it false. Then we'll add the return. Now suppose the final image URL is available then let's prepare the final payload data that will be sent on API to add a new product. So just add con payload equal to object where we'll add the existing form data then comma image property and in this image property insert the final image URL then we'll add the price here we'll use the number function and provide the form data dotp price. After that we'll add the original price. So let's add form data dot original price. If it is available then use the number function and provide form data dot original price or zero. Then we'll add the stock. So here we'll add the number function and provide form data dot stock. After that here let's add if statement. If is edit if it is true in this case just add await API dot put and provide the path in back text that is / products dollar sign curly braces id and provide this payload. After that just add the toast dot success and in this one simply add product updated successfully.
Segment 440: 912:30 - 915:00 Correct? So you can see here we have added the fetch data using that we can fetch the data on our form and uh after that here we are making the API call to update or add a new product. So if is edit is true then we will update the product using API.put and this is the end point. Now we'll add the else statement. If it is false in this case a new product will be added. So just add await API dot post method. Here we'll add the path that is / products. Then we'll add the payload data here. So just add the payload and then we'll add the toast notification that is toast dots success product created successfully. Right? And after that we have to navigate to products page. So just add the navigate function and provide the path here that is / admin/ products. After that come here in the catch provide the error colon any. And then we'll add the toast notification using toast dot error. And then we'll add the failed to save product. After that we'll add finally. And in this finally provide set saving and uh let's make it false. That's it. Save the changes. And after that let me just come here and let's go to products. Click on edit icon. So you can see it will open the edit product where you can see we have the existing product details like name, category, price, original price, unit, stock and product image, description. Then we have the save product button. So here we can update the existing product. Let me update the price. Let's set the price 40 and click on save product. Now let's scroll down. So you will find the product has been updated. You can see here we have the updated price for this product. Right? Now let's try to add a new one. I'll click on this add product. Here we'll add the product
Segment 441: 915:00 - 917:30 details like product name test product. Then we'll add the category. Then we'll add the price. Let's set 40. Original price is 60. And then we'll add unit. So let's add the unit kg. And we'll add the stock 100. Then we have to upload the product image. So let me choose one image here. I will choose this image and we'll add any description and click on save product. So after adding product we are redirected to product list page. You can see the test product has been added here. Here we have the price stock and we have the edit and delete icon. Now after that here we have completed the dashboard add product then we have completed the product list then orders then we have this assign option so that we can assign the order to delivery partner right now if I click here here you can see no active delivery partner please onboard a partner first right so right now we don't have the delivery the partner. If I come here in the delivery partners list, so here we have the dummy data. We will remove it and make it functional. So just come back to the VS code. Let's open the sidebar admin. In this admin, you will find delivery partners.tsx. Now in this one, we have the dummy data right from the assets. So we will remove it. And here let's add the functionality that will get the data from API. So first we have fetch partners that will find the partners list. Correct? So here let's update this function. We will clear this function first and we'll add the try catch statement. In this try block we'll make the API call. So just add con data equal to await and then we will add the API import this API from config then dot
Segment 442: 917:30 - 920:00 get method then we will insert the endpoint so this is the API endpoint /admin/ delivery partner after that we'll get the delivery partner data in the response so just use the set partners and provide the data dot partners. Then we'll add the error colon any and provide the toast notification here. So import the toast and add toast dot error and provide this error. Then we'll add the finally block. In this finally block, we will set the loading false. Save the changes. And when the component gets loaded, it will execute this fetch partners. So after adding it, let's remove this import statement that is not in use. So just remove this, save the changes and come back to the web page. So here you can see no delivery partners, right? But here we have the add partners button. using that we can add a partner right so let's make it functional I'll just come back to the VS code and in the same file you will find handle submit using that we can submit a new delivery partner detail so in this one here we have ePrevent default after that let's use set saving and let's make it true then we'll add the try catch statement and in this try block we'll make the API call. So I'll just copy this a statement paste it here that is con data equal to await API dot post method then the path will be / admin/ delivery partners then we'll add the data also so here we'll add comma provide this form right now after that we'll use the notification to display the success message. So just add toast dots success and write the message partner onboarded successfully. Then we'll use set so form and make it false. So it will hide the form. After that we'll reset the form input fields. So just add set form and provide the name empty string, email
Segment 443: 920:00 - 922:30 empty string, password, phone and vehicle type. Set the vehicle type. After that we'll again call the partner list. So just add fetch partners function. Now come here in the catch block provide colon any and then we'll add the toast notification. So let's add the toast dot error and provide error dotresponse. Or failed. Then we'll add the finally block. In this finally block we will use set saving and let's make it false. That's it. Now after that if I just come back here here still we don't have any data but this form is functional. When we submit the data it will add a new partner. Let me just come back and you can see here we have added cost data but it is not in use. Just remove it. Simply use this await API.post that will add a new partner. Now let's add a new partner data using this form. So I will add the delivery partner name. So here we have added the name. Then we will add the email id. So let's add the demi email id like partner one at regist.dev. Then we'll add the password here and add the phone number which is optional I think and here we have the drop-down so we can choose the vehicle type. After that click on this button create partner. Let me add the phone number also. So I'll add some dummy phone number. Create partner. So you can see a new delivery partner has been added and it is displayed here. We have the partner name, bike, then a status, the email ID and phone number. Here we have the deactivate feature but it is not functional yet. We will add the functionality in this button also. So let's just come back and uh here we have toggle active. So in this one just remove this console log. Add the try catch block. Now in this try block we'll make the API call. So just copy this paste it here. Here we'll add await
Segment 444: 922:30 - 925:00 API.put method. Then the path will be admin/ delivery partner. And then we have to insert the ID also. So just add / dollar sign curly braces and ID. And to insert this ID we are using the template lit. So just convert this into back tick right. So here we have the back tick and then path is / admin/ delivery partners/ id. Then we'll add object here where we'll add is active property. It will be not of is active. Right? After that we'll add the toast notification. So just add toast dots success. And here we'll add is active. If it is true then we'll write the message partner deactivated. And if it is false then partner activated. After that we'll call the fetch partner function here like this. And now come to the catch block. Here we'll add colon any. And then we'll add the toast dot error and provide this error. Save the changes. Next let's just come back to the web page. And now if I click on this deactivate, you can see partner deactivated. Let me refresh it. We got the message but it is not deactivated. Let me fix it. To fix it, we will come back to the VS Code. Let's open the sidebar and uh come to server. In this server you will find controllers and in this one we have admin controller. In this admin controller you will find this function that is update delivery partner profile. So here you can see we have added if is active. So just remove this if is active. Simply use the data dot is active equal to is active. Let's save the changes and after that come back here. Now refresh this and click on this button. So you can see partner deactivated and here we have the status inactive. And now we are getting the option to activate the partner. Right. Let's click here and after that you can see partner activated. Here we have the active
Segment 445: 922:30 - 925:00 status. So using this button we can
Segment 446: 925:00 - 927:30 activate or deactivate the partner. So right now the a status is active. So we can assign this partner to any order. So let's come here in the orders and click on this assign. Now you can see we are getting the list of partners. Here we have only one partner. So let me choose this one and click on assign. So you can see delivery partner assigned. Correct. And you can see a status is also updated by default. So the a status has become assigned. From this drop-down we have the assigned right. So when we assigned the delivery partner it is assigned here correct. So this is also working fine. After that we have the exit button so that we can exit from the admin dashboard and come to the homepage. So let's click here. Now we are on homepage. So we have completed the API integration for user and for admin. Next, we'll integrate the APIs for the delivery partner feature to add the functionality in the delivery partner dashboard. Let me open the dashboard first. So in this URL, if I type / delivery, it will open the delivery partner dashboard. But right now this delivery partner dashboard is accessible without login. So we will add the restriction here. Only logged in delivery partner can see this dashboard. Right. So just come back to the VS code. Let's open the sidebar. Then come here in the client. And uh in this client you will find the pages. In the pages we have delivery. Then you will find delivery layout. Let's open this delivery layout dot tsx file. Here you can see we have the dummy delivery partner data. Right. So we have to clear this use effect. Now in this use effect just add const and variable name is saved equal to local storage dot get item. We will check the local storage and add the key name that is delivery partner. Right now just duplicate it. Here we'll
Segment 447: 925:00 - 927:30 add the token
Segment 448: 927:30 - 930:00 equal to local storage dot get item and the key name is delivery token. So we are finding delivery partner and delivery token in the local storage. Now we'll add the if statement. If not of saved it means not having the delivery partner data in the local storage or not of token in this case it will navigate the users on login page. So just add the navigate provide the path that is / delivery/ login. Now after that simply add return. Next we will use the set partner. Suppose we have the delivery partner data and token then it will skip this if statement. And here we will use set partner. In this set partner simply provide this saved data. Right? So just add JSON dot parse and provide this saved. That's it. So now we have the partner data in this estate. After that in this layout we have the navigation bar where we have added the logout functionality. So let's make it functional. Here we have handle logout right. So in this handle logout let's provide the local storage again. So just copy this and this one. So we have added local storage dot remove item and then item name is delivery token. Let's add it here also. So we are removing the delivery token and delivery partner from the local storage. After that we will reset the partner state. So just use set partner and provide null. And then we will be redirected to the login page using this delivery/lo. Right? And when we have the partner data available, it will display this layout. Now after that let me come back to the web page. So you can see we are not logged in as delivery partner that's why
Segment 449: 930:00 - 932:30 it is not allowing us to access the delivery dashboard. It is opening the login page. You can see the message delivery partner login. Right. So now we will make this login page functional. So let's come back to the VS code. Open the pages delivery and delivery login.tsx file. Now in this one you can see here we have this handle submit function using that we will submit the login form. So in this one just use set loading and let's make it true. After that we will add try catch a statement and in this try block we'll make the API call. And for making the API call we need the API instance. So just add const data equal to await and API instance from the config right and after that we'll add dot post method and in this post method we'll add the path that is /y/lo. Now we have to provide the data also for the login where we have to add the email id and password. So simply provide the email and password that will be sent on this network request. Then we will get the data as response and in this data we will get the token and uh we will get the partner data also. So just set this token and partner data in the local storage. So just add the local storage dot set item using that we will store the data right. So just add the key name that is delivery token and the value will be our data dot token. Let's duplicate this line. Here we'll add local storage dot set item and provide the key name. delivery partner and after that we'll add data dot partner. Now we have to convert it in a string. So let's remove this and first provide JSON dot a stringify and in this one provide the data doer.
Segment 450: 932:30 - 935:00 Now after that we'll display the toast notification after successful login. So just at toast dot success and provide the message login successful. Next we'll navigate the users on dashboard. So just add the navigate function. So let's use the use navigate here. First we'll add const navigate equal to use navigate imported from react router DOM and copy this navigate here and simply provide the path that is / delivery. So it will open the delivery partner dashboard. Now come to the catch block. Here we'll add error colon any then we'll add the toast notification that will be toast dot error and the error message. Now we'll add the finally block and in this finally use the setter function set loading and make it false. That's it. So using this we can submit the form and get logged in in the delivery partner dashboard. Now we have to check the local storage again. Suppose we already have the delivery token then we will not open the login page. It will simply open the dashboard. So here we'll add the use effect. In this use effect add the add function and then we'll add the dependency array which is the empty array. Now in this function we'll add the if statement if the local storage dot get item and add the key name delivery token if it is available. In this case what will happen? It will navigate the users on this delivery dashboard. So just add this path. That's it. Now let me just come back here. You can see here we have the login page. So let me provide the email id and password. So I'll provide partner one at greatest attack.dev and the password
Segment 451: 935:00 - 937:30 and click on login. Now you can see we are logged in. Here we have the notification login successful. Correct. So after login we can see the dashboard and here you can see in the nav bar we have the name of the delivery partner. Now here we have some dummy data that is coming from the asset. So we will remove this dummy data. We will get the dashboard data from API. So let's come back to the VS code. We will come back to the previous file that is layout. Here we have the import statement that is importing the dummy data. Remove this unused import statement. Now open the sidebar and open delivery dashboard.tsx. Now in this delivery dashboard.tsx first we have to add the functionality to fetch the order data. So here you can see we have fetch orders where we have added the dummy data right in the fetch orders. So let's update it. We'll get the order data from API. But in this API we have to insert the token that will be the delivery token so that we can authenticate our network request. So here before this function here we have the delivery dashboard function. Here before this function just add const and provide the API URL equal to import dot meta dot env dot wheat base URL or let's provide the local host host link that is localhost 5,000/ API if it is available in the environment variable with the name vb URL it will be used else it will use the localhost port 5000/ API this is the API URL now after that here just add con get all headers we will create a function
Segment 452: 937:30 - 940:00 and this function will return one object. Now in this object will add the headers property and the headers property will be one object that includes the authorization property and provide back text beer and here we will insert the token. So just add dollar sign curly braces and use the local storage dot get item. In this get item just add the key name that is delivery token like this. So when we will execute this function not call this function it will return this object with the headers property including authorization and token. Now it will be used for making the network request for the delivery partner data. Now let's come here and come here in the fetch orders function. We will remove this set orders. So first we have the set loading true and after that we'll make the API call. So just add the try catch statement. In this try block we'll make the API call. So let's add con data equal to await and here we will use the axios. Let's import the axios. Then we'll add dot getit. Here we are not using the API that we have created using exios. We are simply using the exio. And in this exio we have to provide the complete URL. So just add aios.get get and provide the URL using back tick dollar sign curly braces and insert this API URL then provide the remaining path here. So let's add slash delivery slash my deliveries. Then we'll add question mark and provide the status equal to dollar sign curly braces and provide the tab. After that we have to provide the token here. So simply call this function get O headers that will authenticate our network
Segment 453: 940:00 - 942:30 request. Now let's use this set orders and provide the data dot orders that we are getting from the response. Now come here in the catch block provide the error colon any and display the toast notification. So just import the toast and provide dot error and provide the error message that is failed to load deliveries. Now just add the finally block and in this finally block we'll use the set loading and we will make it false. Save the changes. Now after that if I come back here here you can see we have the original data or correct data that is coming from the database. Here we have only one delivery that is active. So this delivery is assigned to this delivery partner where we have the user's name, address and total number of item and payment mode is cash. Correct. Now after that let me just come back here in the VS code. Here you can see this function will get executed when we change the tab. So just come back here click on this completed. So you can see in this completed we don't have any order. So we have not completed any delivery yet. And if I go to active here we have one active delivery. Right now after that let's come back here in the VS code after fetching the orders data. Here we have to share the live location of the delivery partner when the order is assigned, packaged or out for delivery. So let's add the comment here that is send location every 10 seconds for active deliveries. And let's add the use effect here. In this use effect, add the arrow function. And let's add the dependency array. In this dependency array, we'll add the orders and tracking. So when the orders or tracking
Segment 454: 940:00 - 942:30 changes, it will execute this function again. Right? And uh before this one, let's move the existing use effect. So just move it
Segment 455: 942:30 - 945:00 here before this comment. Now in this one we have to share the location for active deliveries. So first we'll find the active deliveries list. So let's add const active orders equal to orders dot filter. In this filter add the function with the individual order in the parameter. And after that we'll add array where we'll add the list of a status that is assigned packaged out for delivery dot includes this individual order dot a status. So if the status includes either assigned, packed or out for delivery then it will be considered as active orders. Right? Now after that let's add the if statement. If active orders dotlength is equal to zero or not of tracking. So here you can see we have added the if active orders.length is zero and or not of tracking. In this case we will remove the location from the reference. So first we have to create the reference of our geol location. For that we will use the use ref. So just a scroll up and uh here after this a state we'll add const watch id reference equal to use user ref import it from react and after that just add the null initialize it using null then we'll add the type here so in this type we'll add number or null. Now just copy this watch id reference and come here in this if statement. In
Segment 456: 945:00 - 947:30 this if statement let's add if watch id reference dot current not equal to null. In this case, just add navigator dot geoloccation dot clear watch and after that just add watch id reference dot current. Then we'll add watch id reference dot current equal to null. After that simply add return. Next we'll add the function here that is send location. So let's add con send location and create the arrow function. Now here we'll get the position. So let's add POSOS colon and provide the type that is geoloccation position. And uh after that here just add const curly braces latitude colon l comma longitude ln equal to this position dot chords. After that just add the active orders dot for each and in this for each add the arrow function and then we'll add the individual order in this parameter and then we'll use axio dotput method in this put method provide the back text so that we can insert the variables here. So let's add API URL using the template literal then / delivery my deliveries slash and then insert the
Segment 457: 947:30 - 950:00 order id. So just add order dot id then slash location. So this is the end point for sharing the location. After that we'll add the data here. So let's add comma object where we'll add the latitude and longitude. Then we have to provide the headers here. So just add get o headers. Now we'll add dot catch. In this catch simply add the add function like this. Now after that here we'll add the watch id reference dot current equal to navigator dot geoloccation dot watch position. In this one, let's provide send location function, comma, and add one add function. Then add comma and one object. Now in this object provide the enable high accuracy. Let's make it true. Then provide maximum age provide 10k. After that here we'll add the comment that is also send on interval for some consistent updates. So here just add con interval equal to set interval. In this set interval add the add function and then we will add the 10k milliseconds. Now here just add the navigator dot geolocation dot get current position. Then we will provide the send location function comma one add a function like this and then comma object with enable high accuracy
Segment 458: 950:00 - 952:30 true right and uh after that here let's add return now in this return provide the add function and uh just add if statement If watch id reference dot current not equal to null in this case let's add the navigator dot geoloccation dot clear watch and simply provide the watch id reference dotcurren then we will provide watch id reference dot current equal to null. Then we'll add clear interval and provide the interval here. That's it. So here we have created the functionality that will send the live location at every 10 seconds. After that here you can see we have the handle update status function. So let's complete this function also remove this console log and in this one just add the try catch statement and in the try block we'll make the API call. So let's add await axios.put method and provide the back text to insert the API endpoint. So we have added the API URL deliveries/ my deliveries slash order id and a status because we are changing the status. Then we'll add the comma here and provide the data that needs to be updated. So just add the a status. Then we'll add the authorization headers. So just add get o headers function. That's it. After that we can display the toast notification. So let's add the toast dot success and provide the message that is a status updated to and the new status. So just add the back ticks and insert this status. After that we will fetch the orders data again. So just copy this fetch orders function here. After that come here in the catch block and provide
Segment 459: 952:30 - 955:00 the error type any and provide the toast dot error. Save the changes. Now after that here you can see we have handle complete using that we can mark the delivery as completed. Right? So here you can see first we have the if statement not of OTP model not of OTP then return after that set submitting true then we have set timeout. So remove this set timeout and add the try catch. Now in the try block we'll make the API call. So copy this one paste it here. Here let's add await exos.put put then API URL delivery/my deliveries then here we'll add the dollar sign curly braces OTP model then / complete then we'll add the OTP here and then we'll add this get o headers function after that we can display the notification So just add toast dots success delivery completed. Then we will set the OTP model null. Then we will set the OTP empty string. And after that we will call the fetch orders function again. Now come to the catch block. We'll add colon any uh here let's add toast dot error. Provide this error message. Now we'll add the finally block. In this finally block we will use set submitting and make it false. So you can see here we have added set submitting true. Now making it false. Now after that if I scroll you can see here we have handle cancel. So delivery partner can cancel the order also. So here we'll add if statement not of cancel model then return. Then set submitting true and remove this set timeout. So here just add the try catch again or let me copy the previous try catch block here. Copy this try catch and finally paste it here. In this one we'll add await exos.put and the path will be
Segment 460: 952:30 - 955:00 API URL delivery my deliveries dollar sign curly braces and provide the cancel
Segment 461: 955:00 - 957:30 model then / cancel. Then we'll add the reason here. So in this object we provide the reason it will be cancel reason. Then this function get o headers. After that let's display the toast notification using toast dots success and the message is delivery canceled. Then we'll set the cancel model null. So just add set cancel model null. Then we'll add set cancel reason empty string and then fetch orders. After that we have the toast notification for the catch block. And uh in this one simply add failed like this. Then we have finally here we have added set submitting false. Now we'll save the changes and come back here. So you can see if I click on this share location. So it will start sharing the location to the user so that user can see the live location of their delivery. Right now let's mark it as completed. Before that let me open the database. Here we have the orders. Right? Let me refresh it. So here you can see we have only one order and in this one you can see we have the a status assigned and uh after that here you can see we have the delivery OTP that is 566 9 36. Now after that here we have the live location also where we have the latitude and longitude. So it is shared to user also. Now let me just come here. So now let me mark this delivery as packed. Right? Now the status is assigned here. Right? Let me click here mark packed. So you can see a status updated to packed. Now it is packed. After that let's click here out for delivery. So now you can see the status is out for delivery. Correct. And after that we are getting this option mark delivered. So let's click here. So you can see it is asking
Segment 462: 957:30 - 960:00 the OTP right? So I'll just copy the OTP from here or you can see this OTP in the user area also. Let me just open this users tracking in the my orders. We have the order tracking page. So here you can see the OTP right that is 56939. And here we have the live location also for the current delivery partner location right and you can see the progress placed confirmed assigned packed out for delivery. Now after that let's provide this OTP that is 56939 56 939 and confirm delivery. So you can see delivery completed and now we don't have any active delivery. It will come in this completed. Here we have the completed delivery. And if I come to the user area here you can see the location has been removed. And here we have the progress that includes delivered. So now the order has been delivered. So we have completed the functionality for the delivery partner also. So now we have completed all the features like we have added the product here from the database. Then we have the product page. Then deals. Then we have the product detail page. After that here we have the cart. Let me add the product in cart. Then we have the checkout page. Here we have the address. We can add a new address also. And uh we have the my order page. Then we have the order tracking page. Then we have added the delivery partner dashboard. And then we have added the admin dashboard. Let's add / admin. Let's come here. So this is the admin panel and here you can see we have the dashboard then add product list orders. Here also you can see the status is delivered. Then we have the delivery partners. Correct. Now we have completed all the feature except payment. If I go to checkout page, you can see here we have the payments where we have added
Segment 463: 957:30 - 960:00 the cash on delivery and credit or debit card payment. So we have to add the
Segment 464: 960:00 - 962:30 online payment gateway in this project. In this project we are going to use a stripe for online payment integration. So just open the stripe.com and create an account here. If the stripe is not available in your country, just choose any other country and create the test account. After that you will come to the stripe dashboard. And here you will get the API keys. You will get the API key in this left corner left bottom you will find developers and here click on this API keys to get the API key or it is also available on this dashboard page right here. So I'll click here to copy the arrive secret key. Make sure to copy the stripe secret key and add it in the environment variable. So just come back to the VS code and uh let me close all the files. So right click and close saved. Now open the server in this server will come to env file. In this env secret key and I'll paste this key here. After that, let me just come back here and uh let's click on this developers and click on API reference. Let's click here. So here we have the documentation to integrate the stripe payment gateway. You can see the URL also. It is docs.aststripe.com/api. Now let's scroll down. And in the left side you will find the checkout. Here you can see we have the checkout and checkout sessions. Let's click here. Then click on create a checkout session. So when you click on the create a checkout session in the left side you will find this code from the drop-down just choose the NodeJS. So you will find the exact code right. So let's add this code in the project. So I'll just copy this one and come back to the VS code. Let's open our controller. And in this controller we have the order controller.ts file. In this order controller, let's come to the first controller that is create order. In this create order, you can see we
Segment 465: 960:00 - 962:30 have added the if statement. If payment
Segment 466: 962:30 - 965:00 method is equal to card, right? So, we have to come at this point. If the payment method is equal to card, here we have to create the payment link. Right? So, just remove this. Paste the code that you have copied. So I have added the code here. Now in this one you can see we are importing the stripe right. So first we have to install the stripe package. So just open the terminal. You can see we are in the server terminal right where the backend server is running. So let's add Ctrl C and add npm install a stripe. Press enter. So it will install the stripe package and after completing the installation of this stripe package we will start the project again using npm run server. So now the project is running. Now hide this terminal and here in this page first we will import the stripe. So let's add import stripe from a stripe package. Now after that let's come here in the if statement. If the payment mode is equal to card here we have to create the instance of the stripe. So just remove this statement here. Simply add const stripe equal to new stripe that we have imported. And here we'll provide the process dot env dot and provide the environment variable name that is a stripe secret key. then we'll add as a string. Now after that we have to create the session here. So let's add the command that is create session. So for this session we have this await a
Segment 467: 965:00 - 967:30 stripe.outeession.create where we have the success URL. So when the payment will be successful then we will be redirected to this URL. So let me update this URL. Here we will add our front end URL and we will redirect users on the orders page. Right? So we will get the front end URL from the request. So just remove this line add back tick and provide dollar sign curly braces. Then we will use the request dot headers and in the headers we'll get the origin. Right? And after that just add the slash orders. And then we'll add question mark. Then we'll add clear cutart equal to true. Now after that just duplicate this line and here we will provide the cancel URL also. If the payment is cancelled then we will redirect the users back on the checkout page. So just add origin/ch checkout. Now we will create the line items where we will add the details of the purchased product. So here we have to add the price data. Right? So here we have the object where you can see the price. So let's update it. We will provide the price underscore data. It will be one object like this. And in this one, let's add the currency. So I'll provide the currency USD. Then we'll provide the product data. And in the product data, let's provide object where we'll add the product's name. and the name is payment groceries. After that here we have to add comma unit amount and in the unit amount let's add math dot round and provide the total multiplied by 100. Then we will add the quantity. So let's set the quantity one.
Segment 468: 965:00 - 967:30 And after that you can see we have the
Segment 469: 967:30 - 970:00 mode it is payment. After this mode we'll add the metadata also. So let's add the metadata. And in this metadata we'll add the order id property. And uh in this order id property let's provide the order dot id. We will use this metadata that contains the order ID to update the order or payment status. Right now after that you can see we are getting this session right. So in this session that we are getting in the response we will get the payment URL right. So we will return this URL in the response. So just after this here simply add the return provide the response dot JSON and in this JSON add the object with URL property and this URL will be our session dot URL. So when we will choose the card payment and proceed for checkout it will open the payment link and using that link we can make the payment but after making the payment we have to verify the payment was successful or failed for that we have to use the bay hooks right so let's just come here in the stripe documentation page and here we'll update the URL we will add docs dot astripe.com/be just open this URL docs.stripe.com/bebooks. Scroll down and here you can see we have the steps to create the bebooks endpoint. So first we need the behook secret right. So to get the paybook secret let's come here in the dashboard that is the arrive dashboard and in this one click on this developers then click on web hooks and click on this add destination in this add destination let's click on this your account then here we have to choose The events here in this drop-down you will
Segment 470: 967:30 - 970:00 find the event name that will be payment
Segment 471: 970:00 - 972:30 intent. Let's open it. So in this payment intent you will find payment intent cancelled. Then we have payment intent failed. And after that we have payment intent succeed. Just subscribe for these three events. Payment intent canceled, failed and succeeded. Let's click on continue. Then again click on continue. And here we have to provide the endpoint URL. So let's just copy the backend URL that we have deployed on Versel. So this is the live URL of our back end. Just copy this one and add it here and at the end we'll add / API/ astripe right and here we can add the destination name. So let me add the name like grocery delivery recording. Then click on create destination. So we have created the endpoint. Here we have added the stripe behook endpoint. And after that we will get the signing secret. So this is the behook signing secret. So just copy this one. Click on reveal and copy it. After copy we have to add it in the environment variable. So just open the env file and here we will add a new environment variable that is a stripe book secret. So we have added the arrive hbook secret here and after that let's see the step here in this documentation we have to create the function like this. For that we'll create a separate file. So let me open the VS code open the controllers and in this controllers folder create a new file and write the file name beooks.ts. ts.
Segment 472: 972:30 - 975:00 Now here let's add export constripe books equal to asynchronous arrow function. Now in this function parameter we'll get the request comma response and we have to add the type also. So let's add the type using colon request from the express colon response from express. It has been imported. Now after that within this function let's copy this one. Here you can see we have this function. In this one we have this let event and then if endpoint secret. So just copy everything from here. Copy it and uh paste it here. Now in this one you can see here we have endpoint secret. So we have to declare this function as described here. You can see con endpoint secret and we have to provide our secret key from the environment variable. So here let's add con endpoint secret equal to the process dot env dot and the environment variable name that is a stripebooks secret. Now before that we have to add the stripe instance also. So just import the stripe. We will add import a stripe from a stripe and uh after that let's add const a stripe equal to new a stripe and here we will add the process dot env dot Then a stripe behook secret. We have already added this endpoint that uh includes the a stripe book secret.
Segment 473: 975:00 - 977:30 But in this one we'll add a stripe secret key. In this a stripe instance we'll add process envrip secret key provide as a string. That's it. So we have added the stripe then endpoint secret and created this function. Now here we are checking if we have the endpoint secret in this case we'll create the signature right and uh after that we'll add try block in this try block we have the event equal to a stripe books construct event and provided the request dot body then signatures So after this signature just add as a string. After that we have the endpoint secret. Then we have the catch block. In this catch block we have this console log and return response dot sender status 400. Now after that here we have handle the events. So we will handle different events that we have subscribed. So first we have case payment intent succeeded. Right? So we will create this event or we will handle this event payment intent succeeded. So here let's add con payment intent equal to event dot data dot object. Here we'll add the type also as a stripe dot payment intent. After that let me remove these comments. Let me remove this next case also or let it be here. Simply add con payment intent id equal to this payment intent dot id. Now after that we have to get the metadata that we have added while generating the URL right. So let's add the command that is getting session metadata. So here just add con session equal to await and provide the stripe
Segment 474: 977:30 - 980:00 dot checkout dot sessions dot list. Now here we'll add the payment intent and provide the payment intent ID. So using this payment intent id we'll get the exact session and uh after that just add cones order id we'll find the order id so let's add con order id equal to the session dot data index zero then dot metadata as any right. So we will find the order id that we have added in the metadata and after getting the order id we will mark the payment completed because here we will get the event payment intent succeeded right so let's add the comment mark payment as paid for that just add const paid order equal to a weight and use the Prisma import it from the config then dot order model or order table dot update. Now in this update simply use where id and the id is order id then comma data in this data just add the is paid property and make it true. That's it. After that we have to reduce the stock after purchase right. So let me just copy the code from the previous order controller. So in this one you can see here we have the decrease a stock. So I'll just copy this code and come back here. Here simply add this code that is decrease a stock. Now in this one we don't have the order item in this book's page we don't have the order items. So let's find it. We will add const order items equal to
Segment 475: 980:00 - 982:30 array dot is array and provide the paid order dot items question mark. If it is available then we will add the paid order dot items or provide the empty array if it is not available as any array. After that we'll add four const item of order items await prisma dot product dot update where id is item dotproduct and data a stock decrement item dotquantity right now after that we have to trigger the ingest event for the paid orders right so let's add if statement ment paid order. Here we'll add awaiting inest import the ingest from the ingest folder/index.js file then dot send and then we'll add the object here we'll add the name of the event that is order/plaged then we'll add comma data. Now in this data let's add the object and provide the order id. As you can see in the previous controller we have added this ingest dot send and order placed and this order id. After that we'll add the another event also that will check for the available stock and uh it will send the email if the stock is less. Right? So just copy this one paste it here that is send a stock update event for each product in the order for con item of order items awaiting dot send the name is inventory/ stock updated then data will be product id item dot product right and after that we have this break
Segment 476: 982:30 - 985:00 so for the online payment also we will update the stock and we'll send the events to the ingest. Now we'll add the another case that is payment intent cancelled. Let's add payment intent cancelled. The first event was payment intent succeeded. Now the payment intent cancelled and the payment intent payment failed will be same right. So here let's add the case two or another case like this and provide the case name that is payment intent dot payment field. So for both cases we'll add the same statement. So just add the object here. Let's clear this code. So in this one, let's add const here. We don't have to add the colon. Remove this colon from here. And uh simply add con payment intent failure equal to event dot data dot object as a stripe dot payment intent. Now after that let's add con payment intent failure id equal to payment intent failure dot id. Now after that we will get the session metadata that we have added in the session. So let's add getting sess metadata. So just add con session failure equal to await and provide the stripe dot checkout dot sessions dot list. In this one add the object where we'll add the payment intent. It will be payment intent failure ID. Right? Now after that from here we'll get the order id. So just add con failure order id
Segment 477: 985:00 - 987:30 equal to this parenthesis and provide the session failure dot data index zero dot metadata as any then we'll add dot order id. So here we'll get the failure order id. Now after that we have to delete this order from the database. So let's add await prisma dot order table dot delete. Now in this one just add where ID it is failure order id. That's it. Then we have to add this brake. Let's add this brake here. In the previous one, we have added the break. Here it is also working. Let it be. And uh after that here we have the default case. In this default case, we have added console log. And after that, we have this return response to acknowledge receipt of the event. So we'll not change anything here. And uh here let's add one more curly braces. I think this one is missing. So at the end we'll add one curly braces. Now it is correct. Save the changes. So we have created this behook controller function. Now we have to create the behook endpoint. For that let's see this documentation. You can see in this endpoint we have to use the express dot raw then type application JSON correct. So just copy this one come here in the main file that is server.ts file in this server.ts file. Let's scroll up and uh here just after this app equal to express we'll use the app dot post method in this post method we'll add the path that is / API/stripe then comma and provide this express dot raw type application JSON then we will add
Segment 478: 987:30 - 990:00 the comma here and provide the astripe bevoke. So a stripe beook has been imported from the controller behook.js file. Let's save the changes and we have added the astripe pebook endpoint also. Now let's deploy these changes. So first we'll commit the changes on GitHub. So let's click on this source control icon and uh after that we'll add the message project completed sync changes. So it will update our code on GitHub and after that it will automatically redeploy our code. Let me come here. Go to versal dashboard. Go to deployments. So you can see a new deployment has been created. It is redeploying our back end. But before that we have to update the environment variable also. So just come here in this versal dashboard. Let's go to overview. Then let's find the environment variables. Here we have the environment variables. Now in this one we need to add the new environment variable that we have just added. So let's come here in the env file of the backend server. Copy this a stripe. Let's copy and come back here. Here we will add a new one. So click on this add environment variable button. Paste it here. We'll add the key name value. Then key name and value. Click on save. After that click on redeploy. So it will redeploy the backend server. View deployments. So you can see a status. It is building. So it is redeploying the backend server after updating env or environment variable. Once it is completed we can verify our front end. Now you can see the status is still
Segment 479: 990:00 - 992:30 building but here we are getting server is live. Let's go to overview and again go to deployments. Now you can see it is ready. Let me refresh our back end URL. It is working fine. Now let me just come here on our front end. Now I'll add the product here. So let's add the product. We have two products here. Proceed to checkout. We will choose this address. Continue to payment. Now we will use online payment that is credit or debit card. Click on review order. after that place order. Now when we selected the online payment then it is opening this payment URL. Right? So here we'll add the contact information. Let's add the test email ID. We'll add the card and here we'll add the test card number that is used for Stripe. Here we'll add the date and year. We will add any name here and click on pay. So after payment you can see it is opening the orders page. So now in this orders page you can see we have a new order and here you can see the status is placed. It means the order is placed right now. Correct? After that, we'll open the neon database. Let's refresh it. Here you can see we have a new order. Correct? In this one, you can see the payment method is card. Correct. After that, let's move here and we'll see the is paid. So, you can see is paid property is true. Correct. So we have successfully integrated the online payment gateway. After that let's go to the dashboard. In this dashboard you can see we have a new order and in this new order you can see here we have the order details. So this is the new order where you can see the status is placed. Now we can
Segment 480: 990:00 - 992:30 assign the delivery partner here. And
Segment 481: 992:30 - 995:00 after assigning the delivery partner one OTP will be generated. So everything is working fine. And uh now let me deploy the front end also so that anyone can access this website online. For that we'll come here in the versel. Let's open the versel dashboard. Click on add new project. Here we'll choose the repository grocery delivery. Click on import. And here we will add the project name grocery delivery. Then we'll add the root directory. So click on edit and choose client. Click on continue. And after that we'll add the environment variable here. So just click here and add the environment variable for client. So just come back to the VS code and uh let's open the client directory. Then env file. And here we have two environment variables. So just copy this and paste it here that is wheat currency symbol and whe base URL. But in this base URL you can see we have the local host 5000/ API. So we will update it. Let me just copy the backend URL that is deployed and paste it here. just add https grocery delivery server and this complete URL and provide / ai. So this is the backend URL then / ai and click on deploy. If I scroll down here you can see the deployment status also it is installing the dependencies. Now in the deployment we are getting some error. So let me fix this error and we will redeploy the project. So you can see here we have the exact file name where we are getting the iso. Actually there's no error but here we have used some variables that is not used in the project. We have just declared the variable but not used it. So we will remove that from these pages. So first I start with the address card.tsx which is here in the components. So just come back to the VS code. Open the
Segment 482: 992:30 - 995:00 components.
Segment 483: 995:00 - 997:30 Here we have the client src components and uh address card.tsx. Let's see the file name again. It is address card.tsx. Here it says react is declared but not but its value is never used. So let's see. You can see here we have the import react. So just remove this import react. Save the changes. Close this file. Now see the next file that is checkout.tsx tsx in the pages. So just come to pages checkout dot tsx and uh in this one here we have use effect. Remove this use effect that is not in use. And here we have the import dummy address data. Remove it. Now save the changes. Let's come back again. Here we have the check out again. So we have fixed both import. After that we have the product page.tsx. So just open product page.tsx. In this product page.tsx we have dummy products imported and not in use. So just remove it. Save the changes. Let's come back. And after that you can see here we have the pages admin admin product form. So let's come back. We have the pages admin admin product form. And uh in this one here we have dummy products. Remove it. Save the changes. Now come back. Here we have admin products.ts. tsx. Let's come back. Open admin products.tsx. Here also we have dummy products imported. Remove it. Save the changes. Now you can see we have the admin products.tsx. We have fixed this page. Then we have the pages delivery and delivery dashboard. Let's come back.
Segment 484: 997:30 - 1000:00 Open pages delivery and delivery dashboard. Now in this one let's see what we have here we have dummy dashboard data from asset. Remove this one. Save the changes. And after that here we have the last error that is command npm run build exit with two. So we don't have to do anything about it. Let's update the code on GitHub also. So I'll click on this source control icon and here we'll add the message fixed unused imports sync changes. So when we will commit the changes on GitHub it will again try to redeploy the project on Versel. So let me just come here and click on go to project then go to deployments. So you can see in the first time the error occurred and now we have the next deployment in Q. Let me refresh it. You can see it is building. So it is redeploying our project. So just wait for that. Or we can click here to see the exact process. Here we have the build logs. Now you can see the message deployment completed and after that our project is live. Here we have the status building. Just wait for few seconds. Now you can see the status is ready. Right after that I'll click on this link. This is the live link of our project. So now you can see our project is successfully deployed. Correct. Now let me test everything here. If I click on sign in or before that let me try to access the admin panel. It is opening the homepage. If I try to open the delivery dashboard, it is opening the
Segment 485: 997:30 - 1000:00 delivery partner login page. It works. Now let's click on sign in and provide the email ID.
Segment 486: 1000:00 - 1002:30 After adding the email and password, you can see we are logged in. And here if I go to my orders we are getting the order data right now after that here we have the addresses also then we have the admin panel also because this email id is used as admin right here we have the products let me delete this test product from here it will get deleted actually it will not delete it will change the stock to zero because if product is purchased by some user they will see the error in their orders page. So we will mark the stock zero. Now after that we have completed our project. We have successfully created a full stack grocery delivery project where we have added the user functionality admin and delivery partner and we have successfully deployed it online. I hope this video will be helpful for you. If you have any question you can ask me in the comment section. Please like and share this video and also subscribe my channel greatest tech to watch more videos like this one. Thank you so much for watching this video.