# komal-atif/assaanmart-fyp architecture

> Architecture diagram of the GitHub repository komal-atif/assaanmart-fyp, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/komal-atif/assaanmart-fyp
- Repository: https://github.com/komal-atif/assaanmart-fyp

## Overview

AssanMart is a grocery-shopping app with catalog browsing, cart and checkout, account/order features, voice ordering, and photo-based list scanning. The main flow is a shopper browsing or using an assisted input, then reviewing a cart and placing an order through the backend. The graph reflects documented UI and API calls; backend internals and several frontend details were not excerpted, so their internal relationships are intentionally left unspecified.

Main entry points: [`frontend/src/App.tsx`](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/App.tsx) (App Orchestrator), [`frontend/src/services/orderApi.ts`](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/services/orderApi.ts) (Order API), [`frontend/src/services/voiceApi.ts`](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/services/voiceApi.ts) (Voice API), [`frontend/src/components/VoiceAssistantModal.tsx`](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/VoiceAssistantModal.tsx) (Voice Assistant)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shopping["Shopping Experience"]
  node_store["Store Dashboard<br/>[StoreDashboard.tsx]"]
  node_product["Product Card<br/>[ProductCard.tsx]"]
  node_product_detail["Product Detail"]
  node_cart["Cart Drawer<br/>[CartDrawer.tsx]"]
  node_grocery_data["Grocery Dataset<br/>[groceryData.ts]"]
  node_how_it_works["How It Works<br/>[HowItWorks.tsx]"]
end

subgraph group_assist["Assisted Ordering"]
  node_voice_ui["Voice Assistant"]
  node_voice_loop["Voice Capture Loop<br/>[useVoiceLoop.ts]"]
  node_voice_visual["Voice Avatar<br/>[VoiceAvatar.tsx]"]
  node_scanner["Grocery List Scanner"]
end

subgraph group_commerce["Accounts &amp; Orders"]
  node_checkout["Checkout<br/>[CheckoutModal.tsx]"]
  node_auth["Authentication<br/>[AuthModal.tsx]"]
  node_orders_ui["Order History<br/>[MyOrdersModal.tsx]"]
end

subgraph group_platform["Application &amp; APIs"]
  node_app["App Orchestrator<br/>[App.tsx]"]
  node_catalog["Catalog API<br/>[catalogApi.ts]"]
  node_order_api["Order API<br/>[orderApi.ts]"]
  node_voice_api["Voice API<br/>[voiceApi.ts]"]
  node_backend["FastAPI Backend<br/>[backend.py]"]
  node_supabase["Supabase Client<br/>[supabaseClient.ts]"]
end

node_shopper(("Shopper"))

node_shopper -->|"uses"| node_app
node_app -->|"loads catalog"| node_catalog
node_app -->|"renders"| node_store
node_store -->|"renders"| node_product
node_app -->|"opens"| node_product_detail
node_app -.->|"renders"| node_cart
node_app -.->|"opens"| node_checkout
node_app -.->|"opens"| node_auth
node_app -->|"opens"| node_orders_ui
node_checkout -->|"places order"| node_order_api
node_orders_ui -->|"fetches orders"| node_order_api
node_auth -->|"saves profile"| node_order_api
node_auth -->|"authenticates"| node_supabase
node_app -->|"opens"| node_voice_ui
node_voice_ui -->|"captures speech"| node_voice_loop
node_voice_ui -->|"renders"| node_voice_visual
node_voice_ui -->|"sends voice turns"| node_voice_api
node_voice_api -->|"calls voice routes"| node_backend
node_app -.->|"opens"| node_scanner
node_scanner -->|"submits image"| node_order_api
node_scanner -->|"uses scan voice"| node_voice_api
node_order_api -->|"calls order routes"| node_backend
node_order_api -->|"gets API headers"| node_voice_api
node_voice_api -->|"gets credentials"| node_supabase
node_app -.->|"renders"| node_how_it_works

click node_app "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/App.tsx"
click node_catalog "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/services/catalogApi.ts"
click node_store "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/StoreDashboard.tsx"
click node_product "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/ProductCard.tsx"
click node_product_detail "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/ProductDetailModal.tsx"
click node_cart "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/CartDrawer.tsx"
click node_checkout "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/CheckoutModal.tsx"
click node_auth "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/AuthModal.tsx"
click node_orders_ui "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/MyOrdersModal.tsx"
click node_order_api "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/services/orderApi.ts"
click node_voice_ui "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/VoiceAssistantModal.tsx"
click node_voice_loop "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/hooks/useVoiceLoop.ts"
click node_voice_visual "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/voice/VoiceAvatar.tsx"
click node_voice_api "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/services/voiceApi.ts"
click node_scanner "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/GroceryImageScannerModal.tsx"
click node_backend "https://github.com/komal-atif/assaanmart-fyp/blob/main/backend/backend.py"
click node_supabase "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/supabaseClient.ts"
click node_grocery_data "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/data/groceryData.ts"
click node_how_it_works "https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/HowItWorks.tsx"

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_store,node_product,node_product_detail,node_cart,node_grocery_data,node_how_it_works toneBlue
class node_voice_ui,node_voice_loop,node_voice_visual,node_scanner toneAmber
class node_checkout,node_auth,node_orders_ui toneMint
class node_app,node_catalog,node_order_api,node_voice_api,node_backend,node_supabase toneRose
class node_shopper toneIndigo
```

## Components

### Shopping Experience

- [Store Dashboard](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/StoreDashboard.tsx): `frontend/src/components/StoreDashboard.tsx`
- [Product Card](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/ProductCard.tsx): `frontend/src/components/ProductCard.tsx`
- [Product Detail](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/ProductDetailModal.tsx): `frontend/src/components/ProductDetailModal.tsx`
- [Cart Drawer](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/CartDrawer.tsx): `frontend/src/components/CartDrawer.tsx`
- [Grocery Dataset](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/data/groceryData.ts): `frontend/src/data/groceryData.ts`
- [How It Works](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/HowItWorks.tsx): `frontend/src/components/HowItWorks.tsx`

### Assisted Ordering

- [Voice Assistant](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/VoiceAssistantModal.tsx): `frontend/src/components/VoiceAssistantModal.tsx`
- [Voice Capture Loop](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/hooks/useVoiceLoop.ts): `frontend/src/hooks/useVoiceLoop.ts`
- [Voice Avatar](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/voice/VoiceAvatar.tsx): `frontend/src/components/voice/VoiceAvatar.tsx`
- [Grocery List Scanner](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/GroceryImageScannerModal.tsx): `frontend/src/components/GroceryImageScannerModal.tsx`

### Accounts & Orders

- [Checkout](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/CheckoutModal.tsx): `frontend/src/components/CheckoutModal.tsx`
- [Authentication](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/AuthModal.tsx): `frontend/src/components/AuthModal.tsx`
- [Order History](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/components/MyOrdersModal.tsx): `frontend/src/components/MyOrdersModal.tsx`

### Application & APIs

- [App Orchestrator](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Catalog API](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/services/catalogApi.ts): `frontend/src/services/catalogApi.ts`
- [Order API](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/services/orderApi.ts): `frontend/src/services/orderApi.ts`
- [Voice API](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/services/voiceApi.ts): `frontend/src/services/voiceApi.ts`
- [FastAPI Backend](https://github.com/komal-atif/assaanmart-fyp/blob/main/backend/backend.py): `backend/backend.py`
- [Supabase Client](https://github.com/komal-atif/assaanmart-fyp/blob/main/frontend/src/supabaseClient.ts): `frontend/src/supabaseClient.ts`

### Other components

- **Shopper**

## Connections

- Shopper → App Orchestrator: uses (evidence: `frontend/src/App.tsx`)
- App Orchestrator → Catalog API: loads catalog (evidence: `frontend/src/App.tsx`)
- App Orchestrator → Store Dashboard: renders (evidence: `frontend/src/App.tsx`)
- Store Dashboard → Product Card: renders (evidence: `frontend/src/components/StoreDashboard.tsx`)
- App Orchestrator → Product Detail: opens (evidence: `frontend/src/App.tsx`)
- App Orchestrator → Cart Drawer: renders (evidence: `frontend/src/App.tsx`)
- App Orchestrator → Checkout: opens (evidence: `frontend/src/App.tsx`)
- App Orchestrator → Authentication: opens (evidence: `frontend/src/App.tsx`)
- App Orchestrator → Order History: opens (evidence: `frontend/src/App.tsx`)
- Checkout → Order API: places order (evidence: `frontend/src/components/CheckoutModal.tsx`)
- Order History → Order API: fetches orders (evidence: `frontend/src/components/MyOrdersModal.tsx`)
- Authentication → Order API: saves profile (evidence: `frontend/src/components/AuthModal.tsx`)
- Authentication → Supabase Client: authenticates (evidence: `frontend/src/components/AuthModal.tsx`)
- App Orchestrator → Voice Assistant: opens (evidence: `frontend/src/App.tsx`)
- Voice Assistant → Voice Capture Loop: captures speech (evidence: `frontend/src/components/VoiceAssistantModal.tsx`)
- Voice Assistant → Voice Avatar: renders (evidence: `frontend/src/components/VoiceAssistantModal.tsx`)
- Voice Assistant → Voice API: sends voice turns (evidence: `frontend/src/components/VoiceAssistantModal.tsx`)
- Voice API → FastAPI Backend: calls voice routes (evidence: `frontend/src/services/voiceApi.ts`)
- App Orchestrator → Grocery List Scanner: opens (evidence: `frontend/src/App.tsx`)
- Grocery List Scanner → Order API: submits image (evidence: `frontend/src/components/GroceryImageScannerModal.tsx`)
- Grocery List Scanner → Voice API: uses scan voice (evidence: `frontend/src/components/GroceryImageScannerModal.tsx`)
- Order API → FastAPI Backend: calls order routes (evidence: `frontend/src/services/orderApi.ts`)
- Order API → Voice API: gets API headers (evidence: `frontend/src/services/orderApi.ts`)
- Voice API → Supabase Client: gets credentials (evidence: `frontend/src/services/voiceApi.ts`)
- App Orchestrator → How It Works: renders