-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
325 lines (301 loc) · 17.2 KB
/
Copy pathindex.html
File metadata and controls
325 lines (301 loc) · 17.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Design Illustrated — Complex systems, simply beautiful</title>
<meta name="description" content="An animated, illustrated course on system design. Scalability, CAP theorem, caching, databases, microservices — every concept visualized.">
<script>try{var t=localStorage.getItem('sdi-theme')||'dark';document.documentElement.setAttribute('data-theme',t)}catch(e){document.documentElement.setAttribute('data-theme','dark')}</script>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="index-page">
<div class="reading-progress"></div>
<!-- ========== NAVBAR ========== -->
<nav class="navbar">
<div class="nav-inner">
<a href="index.html" class="logo">
<svg class="logo-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M13 2L4 14h7l-1 8 9-12h-7z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
</svg>
<span class="logo-text">System Design <span class="logo-accent">Illustrated</span></span>
</a>
<div class="nav-links">
<a href="#topics">Topics</a>
<a href="#about">About</a>
<a href="topics/12-interview-guide.html">Interview Guide</a>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
<svg class="icon-moon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
<svg class="icon-sun" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
</button>
</div>
</div>
</nav>
<!-- ========== HERO ========== -->
<header class="hero">
<div class="hero-orb hero-orb-1" aria-hidden="true"></div>
<div class="hero-orb hero-orb-2" aria-hidden="true"></div>
<div class="hero-orb hero-orb-3" aria-hidden="true"></div>
<div class="hero-grid" aria-hidden="true"></div>
<div class="hero-inner">
<div class="hero-badge">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
Learn system design the visual way
</div>
<h1>Complex systems,<br><span class="grad">simply beautiful.</span></h1>
<p class="lead">An original, animated course on system design. From your first load balancer to acing the interview — every concept illustrated, every trade-off explained, zero jargon walls.</p>
<div class="hero-ctas">
<a href="topics/01-fundamentals.html" class="btn btn-primary">
Start Learning
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<a href="#topics" class="btn btn-ghost">Browse Topics</a>
</div>
<div class="hero-stats">
<div class="stat"><div class="num">12</div><div class="lbl">Topics</div></div>
<div class="stat"><div class="num">80+</div><div class="lbl">Concepts</div></div>
<div class="stat"><div class="num">40+</div><div class="lbl">Animations</div></div>
<div class="stat"><div class="num">100%</div><div class="lbl">Free & Offline</div></div>
</div>
</div>
<!-- Right column: Three.js 3D panel — physically separate from text -->
<div class="hero-3d-panel" aria-hidden="true">
<canvas class="system-3d" id="system3d"></canvas>
<div class="hero-scroll-cue">
<span class="sc-text">Scroll</span>
<span class="sc-line"></span>
</div>
</div>
</header>
<!-- ========== TOPICS GRID ========== -->
<section class="section" id="topics">
<h2 class="section-title reveal">The Curriculum</h2>
<p class="section-sub reveal">Twelve carefully sequenced topics. Start at the top, or jump to what you need — your progress is saved automatically.</p>
<div class="topics-grid">
<a class="topic-card reveal" data-topic="01" href="topics/01-fundamentals.html" style="--card-color:var(--t1)">
<div class="tc-top"><span class="tc-num">01</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<rect x="3" y="14" width="4" height="7" rx="1"/><rect x="10" y="9" width="4" height="12" rx="1"/><rect x="17" y="4" width="4" height="17" rx="1"/>
</svg>
</div>
<h3>Fundamentals of Scale</h3>
<p>Vertical vs horizontal scaling, latency vs throughput, the "nines" of availability, and back-of-envelope math.</p>
<div class="tc-tags"><span class="tag difficulty beginner">Beginner</span><span class="tag">25 min</span></div>
</a>
<a class="topic-card reveal" data-topic="02" href="topics/02-cap-theorem.html" style="--card-color:var(--t2)">
<div class="tc-top"><span class="tc-num">02</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<polygon points="12,3 22,21 2,21"/><circle cx="12" cy="3" r="2" fill="currentColor"/><circle cx="22" cy="21" r="2" fill="currentColor"/><circle cx="2" cy="21" r="2" fill="currentColor"/>
</svg>
</div>
<h3>CAP Theorem</h3>
<p>Consistency, Availability, Partition tolerance — why you can only pick two, and what PACELC adds to the story.</p>
<div class="tc-tags"><span class="tag difficulty beginner">Beginner</span><span class="tag">20 min</span></div>
</a>
<a class="topic-card reveal" data-topic="03" href="topics/03-consistency-availability.html" style="--card-color:var(--t3)">
<div class="tc-top"><span class="tc-num">03</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<circle cx="7" cy="12" r="4"/><circle cx="17" cy="12" r="4"/>
<path d="M11 9.5l2-2M13 14.5l-2 2" stroke-linecap="round"/>
</svg>
</div>
<h3>Consistency & Availability Patterns</h3>
<p>Weak, eventual, and strong consistency. Failover and replication. Why two 99.9% services in series give you 99.8%.</p>
<div class="tc-tags"><span class="tag difficulty intermediate">Intermediate</span><span class="tag">30 min</span></div>
</a>
<a class="topic-card reveal" data-topic="04" href="topics/04-dns-cdn.html" style="--card-color:var(--t4)">
<div class="tc-top"><span class="tc-num">04</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<circle cx="12" cy="12" r="9"/><path d="M12 3c-3 4-3 14 0 18M12 3c3 4 3 14 0 18M3 12h18"/>
</svg>
</div>
<h3>DNS & CDN</h3>
<p>How the internet's phone book works step by step, and how CDNs move bytes closer to your users.</p>
<div class="tc-tags"><span class="tag difficulty beginner">Beginner</span><span class="tag">25 min</span></div>
</a>
<a class="topic-card reveal" data-topic="05" href="topics/05-load-balancers.html" style="--card-color:var(--t5)">
<div class="tc-top"><span class="tc-num">05</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<rect x="9" y="2" width="6" height="5" rx="1"/>
<rect x="1" y="17" width="5" height="5" rx="1"/><rect x="9.5" y="17" width="5" height="5" rx="1"/><rect x="18" y="17" width="5" height="5" rx="1"/>
<line x1="12" y1="7" x2="12" y2="13"/><line x1="12" y1="13" x2="3.5" y2="17"/><line x1="12" y1="13" x2="12" y2="17"/><line x1="12" y1="13" x2="20.5" y2="17"/>
</svg>
</div>
<h3>Load Balancers & Reverse Proxies</h3>
<p>L4 vs L7, algorithms, health checks, sticky sessions, and the subtle difference between an LB and a reverse proxy.</p>
<div class="tc-tags"><span class="tag difficulty intermediate">Intermediate</span><span class="tag">30 min</span></div>
</a>
<a class="topic-card reveal" data-topic="06" href="topics/06-caching.html" style="--card-color:var(--t6)">
<div class="tc-top"><span class="tc-num">06</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<path d="M13 2L4 14h7l-1 8 9-12h-7z" stroke-linejoin="round"/>
</svg>
</div>
<h3>Caching Strategies</h3>
<p>Cache-aside, write-through, write-behind, eviction policies, Redis data structures, and the three classic cache disasters.</p>
<div class="tc-tags"><span class="tag difficulty intermediate">Intermediate</span><span class="tag">35 min</span></div>
</a>
<a class="topic-card reveal" data-topic="07" href="topics/07-databases.html" style="--card-color:var(--t7)">
<div class="tc-top"><span class="tc-num">07</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v12c0 1.657 3.582 3 8 3s8-1.343 8-3V6"/><path d="M4 12c0 1.657 3.582 3 8 3s8-1.343 8-3"/>
</svg>
</div>
<h3>Databases Deep Dive</h3>
<p>ACID vs BASE, replication, federation, sharding, denormalization, four NoSQL families, and how to choose.</p>
<div class="tc-tags"><span class="tag difficulty advanced">Advanced</span><span class="tag">45 min</span></div>
</a>
<a class="topic-card reveal" data-topic="08" href="topics/08-async-messaging.html" style="--card-color:var(--t8)">
<div class="tc-top"><span class="tc-num">08</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<rect x="2" y="6" width="20" height="14" rx="2"/><path d="M22 7l-10 7L2 7"/>
</svg>
</div>
<h3>Async Processing & Messaging</h3>
<p>Message queues, delivery guarantees, Kafka's streaming model, task queues, and surviving back pressure.</p>
<div class="tc-tags"><span class="tag difficulty intermediate">Intermediate</span><span class="tag">30 min</span></div>
</a>
<a class="topic-card reveal" data-topic="09" href="topics/09-communication.html" style="--card-color:var(--t9)">
<div class="tc-top"><span class="tc-num">09</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<circle cx="6" cy="10" r="3.5"/><circle cx="18" cy="14" r="3.5"/>
<line x1="9.5" y1="11" x2="14.5" y2="13"/><line x1="9.5" y1="9" x2="14.5" y2="15"/>
</svg>
</div>
<h3>Communication Protocols</h3>
<p>HTTP/1.1 through HTTP/3, TCP vs UDP, REST vs gRPC, WebSockets vs SSE vs long polling.</p>
<div class="tc-tags"><span class="tag difficulty intermediate">Intermediate</span><span class="tag">30 min</span></div>
</a>
<a class="topic-card reveal" data-topic="10" href="topics/10-microservices.html" style="--card-color:var(--t10)">
<div class="tc-top"><span class="tc-num">10</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<rect x="2" y="2" width="7" height="7" rx="1.5"/><rect x="15" y="2" width="7" height="7" rx="1.5"/>
<rect x="2" y="15" width="7" height="7" rx="1.5"/><rect x="15" y="15" width="7" height="7" rx="1.5"/>
<path d="M9 5.5h6M5.5 9v6M18.5 9v6M9 18.5h6"/>
</svg>
</div>
<h3>Microservices Architecture</h3>
<p>Monolith vs microservices, service discovery, API gateways, circuit breakers, service meshes, sagas.</p>
<div class="tc-tags"><span class="tag difficulty advanced">Advanced</span><span class="tag">40 min</span></div>
</a>
<a class="topic-card reveal" data-topic="11" href="topics/11-security.html" style="--card-color:var(--t11)">
<div class="tc-top"><span class="tc-num">11</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<path d="M12 2L3 6v6c0 5.25 3.75 10.15 9 11.25C17.25 22.15 21 17.25 21 12V6z" stroke-linejoin="round"/>
<path d="M8 12l3 3 5-5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3>Security Essentials</h3>
<p>TLS, password hashing, sessions vs JWTs, OAuth 2.0, rate limiting, OWASP Top 10, and securing your APIs.</p>
<div class="tc-tags"><span class="tag difficulty intermediate">Intermediate</span><span class="tag">35 min</span></div>
</a>
<a class="topic-card reveal" data-topic="12" href="topics/12-interview-guide.html" style="--card-color:var(--t12)">
<div class="tc-top"><span class="tc-num">12</span>
<svg class="tc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/>
</svg>
</div>
<h3>System Design Interview Guide</h3>
<p>A five-step framework plus three fully worked examples: a URL shortener, the Twitter timeline, and a rate limiter.</p>
<div class="tc-tags"><span class="tag difficulty">All levels</span><span class="tag">50 min</span></div>
</a>
</div>
</section>
<!-- ========== ABOUT ========== -->
<section class="section" id="about">
<div class="about-grid">
<div class="reveal">
<h2 class="section-title" style="text-align:left">Why this course?</h2>
<p style="color:var(--text-soft);margin:0.75rem 0 1.5rem">
Most system design resources are either too theoretical or too shallow. This course goes deep on every concept with animated diagrams, real company examples, and interview-ready explanations — all in plain HTML with zero dependencies.
</p>
<ul class="why-list">
<li>
<span class="wl-icon">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4z"/></svg>
</span>
<div><strong>Original writing, zero copy-paste</strong><span class="desc">Every explanation written fresh, with analogies that actually stick.</span></div>
</li>
<li>
<span class="wl-icon">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg>
</span>
<div><strong>Animated diagrams everywhere</strong><span class="desc">Watch data replicate, queues drain, and handshakes happen in pure CSS and SVG.</span></div>
</li>
<li>
<span class="wl-icon">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
</span>
<div><strong>Trade-offs, not dogma</strong><span class="desc">No right answers — only trade-offs. We name them explicitly every time.</span></div>
</li>
<li>
<span class="wl-icon">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2"/></svg>
</span>
<div><strong>Real-world receipts</strong><span class="desc">Which companies use which patterns — Netflix, Discord, Stripe, and more.</span></div>
</li>
<li>
<span class="wl-icon">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</span>
<div><strong>Works offline, no frameworks</strong><span class="desc">Vanilla HTML, CSS, JS. Save it, fork it, read it on a plane.</span></div>
</li>
</ul>
</div>
<div class="archie-stage reveal">
<div class="archie" aria-label="Archie the robot mascot">
<div class="archie-antenna"><div class="archie-antenna-tip"></div></div>
<div class="archie-head">
<div class="archie-eye left"></div>
<div class="archie-eye right"></div>
<div class="archie-mouth"></div>
</div>
<div class="archie-arm left"></div>
<div class="archie-arm right"></div>
<div class="archie-torso">
<div class="archie-screen"><span>while(alive){ learn(); }</span></div>
</div>
<div class="archie-leg left"></div>
<div class="archie-leg right"></div>
<div class="archie-shadow"></div>
</div>
<p class="archie-caption">"Distributed systems are just friendships<br>with extra failure modes." — Archie</p>
</div>
</div>
</section>
<!-- ========== FOOTER ========== -->
<footer class="footer">
<div class="footer-inner">
<div class="brand">
<h4>System Design Illustrated</h4>
<p>Complex systems, simply beautiful. A free, animated, original course covering everything you need to design systems at scale.</p>
</div>
<div>
<h4>Start Here</h4>
<ul>
<li><a href="topics/01-fundamentals.html">Fundamentals of Scale</a></li>
<li><a href="topics/02-cap-theorem.html">CAP Theorem</a></li>
<li><a href="topics/06-caching.html">Caching Strategies</a></li>
</ul>
</div>
<div>
<h4>Go Deeper</h4>
<ul>
<li><a href="topics/07-databases.html">Databases Deep Dive</a></li>
<li><a href="topics/10-microservices.html">Microservices</a></li>
<li><a href="topics/11-security.html">Security Essentials</a></li>
</ul>
</div>
<div>
<h4>Get Hired</h4>
<ul>
<li><a href="topics/12-interview-guide.html">Interview Guide</a></li>
<li><a href="topics/12-interview-guide.html#worked-examples">Worked Examples</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">Built with care using vanilla HTML, CSS, and JavaScript</div>
</footer>
<script src="https://unpkg.com/three@0.160.0/build/three.min.js" defer></script>
<script src="js/main.js" defer></script>
</body>
</html>