RealWorld full-stack build

Goal

Build Conduit — the RealWorld spec's Medium clone — as a complete product: backend and frontend, authenticated, tested, deployed. RealWorld is the anti-TodoMVC: big enough that every full-stack decision (auth, data modeling, state, testing, delivery) appears for real, small enough to finish. This is the capstone of the full-stack path: nothing new is taught here; everything already learned must hold hands and work.

Subject: full brief & instructions

Practices

• Hexagonal architecture — the API is a domain core with HTTP and Postgres at the ports.
• API design — implementing someone else's REST contract exactly, pagination and error semantics included.
• Authentication & authorization — JWT issuance and verification, password storage, per-resource authorization.
• Component architecture & state management — server cache, client state, URL state, and forms, each in its right home.
• Frontend testing — the trophy built for real: component tests with MSW, money-path E2E, axe clean.
• Rendering strategies & meta-frameworks — the CSR-to-meta-framework migration, measured before and after.
• CI/CD & delivery engineering — the pipeline that gates and ships every milestone.

Milestones

1. The API, hexagonally. Implement the RealWorld backend spec (users, auth, profiles, articles, comments, favorites, tags) with a pure domain core, ports for persistence and identity, HTTP and Postgres adapters at the edges. TDD the domain; the published API test collection passes against your endpoint.
2. The frontend, disciplined. The Conduit UI as a typed SPA: query cache for all server state, URL for filters/pagination, forms via a form library, styling on semantic tokens. No hand-rolled isLoading flags, no state stored twice.
3. The quality pass. Trophy-shaped test suite — component/integration tests with MSW, Playwright on the money paths (signup → publish → comment), axe clean on every page, a Core Web Vitals budget measured and met. CI runs all of it on every push.
4. The rendering migration. Move the SPA to a meta-framework (SSR or hybrid); the feed renders server-side, auth-gated pages choose their strategy deliberately. Measure TTFB/LCP/INP before and after and write the honest comparison.
5. Ship it. Containerized deploy of API + frontend + Postgres behind TLS with structured logs, request tracing, and an uptime check; a tagged release deploys from CI alone.

Stretch goals

• Realtime: live comment updates over WebSockets/SSE, per WebSockets & bidirectional protocols.
• Feature flags + a canary deploy of a risky change, per CI/CD & delivery engineering.
• A load test against the feed endpoint; find and fix the first bottleneck, per performance engineering.
• Re-implement the API in a second language (Go or Java) against the same test collection — the spec is the contract; the swap proves it.

Related

• RealWorld full-stack build — subject — the work statement with acceptance checks per milestone.
• Component architecture & state management, Frontend testing, Rendering strategies & meta-frameworks — the concept notes whose # Practice cite this build.
• Birthday Greetings — hexagonal extraction — the kata-scale rehearsal of milestone 1's architecture.
• Design system from scratch — its tokens and components slot straight into milestone 2.