Residential District (Users · Frontend): Every car is one request from a browser or app. A single page can send many cars: one for the page and one for every picture on it.
Service Offices (Web server): A web server runs your code. It can only work on a few requests at once (worker threads); the rest wait in a queue, and an overflowing queue means errors like 503 Service Unavailable.
Record Shed (File storage): Storing data in a flat file works for a tiny site, but it has no locking, no index and no safety when many requests write at the same time.
Central Food Warehouse (Database): The database (MySQL, Postgres…) is the source of truth. It uses locks so simultaneous writes don't collide, transactions so changes are all-or-nothing, and indexes for fast lookup.
Depot (Read replica): A read replica copies the primary database and answers read-only queries. When one database can't hold everything, data is split into sections (shards) using a hash.
Neighbourhood Pantry (Cache · Redis): A cache keeps popular answers in fast memory. A hit is instant; a miss goes to the database and keeps a copy for next time.
Traffic Control Division (Load balancer · NGINX): A load balancer spreads requests over several identical servers, and health checks stop it sending traffic to servers that are down.
City Gate & Customs (API gateway): An API gateway handles authentication, rate limiting and routing for every app (website, iPhone, Android) using one shared API that speaks JSON.
Border Markets (CDN): A CDN stores copies of images, videos and scripts in many locations around the world, close to users.
Postal Sorting Office (Message queue): A message queue decouples services: the request is acknowledged right away and slow work (payments, emails) happens in the background, absorbing bursts.
Workshops (Background workers): Worker processes consume messages from a queue and do slow or risky work outside the request path.
Container Quarter (Microservices · Docker): Microservices split a big application into small independent services. Containers package each one so it runs the same everywhere; in Kubernetes they're called pods.
Resource Control Division (Autoscaler): An autoscaler adds servers when load is high and removes them when it drops, so you pay for capacity only when you need it (cloud computing).
City Council (Kubernetes): Kubernetes stores the desired state and runs control loops that make reality match it: restarting crashed pods, replacing failed machines and scaling services.
Satellite Towns (Edge servers): Edge computing runs code and caches in hundreds of cities so responses come from nearby. Distance is delay, even at the speed of light.
Oracle Institute (AI model · LLM): AI model calls are hundreds of times slower and costlier than a database lookup, so they need their own capacity planning, queues and limits.
City Wall (Firewall · WAF): A firewall only lets traffic in through approved doors. A WAF reads the content of each HTTP request and blocks known attack patterns such as SQL injection (' OR 1=1 --) and cross-site scripting (<script>).
Passport Office (Auth service): The auth service checks passwords against salted hashes (bcrypt, argon2), issues signed tokens (JWT) and verifies the signature on every request. It locks accounts after too many wrong guesses.
Watchtower (Intrusion detection): Intrusion and bot detection systems measure behaviour (requests per IP, failed logins, unusual paths) and flag outliers using statistics or machine learning, then feed firewall blocklists.
How web architecture evolved
1995, The Village: Byteville opens its first public office!
1999, The Town: Notice board chaos! Two trades scrambled into gibberish
2004, Traffic Control: Festival gridlock! Traffic Control Division founded
2007, Pantries & Markets: Warehouse trucks jam downtown: pantries and markets to the rescue
2010, Resource Control: Why pay for empty offices? Resource Control will rent them by the hour
2012, The City Gate: Phone towers rise! One gate, one permit for every vehicle
2015, Container Quarter: Giant office split up; Post Office opens for trades
2018, The City Council: Council adopts the City Plan: buildings now rebuild themselves
2025, Metropolis: Satellite towns worldwide, and an Oracle that answers anything
Welcome to Byteville, a city that runs exactly like a piece of software. Everything a developer should understand before building one, explained so anyone can follow.
🏢Every building is a part of real software: offices are servers, the warehouse is the database, the wall is the firewall.
🚗Every car is a request. Become one and ride through the city: see where you go, why, and how you get your answer.
🦹Hackers use the same roads. Launch attacks and watch which division identifies and stops them.
🕰Travel from 1995 to 2025 to see why each division (and each defence) had to be invented.