Designs by Duhart All work
Rank
25 of 28
Tier
Tier C 51 of 120

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.

Every product mode, one Next.js appinteractive

Channels, presence, receipts, media.

  • # engineering3 unread · 2 typing
  • # opspresence: 7 online
  • Dana R.✓ acked 2m ago

compiled against globalchat.v1.ChannelService, generated by buf from the contract the backend serves

The breadth artifact, compiled against the same protobuf contracts the backend serves, so a contract change breaks the build rather than production. Switch modes above.

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