32 System Internals Widgets
Each widget is a working in-browser implementation — storage engines, distributed consensus, data encoding, networking, and web security. Based on Database Internals (Petrov), Designing Data-Intensive Applications (Kleppmann), the System Design Primer, and foundational networking + web-security references.
These are the algorithms senior engineers are asked to explain at top-tier companies. Raft consensus, B-tree splits, LSM compaction, and isolation levels appear in nearly every senior-level system design debrief. No other free site visualizes all of them in motion.
Petrov · Storage Engines (Part I)
- Row vs Column — Storage layout & scan cost. Ch 1.
- B-Tree — Insert, search, delete with animated splits. Ch 2 + 4.
- Slotted Page — Variable-size cells, fragmentation, compaction. Ch 3.
- WAL + Recovery — Buffer pool, WAL, ARIES redo/undo after crash. Ch 5.
- Copy-on-Write B-Tree — LMDB-style path cloning, snapshots, GC. Ch 6.
- LSM-Tree — Memtable flushes, compaction, Bloom-filter lookups. Ch 7.
Petrov · Distributed Systems (Part II)
- Phi-Accrual Detector — Heartbeat stream → suspicion level over time. Ch 9.
- Bully Leader Election — Highest-id wins; ELECTION/OK/COORDINATOR. Ch 10.
- Quorum Replication — Tunable W/R; read-after-write; sloppy quorum. Ch 11.
- Merkle Anti-Entropy — Compare two replicas' trees, sync divergent keys. Ch 12.
- Two-Phase Commit — Prepare/commit + coordinator crash blocking. Ch 13.
- Raft Consensus — Leader election + log replication across 5 nodes. Ch 14.
Kleppmann · Designing Data-Intensive Applications
- Data Models — Relational / document / graph side-by-side with queries. Ch 2.
- Encoding & Evolution — JSON / Protobuf / Avro size + schema compat. Ch 4.
- Replication Anomalies — Read-your-writes, monotonic, consistent prefix under lag. Ch 5.
- Partitioning Strategies — Hash vs range, hotspots, rebalancing. Ch 6.
- Isolation Levels — Dirty read, phantom, write skew across RC / SI / SSI. Ch 7.
- CRDTs — G-Counter, PN-Counter, OR-Set merging across replicas. Ch 9.
- MapReduce — Word-count: map → animated shuffle → reduce. Ch 10.
- Stream Windows — Tumbling / sliding / session + event-time watermarks. Ch 11.
System Design Primer · Unique Topics
- Back-of-envelope Estimator — DAU → QPS / storage / bandwidth with the math shown inline.
- Cache Strategies — Cache-aside / write-through / write-behind / refresh-ahead side-by-side.
- CAP under Partition — 3-node cluster, partition + heal. CP rejects minority writes; AP diverges.
- Pub/Sub vs Queue — Fanout vs point-to-point, consumer groups, delivery semantics.
- SQL Sharding Strategies — Federation / horizontal / denormalized — fan-out cost per query.
- OAuth 2.0 Flow — Authorization code + PKCE; attack scenarios fail when PKCE is on.
Networking + Web Security
- DNS Resolution — Recursive walk: client → resolver → root → TLD → authoritative. TTL caching.
- TCP vs UDP — 3-way handshake, ordered delivery + retransmit, vs fire-and-forget.
- TLS Handshake — TLS 1.2 (2 RTT) vs 1.3 (1 RTT) vs 1.3 resume (0 RTT).
- HTTP/1.1 · 2 · 3 — Head-of-line blocking across 6 resources under packet loss.
- XSS Attack + Defense — Reflected / stored / DOM + output encoding, CSP, HttpOnly.
- CSRF Attack + Defense — Cross-site forgery. SameSite cookies, CSRF tokens, Origin checks.