94933cac5c
Documents the shift planning and closure/payroll modules (new tables, routes, stores), the dark redesign, and the docker-compose-broken-host workaround. Adds CLAUDE.md pointing agents at docs/. Translates README to English and keeps host-specific infrastructure details out of the repo.
55 lines
2.2 KiB
Markdown
55 lines
2.2 KiB
Markdown
---
|
|
type: Architecture Overview
|
|
title: System overview
|
|
description: How the EatMe frontend, backend, and database fit together.
|
|
tags: [architecture, backend, frontend]
|
|
timestamp: 2026-08-16T00:00:00Z
|
|
---
|
|
|
|
# System overview
|
|
|
|
EatMe is a small monorepo with two independently-runnable apps that ship as
|
|
one Docker image in production.
|
|
|
|
- **`backend/`** — Express + TypeScript API, SQLite via `better-sqlite3`
|
|
(entry point `backend/src/index.ts`). Owns all state: employee whitelist,
|
|
attendance events, shift planning, pay rates, month closures, and
|
|
payroll. Jest tests (`backend/src/services/*.test.ts`) cover the
|
|
service-layer workflows.
|
|
- **`frontend/`** — Vite + React + TypeScript PWA (entry point
|
|
`frontend/src/App.tsx`). Talks to the backend only over `/api/*`; in dev,
|
|
Vite proxies that path to `http://localhost:4000` (see
|
|
`frontend/vite.config.ts`).
|
|
|
|
## Request flow
|
|
|
|
1. Employee/admin signs in with Google Identity Services in the browser
|
|
(ID-token flow, no server-side OAuth redirect) — see
|
|
[Auth flow](./auth-flow.md).
|
|
2. The frontend POSTs the Google ID token to `POST /api/auth/google`; the
|
|
backend verifies it, issues its own JWT session cookie, and from then on
|
|
every `/api/*` call rides on that cookie (`credentials: 'include'` in
|
|
`frontend/src/api/client.ts`).
|
|
3. All app logic (fetching, polling, derived state) lives in Zustand stores
|
|
under `frontend/src/store/` — see [Frontend](/docs/frontend/index.md).
|
|
Components are thin consumers of store selectors/actions.
|
|
4. In production the backend also serves the built frontend as static files
|
|
(`dist/public/`, see [Deployment](./deployment.md)) — one process, one
|
|
container, one origin.
|
|
|
|
## Design language
|
|
|
|
Dark, sharp-edged (no border-radius) UI with a single warm amber accent
|
|
used sparingly (active tab, "this is mine" states) — not the colored
|
|
left/right accent-border pattern common in AI-generated designs. Started
|
|
as a light monochrome TUI style and was deliberately redesigned dark on
|
|
2026-08-16; see [Design system](/docs/frontend/design-system.md). All
|
|
tokens/component classes live in `frontend/src/styles/theme.css`.
|
|
|
|
## Related
|
|
|
|
- [Auth flow](./auth-flow.md)
|
|
- [Deployment](./deployment.md)
|
|
- [Data model](/docs/data-model/index.md)
|
|
- [API](/docs/api/index.md)
|