# bankal-2708/food-delivery-app-freshbite- architecture

> Architecture diagram of the GitHub repository bankal-2708/food-delivery-app-freshbite-, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bankal-2708/food-delivery-app-freshbite-
- Repository: https://github.com/bankal-2708/food-delivery-app-freshbite-

## Overview

FreshBite is a food-delivery storefront with a separate admin dashboard. Customers browse dishes, manage a login-gated cart, enter delivery details, and continue to payment; administrators manage dishes and order actions. The frontend excerpts show cart persistence and API calls, while the README documents COD, online payment with dynamic QR codes, and a MongoDB-backed MERN service. The backend directory is absent from the supplied tree, so its internal stages are represented only as an external API; page-level payment wiring is not inferred from unsampled code.

Main entry points: [`Frontend/src/App.jsx`](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/App.jsx) (Storefront router), [`Frontend/src/Context/CartContextProvider.jsx`](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Context/CartContextProvider.jsx) (Cart and auth state), [`Admin/src/App.jsx`](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Admin/src/App.jsx) (Admin state and actions), [`Frontend/src/Components/Dishes/Dishes.jsx`](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Dishes/Dishes.jsx) (Dish browsing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Customer storefront"]
  node_frontend_app["Storefront router<br/>[App.jsx]"]
  node_navbar["Navigation and search<br/>[Navbar.jsx]"]
  node_home["Home and pages<br/>[Home.jsx]"]
  node_menu["Dish browsing<br/>[Dishes.jsx]"]
  node_footer["Company information<br/>[Footer.jsx]"]
end

subgraph group_ordering["Ordering and account"]
  node_cart_context["Cart and auth state"]
  node_cart_page["Cart<br/>[Cart.jsx]"]
  node_checkout["Checkout details<br/>[Checkout.jsx]"]
  node_payment["Payment and QR<br/>[Payment.jsx]"]
  node_auth["Login and OTP<br/>[AuthForm.jsx]"]
end

subgraph group_admin["Admin dashboard"]
  node_admin_app["Admin state and actions<br/>[App.jsx]"]
  node_admin_body["Dish and order views<br/>[AdminBody.jsx]"]
  node_admin_nav["Admin navigation<br/>[AdminNavbar.jsx]"]
end

subgraph group_service["Food service"]
  node_api["Food backend API"]
  node_database[("MongoDB data store")]
end

node_customer(("Customer"))
node_admin_actor(("Administrator"))

node_customer -->|"uses"| node_frontend_app
node_frontend_app -->|"renders"| node_navbar
node_frontend_app -->|"routes"| node_home
node_frontend_app -->|"routes"| node_menu
node_frontend_app -->|"routes"| node_cart_page
node_frontend_app -->|"routes"| node_checkout
node_frontend_app -->|"routes"| node_payment
node_frontend_app -->|"routes"| node_auth
node_frontend_app -->|"renders"| node_footer
node_frontend_app -->|"provides state"| node_cart_context
node_navbar -->|"reads and updates"| node_cart_context
node_menu -->|"fetches dishes"| node_api
node_menu -->|"updates cart"| node_cart_context
node_cart_page -->|"reads cart"| node_cart_context
node_checkout -->|"navigates with total"| node_payment
node_auth -->|"calls auth actions"| node_cart_context
node_cart_context -->|"auth and cart requests"| node_api
node_cart_context -->|"syncs cart via API"| node_database
node_payment -.->|"submits payment or order"| node_api
node_admin_actor -->|"manages"| node_admin_app
node_admin_app -->|"renders and supplies actions"| node_admin_body
node_admin_app -->|"renders"| node_admin_nav
node_admin_app -->|"manages dishes and orders"| node_api
node_api -->|"reads and writes"| node_database

click node_frontend_app "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/App.jsx"
click node_navbar "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/NavBar/Navbar.jsx"
click node_home "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Pages/Home.jsx"
click node_menu "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Dishes/Dishes.jsx"
click node_cart_context "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Context/CartContextProvider.jsx"
click node_cart_page "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Pages/Cart.jsx"
click node_checkout "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Pages/Checkout.jsx"
click node_payment "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Pages/Payment.jsx"
click node_auth "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/LoginForm/AuthForm.jsx"
click node_admin_app "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Admin/src/App.jsx"
click node_admin_body "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Admin/src/Components/AdminBody.jsx"
click node_admin_nav "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Admin/src/Components/AdminNavbar.jsx"
click node_footer "https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Footer/Footer.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_frontend_app,node_navbar,node_home,node_menu,node_footer toneBlue
class node_cart_context,node_cart_page,node_checkout,node_payment,node_auth toneAmber
class node_admin_app,node_admin_body,node_admin_nav toneMint
class node_api,node_database toneRose
class node_customer,node_admin_actor toneIndigo
```

## Components

### Customer storefront

- [Storefront router](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/App.jsx): `Frontend/src/App.jsx`
- [Navigation and search](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/NavBar/Navbar.jsx): `Frontend/src/Components/NavBar/Navbar.jsx`
- [Home and pages](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Pages/Home.jsx): `Frontend/src/Components/Pages/Home.jsx`
- [Dish browsing](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Dishes/Dishes.jsx): `Frontend/src/Components/Dishes/Dishes.jsx`
- [Company information](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Footer/Footer.jsx): `Frontend/src/Components/Footer/Footer.jsx`

### Ordering and account

- [Cart and auth state](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Context/CartContextProvider.jsx): `Frontend/src/Context/CartContextProvider.jsx`
- [Cart](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Pages/Cart.jsx): `Frontend/src/Components/Pages/Cart.jsx`
- [Checkout details](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Pages/Checkout.jsx): `Frontend/src/Components/Pages/Checkout.jsx`
- [Payment and QR](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/Pages/Payment.jsx): `Frontend/src/Components/Pages/Payment.jsx`
- [Login and OTP](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Frontend/src/Components/LoginForm/AuthForm.jsx): `Frontend/src/Components/LoginForm/AuthForm.jsx`

### Admin dashboard

- [Admin state and actions](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Admin/src/App.jsx): `Admin/src/App.jsx`
- [Dish and order views](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Admin/src/Components/AdminBody.jsx): `Admin/src/Components/AdminBody.jsx`
- [Admin navigation](https://github.com/bankal-2708/food-delivery-app-freshbite-/blob/main/Admin/src/Components/AdminNavbar.jsx): `Admin/src/Components/AdminNavbar.jsx`

### Food service

- **Food backend API**
- **MongoDB data store**

### Other components

- **Customer**
- **Administrator**

## Connections

- Customer → Storefront router: uses
- Storefront router → Navigation and search: renders
- Storefront router → Home and pages: routes
- Storefront router → Dish browsing: routes
- Storefront router → Cart: routes
- Storefront router → Checkout details: routes
- Storefront router → Payment and QR: routes
- Storefront router → Login and OTP: routes
- Storefront router → Company information: renders
- Storefront router → Cart and auth state: provides state
- Navigation and search → Cart and auth state: reads and updates
- Dish browsing → Food backend API: fetches dishes
- Dish browsing → Cart and auth state: updates cart
- Cart → Cart and auth state: reads cart
- Checkout details → Payment and QR: navigates with total
- Login and OTP → Cart and auth state: calls auth actions
- Cart and auth state → Food backend API: auth and cart requests
- Cart and auth state → MongoDB data store: syncs cart via API
- Payment and QR → Food backend API: submits payment or order
- Administrator → Admin state and actions: manages
- Admin state and actions → Dish and order views: renders and supplies actions
- Admin state and actions → Admin navigation: renders
- Admin state and actions → Food backend API: manages dishes and orders
- Food backend API → MongoDB data store: reads and writes