# Clean Architecture Frontend Template

A React/Vite reference implementation where architecture boundaries,
integration behavior, release coherence, accessibility, performance, and
operations are executable contracts rather than conventions.

## Start locally

Requirements: Node 24 and Corepack. The repository pins pnpm in `package.json`.

```bash
corepack pnpm install --frozen-lockfile
corepack pnpm dev
```

Runtime-public settings live in `public/config.json` and are validated before
the product tree mounts. Client secrets are forbidden.

## Included starter experience

The default build mounts a domain-neutral application shell with a header,
responsive sidebar, route focus management, session integration status, and a
persistent `system` / `light` / `dark` theme selector.

| Route | Purpose |
| --- | --- |
| `/` | implementation readiness and starter links |
| `/examples/ui` | buttons, fields, cards, alerts, badges, modal, and tokens |
| `/examples/states` | loading, refresh, empty, error, auth, forbidden, and not-found states |
| `/examples/auth` | reactive external-auth integration seam |
| `/sample/resources` | protected, domain-neutral integration route |

`AUTH_MODE=demo` is credential-free and accepted only in local/development
environments. Deployments use `AUTH_MODE=external` and provide the opaque auth
owner described in
[`docs/architecture/starter-experience.md`](docs/architecture/starter-experience.md).
The client route policy is user experience only; server authorization remains
authoritative.

## Architecture

Dependencies point inward:

```text
presentation -> application -> domain
adapters -----^
bootstrap composes concrete adapters
contracts own cross-cutting registries
```

See `docs/architecture/overview.md`, `docs/architecture/layers.md`, and
`docs/architecture/starter-experience.md`. The removable sample slice is under
`src/sample/contract-fixture`; product code is not allowed to import it. The
visible starter routes do not depend on that fixture and continue to build
after it is removed.

## Verification

Common local checks:

```bash
corepack pnpm lint
corepack pnpm check:types
corepack pnpm check:architecture
corepack pnpm test:all
corepack pnpm test:e2e
corepack pnpm test:a11y
corepack pnpm build
corepack pnpm check:bundle
corepack pnpm test:performance
corepack pnpm verify:compatibility
corepack pnpm verify:release
corepack pnpm check:registries
corepack pnpm drill:runbooks
corepack pnpm check:ci
```

Install the pinned Playwright browser engines before the first cross-browser
run:

```bash
corepack pnpm exec playwright install --with-deps chromium firefox webkit
```

Two gates intentionally need external evidence:

- `review:a11y-manual` needs a signed human keyboard/focus/screen-reader review
  for all six registered routes.
- `collect:web-vitals-evidence` stays `FAIL_UNVERIFIED` until a reviewed minimum
  eligible-sample threshold and 28 days of production data exist.

Live release verification additionally requires `HOSTING_BASE_URL`.

## CI and evidence

The 26-gate registry is `config/ci/gates.json`; the Gitea workflow is
`.gitea/workflows/quality-gates.yml`. It follows:

```text
MERGE_READY -> RELEASE_READY -> PROD_PROMOTION_READY -> FIELD_SLO_READY
```

`DOCUMENTATION_READY` is independent. No gate is downgraded to a warning.
Machine-readable evidence is written below `artifacts/`; generated evidence is
ignored by Git while `.gitkeep` files preserve the taxonomy.

Operational details are in `docs/operations/`, with incident procedures in
`docs/runbooks/`.