Interactive computer science laboratory

Don't just read the concept. Run it.

Watch algorithms make decisions, route traffic through real architectures, and trace objects as code executes.

01 Deterministic timelines02 Live system metrics03 Code-state sync
WATCH THE INTERNET WORKFailure-ready architecture
Live trafficUsers
1,000 users840 req/s
Edge CDN68% cache hit
Load balancerRound robin
S1
62%
S2
58%
S3
65%
Server pool
Redis2.4 ms
PostgresPrimary + 2
Throughput840 rps
P95 latency82 ms
Error rate0.04%
Cache hit68%

01 / DATA STRUCTURES & ALGORITHMS

See every decision binary search makes.

Change the target, move through the execution timeline in either direction, or let it run. The active code line and array state never drift apart.

Open the full lesson
lowmidhigh
4
0
lowmidhigh
11
1
lowmidhigh
18
2
lowmidhigh
29
3
lowmidhigh
37
4
lowmidhigh
51
5
lowmidhigh
64
6
lowmidhigh
73
7
lowmidhigh
82
8
lowmidhigh
96
9
Step 1/5Search for 73 across 10 sorted values.
Time O(log n)Space O(1)Range 10
binarySearch.tsTypeScript
01let low = 0, high = values.length - 1;02while (low <= high) {03  const mid = Math.floor((low + high) / 2);04  if (values[mid] === target) return mid;05  if (values[mid] < target) {06    low = mid + 1;07  } else {08    high = mid - 1;09  }10}11return -1;

02 / SYSTEM DESIGN

Break the system. Watch it recover.

Traffic is only useful when architecture responds to it. Kill a server and observe load redistribution, tail latency, and errors in the same model.

Study load balancing
Live trafficUsers
1,000 users840 req/s
Edge CDN68% cache hit
Load balancerRound robin
S1
62%
S2
58%
S3
65%
Server pool
Redis2.4 ms
PostgresPrimary + 2
Throughput840 rps
P95 latency82 ms
Error rate0.04%
Cache hit68%

03 / LOW-LEVEL DESIGN

Patterns are behavior, not diagrams.

Swap a payment strategy, execute the flow, and inspect the collaborating objects and runtime call stack.

Explore the Strategy pattern
Checkoutamount: $128.00
PaymentContextstrategy: Credit card
Credit cardStrategypay(128.00)
Runtime calls
  1. 1Checkout.pay()
  2. 2PaymentContext.execute()
  3. 3strategy.pay()
  4. 4PaymentResult
Payment stateREADY

CURRICULUM / THREE LEARNING TRACKS

Know what to learn next.

Choose a track and follow it in order. Each phase builds the vocabulary and judgment needed for the next one.

LEARNING TRACK / DSA

Data Structures & Algorithms

Progress from complexity analysis and core structures to graph algorithms, dynamic programming, and interview execution.

0 / 71 completed (0%)
NEXT UPBig O notation
YOU WILL LEARN TOChoose the right pattern, prove its complexity, and implement it reliably.
Phases
9
Full guides
71 / 71
Completed
0

Full guide Completed

01Analysis & Foundations0/7

Build the vocabulary used to reason about every algorithm that follows.

02Linear Data Structures0/8

Learn how sequential containers organize data and constrain access.

03Problem-Solving Patterns0/10

Recognize reusable shapes before reaching for a specific algorithm.

04Trees, Tries & Heaps0/8

Navigate hierarchical data and maintain ordered access efficiently.

05Graphs0/10

Model relationships, explore connectivity, and optimize paths and networks.

06Recursion & Search0/6

Explore decision trees while controlling branching and undoing state.

07Dynamic Programming0/9

Turn overlapping recursive work into explicit, reusable state.

08Advanced Techniques0/7

Combine mathematical insight with specialized optimization strategies.

09Interview Mastery0/6

Practice selecting, explaining, implementing, and testing under constraints.