Product Engineering
How do you build what the maps describe?
WORKFLOW → QUALITY → STACK
│ │ │
▼ ▼ ▼
Process Gates Tools
Flow Maps Tests Next.js
Types Perf React
Product engineering bridges pictures to products. Jobs to be done tells you WHAT to build. Design tells you what it LOOKS like. Engineering tells you HOW — from maps to running code.
Development Workflow
How you work. Process that compounds.
| Method | Question | What It Produces |
|---|---|---|
| Flow Engineering | How do pictures become products? | Five maps from outcome to orchestration |
| Type-First Development | How does the compiler guide the build? | Domain-first, layer-by-layer constraint satisfaction |
The chain: Flow maps produce domain contracts. Types encode those contracts. Tests prove the types. Generators scaffold the implementation. Each entity commissioned improves the generator for the next.
Best Practices
What you ensure. Quality gates that prevent rework.
| Gate | What It Catches |
|---|---|
| Performance | Core Web Vitals, bundle size, render blocking |
| Anti-Patterns | Architecture violations, barrel blowouts, config drift |
| Security | OWASP Top 10, auth, input validation |
| Memory | Leaks, hydration costs, DOM size |
| Costs | Serverless invocations, bandwidth, edge |
| Testing | Layer model, selection rules, hexagonal testing advantage |
| Mastery Roadmap | The critical path from RSCs to production |
Stack Reference
What you build with. Framework-specific patterns.
| Area | Covers |
|---|---|
| AI Coding | Claude, Cursor, V0 — precision prompting, context control |
| App Router | Layout, rendering, streaming, SEO |
| Server & Services | Middleware, durable functions, DTOs, email, CMS, GraphQL |
| State Management | React Query, Zustand, data fetching |
| Forms | TanStack Form, validation patterns |
| UI Components | TailwindCSS, shadcn, headless patterns |
| Mobile | React Native cross-platform |
| Onchain | Web3 notifications, data indexers |
Dig Deeper
- Best Practices — Performance, security, testing, anti-patterns — the gates that prevent rework
- App Router — Layout, rendering, streaming, hydration, SEO
- Server & Services — Middleware, durable functions, DTOs, email, CMS, GraphQL
- State Management — React Query, Zustand, data fetching, component communication
- Forms — Form libraries, validation, TanStack Form patterns
- UI Components — Hooks, feature components, shadcn, browser APIs
- Design Systems — Tailwind CSS v4 monorepo architecture
- Mobile — React Native cross-platform
- Onchain — Web3 notifications, data indexers, dApp kits
Context
- Pictures — Maps that make thinking visible
- Products — Great products deliver great outcomes
- Jobs To Be Done — What to build
- Product Design — Design checklists with pass/fail thresholds
- AI Products — What changes when your product thinks
- Software — SaaS to VSaaS to RaaS
- Platform Engineering — Infrastructure beneath the product
- Software Architecture — Architectural patterns
Questions
How do you know your engineering process is compounding rather than accumulating?
- What separates a quality gate that prevents rework from a gate that slows delivery?
- When should you reach for a framework pattern versus building a custom solution?
- How do you measure whether type-first development actually reduces bugs in production?