# 18 — Web Platform: Every Mode, One Next.js App

**UI project 5 of 5** · `app/web-platform`
**Stack:** Next.js App Router, TypeScript, Tailwind, TanStack Query, buf-generated protobuf clients, Playwright, vitest

> **Where this sits.** The breadth artifact. One application rendering every
> product mode in the platform, compiled against the *same protobuf contracts
> the backend serves* — which is the part a systems interviewer cares about.

---

## The surface

```
app/
  array/  billboard/  boxoffice/  dating/  globalchat/  mating/
  openhouse/  storefront/  bizz/  vitals/  identity/  login/  auth/
  billing/  dashboard/  blog/  careers/  press/  faq/  legal/  privacy/  promo/
  components/  config/  db/  destinations/  footer.tsx  layout.tsx
```

Plus `e2e/` (Playwright), `gen/` (generated clients), `buf.gen.yaml`,
`vitest.config.ts`, and `playwright.config.ts`.

## Why it matters beyond "it's a frontend"

### One schema, three languages
`buf.gen.yaml` generates TypeScript clients from the **same 24 `.proto` files**
in [`app/proto`](09-auth-identity-platform.md) that generate the Go servers and
the Swift gateways. The web tier cannot drift from the contract, because it
does not hand-write the contract.

That is the concrete answer to *"how do you keep clients and servers in sync
across three platforms?"* — and it is already built, not aspirational.

### Real end-to-end tests
Playwright specs plus vitest units, wired into CI. The Solomon web client's e2e
run is **live with no mocks** — it talks to the actual inference service.

### It is where the internal tools live
The [BoxOffice moderator console](15-boxoffice-and-moderator-console.md) is a
route in this app, nested under support so it inherits identity bootstrap and
the query client while overriding the shell. That nesting decision — inherit
the plumbing, replace the chrome — is the reusable pattern.

### Bring-up is documented
`WEB_PLATFORM_BRINGUP.md` is a runbook: dependency map, what is already fixed
in code, a fast path (point at production) versus a local path (the docker
stack), a production deployment checklist, verification steps, and
troubleshooting. Someone else can start this app without asking you.

## Interview surface this opens

- Schema-first development across a polyglot client fleet
- Next.js App Router data flow and where server/client boundaries belong
- Running Playwright against a live service instead of mocks — what it buys and what it costs
- Route nesting to inherit auth/query plumbing while replacing layout