SystemDesign.io
Track 1: foundationsID: dns-cdn-basics
Mode: structured•Difficulty: beginner•⏱️ 12 mins
Module 1 · High-Level Design · 12 min

You type google.com. But how does your browser actually find Google?

Every time you visit a website, an invisible chain of lookups and deliveries happens in milliseconds. DNS finds the address. CDN delivers the content. Let’s learn how.

01 / Concept Cards (Theory)

Core Architecture Foundations

Review these four lightweight concept cards before jumping onto the visual practice canvas.

1. What is DNS? — The Phone Book of the Internet

You know your friend’s name (“Rahul”), but your phone needs his actual number (9876543210) to call him. You open your Contacts app, search “Rahul”, and it gives you the number. DNS works exactly the same way. You type google.com (the name), but the internet needs the actual server address 142.250.182.14 (the number) to find Google. DNS is the phone book that translates human-readable names into machine-readable addresses.

No DNSImagine your phone had no Contacts app. Every time you want to call someone, you’d have to memorize their 10-digit number. Want to call Rahul? Memorize 9876543210. Want to call Mom? Memorize 8765432109. Want to order food? Memorize 7654321098. Impossible!
With DNSYour Contacts app stores all names → numbers. You just search ‘Rahul’ and tap Call. DNS does the same for websites — you type ‘google.com’ and DNS instantly finds the server’s address for you.
💡 Takeaway: DNS is the internet’s Contacts app. Without it, you’d have to memorize the IP address of every website you ever want to visit!

2. How DNS Actually Finds a Website (Step by Step)

When you type youtube.com, your browser doesn’t magically know where YouTube’s server is. It goes through a chain of lookups, each step getting closer to the answer. Press the button below to watch this chain in real time!

💻
Your Browser
You type the website name (e.g., youtube.com) and hit enter.
Waiting...
📦
Browser Cache
Checks if the browser itself remembers the IP address from a recent visit.
Waiting...
🖥️
OS Cache (Operating System)
Checks the system's local DNS cache (e.g., gethostbyname, /etc/hosts).
Waiting...
📡
Router Cache
Checks your home Wi-Fi router's built-in DNS cache.
Waiting...
🏢
ISP Recursive Resolver
Your internet provider's DNS server takes over to find the answer.
Waiting...
🌐
Root & TLD Servers
The global directory points the ISP to the specific ".com" registry.
Waiting...
✅
Authoritative Name Server
YouTube's own DNS server provides the final, exact IP address.
Waiting...
Found it! youtube.com = 142.250.182.14 (took ~50ms)

3. What is a CDN? — Local Delivery Instead of Long-Distance Shipping

Once DNS finds the server address, your browser needs to actually download the website’s files (images, videos, CSS). If those files are stored on a server in America and you’re in India, every single file has to travel 15,000 km — making everything slow. A CDN (Content Delivery Network) solves this by copying your files to servers around the world, so users always download from the nearest one.

Without CDNDomino’s has only ONE kitchen — in Mumbai. A customer in Delhi orders a pizza. It has to travel 1,400 km by road. Delivery time: 3 hours. By the time it arrives, the pizza is cold and the customer is angry. ❌
With CDNDomino’s opens local branches in every city. Delhi orders go to the Delhi branch. The pizza is made 5 km away and arrives in 30 minutes — hot and fresh! That Delhi branch is like a CDN Edge Server — a local copy of the content, close to the user. ✅
💡 Takeaway: A CDN is like having local Domino’s branches worldwide. Instead of every user downloading from one faraway server, they get files from the nearest ‘branch’ (edge server) — making everything load 10-50x faster.

4. See the Difference: With CDN vs Without CDN

Theory is great, but let’s actually SEE how much faster a CDN makes things. Press the button below to race two loading scenarios side-by-side: one fetching from the origin server in America, and one fetching from a CDN edge server in your city.

🐢 Without CDNOrigin: Virginia, USA → User: Mumbai
~800 ms
🚀 With CDNEdge: Mumbai → User: Mumbai
~50 ms
Result: The CDN edge server is ~16x faster because the content only travels 5 km instead of 15,000 km!
02 / Practice Exercise

Build Your First DNS + CDN Architecture

Map out the request flow for a user visiting a website by connecting the correct components in the interactive canvas.

Interactive CanvasMode: Freeform Drag & Connect

Task: DNS + CDN Request Flow

🎯
Scenario Prompt: A user types youtube.com in their browser. Show how DNS finds the server address, and then how the CDN delivers the video from a nearby edge server instead of the faraway origin server.
Available Components (Click to place on canvas):
🖱️Canvas is emptyClick components above to place them onto the canvas.
Drag components to arrange them freely, and click two nodes to connect them.
💡 Drag to move • Click Node A ➔ Node B to connect • Click ✕ to delete
03 / Evaluation Rubric

System Validation Criteria

Every time you build a system on this platform, our automated rubric will check it for correctness. Here is what we are looking for in your design:

Must Have Requirements (Hard Gate):
1. User connects to DNS first (looks up address before reaching any server).
2. DNS routes to CDN Edge (content served from nearest edge server).
3. CDN Edge connects to Origin Server (fallback for uncached content).
Should Have Quality Indicators:
1. Clean unidirectional flow (User → DNS → CDN Edge → Origin Server).
Common Mistakes Flagged:
⚠️ User connecting directly to Origin Server (bypasses DNS and CDN entirely).
Module Completion

Ready for the Next Challenge?

You've mastered how DNS works and why CDNs are essential.