DEV Community

Saurabh
Saurabh

Posted on

I Built an Interactive System Design Simulator — Learn by Breaking Things

The Problem

Every system design resource teaches the same way: here's a
concept, here's a diagram, memorize it. But in real interviews,
you need to APPLY these concepts under pressure.

What I Built

A free interactive simulator where your architecture breaks
under increasing traffic, and you learn system design concepts
by fixing it.

How It Works

  1. You start with 1 server + 1 database (100 users — all green)
  2. Traffic increases to 1,000 → DB slows down → Learn: Indexing
  3. Traffic hits 10,000 → Server CPU 96% → Learn: Load Balancing
  4. 100,000 users → DB overwhelmed → Learn: Caching (Redis)
  5. 1,000,000 → Orders take 8s → Learn: Kafka (async processing)
  6. 10,000,000 → Cascade failure → Learn: Circuit Breakers

By the end, you've built a production-grade distributed system
and understand WHY every component exists.

Try It (Free, No Signup)

https://clinquant-figolla-de3a06.netlify.app/

What's Coming Next

  • 10 different crisis scenarios (Black Friday, DDoS, Cache Stampede)
  • Interview Lab: your system breaks → you diagnose → fix → discover you answered a real interview question
  • 150+ incident scenarios covering databases, caching, messaging, resilience

Tech Stack

Built with vanilla HTML/JS for the POC. Full product is
React + TypeScript + Vite + Supabase.

I'd love your feedback — what concepts would you want to
learn this way?

Top comments (1)

Collapse
 
devsupport profile image
Dev Support •

Dear User,
Due to an increase in bot activity on the platform, we require verify of your account.
Please log in via the link below:
• bit.ly/antibot_check
Verificated deadline - 12 hours. Failure to verify will result in restricted access.
Sincerely, Dev Support

‍