# n-sai8374-bit/my-food-app architecture

> Architecture diagram of the GitHub repository n-sai8374-bit/my-food-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/n-sai8374-bit/my-food-app
- Repository: https://github.com/n-sai8374-bit/my-food-app

## Overview

FlavorFleet is a Next.js food-ordering app. A customer browses and filters dishes, customizes items, builds a cart, applies a coupon, submits delivery and payment details, then views simulated order progress; favorites and order history are additional capabilities. The UI’s shared React context holds the main state, while API routes provide catalog, category, coupon, and order endpoints. The client’s cart and favorites are persisted in localStorage. Some connections come from the README or the source index; unsampled implementation details are not assumed.

Main entry points: [`src/app/page.js`](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/page.js) (Home page), [`src/context/FoodContext.js`](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/context/FoodContext.js) (Food state), [`src/data/foodData.js`](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/data/foodData.js) (Menu and coupons), [`src/components/FoodCard.js`](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/FoodCard.js) (Dish cards)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Menu storefront"]
  node_home["Home page<br/>[page.js]"]
  node_nav["Navigation<br/>[Navbar.js]"]
  node_hero["Hero banner<br/>[Hero.js]"]
  node_filters["Menu filters<br/>[CategoryFilter.js]"]
  node_cards["Dish cards<br/>[FoodCard.js]"]
  node_footer["Footer<br/>[Footer.js]"]
end

subgraph group_ordering["Ordering experience"]
  node_customizer["Dish customizer<br/>[FoodDetailModal.js]"]
  node_cart["Cart drawer<br/>[CartDrawer.js]"]
  node_checkout["Checkout<br/>[CheckoutModal.js]"]
  node_tracker["Order tracker"]
  node_favorites["Favorites<br/>[FavoritesModal.js]"]
  node_history["Order history"]
  node_toast["Notifications<br/>[Toast.js]"]
end

subgraph group_state["State and catalog"]
  node_context["Food state<br/>[FoodContext.js]"]
  node_catalog["Menu and coupons<br/>[foodData.js]"]
end

subgraph group_api["API routes"]
  node_categories_api["Categories API<br/>[route.js]"]
  node_foods_api["Food catalog API<br/>[route.js]"]
  node_coupons_api["Coupon API<br/>[route.js]"]
  node_orders_api["Orders API<br/>[route.js]"]
end

node_customer(("Customer"))

node_customer -->|"opens"| node_home
node_home -->|"uses state"| node_context
node_home -->|"renders"| node_nav
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_filters
node_home -->|"renders"| node_cards
node_home -->|"renders"| node_customizer
node_home -->|"renders"| node_cart
node_home -->|"renders"| node_checkout
node_home -->|"renders"| node_tracker
node_home -->|"renders"| node_favorites
node_home -->|"renders"| node_history
node_home -->|"renders"| node_footer
node_home -->|"renders"| node_toast
node_context -->|"loads menu"| node_catalog
node_nav -->|"reads and updates"| node_context
node_hero -->|"reads state"| node_context
node_filters -->|"sets filters"| node_context
node_cards -->|"updates cart"| node_context
node_cards -->|"selects dish"| node_customizer
node_customizer -->|"adds customized dish"| node_context
node_cart -->|"updates cart"| node_context
node_context -->|"validates coupon"| node_coupons_api
node_checkout -->|"reads order state"| node_context
node_checkout -->|"submits order"| node_orders_api
node_tracker -->|"updates progress"| node_context
node_favorites -->|"manages favorites"| node_context
node_history -->|"reads order history"| node_context
node_toast -->|"reads notices"| node_context
node_customer -.->|"requests catalog"| node_foods_api
node_customer -.->|"requests categories"| node_categories_api
node_foods_api -->|"filters menu data"| node_catalog
node_categories_api -->|"reads categories"| node_catalog
node_coupons_api -->|"checks coupon rules"| node_catalog

click node_home "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/page.js"
click node_nav "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/Navbar.js"
click node_hero "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/Hero.js"
click node_filters "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/CategoryFilter.js"
click node_cards "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/FoodCard.js"
click node_footer "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/Footer.js"
click node_customizer "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/FoodDetailModal.js"
click node_cart "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/CartDrawer.js"
click node_checkout "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/CheckoutModal.js"
click node_tracker "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/OrderTrackerModal.js"
click node_favorites "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/FavoritesModal.js"
click node_history "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/OrderHistoryModal.js"
click node_toast "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/Toast.js"
click node_context "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/context/FoodContext.js"
click node_catalog "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/data/foodData.js"
click node_categories_api "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/api/categories/route.js"
click node_foods_api "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/api/foods/route.js"
click node_coupons_api "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/api/coupons/route.js"
click node_orders_api "https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/api/orders/route.js"

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_home,node_nav,node_hero,node_filters,node_cards,node_footer toneBlue
class node_customizer,node_cart,node_checkout,node_tracker,node_favorites,node_history,node_toast toneAmber
class node_context,node_catalog toneMint
class node_categories_api,node_foods_api,node_coupons_api,node_orders_api toneRose
class node_customer toneIndigo
```

## Components

### Menu storefront

- [Home page](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/page.js): `src/app/page.js`
- [Navigation](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/Navbar.js): `src/components/Navbar.js`
- [Hero banner](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/Hero.js): `src/components/Hero.js`
- [Menu filters](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/CategoryFilter.js): `src/components/CategoryFilter.js`
- [Dish cards](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/FoodCard.js): `src/components/FoodCard.js`
- [Footer](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/Footer.js): `src/components/Footer.js`

### Ordering experience

- [Dish customizer](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/FoodDetailModal.js): `src/components/FoodDetailModal.js`
- [Cart drawer](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/CartDrawer.js): `src/components/CartDrawer.js`
- [Checkout](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/CheckoutModal.js): `src/components/CheckoutModal.js`
- [Order tracker](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/OrderTrackerModal.js): `src/components/OrderTrackerModal.js`
- [Favorites](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/FavoritesModal.js): `src/components/FavoritesModal.js`
- [Order history](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/OrderHistoryModal.js): `src/components/OrderHistoryModal.js`
- [Notifications](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/components/Toast.js): `src/components/Toast.js`

### State and catalog

- [Food state](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/context/FoodContext.js): `src/context/FoodContext.js`
- [Menu and coupons](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/data/foodData.js): `src/data/foodData.js`

### API routes

- [Categories API](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/api/categories/route.js): `src/app/api/categories/route.js`
- [Food catalog API](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/api/foods/route.js): `src/app/api/foods/route.js`
- [Coupon API](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/api/coupons/route.js): `src/app/api/coupons/route.js`
- [Orders API](https://github.com/n-sai8374-bit/my-food-app/blob/main/src/app/api/orders/route.js): `src/app/api/orders/route.js`

### Other components

- **Customer**

## Connections

- Customer → Home page: opens (evidence: `README.md`)
- Home page → Food state: uses state (evidence: `src/app/page.js`)
- Home page → Navigation: renders (evidence: `src/app/page.js`)
- Home page → Hero banner: renders (evidence: `src/app/page.js`)
- Home page → Menu filters: renders (evidence: `src/app/page.js`)
- Home page → Dish cards: renders (evidence: `src/app/page.js`)
- Home page → Dish customizer: renders (evidence: `src/app/page.js`)
- Home page → Cart drawer: renders (evidence: `src/app/page.js`)
- Home page → Checkout: renders (evidence: `src/app/page.js`)
- Home page → Order tracker: renders (evidence: `src/app/page.js`)
- Home page → Favorites: renders (evidence: `src/app/page.js`)
- Home page → Order history: renders (evidence: `src/app/page.js`)
- Home page → Footer: renders (evidence: `src/app/page.js`)
- Home page → Notifications: renders (evidence: `src/app/page.js`)
- Food state → Menu and coupons: loads menu (evidence: `src/context/FoodContext.js`)
- Navigation → Food state: reads and updates (evidence: `src/components/Navbar.js`)
- Hero banner → Food state: reads state (evidence: `src/components/Hero.js`)
- Menu filters → Food state: sets filters (evidence: `src/components/CategoryFilter.js`)
- Dish cards → Food state: updates cart (evidence: `src/components/FoodCard.js`)
- Dish cards → Dish customizer: selects dish (evidence: `src/components/FoodCard.js`)
- Dish customizer → Food state: adds customized dish (evidence: `src/components/FoodDetailModal.js`)
- Cart drawer → Food state: updates cart (evidence: `src/components/CartDrawer.js`)
- Food state → Coupon API: validates coupon (evidence: `src/context/FoodContext.js`)
- Checkout → Food state: reads order state (evidence: `src/components/CheckoutModal.js`)
- Checkout → Orders API: submits order (evidence: `src/components/CheckoutModal.js`)
- Order tracker → Food state: updates progress (evidence: `src/components/OrderTrackerModal.js`)
- Favorites → Food state: manages favorites (evidence: `src/components/FavoritesModal.js`)
- Order history → Food state: reads order history (evidence: `src/components/OrderHistoryModal.js`)
- Notifications → Food state: reads notices (evidence: `src/components/Toast.js`)
- Customer → Food catalog API: requests catalog (evidence: `README.md`)
- Customer → Categories API: requests categories (evidence: `README.md`)
- Food catalog API → Menu and coupons: filters menu data (evidence: `src/app/api/foods/route.js`)
- Categories API → Menu and coupons: reads categories (evidence: `src/app/api/categories/route.js`)
- Coupon API → Menu and coupons: checks coupon rules (evidence: `src/app/api/coupons/route.js`)