Learn system design by breaking things.
BreakPoint is a hands-on system design learning app for people who understand concepts better when they can see failure unfold. Instead of reading abstract diagrams, you get dropped into a live distributed system, investigate an incident, and trace the blast radius. It is built to make reliability patterns feel practical, not academic.
Each scenario starts as a running system graph with real-looking metrics. An incident hits, one component degrades or fails, and the failure ripples across dependencies. You identify the first break, watch the cascade replay, choose a fix, and then get a plain-English breakdown of why that fix works (or fails).
- Incident Simulator: Diagnose production-style failures by finding the first broken node and tracing the cascade.
- Concept Explainers: Learn core distributed systems patterns through short, concrete explanations and quick checks.
- Tradeoff Cards: Pick between two valid design options and see the hidden downside in each path.
- Design Challenges: Tackle guided architecture prompts that move from fundamentals to senior-level choices.
| Scenario | Type | Difficulty | Concept |
|---|---|---|---|
| Black Friday Meltdown | full-crash | beginner | Connection Pool Exhaustion |
| The Thundering Herd | full-crash | beginner | Thundering Herd / Cache Stampede |
| The Silent Microservice | full-crash | intermediate | Circuit Breaker Pattern / Thread Pool Exhaustion |
| Queue Overflow | full-crash | intermediate | Backpressure / Queue Overflow |
| The Noisy Neighbor | full-crash | intermediate | Noisy Neighbor / Database Contention / Rate Limiting |
| The Silent Degradation | partial | intermediate | Partial Failure / Slow Query Detection |
| The Memory Leak | partial | intermediate | Memory Leak / Liveness Probes |
| The Cascading Timeout | partial | intermediate | Timeout / Circuit Breaker / Bulkhead |
| The Hot Partition | partial | advanced | Hot Partition / Sharding Key Design |
| Split Brain | full-crash | advanced | Split Brain / CAP Theorem / Eventual Consistency |
| Layer | Technology | Why |
|---|---|---|
| Frontend | React + Vite | React keeps module state manageable and Vite gives very fast iteration for UI-heavy scenario work. |
| Diagrams | React Flow | Chosen for richer future node interactions and edge behaviors once the simulator moves beyond the current custom SVG renderer. |
| Animations | Framer Motion | Planned for more expressive incident/fix transitions than CSS-only timing can provide in complex scene changes. |
| Styling | Tailwind CSS | Utility classes make it easy to keep visual consistency while shipping new module screens quickly. |
| Deploy | Vercel | Dead-simple static deployment with fast preview links, which is ideal for portfolio sharing. |
BreakPoint is intentionally static right now: no backend, no auth, no paid APIs. That keeps deployment cheap, removes ops friction, and lets the product focus on learning quality first. The tradeoff is no persisted progress, no multi-user features, and no analytics pipeline yet.
The whole product is failure-first on purpose. Most people can explain CAP theorem in an interview, but they freeze when a real service graph degrades in weird ways. By starting from incidents and cascades, the concepts stick because you feel the consequence before reading the definition.
React Flow was selected because scenario diagrams are not just layout, they are interactive systems with stateful nodes, directional edges, and event-driven transitions. A plain div-based approach can draw boxes, but it becomes brittle fast when you need reliable graph semantics, zoom/pan controls, and richer node-level behavior.
git clone [repo]
cd breakpoint
npm install
npm run dev- Fix It phase outcome animations — visual system recovery after picking the right fix
- Mobile diagram experience
- User-submitted scenarios