See How Real Systems Fit Together
Pick an architecture, click any node, and read what it owns and why it's there. No static images — every diagram is interactive.
A client talks to an API, which reads and writes a database. A CDN serves static assets fast and a cache absorbs hot reads. Boring on purpose — and exactly what most products need.
Client
Where users actually see the app. Renders UI, handles input, and talks to the API over HTTPS.
- Render UI and respond to input
- Manage local + server state
- Send authenticated requests
Common variations
How this base architecture changes for different needs.
Add read replicas
Route read-heavy traffic to replicas while the primary handles writes — cheap horizontal scaling for read-dominant workloads.
Add a CDN page cache
Cache full HTML responses at the edge for anonymous traffic. Adds complexity around invalidation but cuts API load dramatically.
All architectures
Quick reference — what each pattern is good for.
Classic Web App
The shape almost every web product starts with.
A client talks to an API, which reads and writes a database. A CDN serves static assets fast and a cache absorbs hot reads. Boring on purpose — and exactly what most products need.
ClientCDN / EdgeAPI LayerCacheDatabaseAI Application
Web app + LLM provider + retrieval pipeline.
An AI app is a normal web app with two extra concerns: calls to an LLM provider, and a retrieval layer that grounds those calls in your own data.
ClientAPI LayerRetrievalLLM ProviderVector StoreDatabaseReal-Time App
Persistent connections, presence, and fan-out.
Real-time apps keep a long-lived connection (WebSocket or SSE) open to clients. A pub/sub broker fans out messages so any server instance can deliver to any connected client.
ClientWebSocket ServerPub/Sub BrokerAPI / WorkersDatabaseBackground Jobs
Move slow work out of the request path.
Anything that takes longer than a request should live in the background. The API enqueues work, workers consume it, and results land back in the database for the API to read.
ClientAPI LayerQueueWorkerDatabaseObject Storage
From diagram to code
Each architecture pairs with a folder structure. Open the structure explorer to see how these layers map to actual files.