Tech Stack Fundamentals
Verified Sep 10, 2026
The big picture — click a layer to jump to it
- Three unchanging jobs, one per layer above — ask, decide, store.
- Formally a three-tier architecture: each tier independently replaceable, talking only over defined protocols.
- Most real bugs live at the seams between tiers, not inside one — the live run further down makes that visible.
01 · ASK
Browser
Like telling a waiter what you want: sends the request, then renders whatever comes back.
Real-world tools
React, Vue, Svelte — runs entirely in the visitor's browser.
When to use what
Validate input here for instant feedback — but never only here. A browser can always be bypassed; nothing it says is trustworthy on its own.
02 · DECIDE
Server
Like the waiter deciding what to do with your order and passing it to the kitchen.
Real-world tools
Node/Express, Django, Rails, Spring — runs on a server you control.
When to use what
Same query running over and over? Add a cache here, in front of the database. Task doesn't need to finish before responding? Hand it to a background job/queue instead of making the request wait. Server needs to tell the client something without being asked? WebSockets, not repeated polling.
Under the hood — scaling
Stateless → any copy can answer any request, so a load balancer can spread traffic across many identical ones. "Routing" is matching a path to a handler, not magic — watch it happen in the live run below.
Where AI fits in
An LLM call is just another outbound request — same job (decide), one more thing the server waits on. An agent loop adds steps here, not new jobs — see Agentic Engineering.
Cache in action — try it
The same query, run twice for real — not staged. The second run's trace never mentions the database at all.
Response now, work later — try it
"Doesn't need to finish before responding" isn't hand-waving — the response line below appears immediately, then the job keeps going on its own.
Polling vs. WebSocket — try both
The server needs to tell the client something without being asked. Run both and count who's doing the talking.
03 · STORE
Database
Like the kitchen — has the real ingredients, does the real work.
Real-world tools
PostgreSQL, MySQL, MongoDB — where the real data actually lives.
Under the hood
Holds the one real copy, so it scales differently than the server (replication, sharding) — not just "add more copies."
Where AI fits in
A vector database is still "store" — a specialized tier for embeddings instead of rows, same job as here.
SQL — when records relate
- Fixed schema, rows & columns
- Records relate to each other (orders → customers)
- Postgres, MySQL, SQLite
NoSQL — when records stand alone
- Flexible schema, documents
- Each record stands alone, scales wide
- MongoDB, DynamoDB, Redis
See it happen — live
Rendered page
Click Go or pick an example above.
Network
Relative speed — illustrative order, not measured
Bar lengths show order, not real timings — the point is a cache hit skips the one hop that actually costs something, not the exact numbers.
Common misconceptions
- "The frontend talks to the database directly." Real stacks don't — the backend guards it.
- "An error means the frontend is broken." Try user 99 above: the 404 starts at the database.
- "More layers means worse." It's what lets a stack change one piece at a time.
Architectural patterns — same 3 jobs, organized differently
A named stack is which tools you picked. A pattern is how the pieces are organized and run — any stack above could be built any of these four ways.
ELI5:
One request, this way:
Best for:
Tradeoff:
Compare real stacks
Popular stack combos
| Stack | ▣ Frontend | ▤ Backend | ▦ Database |
|---|---|---|---|
| MERN | React | Node/Express | MongoDB |
| Django stack | React | Django | PostgreSQL |
| Rails stack | Hotwire | Ruby on Rails | PostgreSQL |
| Java enterprise | Angular | Spring | MySQL |
| Serverless / JAMstack | Next.js/Astro (static) | Serverless functions | Supabase/PlanetScale |
What each part offers, and why you'd swap it
▣ Frontend
▤ Backend
▦ Database
One request, this combo:
Best for:
Swap out when: