# riku-afk/ordering-system architecture

> Architecture diagram of the GitHub repository riku-afk/ordering-system, 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/riku-afk/ordering-system
- Repository: https://github.com/riku-afk/ordering-system

## Overview

This is the Next.js frontend for Remains Coffee, a restaurant ordering system. Customers browse and filter the menu, manage a cart, authenticate, place orders, and view order history; staff manage products and orders. The frontend also provides café landing-page content and shared app-wide state. The README documents a Spring Boot REST backend, but backend implementation files are not in the supplied tree; connections from feature hooks to API modules are therefore shown as unverified where not evidenced by excerpts.

Main entry points: [`Frontend/src/hooks/use-orders.ts`](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-orders.ts) (Order queries), [`Frontend/src/hooks/use-products.ts`](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-products.ts) (Product queries), [`Frontend/src/lib/api/client.ts`](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/lib/api/client.ts) (REST API client), [`Frontend/src/app/admin/products/page.tsx`](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/admin/products/page.tsx) (Product management)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_landing["Café landing<br/>[page.tsx]"]
  node_menu["Menu browsing<br/>[page.tsx]"]
  node_product_detail["Product details<br/>[page.tsx]"]
  node_menu_preview["Menu preview<br/>[menu-preview.tsx]"]
end

subgraph group_ordering["Ordering"]
  node_auth_pages["Sign in / register<br/>[page.tsx]"]
  node_cart["Cart state<br/>[cart-context.tsx]"]
  node_cart_page["Cart page<br/>[page.tsx]"]
  node_checkout["Checkout<br/>[page.tsx]"]
  node_order_history["Order history<br/>[page.tsx]"]
  node_order_detail["Order details<br/>[page.tsx]"]
end

subgraph group_operations["Staff operations"]
  node_admin_dashboard["Staff dashboard<br/>[page.tsx]"]
  node_admin_products["Product management<br/>[page.tsx]"]
  node_product_form["Product editor"]
  node_admin_orders["Order management<br/>[page.tsx]"]
end

subgraph group_shared["Shared frontend services"]
  node_auth_context["Authentication state<br/>[auth-context.tsx]"]
  node_order_hooks["Order queries<br/>[use-orders.ts]"]
  node_product_hooks["Product queries<br/>[use-products.ts]"]
  node_category_hooks["Category queries<br/>[use-categories.ts]"]
  node_admin_product_hooks["Product mutations"]
  node_api_client["REST API client<br/>[client.ts]"]
  node_query_provider["Query cache<br/>[query-provider.tsx]"]
  node_app_shell["App shell<br/>[layout.tsx]"]
end

node_customer(("Customer"))
node_backend["Spring Boot API"]

node_customer -->|"visits"| node_landing
node_landing -.->|"renders"| node_menu_preview
node_menu_preview -->|"loads menu"| node_product_hooks
node_customer -->|"browses"| node_menu
node_menu -->|"loads products"| node_product_hooks
node_menu -->|"loads categories"| node_category_hooks
node_customer -->|"views item"| node_product_detail
node_customer -->|"authenticates"| node_auth_pages
node_auth_pages -->|"logs in or registers"| node_auth_context
node_customer -->|"reviews cart"| node_cart_page
node_cart_page -.->|"reads cart"| node_cart
node_customer -->|"places order"| node_checkout
node_checkout -->|"requires authentication"| node_auth_context
node_checkout -->|"reads and clears"| node_cart
node_checkout -->|"creates order"| node_order_hooks
node_customer -->|"views orders"| node_order_history
node_order_history -->|"requires authentication"| node_auth_context
node_order_history -->|"loads orders"| node_order_hooks
node_customer -->|"views order"| node_order_detail
node_admin_dashboard -->|"counts products"| node_product_hooks
node_admin_dashboard -->|"counts categories"| node_category_hooks
node_admin_dashboard -->|"loads recent orders"| node_order_hooks
node_admin_products -->|"loads products"| node_product_hooks
node_admin_products -->|"loads categories"| node_category_hooks
node_admin_products -->|"updates availability"| node_admin_product_hooks
node_admin_products -->|"opens editor"| node_product_form
node_admin_orders -.->|"loads orders"| node_order_hooks
node_product_hooks -.->|"calls API"| node_api_client
node_category_hooks -.->|"calls API"| node_api_client
node_order_hooks -.->|"calls API"| node_api_client
node_admin_product_hooks -.->|"calls API"| node_api_client
node_api_client -->|"sends REST requests"| node_backend
node_app_shell -->|"provides query cache"| node_query_provider

click node_landing "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/page.tsx"
click node_menu "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/products/page.tsx"
click node_product_detail "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/products/%5Bid%5D/page.tsx"
click node_menu_preview "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/components/home/menu-preview.tsx"
click node_auth_pages "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/login/page.tsx"
click node_auth_context "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/lib/auth/auth-context.tsx"
click node_cart "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/lib/cart/cart-context.tsx"
click node_cart_page "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/cart/page.tsx"
click node_checkout "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/checkout/page.tsx"
click node_order_hooks "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-orders.ts"
click node_order_history "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/orders/page.tsx"
click node_order_detail "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/orders/%5Bid%5D/page.tsx"
click node_admin_dashboard "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/admin/page.tsx"
click node_admin_products "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/admin/products/page.tsx"
click node_product_form "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/components/admin/product-form-dialog.tsx"
click node_admin_orders "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/admin/orders/page.tsx"
click node_product_hooks "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-products.ts"
click node_category_hooks "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-categories.ts"
click node_admin_product_hooks "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-admin-products.ts"
click node_api_client "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/lib/api/client.ts"
click node_query_provider "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/components/providers/query-provider.tsx"
click node_app_shell "https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/layout.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_landing,node_menu,node_product_detail,node_menu_preview toneBlue
class node_auth_pages,node_cart,node_cart_page,node_checkout,node_order_history,node_order_detail toneAmber
class node_admin_dashboard,node_admin_products,node_product_form,node_admin_orders,node_backend toneMint
class node_auth_context,node_order_hooks,node_product_hooks,node_category_hooks,node_admin_product_hooks,node_api_client,node_query_provider,node_app_shell toneRose
class node_customer toneIndigo
```

## Components

### Storefront

- [Café landing](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/page.tsx): `Frontend/src/app/page.tsx`
- [Menu browsing](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/products/page.tsx): `Frontend/src/app/products/page.tsx`
- [Product details](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/products/%5Bid%5D/page.tsx): `Frontend/src/app/products/[id]/page.tsx`
- [Menu preview](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/components/home/menu-preview.tsx): `Frontend/src/components/home/menu-preview.tsx`

### Ordering

- [Sign in / register](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/login/page.tsx): `Frontend/src/app/login/page.tsx`
- [Cart state](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/lib/cart/cart-context.tsx): `Frontend/src/lib/cart/cart-context.tsx`
- [Cart page](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/cart/page.tsx): `Frontend/src/app/cart/page.tsx`
- [Checkout](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/checkout/page.tsx): `Frontend/src/app/checkout/page.tsx`
- [Order history](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/orders/page.tsx): `Frontend/src/app/orders/page.tsx`
- [Order details](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/orders/%5Bid%5D/page.tsx): `Frontend/src/app/orders/[id]/page.tsx`

### Staff operations

- [Staff dashboard](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/admin/page.tsx): `Frontend/src/app/admin/page.tsx`
- [Product management](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/admin/products/page.tsx): `Frontend/src/app/admin/products/page.tsx`
- [Product editor](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/components/admin/product-form-dialog.tsx): `Frontend/src/components/admin/product-form-dialog.tsx`
- [Order management](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/admin/orders/page.tsx): `Frontend/src/app/admin/orders/page.tsx`

### Shared frontend services

- [Authentication state](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/lib/auth/auth-context.tsx): `Frontend/src/lib/auth/auth-context.tsx`
- [Order queries](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-orders.ts): `Frontend/src/hooks/use-orders.ts`
- [Product queries](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-products.ts): `Frontend/src/hooks/use-products.ts`
- [Category queries](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-categories.ts): `Frontend/src/hooks/use-categories.ts`
- [Product mutations](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/hooks/use-admin-products.ts): `Frontend/src/hooks/use-admin-products.ts`
- [REST API client](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/lib/api/client.ts): `Frontend/src/lib/api/client.ts`
- [Query cache](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/components/providers/query-provider.tsx): `Frontend/src/components/providers/query-provider.tsx`
- [App shell](https://github.com/riku-afk/ordering-system/blob/main/Frontend/src/app/layout.tsx): `Frontend/src/app/layout.tsx`

### Other components

- **Customer**
- **Spring Boot API**

## Connections

- Customer → Café landing: visits
- Café landing → Menu preview: renders
- Menu preview → Product queries: loads menu (evidence: `Frontend/src/components/home/menu-preview.tsx`)
- Customer → Menu browsing: browses (evidence: `Frontend/src/app/products/page.tsx`)
- Menu browsing → Product queries: loads products (evidence: `Frontend/src/app/products/page.tsx`)
- Menu browsing → Category queries: loads categories (evidence: `Frontend/src/app/products/page.tsx`)
- Customer → Product details: views item
- Customer → Sign in / register: authenticates (evidence: `Frontend/src/app/login/page.tsx`)
- Sign in / register → Authentication state: logs in or registers (evidence: `Frontend/src/app/login/page.tsx`)
- Customer → Cart page: reviews cart
- Cart page → Cart state: reads cart
- Customer → Checkout: places order (evidence: `Frontend/src/app/checkout/page.tsx`)
- Checkout → Authentication state: requires authentication (evidence: `Frontend/src/app/checkout/page.tsx`)
- Checkout → Cart state: reads and clears (evidence: `Frontend/src/app/checkout/page.tsx`)
- Checkout → Order queries: creates order (evidence: `Frontend/src/app/checkout/page.tsx`)
- Customer → Order history: views orders (evidence: `Frontend/src/app/orders/page.tsx`)
- Order history → Authentication state: requires authentication (evidence: `Frontend/src/app/orders/page.tsx`)
- Order history → Order queries: loads orders (evidence: `Frontend/src/app/orders/page.tsx`)
- Customer → Order details: views order
- Staff dashboard → Product queries: counts products (evidence: `Frontend/src/app/admin/page.tsx`)
- Staff dashboard → Category queries: counts categories (evidence: `Frontend/src/app/admin/page.tsx`)
- Staff dashboard → Order queries: loads recent orders (evidence: `Frontend/src/app/admin/page.tsx`)
- Product management → Product queries: loads products (evidence: `Frontend/src/app/admin/products/page.tsx`)
- Product management → Category queries: loads categories (evidence: `Frontend/src/app/admin/products/page.tsx`)
- Product management → Product mutations: updates availability (evidence: `Frontend/src/app/admin/products/page.tsx`)
- Product management → Product editor: opens editor (evidence: `Frontend/src/app/admin/products/page.tsx`)
- Order management → Order queries: loads orders
- Product queries → REST API client: calls API
- Category queries → REST API client: calls API
- Order queries → REST API client: calls API
- Product mutations → REST API client: calls API
- REST API client → Spring Boot API: sends REST requests (evidence: `Frontend/src/lib/api/client.ts`)
- App shell → Query cache: provides query cache (evidence: `Frontend/src/app/layout.tsx`)