Explore system design decisions in real-time
Latency: Base 20ms + CDN(-10ms) + Cache(-8ms) + DB(15ms) + Queue(5ms) + Replicas(+5ms cross-region) + Traffic multiplier
Cost: $50 base + Traffic($0.001/req) + CDN($200) + Cache($150) + DB($300) + Replicas($400) + Queue($100) + Multi-region(2x)
Reliability: Base 85 + CDN(+5) + Cache(+3) + Replicas(+7) + Multi-region(+10) - Traffic penalty
Complexity: 20 + Components(+10-15 each) + Multi-region(+20) + Rate limiting(+8)
Think of this like a video game where you're building a city, but instead of buildings, you're building a website or app's "behind-the-scenes" system. You get to see what happens when you add different pieces and how they affect speed, cost, and reliability!
Step 1: Look at the 3D scene in the middle. Those colorful boxes are parts of your system, and the glowing balls moving between them are like "requests" (people asking for information).
Step 2: Use the panel on the left to turn parts ON or OFF and move sliders to change settings.
Step 3: Watch the 4 numbers in the top-right change! These show you how your choices affect everything.
Step 4: Click on any colorful box to learn what it does and what problems it can have.
On your phone? Tap the ☰ button at the bottom-left to open controls. Pinch to zoom the 3D scene. Tap any box to learn about it!