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#
| Property | Value |
|---|---|
| Phases | 4 |
| Tier | Free |
| Typical Duration | 1-2 weeks |
| Best For | Pre-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:
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:
Architecture Decision Record (ADR) Template:
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:
API Design:
API Response Format:
Starting the Workflow#
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#
- Document decisions - Use ADRs to record why, not just what
- Start simple - You can always add complexity later
- Optimize for change - Requirements will evolve
- Consider ops burden - Choose managed services early on
- Plan for observability - Build in logging, metrics, tracing
- 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