Technical Architecture Workflow

Guide to designing your technical architecture including tech stack selection, system design, database schema, and API design

The Technical Architecture workflow helps you design a robust, scalable technical foundation for your product before writing code.

Overview#

PropertyValue
Phases4
TierFree
Typical Duration1-2 weeks
Best ForPre-development planning, technical decisions, team alignment

Why Architecture Matters#

Good architecture:

  • Reduces technical debt - Thoughtful decisions now prevent costly rewrites later
  • Enables velocity - The right foundations make building faster
  • Improves quality - Proper separation of concerns leads to maintainable code
  • Supports scaling - Plan for growth without over-engineering

Architecture Decision Framework#

┌─────────────────────────────────────────────────────────────────────────┐ │ ARCHITECTURE DECISION FLOW │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Requirements│───▶│ Options │───▶│ Decision │ │ │ │ Analysis │ │ Evaluation │ │ & Record │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ Questions: Criteria: Output: │ │ - What scale? - Team skills - ADR document │ │ - What budget? - Time to market - Tech stack │ │ - What team? - Scalability - System diagram │ │ - What timeline? - Cost - Implementation plan │ │ - Ecosystem │ │ │ └─────────────────────────────────────────────────────────────────────────┘

Phases#

Phase 1: Requirements Analysis (2-3 days)#

Agents: architecture-expert, business-analyst

Understand the technical requirements before making decisions.

Tasks:

  • Gather functional requirements
  • Identify non-functional requirements
  • Assess team capabilities
  • Define constraints and trade-offs
  • Document assumptions

Requirements Gathering Template:

Loading code block...

Phase 2: Tech Stack Selection (2-3 days)#

Agents: architecture-expert, backend-expert, frontend-expert

Choose technologies that match your requirements and team.

Tasks:

  • Evaluate framework options
  • Select database technology
  • Choose hosting platform
  • Select supporting services
  • Document decisions (ADRs)

Tech Stack Decision Matrix:

Loading code block...

Architecture Decision Record (ADR) Template:

Loading code block...

Phase 3: System Design (3-5 days)#

Agents: architecture-expert, backend-expert

Design the system architecture and component interactions.

Tasks:

  • Create system architecture diagram
  • Define service boundaries
  • Design data flow
  • Plan API structure
  • Document integration points

System Architecture Diagram:

┌─────────────────────────────────────────────────────────────────────────┐ │ SYSTEM ARCHITECTURE │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────────────────────┐ │ │ │ CLIENT LAYER │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │ Web App │ │ Mobile Web │ │ API │ │ │ │ │ │ (Next.js) │ │ (Responsive)│ │ Consumers │ │ │ │ │ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │ │ │ └─────────┼────────────────┼────────────────┼──────────────────────┘ │ │ │ │ │ │ │ └────────────────┼────────────────┘ │ │ │ │ │ ┌──────────────────────────▼───────────────────────────────────────┐ │ │ │ API LAYER (Vercel) │ │ │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ │ │ Next.js API Routes │ │ │ │ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ │ │ │ │ Auth │ │ Users │ │Projects │ │Webhooks │ │ │ │ │ │ │ │ Routes │ │ Routes │ │ Routes │ │ Routes │ │ │ │ │ │ │ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │ │ │ │ │ └───────┼────────────┼────────────┼────────────┼─────────────┘ │ │ │ └──────────┼────────────┼────────────┼────────────┼───────────────┘ │ │ │ │ │ │ │ │ ┌──────────▼────────────▼────────────▼────────────▼───────────────┐ │ │ │ SERVICE LAYER │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ Auth │ │ User │ │ Project │ │ Payment │ │ │ │ │ │ Service │ │ Service │ │ Service │ │ Service │ │ │ │ │ │ (JWT) │ │ │ │ │ │ (Stripe) │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ │ │ │ │ │ ┌──────────────────────────▼──────────────────────────────────────┐ │ │ │ DATA LAYER │ │ │ │ ┌──────────────────────┐ ┌──────────────────────┐ │ │ │ │ │ PostgreSQL │ │ Redis │ │ │ │ │ │ (Neon) │ │ (Upstash) │ │ │ │ │ │ - Users │ │ - Sessions │ │ │ │ │ │ - Projects │ │ - Cache │ │ │ │ │ │ - Activity │ │ - Rate limits │ │ │ │ │ └──────────────────────┘ └──────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────┐ │ │ │ EXTERNAL SERVICES │ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ │ │ Custom │ │ Stripe │ │ Resend │ │ Sentry │ │PostHog │ │ │ │ │ │ Auth │ │(Payment│ │(Email) │ │(Errors)│ │(Analyt)│ │ │ │ │ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────┘

Data Flow Diagram:

┌─────────────────────────────────────────────────────────────────────────┐ │ USER AUTHENTICATION FLOW │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ User Frontend API JWT Session Database │ │ │ │ │ │ │ │ │ │──Sign In────▶│ │ │ │ │ │ │ │──POST /auth/signin────────▶│ │ │ │ │ │ │ │──Verify─────▶│ │ │ │ │ │ │◀─────────────│ │ │ │ │◀──Session Token─────────────│ │ │ │ │◀──Redirect────│ │ │ │ │ │ │ │ │ │ │ │ │ │──Access Page─▶│ │ │ │ │ │ │ │──GET /api/user (w/ token)─▶│ │ │ │ │ │ │──Verify Token│ │ │ │ │ │ │◀─────────────│ │ │ │ │ │ │──Query User──────────────▶│ │ │ │ │ │◀──User Data─────────────────│ │ │ │ │◀──User Data──│ │ │ │ │ │◀──Render──────│ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────────────┘

Phase 4: Database & API Design (3-5 days)#

Agents: database-expert, api-expert

Design the data model and API contracts.

Tasks:

  • Design database schema
  • Define entity relationships
  • Design API endpoints
  • Document API contracts
  • Plan for data migrations

Database Schema Design:

Loading code block...

API Design:

Loading code block...

API Response Format:

Loading code block...

Starting the Workflow#

Loading code block...

Deliverables#

A successful Technical Architecture workflow produces:

  • Requirements analysis document
  • Tech stack decision matrix
  • Architecture Decision Records (ADRs)
  • System architecture diagram
  • Data flow diagrams
  • Database schema (Prisma)
  • API specification
  • Implementation roadmap

Best Practices#

  1. Document decisions - Use ADRs to record why, not just what
  2. Start simple - You can always add complexity later
  3. Optimize for change - Requirements will evolve
  4. Consider ops burden - Choose managed services early on
  5. Plan for observability - Build in logging, metrics, tracing
  6. Design for failure - Assume things will go wrong

Common Pitfalls#

  • Over-engineering for scale you don't have
  • Choosing unfamiliar tech without buffer time
  • Not documenting architectural decisions
  • Ignoring operational complexity
  • Designing in isolation without team input