# Buckets — Frontend

Standalone React SPA for the Buckets budgeting app. Talks to the Symfony +
API Platform backend over a cookie-session API (`/api`).

## Stack

- Vite + React + TypeScript (strict)
- Tailwind 4 (`@tailwindcss/vite`) — dark-only "80s terminal" theme
- oxlint (lint) + Prettier (format)

## Development

The frontend runs as the `frontend` service in the project's compose stack
(podman-compose, dev-only — defined in `compose.override.yaml`). Bring the stack
up from the repo root (`dev-up`) and the Vite dev server is published on
**http://localhost:5173**.

The dev server proxies `/api` to the backend container (`http://php:80`) so the
session cookie flows same-origin — no CORS in dev.

Run commands inside the container:

```
podman exec buckets-budget_frontend_1 npm run build         # tsc -b && vite build
podman exec buckets-budget_frontend_1 npm run lint          # oxlint
podman exec buckets-budget_frontend_1 npm run format        # prettier --write
podman exec buckets-budget_frontend_1 npm run format:check  # prettier --check
```

## Structure

- `src/theme.css` — Tailwind import + the 80s terminal theme (OKLCH tokens, glow,
  7-segment font)
- `src/components/ui/` — shared primitives (Button, Panel, DigitalProgressBar)
- `src/components/layout/` — the app shell (AppLayout)
- `src/lib/api.ts` — cookie-session API client (get/post/patch/delete, JSON-LD)
- `src/types/api.ts` — Hydra/JSON-LD envelope types