# isiahchoi2/group-work architecture

> Architecture diagram of the GitHub repository isiahchoi2/group-work, 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/isiahchoi2/group-work
- Repository: https://github.com/isiahchoi2/group-work

## Overview

This is a web-based print-ordering service. Customers configure print jobs, choose a payment method, review and submit requests, then check order status; staff can log in to manage orders. The React app contains these workflows, while the Express server handles order APIs, uploads, and authentication, persisting orders in MongoDB. The excerpts show the frontend’s API calls and backend persistence, but omit some request-submission code and most admin UI, so those details are not expanded.

Main entry points: [`server/server.js`](https://github.com/isiahchoi2/group-work/blob/main/server/server.js) (Order API), [`client/src/App.jsx`](https://github.com/isiahchoi2/group-work/blob/main/client/src/App.jsx) (Admin tools), [`client/src/main.jsx`](https://github.com/isiahchoi2/group-work/blob/main/client/src/main.jsx) (React entry), [`server/Order.js`](https://github.com/isiahchoi2/group-work/blob/main/server/Order.js) (Order model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Customer and staff app"]
  node_app_entry["React entry<br/>[main.jsx]"]
  node_print_request["Print request<br/>[App.jsx]"]
  node_payment_review["Payment and review<br/>[App.jsx]"]
  node_order_status["Order status<br/>[App.jsx]"]
  node_admin_tools["Admin tools<br/>[App.jsx]"]
end

subgraph group_backend["Order service"]
  node_order_api["Order API<br/>[server.js]"]
  node_admin_auth["Admin authentication<br/>[server.js]"]
end

subgraph group_storage["Persistence and files"]
  node_order_model[("Order model<br/>[Order.js]")]
  node_mongodb[("MongoDB")]
  node_uploaded_files[("Uploaded files<br/>[server.js]")]
  node_qr_assets["QR payment assets"]
end

node_customer(("Customer"))
node_staff(("Shop staff"))

node_app_entry -->|"renders"| node_print_request
node_customer -.->|"configures"| node_print_request
node_print_request -.->|"continues to"| node_payment_review
node_customer -.->|"checks"| node_order_status
node_staff -.->|"manages"| node_admin_tools
node_order_status -->|"fetches orders"| node_order_api
node_admin_tools -->|"updates orders"| node_order_api
node_admin_tools -->|"requests login"| node_admin_auth
node_payment_review -->|"displays QR"| node_qr_assets
node_order_api -->|"reads and writes"| node_mongodb
node_order_api -->|"stores uploads"| node_uploaded_files
node_order_model -.-> node_mongodb

click node_app_entry "https://github.com/isiahchoi2/group-work/blob/main/client/src/main.jsx"
click node_print_request "https://github.com/isiahchoi2/group-work/blob/main/client/src/App.jsx"
click node_payment_review "https://github.com/isiahchoi2/group-work/blob/main/client/src/App.jsx"
click node_order_status "https://github.com/isiahchoi2/group-work/blob/main/client/src/App.jsx"
click node_admin_tools "https://github.com/isiahchoi2/group-work/blob/main/client/src/App.jsx"
click node_order_api "https://github.com/isiahchoi2/group-work/blob/main/server/server.js"
click node_admin_auth "https://github.com/isiahchoi2/group-work/blob/main/server/server.js"
click node_order_model "https://github.com/isiahchoi2/group-work/blob/main/server/Order.js"
click node_uploaded_files "https://github.com/isiahchoi2/group-work/blob/main/server/server.js"
click node_qr_assets "https://github.com/isiahchoi2/group-work/tree/main/client/public"

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_entry,node_print_request,node_payment_review,node_order_status,node_admin_tools toneBlue
class node_order_api,node_admin_auth toneAmber
class node_order_model,node_mongodb,node_uploaded_files,node_qr_assets toneMint
class node_customer,node_staff toneIndigo
```

## Components

### Customer and staff app

- [React entry](https://github.com/isiahchoi2/group-work/blob/main/client/src/main.jsx): `client/src/main.jsx`
- [Print request](https://github.com/isiahchoi2/group-work/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Payment and review](https://github.com/isiahchoi2/group-work/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Order status](https://github.com/isiahchoi2/group-work/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Admin tools](https://github.com/isiahchoi2/group-work/blob/main/client/src/App.jsx): `client/src/App.jsx`

### Order service

- [Order API](https://github.com/isiahchoi2/group-work/blob/main/server/server.js): `server/server.js`
- [Admin authentication](https://github.com/isiahchoi2/group-work/blob/main/server/server.js): `server/server.js`

### Persistence and files

- [Order model](https://github.com/isiahchoi2/group-work/blob/main/server/Order.js): `server/Order.js`
- **MongoDB**
- [Uploaded files](https://github.com/isiahchoi2/group-work/blob/main/server/server.js): `server/server.js`
- [QR payment assets](https://github.com/isiahchoi2/group-work/tree/main/client/public): `client/public`

### Other components

- **Customer**
- **Shop staff**

## Connections

- React entry → Print request: renders (evidence: `client/src/main.jsx`)
- Customer → Print request: configures
- Print request → Payment and review: continues to (evidence: `client/src/App.jsx`)
- Customer → Order status: checks
- Shop staff → Admin tools: manages
- Order status → Order API: fetches orders (evidence: `client/src/App.jsx`)
- Admin tools → Order API: updates orders (evidence: `client/src/App.jsx`)
- Admin tools → Admin authentication: requests login (evidence: `client/src/App.jsx`)
- Payment and review → QR payment assets: displays QR (evidence: `client/src/App.jsx`)
- Order API → MongoDB: reads and writes (evidence: `server/server.js`)
- Order API → Uploaded files: stores uploads (evidence: `server/server.js`)
- Order model → MongoDB