Full-Stack Architecture

Click a layer to see PM discussion points. Hover for details.

🌐

User / Browser Layer

What the user sees

Components

  • Browser window
  • Mobile app
  • User interface

Technologies

  • HTML
  • CSS
  • JavaScript

Example

User clicks "Add to Cart"

PM Discussion Points

  • What devices and browsers must we support?
  • What are the accessibility (a11y) requirements?
  • What is the acceptable page load time?
  • How do we measure user engagement and conversion?
HTTP Request
Rendered HTML/JS
⚙

Frontend Layer

Client-side application

Components

  • React / Vue / Angular
  • State management
  • Client-side routing

Technologies

  • TypeScript
  • React
  • Webpack / Vite

Example

Frontend validates input, updates UI, sends API request

PM Discussion Points

  • Which framework best fits our team's skills and timeline?
  • What is our state management strategy?
  • How do we handle offline capabilities?
  • What is our testing strategy (unit, integration, E2E)?
API Request (JSON)
API Response (JSON)
🖥

Backend Layer

Server-side processing

Components

  • API server
  • Business logic
  • Authentication

Technologies

  • Python / Node.js
  • REST API
  • JWT / OAuth

Example

Backend validates, checks inventory, processes payment

PM Discussion Points

  • What are our API rate limits and SLA targets?
  • How do we handle authentication and authorization?
  • What is our scaling strategy (horizontal vs. vertical)?
  • How do we version our APIs?
SQL Query / Write
Query Result Set
💾

Database Layer

Data persistence

Components

  • Relational DB
  • Cache layer
  • File storage

Technologies

  • PostgreSQL
  • Redis
  • Amazon S3

Example

Database records order, updates inventory count

PM Discussion Points

  • What are our data retention and backup policies?
  • How do we handle data migration and schema changes?
  • What is our caching strategy for performance?
  • How do we ensure data privacy and compliance (GDPR)?