---
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)