Files
eatme/docs/architecture/overview.md
Michal Pemcak 94933cac5c Update OKF docs bundle, README, and CLAUDE.md for today's features
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.
2026-08-16 18:41:11 +02:00

2.2 KiB

type, title, description, tags, timestamp
type title description tags timestamp
Architecture Overview System overview How the EatMe frontend, backend, and database fit together.
architecture
backend
frontend
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.
  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. 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) — 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. All tokens/component classes live in frontend/src/styles/theme.css.