# airinkamala/qr-menu architecture

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

- Interactive diagram: https://gitdiagram.com/airinkamala/qr-menu
- Repository: https://github.com/airinkamala/qr-menu

## Overview

This is a QR-menu and cafeteria ordering application. Customers browse available menu items, inspect details, save bookmarks or add items to a cart, then submit an order with their name and location; administrators manage menu entries and categories. The backend exposes menu, category, and order APIs backed by MySQL, and stores uploaded menu images locally. The tree and sampled files establish the routing and several API calls; unsampled page behavior and its specific wiring are not assumed.

Main entry points: [`backend/server.js`](https://github.com/airinkamala/qr-menu/blob/main/backend/server.js) (Express API), [`frontend/src/router/index.js`](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/router/index.js) (Page router), [`frontend/src/component/view/DetailPage.vue`](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/DetailPage.vue) (Item details), [`frontend/src/component/view/OrderPage.vue`](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/OrderPage.vue) (Order checkout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Customer experience"]
  node_app["Vue app<br/>[App.vue]"]
  node_router["Page router<br/>[index.js]"]
  node_user_page["Menu browsing<br/>[UserPage.vue]"]
  node_detail_page["Item details<br/>[DetailPage.vue]"]
  node_order_page["Order checkout<br/>[OrderPage.vue]"]
  node_category_page["Categories<br/>[CategoryPage.vue]"]
  node_order_store["Cart and bookmarks<br/>[order.js]"]
end

subgraph group_admin["Menu administration"]
  node_admin_page["Menu management<br/>[AdminPage.vue]"]
end

subgraph group_service["API service"]
  node_api["Express API<br/>[server.js]"]
end

subgraph group_state["Persistence"]
  node_image_files[("Menu image files")]
  node_mysql[("QR menu database<br/>[qr-menu.sql]")]
  node_browser_storage[("Browser local storage")]
end

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

node_customer -->|"opens"| node_app
node_admin_actor -->|"opens"| node_app
node_app -->|"renders routes"| node_router
node_router -->|"routes /"| node_admin_page
node_router -->|"routes /home"| node_user_page
node_router -->|"routes /order"| node_order_page
node_router -->|"routes /category"| node_category_page
node_router -->|"routes /menu/:id"| node_detail_page
node_detail_page -->|"fetches item"| node_api
node_detail_page -->|"updates cart"| node_order_store
node_order_page -->|"submits order"| node_api
node_order_page -->|"fetches menu"| node_api
node_admin_page -->|"manages menu"| node_api
node_admin_page -->|"fetches categories"| node_api
node_api -->|"queries and updates"| node_mysql
node_api -->|"stores and serves images"| node_image_files
node_order_store -->|"saves cart data"| node_browser_storage

click node_app "https://github.com/airinkamala/qr-menu/blob/main/frontend/src/App.vue"
click node_router "https://github.com/airinkamala/qr-menu/blob/main/frontend/src/router/index.js"
click node_user_page "https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/UserPage.vue"
click node_detail_page "https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/DetailPage.vue"
click node_order_page "https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/OrderPage.vue"
click node_category_page "https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/CategoryPage.vue"
click node_order_store "https://github.com/airinkamala/qr-menu/blob/main/frontend/src/stores/order.js"
click node_admin_page "https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/AdminPage.vue"
click node_api "https://github.com/airinkamala/qr-menu/blob/main/backend/server.js"
click node_image_files "https://github.com/airinkamala/qr-menu/tree/main/backend/uploads"
click node_mysql "https://github.com/airinkamala/qr-menu/blob/main/qr-menu.sql"

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_app,node_router,node_user_page,node_detail_page,node_order_page,node_category_page,node_order_store toneBlue
class node_admin_page toneAmber
class node_api toneMint
class node_image_files,node_mysql,node_browser_storage toneRose
class node_customer,node_admin_actor toneIndigo
```

## Components

### Customer experience

- [Vue app](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/App.vue): `frontend/src/App.vue`
- [Page router](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/router/index.js): `frontend/src/router/index.js`
- [Menu browsing](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/UserPage.vue): `frontend/src/component/view/UserPage.vue`
- [Item details](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/DetailPage.vue): `frontend/src/component/view/DetailPage.vue`
- [Order checkout](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/OrderPage.vue): `frontend/src/component/view/OrderPage.vue`
- [Categories](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/CategoryPage.vue): `frontend/src/component/view/CategoryPage.vue`
- [Cart and bookmarks](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/stores/order.js): `frontend/src/stores/order.js`

### Menu administration

- [Menu management](https://github.com/airinkamala/qr-menu/blob/main/frontend/src/component/view/AdminPage.vue): `frontend/src/component/view/AdminPage.vue`

### API service

- [Express API](https://github.com/airinkamala/qr-menu/blob/main/backend/server.js): `backend/server.js`

### Persistence

- [Menu image files](https://github.com/airinkamala/qr-menu/tree/main/backend/uploads): `backend/uploads`
- [QR menu database](https://github.com/airinkamala/qr-menu/blob/main/qr-menu.sql): `qr-menu.sql`
- **Browser local storage**

### Other components

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

## Connections

- Customer → Vue app: opens
- Administrator → Vue app: opens
- Vue app → Page router: renders routes
- Page router → Menu management: routes /
- Page router → Menu browsing: routes /home
- Page router → Order checkout: routes /order
- Page router → Categories: routes /category
- Page router → Item details: routes /menu/:id
- Item details → Express API: fetches item
- Item details → Cart and bookmarks: updates cart
- Order checkout → Express API: submits order
- Order checkout → Express API: fetches menu
- Menu management → Express API: manages menu
- Menu management → Express API: fetches categories
- Express API → QR menu database: queries and updates
- Express API → Menu image files: stores and serves images
- Cart and bookmarks → Browser local storage: saves cart data