System Design

20 classic questions as real websites — Mermaid architecture diagrams, back-of-envelope math, and a working demo in each one.

v2026.10.03-01

Build a Tokenizer

Train a real BPE tokenizer in your browser — merges, vocab, $/1M-token math.

Build a Job Scheduler

Live simulator: one-shot/cron jobs, workers, backoff, dead-letter queue.

Design a URL Shortener

Base62 encoding demo, animated redirect walkthrough, cache hit/miss.

Design a Rate Limiter

Token bucket vs sliding window — fire bursts, watch the 429s.

Design a Chat System

Message flow with per-hop latency trace, ticks, offline queue.

Design a Social Feed

Fan-out simulator: push vs pull vs hybrid, celebrity problem.

Upload → transcode → CDN pipeline, adaptive-bitrate lab.

Design a Web Crawler

Frontier BFS, politeness delays, robots.txt, bloom-filter dedup.

Design a Distributed Cache

Cache-aside vs write-through, thundering-herd singleflight demo.

Design a Notification System

Priority queues, per-channel rate limits, starvation made visible.

Design Autocomplete

Trie visualizer — type a prefix, watch the traversal.

Rider/driver matching sim on a grid — ETAs, fares, surge.

Design Food Delivery

Dispatch simulator with order batching and live ETAs.

Design a Payment System

Idempotency demo — retry all you want, exactly one charge.

Design Distributed Storage

Replication vs erasure coding — click nodes to kill them.

Design a Metrics System

Time-series rollups, hot/warm/cold tiers, downsampling.

Design a Leaderboard

Live score race on sorted sets with rank jumps.

Design Ticket Booking

100 users race for 10 seats — chaos mode vs clean mode.

Design a Key-Value Store

Consistent hashing ring — add/remove nodes, watch keys move.

Block-level sync and dedup — edit a file, upload only deltas.