Frontend EngineerAdvanced8 modules~4.0 hours hands-on3 learning modes
Production Frontend Capstone
Build Pulseboard, a secure customer-feedback SaaS that carries architecture, accessibility, testing, performance, and delivery practices into one production-ready Next.js application.
// What you'll be able to do- Architecture, environment contracts, and threat modeling
- Reproducible migrations, seed data, and database-enforced authorization
- Cookie sessions, protected routes, and a server-rendered feedback inbox
- Validated mutations, optimistic feedback, concurrency safety, and an audit trail
8 modules, built to run
Every module ships runnable code. Expand any one to see what's inside.
00IntroductionThe production problem and the Pulseboard end state30 min
Questions this module answers
- How can you recognize the cross-cutting risks a production frontend must control?
- How do you choose a learning path for the capstone?
Start moduleFree preview
01Production BoundariesArchitecture, environment contracts, and threat modeling30 min
Questions this module answers
- How do you create an exact-version Next.js App Router foundation?
- How do you enforce environment and dependency rules with executable checks?
02Data Ownership and Row-Level SecurityReproducible migrations, seed data, and database-enforced authorization30 min
Questions this module answers
- How do you model workspaces, memberships, profiles, and feedback with explicit ownership?
- How do you enforce tenant isolation with RLS policies and explicit grants?
03Authenticated Dashboard WorkflowCookie sessions, protected routes, and a server-rendered feedback inbox30 min
Questions this module answers
- How do you implement current Supabase SSR cookie clients for Next.js 16?
- How do you refresh and verify sessions with root `proxy.ts` and `getClaims()`?
04Accessible Feedback WorkflowsValidated mutations, optimistic feedback, concurrency safety, and an audit trail30 min
Questions this module answers
- How do you implement authenticated Server Actions without trusting browser identity?
- How do you make concurrent retries idempotent and retain an audit trail?
05Transactional Email and WebhooksSend retry-safe notifications and verify provider events30 min
Questions this module answers
- How do you render injection-safe transactional HTML?
- How do you send through Resend with stable idempotency keys?
06Testing the Production ContractUnit, component, browser, accessibility, performance, and CI evidence30 min
Questions this module answers
- How do you test pure logic and interactive accessibility with Vitest and Testing Library?
- How do you run deterministic production gates in GitHub Actions?
07Pattern SynthesisSee it run: deploy, observe, and recover Pulseboard30 min
Questions this module answers
- How do you promote GitHub commits through Vercel preview and production environments?
- How do you deploy Supabase migrations deliberately with separated configuration?
Ready to start Production Frontend Capstone?
Start with the free Module 0, then unlock the full course on a Pro plan.