lvl0/buckets
1
0
Fork 0
Code Issues 31 Pull requests Projects Releases Packages Wiki Activity Actions
buckets/frontend/README.md

1.4 KiB
Raw Permalink Blame History

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