project-manager/web

Todo List — web

Vue 3 + TypeScript + Vite PWA. Talks to the REST API in the parent directory.

Develop on the host

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

Develop in Docker

From the parent directory:

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

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/stores/items.ts     Pinia store: one list's items (CRUD + drag reorder)
src/lib/api.ts          fetch wrapper, bearer token, typed ApiError
src/components/TodoItemRow.vue  checkbox + editable text + delete, one item
src/views/              HomeView (lists), ListView (items), LoginView, RegisterView

List detail

/lists/:id shows one list's items. Each row is a checkbox, an inline-editable text field (saved on blur), a delete button, and a drag handle. Reordering uses vuedraggable; on drop the whole new order is persisted via PUT /api/lists/:id/items/order, and the server response replaces local state.

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.