-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
48 lines (48 loc) · 6.1 KB
/
Copy pathindex.html
File metadata and controls
48 lines (48 loc) · 6.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Cards (v10)</title>
<style>
:root{--bg:#f5f5f4;--card:#fff;--text:#1a1a1a;--muted:#666;--accent:#185fa5;--border:rgba(0,0,0,.12);--r:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#0d1117;--card:#161b22;--text:#e6edf3;--muted:#8b949e;--border:rgba(255,255,255,.12);--accent:#58a6ff}}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;background:var(--bg);color:var(--text);padding:40px 20px;line-height:1.65}
.wrap{max-width:760px;margin:0 auto}
.back{font-size:.9rem;margin-bottom:20px}
.back a{color:var(--accent);text-decoration:none}
.back a:hover{text-decoration:underline}
article{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px}
article h1{font-size:1.45rem;margin-bottom:12px}
article h2{font-size:1.15rem;margin:1.6rem 0 .6rem;padding-bottom:4px;border-bottom:1px solid var(--border)}
article h3{font-size:1rem;margin:1.2rem 0 .4rem}
article p,article li{font-size:.95rem;margin:.5rem 0}
article ul,article ol{padding-left:1.4rem}
article a{color:var(--accent)}
article code{background:rgba(127,127,127,.12);padding:1px 5px;border-radius:4px;font-size:.88em}
article pre{background:rgba(127,127,127,.1);padding:12px;border-radius:8px;overflow-x:auto;font-size:.85rem;margin:10px 0}
article table{width:100%;border-collapse:collapse;font-size:.9rem;margin:12px 0}
article th,article td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
article th{background:rgba(127,127,127,.08)}
.note{background:rgba(24,95,165,.08);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin:12px 0;font-size:.9rem}
.toc a{display:block;padding:3px 0;text-decoration:none}
.toc a:hover{text-decoration:underline}
.badge{display:inline-block;font-size:.72rem;padding:2px 8px;border-radius:100px;margin-left:6px}
.be{background:#eaf3de;color:#27500a}.bm{background:#faeeda;color:#633806}.bh{background:#fcebeb;color:#791f1f}
</style>
</head>
<body>
<div class="wrap">
<p class="back"><a href="../../index.html">← Cheat sheet index</a></p>
<article><h1>System Cards (v10)</h1><p>26 ByteByteGo system cards — summaries and interview scripts.</p><div class="note">
<b>GitHub Pages:</b> Per-system <code>.md</code> files show as raw text here.
Open the pre-rendered HTML edition for all 26 ByteByteGo cards.
</div>
<p>
<a href="../../SystemDesign_Complete_v10_github.html">v10 pre-rendered HTML (recommended on Pages)</a> ·
<a href="../../SystemDesign_Complete_v10.html">Full interactive v10</a>
</p><div class="toc"><h3>Easy (2)</h3><a href="../../SystemDesign_Complete_v10_github.html#card-scale">Scale From Zero to Millions <span class="badge be">Easy</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-urlshortener">URL Shortener (TinyURL) <span class="badge be">Easy</span></a><h3>Medium (12)</h3><a href="../../SystemDesign_Complete_v10_github.html#card-ratelimiter">Rate Limiter <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-consistent-hashing">Consistent Hashing <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-idgen">Unique ID Generator <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-webcrawler">Web Crawler <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-notification">Notification System <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-autocomplete">Search Autocomplete (Google Suggest) <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-googledrive">Google Drive / File Storage <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-proximity">Proximity Service (Yelp) <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-hotel">Hotel Reservation System <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-nearby-friends">Nearby Friends <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-email">Email Service <span class="badge bm">Medium</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-leaderboard">Real-time Gaming Leaderboard <span class="badge bm">Medium</span></a><h3>Hard (12)</h3><a href="../../SystemDesign_Complete_v10_github.html#card-kvstore">Distributed Key-Value Store <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-newsfeed">News Feed (Facebook/Twitter) <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-chat">Chat System (WhatsApp/Slack) <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-youtube">YouTube / Video Platform <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-msgqueue">Distributed Message Queue (Kafka) <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-payment">Payment System <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-google-maps">Google Maps <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-metrics">Metrics Monitoring & Alerting <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-adclick">Ad Click Aggregation <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-stock-exchange">Stock Exchange <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-s3-storage">S3-like Object Storage <span class="badge bh">Hard</span></a><a href="../../SystemDesign_Complete_v10_github.html#card-digital-wallet">Digital Wallet <span class="badge bh">Hard</span></a></div></article>
</div>
</body>
</html>