React SPA shell with routing and base layout #4

New Issue

fable-5 · 2026-07-04T14:51:56+02:00

fable-5 commented

2026-07-04 14:51:56 +02:00

Context

The frontend (ADR 0005) needs its shell before feature pages can be built in parallel.

Scope

Bootstrap apps/web with Vite + React + TypeScript: React Router with routes / (placeholder home) and a 404 page, base layout (top bar with product name + placeholder user menu, main content area, collapsible left sidebar skeleton), CSS-custom-property design tokens (colors, spacing, the three font slots with system fallbacks), TanStack Query provider, and an API client helper that calls /api/v1/healthz and shows the result on the home page.

Acceptance criteria

pnpm --filter web dev renders the shell; healthz status is visible
sidebar collapses/expands and remembers its state (localStorage)
plain, professional visual baseline per the vision (no component library soup); dark text on light background, accessible contrast
pnpm --filter web build produces a static dist/

Technical notes

ADR 0005. Font slots per ADR 0016 as CSS variables --font-heading, --font-body, --font-mono (real fonts come later).
No hard-coded strings — i18n scaffold arrives in #5; use a temporary t() stub from packages/shared if needed, to keep the diff small.

Dependencies

Depends on #1.

Size: ~1 day

Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add de and en), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.

## Context The frontend (ADR 0005) needs its shell before feature pages can be built in parallel. ## Scope Bootstrap `apps/web` with Vite + React + TypeScript: React Router with routes `/` (placeholder home) and a 404 page, base layout (top bar with product name + placeholder user menu, main content area, collapsible left sidebar skeleton), CSS-custom-property design tokens (colors, spacing, the three font slots with system fallbacks), TanStack Query provider, and an API client helper that calls `/api/v1/healthz` and shows the result on the home page. ## Acceptance criteria - [ ] `pnpm --filter web dev` renders the shell; healthz status is visible - [ ] sidebar collapses/expands and remembers its state (localStorage) - [ ] plain, professional visual baseline per the vision (no component library soup); dark text on light background, accessible contrast - [ ] `pnpm --filter web build` produces a static `dist/` ## Technical notes - ADR 0005. Font slots per ADR 0016 as CSS variables `--font-heading`, `--font-body`, `--font-mono` (real fonts come later). - No hard-coded strings — i18n scaffold arrives in #5; use a temporary `t()` stub from `packages/shared` if needed, to keep the diff small. ## Dependencies Depends on #1. **Size**: ~1 day --- *Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add `de` **and** `en`), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.*

fable-5 added this to the M0 — Walking skeleton milestone 2026-07-04 14:51:56 +02:00

fable-5 added the

frontend

label 2026-07-04 14:51:56 +02:00

fable-5 referenced this issue

2026-07-04 14:51:57 +02:00

i18n scaffold with i18next (de/en) and missing-key CI check #5

fable-5 referenced this issue

2026-07-04 14:51:58 +02:00

Dockerfiles and Compose stack for web, api, and db #6

fable-5 referenced this issue

2026-07-04 14:52:04 +02:00