Files
project-manager/web/README.md
T
aneurinandClaude Sonnet 5 bc1142b929 Add stage 4: frontend lists view + enforce 100-list cap
API: GET /api/lists is now ordered alphabetically (COLLATE NOCASE) by title
with no other option, and TodoListController rejects a create past 100 lists
per owner with 409. New TodoListRepository::countForOwner.

Frontend: HomeView replaces the placeholder with the user's lists (rendered in
API order) and a create form (title + optional description). New Pinia lists
store fetches and creates, re-fetching after a create so the new list sorts
into place; it is reset on logout. Form disables and explains at 100 lists;
create errors surface inline. Neutral .badge with a .badge--warn variant;
dropped the unused .facts styles.

Tests: alphabetical ordering and the 100-list cap. Suite: 17 passing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-03 18:42:15 +01:00

57 lines
1.8 KiB
Markdown

# Todo List — web
Vue 3 + TypeScript + Vite PWA. Talks to the REST API in the parent directory.
## Develop on the host
```bash
npm install
npm run dev # http://localhost:5173
```
The dev server proxies `/api` to `http://localhost:8080` (the Dockerised API —
run `docker compose up -d` in the parent directory first). Override the target
with `VITE_PROXY_TARGET`, or point the app at a different API entirely with
`VITE_API_BASE_URL` (see [.env.example](.env.example)).
## Develop in Docker
From the parent directory:
```bash
docker compose --profile frontend up -d
```
Runs this dev server alongside the API. `/api` is proxied to the `app` container.
After changing `package.json`, rebuild: `docker compose build web`.
## Build
```bash
npm run build # type-checks, then emits dist/
npm run preview
```
## Layout
```
src/main.ts App bootstrap; resolves the stored session before mount
src/router/index.ts Routes + guard (redirects to /login when unauthenticated)
src/stores/auth.ts Pinia store: token in localStorage, register/login/fetchMe
src/stores/lists.ts Pinia store: the user's lists (fetch + create)
src/lib/api.ts fetch wrapper, bearer token, typed ApiError
src/views/ HomeView (lists + create form), LoginView, RegisterView
```
## Auth flow
- The token from `POST /api/auth/register` or `/login` is kept in `localStorage`
and sent as `Authorization: Bearer …`.
- On load, `fetchMe()` validates the stored token via `GET /api/me`; a failure
clears it.
- Routes with `meta.requiresAuth` redirect to `/login` (preserving the intended
path) when there is no authenticated user.
- Registration signs the user in immediately; the new account's email is
unverified (`user.email_verified === false`), surfaced in the header and on the
home page.