38 lines
1.4 KiB
Markdown
38 lines
1.4 KiB
Markdown
# 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
|