# helena141/frozenfood-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/helena141/frozenfood-frontend
- Repository: https://github.com/helena141/frozenfood-frontend

## Overview

Lezzat is a frozen-food commerce application with customer shopping and account flows, plus an admin panel for operations. The customer journey runs from browsing products through cart and checkout, delivery estimation, payment, and order tracking; customers can also manage profiles. Admin screens cover dashboard reporting, products, customers, and deliveries. The frontend uses a shared API client and persistent auth/cart state. Checkout’s excerpt shows delivery lookup and estimation context, but not every submission or payment call, so those links are omitted where ownership is not visible.

Main entry points: [`src/lib/axios.ts`](https://github.com/helena141/frozenfood-frontend/blob/main/src/lib/axios.ts) (API client), [`src/app/page.tsx`](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/page.tsx) (Product catalog), [`src/store/cart-store.ts`](https://github.com/helena141/frozenfood-frontend/blob/main/src/store/cart-store.ts) (Cart state), [`src/store/auth-store.ts`](https://github.com/helena141/frozenfood-frontend/blob/main/src/store/auth-store.ts) (Auth state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shopping["Customer Shopping"]
  node_catalog["Product catalog<br/>[page.tsx]"]
  node_productdetail["Product details<br/>[page.tsx]"]
  node_productcard["Product card<br/>[product-card.tsx]"]
  node_cart["Cart panel<br/>[cart-panel.tsx]"]
  node_checkout["Checkout<br/>[page.tsx]"]
  node_orders["Order list<br/>[page.tsx]"]
  node_orderdetail["Order tracking<br/>[page.tsx]"]
  node_paymentdemo["QRIS demo"]
  node_midtrans["Midtrans token API<br/>[route.ts]"]
  node_shopnav["Shop navigation<br/>[sidebar.tsx]"]
end

subgraph group_accounts["Accounts"]
  node_login["Login<br/>[page.tsx]"]
  node_googlelogin["Google login"]
  node_profile["Customer profile<br/>[page.tsx]"]
end

subgraph group_operations["Admin Operations"]
  node_adminhome["Admin dashboard<br/>[page.tsx]"]
  node_adminproducts["Product management<br/>[page.tsx]"]
  node_admincustomers["Customer management<br/>[page.tsx]"]
  node_admindeliveries["Delivery management<br/>[page.tsx]"]
  node_adminnav["Admin navigation<br/>[admin-sidebar.tsx]"]
end

subgraph group_foundation["App Foundation"]
  node_cartstate[("Cart state<br/>[cart-store.ts]")]
  node_authstate[("Auth state<br/>[auth-store.ts]")]
  node_api["API client<br/>[axios.ts]"]
  node_types["API data types<br/>[api.ts]"]
  node_query["Query provider<br/>[query-provider.tsx]"]
end

node_customer(("Shopper"))
node_admin(("Admin user"))
node_gateway{{"Midtrans"}}
node_backend{{"Commerce backend"}}

node_customer -->|"browses"| node_catalog
node_catalog -->|"loads products"| node_api
node_catalog -->|"renders"| node_productcard
node_productcard -->|"adds products"| node_cartstate
node_customer -->|"views"| node_productdetail
node_productdetail -->|"adds products"| node_cartstate
node_cart -->|"reads and updates"| node_cartstate
node_customer -->|"starts checkout"| node_checkout
node_checkout -->|"reads cart"| node_cartstate
node_checkout -->|"requests delivery"| node_api
node_orders -->|"loads orders"| node_api
node_orderdetail -->|"loads order"| node_api
node_paymentdemo -->|"requests payment"| node_api
node_midtrans -.->|"gets token"| node_gateway
node_customer -->|"signs in"| node_login
node_login -->|"authenticates"| node_api
node_googlelogin -->|"authenticates"| node_api
node_login -->|"stores session"| node_authstate
node_profile -->|"reads and updates"| node_api
node_profile -->|"updates user"| node_authstate
node_admin -->|"opens panel"| node_adminhome
node_adminhome -->|"loads reports"| node_api
node_adminproducts -->|"manages products"| node_api
node_admincustomers -->|"manages customers"| node_api
node_admindeliveries -->|"manages deliveries"| node_api
node_adminnav -->|"reads session"| node_authstate
node_shopnav -->|"reads session"| node_authstate
node_api -->|"sends requests"| node_backend
node_query -.->|"provides queries"| node_catalog

click node_catalog "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/page.tsx"
click node_productdetail "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/products/%5Bid%5D/page.tsx"
click node_productcard "https://github.com/helena141/frozenfood-frontend/blob/main/src/components/shop/product-card.tsx"
click node_cart "https://github.com/helena141/frozenfood-frontend/blob/main/src/components/shop/cart-panel.tsx"
click node_cartstate "https://github.com/helena141/frozenfood-frontend/blob/main/src/store/cart-store.ts"
click node_checkout "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/checkout/page.tsx"
click node_orders "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/orders/page.tsx"
click node_orderdetail "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/orders/%5Bid%5D/page.tsx"
click node_paymentdemo "https://github.com/helena141/frozenfood-frontend/blob/main/src/components/shop/qris-demo-modal.tsx"
click node_midtrans "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/api/midtrans/token/route.ts"
click node_login "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/login/page.tsx"
click node_googlelogin "https://github.com/helena141/frozenfood-frontend/blob/main/src/components/auth/google-login-button.tsx"
click node_profile "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/profile/page.tsx"
click node_authstate "https://github.com/helena141/frozenfood-frontend/blob/main/src/store/auth-store.ts"
click node_adminhome "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/admin/dashboard/page.tsx"
click node_adminproducts "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/admin/products/page.tsx"
click node_admincustomers "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/admin/customers/page.tsx"
click node_admindeliveries "https://github.com/helena141/frozenfood-frontend/blob/main/src/app/admin/deliveries/page.tsx"
click node_adminnav "https://github.com/helena141/frozenfood-frontend/blob/main/src/components/admin/admin-sidebar.tsx"
click node_shopnav "https://github.com/helena141/frozenfood-frontend/blob/main/src/components/shop/sidebar.tsx"
click node_api "https://github.com/helena141/frozenfood-frontend/blob/main/src/lib/axios.ts"
click node_types "https://github.com/helena141/frozenfood-frontend/blob/main/src/types/api.ts"
click node_query "https://github.com/helena141/frozenfood-frontend/blob/main/src/components/providers/query-provider.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_catalog,node_productdetail,node_productcard,node_cart,node_checkout,node_orders,node_orderdetail,node_paymentdemo,node_midtrans,node_shopnav,node_admin toneBlue
class node_login,node_googlelogin,node_profile toneAmber
class node_adminhome,node_adminproducts,node_admincustomers,node_admindeliveries,node_adminnav toneMint
class node_cartstate,node_authstate,node_api,node_types,node_query toneRose
class node_customer,node_gateway,node_backend toneIndigo
```

## Components

### Customer Shopping

- [Product catalog](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Product details](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/products/%5Bid%5D/page.tsx): `src/app/products/[id]/page.tsx`
- [Product card](https://github.com/helena141/frozenfood-frontend/blob/main/src/components/shop/product-card.tsx): `src/components/shop/product-card.tsx`
- [Cart panel](https://github.com/helena141/frozenfood-frontend/blob/main/src/components/shop/cart-panel.tsx): `src/components/shop/cart-panel.tsx`
- [Checkout](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/checkout/page.tsx): `src/app/checkout/page.tsx`
- [Order list](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/orders/page.tsx): `src/app/orders/page.tsx`
- [Order tracking](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/orders/%5Bid%5D/page.tsx): `src/app/orders/[id]/page.tsx`
- [QRIS demo](https://github.com/helena141/frozenfood-frontend/blob/main/src/components/shop/qris-demo-modal.tsx): `src/components/shop/qris-demo-modal.tsx`
- [Midtrans token API](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/api/midtrans/token/route.ts): `src/app/api/midtrans/token/route.ts`
- [Shop navigation](https://github.com/helena141/frozenfood-frontend/blob/main/src/components/shop/sidebar.tsx): `src/components/shop/sidebar.tsx`

### Accounts

- [Login](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/login/page.tsx): `src/app/login/page.tsx`
- [Google login](https://github.com/helena141/frozenfood-frontend/blob/main/src/components/auth/google-login-button.tsx): `src/components/auth/google-login-button.tsx`
- [Customer profile](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/profile/page.tsx): `src/app/profile/page.tsx`

### Admin Operations

- [Admin dashboard](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/admin/dashboard/page.tsx): `src/app/admin/dashboard/page.tsx`
- [Product management](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/admin/products/page.tsx): `src/app/admin/products/page.tsx`
- [Customer management](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/admin/customers/page.tsx): `src/app/admin/customers/page.tsx`
- [Delivery management](https://github.com/helena141/frozenfood-frontend/blob/main/src/app/admin/deliveries/page.tsx): `src/app/admin/deliveries/page.tsx`
- [Admin navigation](https://github.com/helena141/frozenfood-frontend/blob/main/src/components/admin/admin-sidebar.tsx): `src/components/admin/admin-sidebar.tsx`

### App Foundation

- [Cart state](https://github.com/helena141/frozenfood-frontend/blob/main/src/store/cart-store.ts): `src/store/cart-store.ts`
- [Auth state](https://github.com/helena141/frozenfood-frontend/blob/main/src/store/auth-store.ts): `src/store/auth-store.ts`
- [API client](https://github.com/helena141/frozenfood-frontend/blob/main/src/lib/axios.ts): `src/lib/axios.ts`
- [API data types](https://github.com/helena141/frozenfood-frontend/blob/main/src/types/api.ts): `src/types/api.ts`
- [Query provider](https://github.com/helena141/frozenfood-frontend/blob/main/src/components/providers/query-provider.tsx): `src/components/providers/query-provider.tsx`

### Other components

- **Shopper**
- **Admin user**
- **Midtrans**
- **Commerce backend**

## Connections

- Shopper → Product catalog: browses (evidence: `src/app/page.tsx`)
- Product catalog → API client: loads products (evidence: `src/app/page.tsx`)
- Product catalog → Product card: renders (evidence: `src/app/page.tsx`)
- Product card → Cart state: adds products (evidence: `src/components/shop/product-card.tsx`)
- Shopper → Product details: views (evidence: `src/app/products/[id]/page.tsx`)
- Product details → Cart state: adds products (evidence: `src/app/products/[id]/page.tsx`)
- Cart panel → Cart state: reads and updates (evidence: `src/components/shop/cart-panel.tsx`)
- Shopper → Checkout: starts checkout
- Checkout → Cart state: reads cart (evidence: `src/app/checkout/page.tsx`)
- Checkout → API client: requests delivery (evidence: `src/app/checkout/page.tsx`)
- Order list → API client: loads orders (evidence: `src/app/orders/page.tsx`)
- Order tracking → API client: loads order (evidence: `src/app/orders/[id]/page.tsx`)
- QRIS demo → API client: requests payment (evidence: `src/components/shop/qris-demo-modal.tsx`)
- Midtrans token API → Midtrans: gets token
- Shopper → Login: signs in (evidence: `src/app/login/page.tsx`)
- Login → API client: authenticates (evidence: `src/app/login/page.tsx`)
- Google login → API client: authenticates (evidence: `src/components/auth/google-login-button.tsx`)
- Login → Auth state: stores session (evidence: `src/app/login/page.tsx`)
- Customer profile → API client: reads and updates (evidence: `src/app/profile/page.tsx`)
- Customer profile → Auth state: updates user (evidence: `src/app/profile/page.tsx`)
- Admin user → Admin dashboard: opens panel
- Admin dashboard → API client: loads reports (evidence: `src/app/admin/dashboard/page.tsx`)
- Product management → API client: manages products (evidence: `src/app/admin/products/page.tsx`)
- Customer management → API client: manages customers (evidence: `src/app/admin/customers/page.tsx`)
- Delivery management → API client: manages deliveries (evidence: `src/app/admin/deliveries/page.tsx`)
- Admin navigation → Auth state: reads session (evidence: `src/components/admin/admin-sidebar.tsx`)
- Shop navigation → Auth state: reads session (evidence: `src/components/shop/sidebar.tsx`)
- API client → Commerce backend: sends requests (evidence: `src/lib/axios.ts`)
- Query provider → Product catalog: provides queries