diff --git a/website/css/styles.css b/website/css/styles.css
new file mode 100644
index 00000000000..03268b228c9
--- /dev/null
+++ b/website/css/styles.css
@@ -0,0 +1,2529 @@
+/* ===================================================
+   System Design Primer — Interactive Course Styles
+   Modern, responsive, dark/light theme, shadcn-inspired
+   =================================================== */
+
+/* --- CSS Custom Properties (Theme) --- */
+:root {
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+
+    /* Sizing */
+    --sidebar-width: 300px;
+    --topbar-height: 56px;
+    --content-max-width: 820px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 16px;
+
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-normal: 250ms ease;
+    --transition-slow: 350ms ease;
+}
+
+/* Dark Theme (default) */
+[data-theme="dark"] {
+    --bg-primary: #0d1117;
+    --bg-secondary: #161b22;
+    --bg-tertiary: #1c2129;
+    --bg-elevated: #21262d;
+    --bg-hover: #292e36;
+    --bg-active: #1f6feb22;
+
+    --border-primary: #30363d;
+    --border-secondary: #21262d;
+    --border-accent: #1f6feb;
+
+    --text-primary: #e6edf3;
+    --text-secondary: #8b949e;
+    --text-tertiary: #6e7681;
+    --text-link: #58a6ff;
+    --text-on-accent: #ffffff;
+
+    --accent: #1f6feb;
+    --accent-hover: #388bfd;
+    --accent-subtle: #1f6feb22;
+    --success: #3fb950;
+    --success-subtle: #3fb95022;
+    --warning: #d29922;
+    --warning-subtle: #d2992222;
+    --danger: #f85149;
+
+    --code-bg: #161b22;
+    --code-border: #30363d;
+
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
+
+    --scrollbar-thumb: #30363d;
+    --scrollbar-track: transparent;
+}
+
+/* Light Theme */
+[data-theme="light"] {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f6f8fa;
+    --bg-tertiary: #f0f2f5;
+    --bg-elevated: #ffffff;
+    --bg-hover: #eaeef2;
+    --bg-active: #0969da15;
+
+    --border-primary: #d0d7de;
+    --border-secondary: #e8ebef;
+    --border-accent: #0969da;
+
+    --text-primary: #1f2328;
+    --text-secondary: #656d76;
+    --text-tertiary: #8c959f;
+    --text-link: #0969da;
+    --text-on-accent: #ffffff;
+
+    --accent: #0969da;
+    --accent-hover: #0550ae;
+    --accent-subtle: #0969da15;
+    --success: #1a7f37;
+    --success-subtle: #1a7f3715;
+    --warning: #9a6700;
+    --warning-subtle: #9a670015;
+    --danger: #cf222e;
+
+    --code-bg: #f6f8fa;
+    --code-border: #d0d7de;
+
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
+    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
+
+    --scrollbar-thumb: #c1c8cf;
+    --scrollbar-track: transparent;
+}
+
+/* --- Reset & Base --- */
+*, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    font-family: var(--font-sans);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.7;
+    overflow-x: hidden;
+    transition: background var(--transition-normal), color var(--transition-normal);
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+}
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-tertiary);
+}
+
+/* Selection */
+::selection {
+    background: var(--accent);
+    color: var(--text-on-accent);
+}
+
+/* ===================================
+   SIDEBAR (docs page)
+   =================================== */
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: var(--sidebar-width);
+    height: 100vh;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-primary);
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+    transition: transform var(--transition-normal), background var(--transition-normal);
+    overflow: hidden;
+}
+
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 16px 12px;
+    border-bottom: 1px solid var(--border-secondary);
+    flex-shrink: 0;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    color: inherit;
+    transition: opacity var(--transition-fast);
+}
+
+.logo:hover {
+    opacity: 0.8;
+}
+
+.logo-icon {
+    font-size: 28px;
+    line-height: 1;
+}
+
+.logo-text {
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--text-primary);
+}
+
+.logo-text small {
+    font-weight: 500;
+    color: var(--text-secondary);
+    font-size: 12px;
+}
+
+.sidebar-close {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--radius-sm);
+    transition: color var(--transition-fast), background var(--transition-fast);
+}
+.sidebar-close:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+}
+
+/* Sidebar Search */
+.sidebar-search {
+    padding: 12px 16px 8px;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.search-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.search-icon {
+    position: absolute;
+    left: 10px;
+    color: var(--text-tertiary);
+    pointer-events: none;
+}
+
+.search-input-wrapper input {
+    width: 100%;
+    padding: 8px 12px 8px 34px;
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-sm);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: var(--font-sans);
+    font-size: 13px;
+    outline: none;
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.search-input-wrapper input::placeholder {
+    color: var(--text-tertiary);
+}
+
+.search-input-wrapper input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-subtle);
+}
+
+/* Progress */
+.sidebar-progress {
+    padding: 8px 16px 12px;
+    flex-shrink: 0;
+}
+
+.progress-bar {
+    height: 4px;
+    background: var(--bg-elevated);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, var(--accent), var(--success));
+    border-radius: 2px;
+    transition: width var(--transition-slow);
+}
+
+.progress-text {
+    font-size: 11px;
+    color: var(--text-tertiary);
+    margin-top: 4px;
+    display: block;
+}
+
+/* Sidebar Nav */
+.sidebar-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 8px;
+}
+
+.nav-group {
+    margin-bottom: 2px;
+}
+
+.nav-group-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 8px;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    user-select: none;
+    transition: background var(--transition-fast);
+}
+
+.nav-group-header:hover {
+    background: var(--bg-hover);
+}
+
+.nav-group-icon {
+    display: flex;
+    align-items: center;
+    color: var(--text-tertiary);
+    transition: transform var(--transition-fast);
+}
+
+.nav-group-items.collapsed + .nav-group-header .nav-group-icon,
+.nav-group-header.collapsed .nav-group-icon {
+    transform: rotate(-90deg);
+}
+
+.nav-group-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-secondary);
+    flex: 1;
+}
+
+.nav-group-badge {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--text-tertiary);
+    background: var(--bg-elevated);
+    padding: 1px 6px;
+    border-radius: 10px;
+}
+
+.nav-group-items {
+    overflow: hidden;
+    max-height: 1000px;
+    transition: max-height var(--transition-slow);
+}
+
+.nav-group-items.collapsed {
+    max-height: 0;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 8px 7px 18px;
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 400;
+    transition: all var(--transition-fast);
+    position: relative;
+}
+
+.nav-item:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.nav-item.active {
+    background: var(--accent-subtle);
+    color: var(--accent);
+    font-weight: 500;
+}
+
+.nav-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 4px;
+    bottom: 4px;
+    width: 3px;
+    background: var(--accent);
+    border-radius: 2px;
+}
+
+.nav-item-status {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 2px solid var(--border-primary);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+}
+
+.nav-item-status.completed {
+    background: var(--success);
+    border-color: var(--success);
+}
+
+.nav-item-status.completed::after {
+    content: '';
+    width: 6px;
+    height: 3px;
+    border-left: 2px solid white;
+    border-bottom: 2px solid white;
+    transform: rotate(-45deg) translateY(-1px);
+}
+
+.nav-item-number {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--text-tertiary);
+    font-family: var(--font-mono);
+    min-width: 18px;
+}
+
+.nav-item-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.nav-item.hidden {
+    display: none;
+}
+
+/* Theme toggle in topbar */
+.theme-toggle-topbar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-primary);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+}
+
+.theme-toggle-topbar:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--accent);
+}
+
+[data-theme="dark"] .icon-moon { display: none; }
+[data-theme="light"] .icon-sun { display: none; }
+
+/* --- Sidebar Overlay (mobile) --- */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 99;
+    backdrop-filter: blur(2px);
+}
+.sidebar-overlay.active {
+    display: block;
+}
+
+/* ===================================
+   MAIN CONTENT (docs page)
+   =================================== */
+.main-content {
+    margin-left: var(--sidebar-width);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    transition: margin var(--transition-normal);
+}
+
+/* Top Bar */
+.topbar {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: var(--topbar-height);
+    padding: 0 24px;
+    border-bottom: 1px solid var(--border-secondary);
+    backdrop-filter: blur(12px);
+    background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
+    transition: background var(--transition-normal);
+}
+
+.menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--radius-sm);
+    transition: color var(--transition-fast);
+}
+.menu-toggle:hover {
+    color: var(--text-primary);
+}
+
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    flex: 1;
+    min-width: 0;
+}
+
+.breadcrumb-part {
+    color: var(--text-tertiary);
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.breadcrumb svg {
+    color: var(--text-tertiary);
+    flex-shrink: 0;
+}
+
+.breadcrumb-chapter {
+    color: var(--text-primary);
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.topbar-actions {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.btn-mark-complete {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-primary);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-family: var(--font-sans);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.btn-mark-complete:hover {
+    background: var(--success-subtle);
+    border-color: var(--success);
+    color: var(--success);
+}
+
+.btn-mark-complete.completed {
+    background: var(--success);
+    border-color: var(--success);
+    color: white;
+}
+
+/* Notes Toggle Button */
+.btn-notes-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-primary);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-family: var(--font-sans);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.btn-notes-toggle:hover {
+    background: var(--accent-subtle);
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.btn-notes-toggle.has-notes {
+    color: var(--accent);
+    border-color: var(--accent);
+}
+
+/* Content Area */
+.content-area {
+    flex: 1;
+    overflow-y: auto;
+    padding: 32px 24px 64px;
+}
+
+.content-wrapper {
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+}
+
+/* ===================================
+   CHAPTER CONTENT STYLES
+   =================================== */
+.chapter-content {
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.chapter-content .chapter-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--accent);
+    background: var(--accent-subtle);
+    margin-bottom: 12px;
+}
+
+.chapter-content h1 {
+    font-size: 2rem;
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: 8px;
+    color: var(--text-primary);
+    letter-spacing: -0.02em;
+}
+
+.chapter-content .chapter-subtitle {
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    margin-bottom: 32px;
+    line-height: 1.6;
+}
+
+.chapter-content h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-top: 48px;
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border-secondary);
+    color: var(--text-primary);
+    letter-spacing: -0.01em;
+}
+
+.chapter-content h3 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-top: 32px;
+    margin-bottom: 12px;
+    color: var(--text-primary);
+}
+
+.chapter-content h4 {
+    font-size: 1.05rem;
+    font-weight: 600;
+    margin-top: 24px;
+    margin-bottom: 8px;
+    color: var(--text-primary);
+}
+
+.chapter-content p {
+    margin-bottom: 16px;
+    color: var(--text-primary);
+    line-height: 1.75;
+}
+
+.chapter-content ul, .chapter-content ol {
+    margin-bottom: 16px;
+    padding-left: 24px;
+}
+
+.chapter-content li {
+    margin-bottom: 6px;
+    color: var(--text-primary);
+    line-height: 1.65;
+}
+
+.chapter-content li ul, .chapter-content li ol {
+    margin-top: 6px;
+    margin-bottom: 6px;
+}
+
+.chapter-content strong {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.chapter-content a {
+    color: var(--text-link);
+    text-decoration: none;
+    font-weight: 500;
+    transition: opacity var(--transition-fast);
+}
+.chapter-content a:hover {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+.chapter-content code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    background: var(--code-bg);
+    border: 1px solid var(--code-border);
+    padding: 2px 6px;
+    border-radius: 4px;
+    color: var(--text-link);
+}
+
+.chapter-content pre {
+    background: var(--code-bg);
+    border: 1px solid var(--code-border);
+    border-radius: var(--radius-md);
+    padding: 16px 20px;
+    overflow-x: auto;
+    margin-bottom: 20px;
+    line-height: 1.5;
+}
+
+.chapter-content pre code {
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: 13px;
+    color: var(--text-primary);
+}
+
+/* Images in chapters */
+.chapter-content .img-container {
+    margin: 24px 0;
+    text-align: center;
+}
+
+.chapter-content .img-container img {
+    max-width: 100%;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-primary);
+    cursor: zoom-in;
+    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.chapter-content .img-container img:hover {
+    box-shadow: var(--shadow-md);
+}
+
+.chapter-content .img-caption {
+    font-size: 13px;
+    color: var(--text-tertiary);
+    margin-top: 8px;
+    font-style: italic;
+}
+
+/* ===================================
+   SHADCN-INSPIRED COMPONENTS (global)
+   =================================== */
+
+/* --- Cards --- */
+.shadcn-card,
+.concept-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: calc(var(--radius-md) + 2px);
+    padding: 24px;
+    margin-bottom: 20px;
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.shadcn-card:hover,
+.concept-card:hover {
+    border-color: color-mix(in srgb, var(--border-primary) 50%, var(--accent));
+    box-shadow: var(--shadow-sm);
+    transform: translateY(-1px);
+}
+
+.shadcn-card-header,
+.concept-card .concept-card-icon + h4 {
+    margin-bottom: 12px;
+}
+
+.shadcn-card-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 4px;
+}
+
+.shadcn-card-description {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.5;
+}
+
+.shadcn-card-content {
+    font-size: 14px;
+    line-height: 1.7;
+    color: var(--text-primary);
+}
+
+.shadcn-card-content p {
+    margin-bottom: 12px;
+}
+
+/* Concept cards grid (shadcn-aligned) */
+.concept-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 16px;
+    margin: 24px 0;
+}
+
+.concept-card-icon {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.concept-card h4 {
+    margin: 0 0 6px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.concept-card p {
+    margin: 0;
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+/* --- Badges --- */
+.shadcn-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 10px;
+    border-radius: 9999px;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.6;
+    transition: background var(--transition-fast);
+}
+
+.shadcn-badge-default {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-primary);
+}
+
+.shadcn-badge-blue {
+    background: var(--accent-subtle);
+    color: var(--accent);
+    border: 1px solid transparent;
+}
+
+.shadcn-badge-green {
+    background: var(--success-subtle);
+    color: var(--success);
+    border: 1px solid transparent;
+}
+
+.shadcn-badge-amber {
+    background: var(--warning-subtle);
+    color: var(--warning);
+    border: 1px solid transparent;
+}
+
+/* --- Separator --- */
+.shadcn-separator {
+    height: 1px;
+    background: var(--border-primary);
+    margin: 24px 0;
+    border: none;
+}
+
+/* --- Alerts (also applies to .callout for backward compat) --- */
+.shadcn-alert,
+.callout {
+    position: relative;
+    padding: 16px 20px;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-primary);
+    background: var(--bg-secondary);
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+
+.shadcn-alert-info,
+.callout-info {
+    border-color: var(--accent);
+    background: var(--accent-subtle);
+    color: var(--text-primary);
+}
+
+.callout-tip {
+    border-color: var(--success);
+    background: var(--success-subtle);
+    color: var(--text-primary);
+}
+
+.callout-warning {
+    border-color: var(--warning);
+    background: var(--warning-subtle);
+    color: var(--text-primary);
+}
+
+.shadcn-alert-title,
+.callout-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.shadcn-alert-description {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.6;
+    padding-left: 26px;
+}
+
+/* --- Tabs --- */
+.shadcn-tabs {
+    margin: 24px 0;
+}
+
+.shadcn-tabs-list {
+    display: inline-flex;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    padding: 4px;
+    gap: 0;
+    margin-bottom: 16px;
+}
+
+.shadcn-tab-trigger {
+    padding: 8px 16px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-family: var(--font-sans);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: calc(var(--radius-md) - 2px);
+    transition: all var(--transition-fast);
+}
+
+.shadcn-tab-trigger:hover {
+    color: var(--text-primary);
+}
+
+.shadcn-tab-trigger.active {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    box-shadow: var(--shadow-sm);
+}
+
+.shadcn-tab-content {
+    display: none;
+}
+
+.shadcn-tab-content.active {
+    display: block;
+    animation: fadeIn 0.2s ease;
+}
+
+/* --- Comparison Grid --- */
+.shadcn-comparison-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin: 16px 0;
+}
+
+/* --- Tables --- */
+.chapter-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+
+.chapter-content .table-wrapper {
+    overflow-x: auto;
+    margin-bottom: 20px;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-primary);
+}
+
+.chapter-content table th {
+    background: var(--bg-tertiary);
+    font-weight: 600;
+    text-align: left;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border-primary);
+    color: var(--text-primary);
+    white-space: nowrap;
+}
+
+.chapter-content table td {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border-secondary);
+    color: var(--text-primary);
+}
+
+.chapter-content table tr:last-child td {
+    border-bottom: none;
+}
+
+.chapter-content table tr:hover td {
+    background: var(--bg-hover);
+}
+
+/* --- Accordions --- */
+.accordion {
+    margin-bottom: 12px;
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.accordion-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 16px;
+    background: var(--bg-secondary);
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 15px;
+    color: var(--text-primary);
+    transition: background var(--transition-fast);
+    user-select: none;
+}
+
+.accordion-header:hover {
+    background: var(--bg-hover);
+}
+
+.accordion-icon {
+    transition: transform var(--transition-fast);
+    color: var(--text-tertiary);
+}
+
+.accordion-header.open .accordion-icon {
+    transform: rotate(90deg);
+}
+
+.accordion-body {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height var(--transition-slow);
+}
+
+.accordion-body.open {
+    max-height: 2000px;
+}
+
+.accordion-body-inner {
+    padding: 16px;
+    border-top: 1px solid var(--border-secondary);
+}
+
+/* Resource links */
+.resource-list {
+    list-style: none;
+    padding: 0;
+    margin: 16px 0;
+}
+
+.resource-list li {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border-secondary);
+}
+
+.resource-list li:last-child {
+    border-bottom: none;
+}
+
+.resource-list a {
+    color: var(--text-link);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.resource-list a:hover {
+    text-decoration: underline;
+}
+
+.resource-icon {
+    color: var(--text-tertiary);
+    flex-shrink: 0;
+}
+
+/* ===================================
+   CHAPTER NAVIGATION (prev/next)
+   =================================== */
+.chapter-nav {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 48px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border-secondary);
+}
+
+.chapter-nav-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-family: var(--font-sans);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    max-width: 48%;
+}
+
+.chapter-nav-btn:hover:not(:disabled) {
+    border-color: var(--accent);
+    background: var(--accent-subtle);
+}
+
+.chapter-nav-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.chapter-nav-btn svg {
+    color: var(--text-tertiary);
+    flex-shrink: 0;
+}
+
+.chapter-nav-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.chapter-nav-text small {
+    font-size: 11px;
+    color: var(--text-tertiary);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.chapter-nav-text span {
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.chapter-nav-btn.next {
+    margin-left: auto;
+    text-align: right;
+}
+
+.chapter-nav-btn.next .chapter-nav-text {
+    align-items: flex-end;
+}
+
+/* ===================================
+   BACK TO TOP
+   =================================== */
+.back-to-top {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--accent);
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: translateY(12px);
+    transition: all var(--transition-normal);
+    box-shadow: var(--shadow-md);
+    z-index: 40;
+}
+
+.back-to-top.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.back-to-top:hover {
+    background: var(--accent-hover);
+    transform: translateY(-2px);
+}
+
+/* ===================================
+   LIGHTBOX
+   =================================== */
+.lightbox {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.85);
+    z-index: 200;
+    align-items: center;
+    justify-content: center;
+    cursor: zoom-out;
+    backdrop-filter: blur(4px);
+    padding: 24px;
+}
+
+.lightbox.active {
+    display: flex;
+}
+
+.lightbox-close {
+    position: absolute;
+    top: 16px;
+    right: 20px;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 32px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity var(--transition-fast);
+}
+
+.lightbox-close:hover {
+    opacity: 1;
+}
+
+.lightbox-img {
+    max-width: 90vw;
+    max-height: 90vh;
+    border-radius: var(--radius-md);
+    object-fit: contain;
+}
+
+/* ===================================
+   LOADING / COMING SOON
+   =================================== */
+.loading-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 80px 0;
+    color: var(--text-tertiary);
+}
+
+.spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--border-primary);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-bottom: 12px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.coming-soon {
+    text-align: center;
+    padding: 80px 20px;
+}
+
+.coming-soon-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+}
+
+.coming-soon h2 {
+    border: none;
+    margin-top: 0;
+    font-size: 1.5rem;
+}
+
+.coming-soon p {
+    color: var(--text-secondary);
+    font-size: 15px;
+}
+
+/* ===================================
+   NOTES PANEL (slide-in from right)
+   =================================== */
+.notes-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 380px;
+    max-width: 90vw;
+    height: 100vh;
+    background: var(--bg-secondary);
+    border-left: 1px solid var(--border-primary);
+    z-index: 150;
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform var(--transition-normal);
+    box-shadow: var(--shadow-lg);
+}
+
+.notes-panel.open {
+    transform: translateX(0);
+}
+
+.notes-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-primary);
+    flex-shrink: 0;
+}
+
+.notes-panel-header h3 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.notes-panel-close {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-fast);
+}
+
+.notes-panel-close:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+}
+
+.notes-panel-chapter {
+    padding: 10px 20px;
+    font-size: 12px;
+    color: var(--text-tertiary);
+    border-bottom: 1px solid var(--border-secondary);
+    flex-shrink: 0;
+    font-weight: 500;
+}
+
+.notes-textarea {
+    flex: 1;
+    padding: 16px 20px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: none;
+    resize: none;
+    font-family: var(--font-sans);
+    font-size: 14px;
+    line-height: 1.7;
+    outline: none;
+}
+
+.notes-textarea::placeholder {
+    color: var(--text-tertiary);
+}
+
+.notes-panel-footer {
+    padding: 10px 20px;
+    border-top: 1px solid var(--border-secondary);
+    flex-shrink: 0;
+}
+
+.notes-saved-indicator {
+    font-size: 12px;
+    color: var(--success);
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.notes-saved-indicator::before {
+    content: '\2713';
+    font-weight: bold;
+}
+
+.notes-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.3);
+    z-index: 140;
+    backdrop-filter: blur(2px);
+}
+
+.notes-overlay.active {
+    display: block;
+}
+
+/* ===================================
+   HOMEPAGE — Standalone Page Styles
+   =================================== */
+.homepage-body {
+    overflow-x: hidden;
+}
+
+/* Homepage nav bar */
+.homepage-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 32px;
+    backdrop-filter: blur(12px);
+    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
+    border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 50%, transparent);
+}
+
+.homepage-nav-logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    color: var(--text-primary);
+    font-size: 15px;
+    font-weight: 700;
+    transition: opacity var(--transition-fast);
+}
+
+.homepage-nav-logo:hover {
+    opacity: 0.8;
+}
+
+.homepage-nav-logo .logo-icon {
+    font-size: 24px;
+}
+
+.homepage-nav-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.homepage-nav-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    transition: all var(--transition-fast);
+}
+
+.homepage-nav-link:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+}
+
+.homepage-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-primary);
+    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.homepage-theme-toggle:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--accent);
+}
+
+/* Hero section */
+.homepage-hero {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+/* Animated grid background */
+.homepage-bg {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+}
+
+.homepage-grid {
+    position: absolute;
+    inset: -50%;
+    background-image:
+        linear-gradient(var(--border-secondary) 1px, transparent 1px),
+        linear-gradient(90deg, var(--border-secondary) 1px, transparent 1px);
+    background-size: 60px 60px;
+    animation: gridMove 20s linear infinite;
+    opacity: 0.5;
+}
+
+@keyframes gridMove {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(60px, 60px); }
+}
+
+.homepage-glow {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.15;
+    animation: glowPulse 6s ease-in-out infinite alternate;
+}
+
+.homepage-glow-1 {
+    width: 500px;
+    height: 500px;
+    background: var(--accent);
+    top: -10%;
+    left: -5%;
+    animation-delay: 0s;
+}
+
+.homepage-glow-2 {
+    width: 400px;
+    height: 400px;
+    background: #a855f7;
+    bottom: -10%;
+    right: -5%;
+    animation-delay: 2s;
+}
+
+.homepage-glow-3 {
+    width: 300px;
+    height: 300px;
+    background: var(--success);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation-delay: 4s;
+}
+
+@keyframes glowPulse {
+    0% { opacity: 0.1; transform: scale(1); }
+    100% { opacity: 0.25; transform: scale(1.2); }
+}
+
+.homepage-content {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    max-width: 720px;
+    padding: 0 24px;
+}
+
+.homepage-badge {
+    display: inline-block;
+    padding: 6px 16px;
+    border-radius: 20px;
+    border: 1px solid var(--border-primary);
+    background: var(--bg-secondary);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    letter-spacing: 0.02em;
+    margin-bottom: 24px;
+}
+
+.homepage-title {
+    font-size: 4rem;
+    font-weight: 800;
+    line-height: 1.1;
+    color: var(--text-primary);
+    letter-spacing: -0.03em;
+    margin-bottom: 20px;
+}
+
+.homepage-title-accent {
+    background: linear-gradient(135deg, var(--accent) 0%, #a855f7 50%, var(--success) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.homepage-subtitle {
+    font-size: 1.15rem;
+    color: var(--text-secondary);
+    line-height: 1.7;
+    max-width: 560px;
+    margin: 0 auto 32px;
+}
+
+.homepage-stats {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    margin-bottom: 36px;
+}
+
+.homepage-stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+}
+
+.homepage-stat-number {
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+}
+
+.homepage-stat-label {
+    font-size: 12px;
+    color: var(--text-tertiary);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.homepage-stat-divider {
+    width: 1px;
+    height: 40px;
+    background: var(--border-primary);
+}
+
+.homepage-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    margin-bottom: 40px;
+}
+
+.homepage-btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 28px;
+    border-radius: var(--radius-md);
+    border: none;
+    background: var(--accent);
+    color: white;
+    font-family: var(--font-sans);
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    box-shadow: 0 0 20px var(--accent-subtle);
+    text-decoration: none;
+}
+
+.homepage-btn-primary:hover {
+    background: var(--accent-hover);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 24px var(--accent-subtle);
+}
+
+.homepage-btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 24px;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-primary);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-family: var(--font-sans);
+    font-size: 15px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-decoration: none;
+}
+
+.homepage-btn-secondary:hover {
+    border-color: var(--text-tertiary);
+    color: var(--text-primary);
+    background: var(--bg-hover);
+}
+
+.homepage-topics {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+}
+
+.homepage-topic {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-tertiary);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-secondary);
+    transition: all var(--transition-fast);
+}
+
+.homepage-topic:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+}
+
+/* Homepage Features Section */
+.homepage-features {
+    position: relative;
+    z-index: 1;
+    padding: 80px 32px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.homepage-features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 20px;
+}
+
+.homepage-feature-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: calc(var(--radius-md) + 2px);
+    padding: 28px 24px;
+    text-align: center;
+    transition: all var(--transition-fast);
+}
+
+.homepage-feature-card:hover {
+    border-color: color-mix(in srgb, var(--border-primary) 50%, var(--accent));
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+}
+
+.homepage-feature-icon {
+    font-size: 32px;
+    margin-bottom: 12px;
+}
+
+.homepage-feature-card h3 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+}
+
+.homepage-feature-card p {
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* Homepage Footer */
+.homepage-footer {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    padding: 32px;
+    border-top: 1px solid var(--border-secondary);
+    font-size: 13px;
+    color: var(--text-tertiary);
+}
+
+.homepage-footer a {
+    color: var(--text-link);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.homepage-footer a:hover {
+    text-decoration: underline;
+}
+
+/* Homepage animations */
+.animate-fade-in {
+    opacity: 0;
+    animation: homeFadeIn 0.6s ease forwards;
+}
+
+.animate-fade-in-up {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: homeFadeInUp 0.6s ease forwards;
+}
+
+.delay-1 { animation-delay: 0.15s; }
+.delay-2 { animation-delay: 0.3s; }
+.delay-3 { animation-delay: 0.45s; }
+.delay-4 { animation-delay: 0.6s; }
+
+@keyframes homeFadeIn {
+    to { opacity: 1; }
+}
+
+@keyframes homeFadeInUp {
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* ===================================
+   MERMAID DIAGRAMS
+   =================================== */
+
+.mermaid-diagram {
+    margin: 20px 0;
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background: var(--bg-secondary);
+}
+
+.mermaid-diagram-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-secondary);
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.mermaid-diagram-header .diagram-icon {
+    font-size: 1rem;
+}
+
+.mermaid-diagram-header .diagram-type-badge {
+    display: inline-flex;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background: var(--accent-subtle);
+    color: var(--accent);
+    margin-left: auto;
+}
+
+.mermaid-display {
+    padding: 24px 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 120px;
+    overflow-x: auto;
+}
+
+.mermaid-display svg {
+    max-width: 100%;
+    height: auto;
+}
+
+.mermaid-code {
+    display: none;
+}
+
+/* ===================================
+   FULL-TEXT SEARCH RESULTS
+   =================================== */
+.search-kbd {
+    position: absolute;
+    right: 8px;
+    font-family: var(--font-sans);
+    font-size: 10px;
+    font-weight: 500;
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--border-primary);
+    background: var(--bg-tertiary);
+    color: var(--text-tertiary);
+    pointer-events: none;
+    line-height: 1.4;
+}
+
+.search-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    margin-top: 4px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+    max-height: 440px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.search-results[hidden] {
+    display: none;
+}
+
+.search-results-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-secondary);
+    flex-shrink: 0;
+}
+
+.search-results-count {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.search-results-close {
+    background: none;
+    border: none;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    padding: 0 2px;
+    border-radius: var(--radius-sm);
+    transition: color var(--transition-fast);
+}
+
+.search-results-close:hover {
+    color: var(--text-primary);
+}
+
+.search-results-list {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 4px;
+}
+
+.search-result-item {
+    display: block;
+    padding: 8px 10px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background var(--transition-fast);
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+    font-family: var(--font-sans);
+}
+
+.search-result-item:hover,
+.search-result-item:focus {
+    background: var(--bg-hover);
+    outline: none;
+}
+
+.search-result-item-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 2px;
+}
+
+.search-result-item-part {
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--accent);
+    background: var(--accent-subtle);
+    padding: 1px 6px;
+    border-radius: 999px;
+    flex-shrink: 0;
+}
+
+.search-result-item-snippet {
+    font-size: 12px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.search-result-item-snippet mark {
+    background: var(--warning-subtle);
+    color: var(--warning);
+    border-radius: 2px;
+    padding: 0 1px;
+    font-weight: 600;
+}
+
+.search-no-results {
+    padding: 24px 12px;
+    text-align: center;
+    color: var(--text-tertiary);
+    font-size: 13px;
+}
+
+/* ===================================
+   FLOATING TABLE OF CONTENTS
+   =================================== */
+.content-layout {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+    max-width: calc(var(--content-max-width) + 240px);
+    margin: 0 auto;
+}
+
+.content-layout .content-wrapper {
+    flex: 1;
+    min-width: 0;
+    max-width: var(--content-max-width);
+}
+
+.chapter-toc {
+    position: sticky;
+    top: calc(var(--topbar-height) + 32px);
+    width: 200px;
+    flex-shrink: 0;
+    max-height: calc(100vh - var(--topbar-height) - 64px);
+    overflow-y: auto;
+    display: none;
+    scrollbar-width: thin;
+}
+
+.chapter-toc-header {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-tertiary);
+    margin-bottom: 10px;
+    padding-left: 12px;
+}
+
+.chapter-toc-nav {
+    display: flex;
+    flex-direction: column;
+    border-left: 2px solid var(--border-secondary);
+}
+
+.chapter-toc-link {
+    display: block;
+    padding: 4px 12px;
+    margin-left: -2px;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--text-tertiary);
+    text-decoration: none;
+    border-left: 2px solid transparent;
+    transition: all var(--transition-fast);
+    line-height: 1.4;
+    cursor: pointer;
+}
+
+.chapter-toc-link:hover {
+    color: var(--text-secondary);
+}
+
+.chapter-toc-link.active {
+    color: var(--accent);
+    border-left-color: var(--accent);
+    font-weight: 500;
+}
+
+.chapter-toc-link.toc-h3 {
+    padding-left: 24px;
+    font-size: 11px;
+}
+
+/* Show TOC on wide screens */
+@media (min-width: 1200px) {
+    .chapter-toc {
+        display: block;
+    }
+}
+
+/* ===================================
+   QUIZ MODE
+   =================================== */
+.quiz-section {
+    margin-top: 40px;
+    padding-top: 32px;
+    border-top: 2px solid var(--border-secondary);
+}
+
+.quiz-section-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.quiz-section-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.quiz-section-badge {
+    font-size: 11px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: var(--accent-subtle);
+    color: var(--accent);
+}
+
+.quiz-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    padding: 20px;
+    margin-bottom: 16px;
+    transition: border-color var(--transition-fast);
+}
+
+.quiz-card.answered-correct {
+    border-color: var(--success);
+}
+
+.quiz-card.answered-wrong {
+    border-color: #f85149;
+}
+
+.quiz-question-number {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-tertiary);
+    margin-bottom: 8px;
+}
+
+.quiz-question-text {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    line-height: 1.5;
+}
+
+.quiz-options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.quiz-option {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 14px;
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-sm);
+    background: var(--bg-primary);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-family: var(--font-sans);
+    font-size: 13px;
+    color: var(--text-secondary);
+    text-align: left;
+    width: 100%;
+    line-height: 1.45;
+}
+
+.quiz-option:hover:not(.disabled) {
+    border-color: var(--accent);
+    background: var(--accent-subtle);
+    color: var(--text-primary);
+}
+
+.quiz-option.disabled {
+    cursor: default;
+}
+
+.quiz-option-marker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    border: 2px solid var(--border-primary);
+    font-size: 11px;
+    font-weight: 700;
+    color: var(--text-tertiary);
+    transition: all var(--transition-fast);
+}
+
+.quiz-option:hover:not(.disabled) .quiz-option-marker {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.quiz-option.selected {
+    border-color: var(--accent);
+    background: var(--accent-subtle);
+}
+
+.quiz-option.selected .quiz-option-marker {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: white;
+}
+
+.quiz-option.correct {
+    border-color: var(--success);
+    background: var(--success-subtle);
+}
+
+.quiz-option.correct .quiz-option-marker {
+    background: var(--success);
+    border-color: var(--success);
+    color: white;
+}
+
+.quiz-option.wrong {
+    border-color: #f85149;
+    background: #f8514922;
+}
+
+.quiz-option.wrong .quiz-option-marker {
+    background: #f85149;
+    border-color: #f85149;
+    color: white;
+}
+
+.quiz-explanation {
+    margin-top: 12px;
+    padding: 12px 14px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-sm);
+    border-left: 3px solid var(--accent);
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    display: none;
+}
+
+.quiz-explanation.visible {
+    display: block;
+}
+
+.quiz-score {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 18px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    margin-top: 16px;
+}
+
+.quiz-score-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.quiz-score-value {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--accent);
+}
+
+.quiz-score-bar {
+    flex: 1;
+    height: 6px;
+    background: var(--bg-tertiary);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.quiz-score-fill {
+    height: 100%;
+    background: var(--accent);
+    border-radius: 3px;
+    transition: width 0.4s ease;
+}
+
+.quiz-reset-btn {
+    padding: 6px 14px;
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-family: var(--font-sans);
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+}
+
+.quiz-reset-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+/* ===================================
+   RESPONSIVE DESIGN
+   =================================== */
+
+/* Tablets and small desktops */
+@media (max-width: 1024px) {
+    .sidebar {
+        transform: translateX(-100%);
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+        box-shadow: var(--shadow-lg);
+    }
+
+    .sidebar-close {
+        display: flex;
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .menu-toggle {
+        display: flex;
+    }
+
+    .content-area {
+        padding: 24px 20px 48px;
+    }
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+    html {
+        font-size: 15px;
+    }
+
+    .sidebar {
+        width: 85vw;
+        max-width: 320px;
+    }
+
+    .topbar {
+        padding: 0 16px;
+        height: 48px;
+    }
+
+    .btn-mark-complete span {
+        display: none;
+    }
+
+    .btn-mark-complete {
+        padding: 6px 8px;
+    }
+
+    .btn-notes-toggle span {
+        display: none;
+    }
+
+    .btn-notes-toggle {
+        padding: 6px 8px;
+    }
+
+    .content-area {
+        padding: 20px 16px 40px;
+    }
+
+    .chapter-content h1 {
+        font-size: 1.6rem;
+    }
+
+    .chapter-content h2 {
+        font-size: 1.3rem;
+    }
+
+    .chapter-nav {
+        flex-direction: column;
+    }
+
+    .chapter-nav-btn {
+        max-width: 100%;
+    }
+
+    .concept-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .back-to-top {
+        bottom: 16px;
+        right: 16px;
+    }
+
+    /* Homepage responsive */
+    .homepage-nav {
+        padding: 12px 16px;
+    }
+
+    .homepage-nav-logo span:not(.logo-icon) {
+        display: none;
+    }
+
+    .homepage-title {
+        font-size: 2.4rem;
+    }
+
+    .homepage-subtitle {
+        font-size: 1rem;
+    }
+
+    .homepage-stats {
+        gap: 16px;
+    }
+
+    .homepage-stat-number {
+        font-size: 1.5rem;
+    }
+
+    .homepage-actions {
+        flex-direction: column;
+    }
+
+    .homepage-btn-primary,
+    .homepage-btn-secondary {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .homepage-features {
+        padding: 48px 16px;
+    }
+
+    .homepage-features-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .shadcn-comparison-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .shadcn-tabs-list {
+        flex-wrap: wrap;
+    }
+}
+
+/* Large screens */
+@media (min-width: 1400px) {
+    .content-area {
+        padding: 40px 60px 80px;
+    }
+
+    .content-wrapper {
+        max-width: 900px;
+    }
+
+    .content-layout {
+        max-width: calc(900px + 240px);
+    }
+}
+
+/* Print */
+@media print {
+    .sidebar, .topbar, .back-to-top, .chapter-nav, .lightbox, .notes-panel, .homepage-nav, .chapter-toc, .quiz-section {
+        display: none !important;
+    }
+    .main-content {
+        margin-left: 0;
+    }
+}
diff --git a/website/docs/index.html b/website/docs/index.html
new file mode 100644
index 00000000000..1d8b41f3fdd
--- /dev/null
+++ b/website/docs/index.html
@@ -0,0 +1,460 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>System Design Primer — Documentation</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="../css/styles.css">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏗️</text></svg>">
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+</head>
+<body>
+    <!-- Mobile Overlay -->
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
+
+    <!-- Sidebar Navigation -->
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <a href="/" class="logo" id="logoLink" title="Back to homepage">
+                <span class="logo-icon">🏗️</span>
+                <span class="logo-text">System Design<br><small>Primer</small></span>
+            </a>
+            <button class="sidebar-close" id="sidebarClose" aria-label="Close sidebar">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+        </div>
+
+        <!-- Search -->
+        <div class="sidebar-search">
+            <div class="search-input-wrapper">
+                <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                <input type="text" id="searchInput" placeholder="Search chapters & content..." autocomplete="off">
+                <kbd class="search-kbd">Ctrl K</kbd>
+            </div>
+            <!-- Full-text search results -->
+            <div class="search-results" id="searchResults" hidden>
+                <div class="search-results-header">
+                    <span class="search-results-count" id="searchResultsCount">0 results</span>
+                    <button class="search-results-close" id="searchResultsClose" aria-label="Close search results">&times;</button>
+                </div>
+                <div class="search-results-list" id="searchResultsList"></div>
+            </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="sidebar-progress">
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <span class="progress-text" id="progressText">0% complete</span>
+        </div>
+
+        <!-- Navigation -->
+        <nav class="sidebar-nav" id="sidebarNav">
+            <!-- Part A -->
+            <div class="nav-group">
+                <div class="nav-group-header" data-group="part-a">
+                    <span class="nav-group-icon">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+                    </span>
+                    <span class="nav-group-label">Part A: Getting Started</span>
+                    <span class="nav-group-badge">4</span>
+                </div>
+                <div class="nav-group-items" data-group-items="part-a">
+                    <a href="#" class="nav-item active" data-chapter="motivation">
+                        <span class="nav-item-status" data-check="motivation"></span>
+                        <span class="nav-item-number">01</span>
+                        <span class="nav-item-label">Motivation</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="flashcards">
+                        <span class="nav-item-status" data-check="flashcards"></span>
+                        <span class="nav-item-number">02</span>
+                        <span class="nav-item-label">Anki Flashcards</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="study-guide">
+                        <span class="nav-item-status" data-check="study-guide"></span>
+                        <span class="nav-item-number">03</span>
+                        <span class="nav-item-label">Study Guide</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="interview-approach">
+                        <span class="nav-item-status" data-check="interview-approach"></span>
+                        <span class="nav-item-number">04</span>
+                        <span class="nav-item-label">Interview Approach</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Part B -->
+            <div class="nav-group">
+                <div class="nav-group-header" data-group="part-b">
+                    <span class="nav-group-icon">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+                    </span>
+                    <span class="nav-group-label">Part B: Core Concepts</span>
+                    <span class="nav-group-badge">5</span>
+                </div>
+                <div class="nav-group-items collapsed" data-group-items="part-b">
+                    <a href="#" class="nav-item" data-chapter="performance-scalability">
+                        <span class="nav-item-status" data-check="performance-scalability"></span>
+                        <span class="nav-item-number">05</span>
+                        <span class="nav-item-label">Performance vs Scalability</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="latency-throughput">
+                        <span class="nav-item-status" data-check="latency-throughput"></span>
+                        <span class="nav-item-number">06</span>
+                        <span class="nav-item-label">Latency vs Throughput</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="availability-consistency">
+                        <span class="nav-item-status" data-check="availability-consistency"></span>
+                        <span class="nav-item-number">07</span>
+                        <span class="nav-item-label">Availability vs Consistency</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="consistency-patterns">
+                        <span class="nav-item-status" data-check="consistency-patterns"></span>
+                        <span class="nav-item-number">08</span>
+                        <span class="nav-item-label">Consistency Patterns</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="availability-patterns">
+                        <span class="nav-item-status" data-check="availability-patterns"></span>
+                        <span class="nav-item-number">09</span>
+                        <span class="nav-item-label">Availability Patterns</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Part C -->
+            <div class="nav-group">
+                <div class="nav-group-header" data-group="part-c">
+                    <span class="nav-group-icon">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+                    </span>
+                    <span class="nav-group-label">Part C: Infrastructure</span>
+                    <span class="nav-group-badge">4</span>
+                </div>
+                <div class="nav-group-items collapsed" data-group-items="part-c">
+                    <a href="#" class="nav-item" data-chapter="dns">
+                        <span class="nav-item-status" data-check="dns"></span>
+                        <span class="nav-item-number">10</span>
+                        <span class="nav-item-label">Domain Name System</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="cdn">
+                        <span class="nav-item-status" data-check="cdn"></span>
+                        <span class="nav-item-number">11</span>
+                        <span class="nav-item-label">Content Delivery Network</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="load-balancer">
+                        <span class="nav-item-status" data-check="load-balancer"></span>
+                        <span class="nav-item-number">12</span>
+                        <span class="nav-item-label">Load Balancer</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="reverse-proxy">
+                        <span class="nav-item-status" data-check="reverse-proxy"></span>
+                        <span class="nav-item-number">13</span>
+                        <span class="nav-item-label">Reverse Proxy</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Part D -->
+            <div class="nav-group">
+                <div class="nav-group-header" data-group="part-d">
+                    <span class="nav-group-icon">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+                    </span>
+                    <span class="nav-group-label">Part D: Data Layer</span>
+                    <span class="nav-group-badge">4</span>
+                </div>
+                <div class="nav-group-items collapsed" data-group-items="part-d">
+                    <a href="#" class="nav-item" data-chapter="application-layer">
+                        <span class="nav-item-status" data-check="application-layer"></span>
+                        <span class="nav-item-number">14</span>
+                        <span class="nav-item-label">Application Layer</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="database">
+                        <span class="nav-item-status" data-check="database"></span>
+                        <span class="nav-item-number">15</span>
+                        <span class="nav-item-label">Database</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="cache">
+                        <span class="nav-item-status" data-check="cache"></span>
+                        <span class="nav-item-number">16</span>
+                        <span class="nav-item-label">Cache</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="asynchronism">
+                        <span class="nav-item-status" data-check="asynchronism"></span>
+                        <span class="nav-item-number">17</span>
+                        <span class="nav-item-label">Asynchronism</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Part E -->
+            <div class="nav-group">
+                <div class="nav-group-header" data-group="part-e">
+                    <span class="nav-group-icon">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+                    </span>
+                    <span class="nav-group-label">Part E: Communication</span>
+                    <span class="nav-group-badge">2</span>
+                </div>
+                <div class="nav-group-items collapsed" data-group-items="part-e">
+                    <a href="#" class="nav-item" data-chapter="communication">
+                        <span class="nav-item-status" data-check="communication"></span>
+                        <span class="nav-item-number">18</span>
+                        <span class="nav-item-label">Communication</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="security">
+                        <span class="nav-item-status" data-check="security"></span>
+                        <span class="nav-item-number">19</span>
+                        <span class="nav-item-label">Security</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Part F -->
+            <div class="nav-group">
+                <div class="nav-group-header" data-group="part-f">
+                    <span class="nav-group-icon">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+                    </span>
+                    <span class="nav-group-label">Part F: Practice Problems</span>
+                    <span class="nav-group-badge">8</span>
+                </div>
+                <div class="nav-group-items collapsed" data-group-items="part-f">
+                    <a href="#" class="nav-item" data-chapter="design-pastebin">
+                        <span class="nav-item-status" data-check="design-pastebin"></span>
+                        <span class="nav-item-number">20</span>
+                        <span class="nav-item-label">Design Pastebin</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="design-twitter">
+                        <span class="nav-item-status" data-check="design-twitter"></span>
+                        <span class="nav-item-number">21</span>
+                        <span class="nav-item-label">Design Twitter</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="design-web-crawler">
+                        <span class="nav-item-status" data-check="design-web-crawler"></span>
+                        <span class="nav-item-number">22</span>
+                        <span class="nav-item-label">Design Web Crawler</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="design-mint">
+                        <span class="nav-item-status" data-check="design-mint"></span>
+                        <span class="nav-item-number">23</span>
+                        <span class="nav-item-label">Design Mint.com</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="design-social-graph">
+                        <span class="nav-item-status" data-check="design-social-graph"></span>
+                        <span class="nav-item-number">24</span>
+                        <span class="nav-item-label">Design Social Network</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="design-kv-store">
+                        <span class="nav-item-status" data-check="design-kv-store"></span>
+                        <span class="nav-item-number">25</span>
+                        <span class="nav-item-label">Design Key-Value Cache</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="design-sales-rank">
+                        <span class="nav-item-status" data-check="design-sales-rank"></span>
+                        <span class="nav-item-number">26</span>
+                        <span class="nav-item-label">Design Sales Ranking</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="design-scaling-aws">
+                        <span class="nav-item-status" data-check="design-scaling-aws"></span>
+                        <span class="nav-item-number">27</span>
+                        <span class="nav-item-label">Scaling on AWS</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Part G -->
+            <div class="nav-group">
+                <div class="nav-group-header" data-group="part-g">
+                    <span class="nav-group-icon">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+                    </span>
+                    <span class="nav-group-label">Part G: OO Design</span>
+                    <span class="nav-group-badge">6</span>
+                </div>
+                <div class="nav-group-items collapsed" data-group-items="part-g">
+                    <a href="#" class="nav-item" data-chapter="oo-hash-map">
+                        <span class="nav-item-status" data-check="oo-hash-map"></span>
+                        <span class="nav-item-number">28</span>
+                        <span class="nav-item-label">Design Hash Map</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="oo-lru-cache">
+                        <span class="nav-item-status" data-check="oo-lru-cache"></span>
+                        <span class="nav-item-number">29</span>
+                        <span class="nav-item-label">Design LRU Cache</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="oo-call-center">
+                        <span class="nav-item-status" data-check="oo-call-center"></span>
+                        <span class="nav-item-number">30</span>
+                        <span class="nav-item-label">Design Call Center</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="oo-deck-of-cards">
+                        <span class="nav-item-status" data-check="oo-deck-of-cards"></span>
+                        <span class="nav-item-number">31</span>
+                        <span class="nav-item-label">Design Deck of Cards</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="oo-parking-lot">
+                        <span class="nav-item-status" data-check="oo-parking-lot"></span>
+                        <span class="nav-item-number">32</span>
+                        <span class="nav-item-label">Design Parking Lot</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="oo-online-chat">
+                        <span class="nav-item-status" data-check="oo-online-chat"></span>
+                        <span class="nav-item-number">33</span>
+                        <span class="nav-item-label">Design Online Chat</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Part H -->
+            <div class="nav-group">
+                <div class="nav-group-header" data-group="part-h">
+                    <span class="nav-group-icon">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+                    </span>
+                    <span class="nav-group-label">Part H: Appendix</span>
+                    <span class="nav-group-badge">5</span>
+                </div>
+                <div class="nav-group-items collapsed" data-group-items="part-h">
+                    <a href="#" class="nav-item" data-chapter="powers-of-two">
+                        <span class="nav-item-status" data-check="powers-of-two"></span>
+                        <span class="nav-item-number">34</span>
+                        <span class="nav-item-label">Powers of Two Table</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="latency-numbers">
+                        <span class="nav-item-status" data-check="latency-numbers"></span>
+                        <span class="nav-item-number">35</span>
+                        <span class="nav-item-label">Latency Numbers</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="additional-questions">
+                        <span class="nav-item-status" data-check="additional-questions"></span>
+                        <span class="nav-item-number">36</span>
+                        <span class="nav-item-label">Additional Questions</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="real-world-architectures">
+                        <span class="nav-item-status" data-check="real-world-architectures"></span>
+                        <span class="nav-item-number">37</span>
+                        <span class="nav-item-label">Real World Architectures</span>
+                    </a>
+                    <a href="#" class="nav-item" data-chapter="engineering-blogs">
+                        <span class="nav-item-status" data-check="engineering-blogs"></span>
+                        <span class="nav-item-number">38</span>
+                        <span class="nav-item-label">Engineering Blogs</span>
+                    </a>
+                </div>
+            </div>
+        </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content" id="mainContent">
+        <!-- Top Bar -->
+        <header class="topbar">
+            <button class="menu-toggle" id="menuToggle" aria-label="Open menu">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+            </button>
+            <div class="breadcrumb" id="breadcrumb">
+                <span class="breadcrumb-part">Part A</span>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+                <span class="breadcrumb-chapter">Motivation</span>
+            </div>
+            <div class="topbar-actions">
+                <button class="btn-notes-toggle" id="notesToggle" title="My Notes">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+                    <span>Notes</span>
+                </button>
+                <button class="btn-mark-complete" id="markComplete" title="Mark chapter as completed">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+                    <span>Mark Complete</span>
+                </button>
+                <button class="theme-toggle-topbar" id="themeToggle" aria-label="Toggle theme">
+                    <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+                    <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                </button>
+            </div>
+        </header>
+
+        <!-- Chapter Content Area -->
+        <div class="content-area" id="contentArea">
+            <div class="content-layout">
+            <div class="content-wrapper">
+                <div id="chapterContent" class="chapter-content">
+                    <div class="loading-spinner">
+                        <div class="spinner"></div>
+                        <p>Loading chapter...</p>
+                    </div>
+                </div>
+
+                <!-- Chapter Navigation -->
+                <div class="chapter-nav" id="chapterNav">
+                    <button class="chapter-nav-btn prev" id="prevChapter" disabled>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+                        <div class="chapter-nav-text">
+                            <small>Previous</small>
+                            <span id="prevLabel">—</span>
+                        </div>
+                    </button>
+                    <button class="chapter-nav-btn next" id="nextChapter">
+                        <div class="chapter-nav-text">
+                            <small>Next</small>
+                            <span id="nextLabel">Anki Flashcards</span>
+                        </div>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+                    </button>
+                </div>
+            </div>
+            <!-- Floating Table of Contents -->
+            <aside class="chapter-toc" id="chapterToc">
+                <div class="chapter-toc-header">On this page</div>
+                <nav class="chapter-toc-nav" id="chapterTocNav"></nav>
+            </aside>
+            </div>
+        </div>
+
+        <!-- Back to top -->
+        <button class="back-to-top" id="backToTop" aria-label="Back to top">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>
+        </button>
+    </main>
+
+    <!-- Image Lightbox -->
+    <div class="lightbox" id="lightbox">
+        <button class="lightbox-close" aria-label="Close">&times;</button>
+        <img src="" alt="" class="lightbox-img" id="lightboxImg">
+    </div>
+
+    <!-- Notes Panel (slide-in) -->
+    <div class="notes-panel" id="notesPanel">
+        <div class="notes-panel-header">
+            <h3>📝 My Notes</h3>
+            <button class="notes-panel-close" id="notesPanelClose" aria-label="Close notes">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+        </div>
+        <div class="notes-panel-chapter" id="notesPanelChapter">Chapter: Motivation</div>
+        <textarea class="notes-textarea" id="notesTextarea" placeholder="Type your notes for this chapter here..."></textarea>
+        <div class="notes-panel-footer">
+            <span class="notes-saved-indicator" id="notesSavedIndicator">All changes saved</span>
+        </div>
+    </div>
+    <div class="notes-overlay" id="notesOverlay"></div>
+
+    <!-- Chapter content (modular, one file per part) -->
+    <script src="../js/chapters/chapters-a.js"></script>
+    <script src="../js/chapters/chapters-b.js"></script>
+    <script src="../js/chapters/chapters-c.js"></script>
+    <script src="../js/chapters/chapters-d.js"></script>
+    <script src="../js/chapters/chapters-e.js"></script>
+    <script src="../js/chapters/chapters-f.js"></script>
+    <script src="../js/chapters/chapters-g.js"></script>
+    <script src="../js/chapters/chapters-h.js"></script>
+    <script src="../js/chapters/chapters-core.js"></script>
+    <script src="../js/quizzes.js"></script>
+    <!-- Application logic -->
+    <script src="../js/app.js"></script>
+</body>
+</html>
diff --git a/website/images/0vBc0hN.png b/website/images/0vBc0hN.png
new file mode 100644
index 00000000000..f1466344e2b
Binary files /dev/null and b/website/images/0vBc0hN.png differ
diff --git a/website/images/4edXG0T.png b/website/images/4edXG0T.png
new file mode 100644
index 00000000000..f2fc0c295e6
Binary files /dev/null and b/website/images/4edXG0T.png differ
diff --git a/website/images/4j99mhe.png b/website/images/4j99mhe.png
new file mode 100644
index 00000000000..9ced87347c1
Binary files /dev/null and b/website/images/4j99mhe.png differ
diff --git a/website/images/54GYsSx.png b/website/images/54GYsSx.png
new file mode 100644
index 00000000000..b23ea554e71
Binary files /dev/null and b/website/images/54GYsSx.png differ
diff --git a/website/images/5KeocQs.jpg b/website/images/5KeocQs.jpg
new file mode 100644
index 00000000000..0b718689256
Binary files /dev/null and b/website/images/5KeocQs.jpg differ
diff --git a/website/images/C9ioGtn.png b/website/images/C9ioGtn.png
new file mode 100644
index 00000000000..cea66c98028
Binary files /dev/null and b/website/images/C9ioGtn.png differ
diff --git a/website/images/IOyLj4i.jpg b/website/images/IOyLj4i.jpg
new file mode 100644
index 00000000000..413c8ee8d83
Binary files /dev/null and b/website/images/IOyLj4i.jpg differ
diff --git a/website/images/JdAsdvG.jpg b/website/images/JdAsdvG.jpg
new file mode 100644
index 00000000000..8c989e203eb
Binary files /dev/null and b/website/images/JdAsdvG.jpg differ
diff --git a/website/images/MzExP06.png b/website/images/MzExP06.png
new file mode 100644
index 00000000000..348df4761de
Binary files /dev/null and b/website/images/MzExP06.png differ
diff --git a/website/images/ONjORqk.png b/website/images/ONjORqk.png
new file mode 100644
index 00000000000..3841ca6a7e3
Binary files /dev/null and b/website/images/ONjORqk.png differ
diff --git a/website/images/OfVllex.png b/website/images/OfVllex.png
new file mode 100644
index 00000000000..c8dba136c0a
Binary files /dev/null and b/website/images/OfVllex.png differ
diff --git a/website/images/Q6z24La.png b/website/images/Q6z24La.png
new file mode 100644
index 00000000000..b673a72c5bd
Binary files /dev/null and b/website/images/Q6z24La.png differ
diff --git a/website/images/TcUo2fw.png b/website/images/TcUo2fw.png
new file mode 100644
index 00000000000..d0727cb62c4
Binary files /dev/null and b/website/images/TcUo2fw.png differ
diff --git a/website/images/U3qV33e.png b/website/images/U3qV33e.png
new file mode 100644
index 00000000000..a0e147e92e8
Binary files /dev/null and b/website/images/U3qV33e.png differ
diff --git a/website/images/V5q57vU.png b/website/images/V5q57vU.png
new file mode 100644
index 00000000000..39f4f05363f
Binary files /dev/null and b/website/images/V5q57vU.png differ
diff --git a/website/images/Xkm5CXz.png b/website/images/Xkm5CXz.png
new file mode 100644
index 00000000000..3aa5dd3805d
Binary files /dev/null and b/website/images/Xkm5CXz.png differ
diff --git a/website/images/b4YtAEN.png b/website/images/b4YtAEN.png
new file mode 100644
index 00000000000..bdb7ac4c5ae
Binary files /dev/null and b/website/images/b4YtAEN.png differ
diff --git a/website/images/bWxPtQA.png b/website/images/bWxPtQA.png
new file mode 100644
index 00000000000..e5e0726b7c2
Binary files /dev/null and b/website/images/bWxPtQA.png differ
diff --git a/website/images/bgLMI2u.png b/website/images/bgLMI2u.png
new file mode 100644
index 00000000000..e40e658dc11
Binary files /dev/null and b/website/images/bgLMI2u.png differ
diff --git a/website/images/cdCv5g7.png b/website/images/cdCv5g7.png
new file mode 100644
index 00000000000..d9ab23e51d7
Binary files /dev/null and b/website/images/cdCv5g7.png differ
diff --git a/website/images/fNcl65g.png b/website/images/fNcl65g.png
new file mode 100644
index 00000000000..7d5b6f6e3da
Binary files /dev/null and b/website/images/fNcl65g.png differ
diff --git a/website/images/h81n9iK.png b/website/images/h81n9iK.png
new file mode 100644
index 00000000000..2ba3f1b7548
Binary files /dev/null and b/website/images/h81n9iK.png differ
diff --git a/website/images/h9TAuGI.jpg b/website/images/h9TAuGI.jpg
new file mode 100644
index 00000000000..692e0631732
Binary files /dev/null and b/website/images/h9TAuGI.jpg differ
diff --git a/website/images/iF4Mkb5.png b/website/images/iF4Mkb5.png
new file mode 100644
index 00000000000..391e3cd9c48
Binary files /dev/null and b/website/images/iF4Mkb5.png differ
diff --git a/website/images/jj3A5N8.png b/website/images/jj3A5N8.png
new file mode 100644
index 00000000000..e400e5f4cd1
Binary files /dev/null and b/website/images/jj3A5N8.png differ
diff --git a/website/images/jrUBAF7.png b/website/images/jrUBAF7.png
new file mode 100644
index 00000000000..623b58242b9
Binary files /dev/null and b/website/images/jrUBAF7.png differ
diff --git a/website/images/krAHLGg.png b/website/images/krAHLGg.png
new file mode 100644
index 00000000000..7cc0e802381
Binary files /dev/null and b/website/images/krAHLGg.png differ
diff --git a/website/images/kxtjqgE.png b/website/images/kxtjqgE.png
new file mode 100644
index 00000000000..98d6c06b369
Binary files /dev/null and b/website/images/kxtjqgE.png differ
diff --git a/website/images/n16iOGk.png b/website/images/n16iOGk.png
new file mode 100644
index 00000000000..8a9be232fd9
Binary files /dev/null and b/website/images/n16iOGk.png differ
diff --git a/website/images/n41Azff.png b/website/images/n41Azff.png
new file mode 100644
index 00000000000..b4ed1a81b0f
Binary files /dev/null and b/website/images/n41Azff.png differ
diff --git a/website/images/rgSrvjG.png b/website/images/rgSrvjG.png
new file mode 100644
index 00000000000..dddfc503c3c
Binary files /dev/null and b/website/images/rgSrvjG.png differ
diff --git a/website/images/wU8x5Id.png b/website/images/wU8x5Id.png
new file mode 100644
index 00000000000..369a9c3a503
Binary files /dev/null and b/website/images/wU8x5Id.png differ
diff --git a/website/images/wXGqG5f.png b/website/images/wXGqG5f.png
new file mode 100644
index 00000000000..7184333c11b
Binary files /dev/null and b/website/images/wXGqG5f.png differ
diff --git a/website/images/yB5SYwm.png b/website/images/yB5SYwm.png
new file mode 100644
index 00000000000..6d494b4ddc2
Binary files /dev/null and b/website/images/yB5SYwm.png differ
diff --git a/website/images/yzDrJtA.jpg b/website/images/yzDrJtA.jpg
new file mode 100644
index 00000000000..f70ebd6504c
Binary files /dev/null and b/website/images/yzDrJtA.jpg differ
diff --git a/website/images/zdCAkB3.png b/website/images/zdCAkB3.png
new file mode 100644
index 00000000000..8df59582039
Binary files /dev/null and b/website/images/zdCAkB3.png differ
diff --git a/website/index.html b/website/index.html
new file mode 100644
index 00000000000..63ae3f409d7
--- /dev/null
+++ b/website/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>System Design Primer — Learn Large-Scale System Design</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏗️</text></svg>">
+</head>
+<body class="homepage-body">
+    <!-- Top Navigation -->
+    <nav class="homepage-nav animate-fade-in">
+        <a href="/" class="homepage-nav-logo">
+            <span class="logo-icon">🏗️</span>
+            <span>System Design Primer</span>
+        </a>
+        <div class="homepage-nav-actions">
+            <a href="https://github.com/donnemartin/system-design-primer" target="_blank" rel="noopener" class="homepage-nav-link" title="View on GitHub">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+            </a>
+            <button class="homepage-theme-toggle" id="themeToggle" aria-label="Toggle theme">
+                <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+                <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="homepage-hero">
+        <div class="homepage-bg">
+            <div class="homepage-grid"></div>
+            <div class="homepage-glow homepage-glow-1"></div>
+            <div class="homepage-glow homepage-glow-2"></div>
+            <div class="homepage-glow homepage-glow-3"></div>
+        </div>
+        <div class="homepage-content">
+            <div class="homepage-badge animate-fade-in">Open Source &bull; 250k+ Stars &bull; Community Driven</div>
+            <h1 class="homepage-title animate-fade-in-up">
+                The System Design<br>
+                <span class="homepage-title-accent">Primer</span>
+            </h1>
+            <p class="homepage-subtitle animate-fade-in-up delay-1">Learn how to design large-scale systems. Prep for the system design interview. An organized, interactive collection of resources to help you build systems at scale.</p>
+            <div class="homepage-stats animate-fade-in-up delay-2">
+                <div class="homepage-stat">
+                    <span class="homepage-stat-number" data-target="38">0</span>
+                    <span class="homepage-stat-label">Chapters</span>
+                </div>
+                <div class="homepage-stat-divider"></div>
+                <div class="homepage-stat">
+                    <span class="homepage-stat-number" data-target="8">0</span>
+                    <span class="homepage-stat-label">Parts</span>
+                </div>
+                <div class="homepage-stat-divider"></div>
+                <div class="homepage-stat">
+                    <span class="homepage-stat-number" data-target="14">0</span>
+                    <span class="homepage-stat-label">Practice Problems</span>
+                </div>
+            </div>
+            <div class="homepage-actions animate-fade-in-up delay-3">
+                <a href="docs/" class="homepage-btn-primary">
+                    <span>Start Learning</span>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+                </a>
+                <a href="docs/#resume" class="homepage-btn-secondary">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>
+                    <span>Resume Progress</span>
+                </a>
+            </div>
+            <div class="homepage-topics animate-fade-in-up delay-4">
+                <span class="homepage-topic">Scalability</span>
+                <span class="homepage-topic">Load Balancing</span>
+                <span class="homepage-topic">Caching</span>
+                <span class="homepage-topic">Database</span>
+                <span class="homepage-topic">CDN</span>
+                <span class="homepage-topic">Microservices</span>
+                <span class="homepage-topic">REST</span>
+                <span class="homepage-topic">CAP Theorem</span>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="homepage-features animate-fade-in-up delay-4">
+        <div class="homepage-features-grid">
+            <div class="homepage-feature-card">
+                <div class="homepage-feature-icon">📚</div>
+                <h3>38 Chapters</h3>
+                <p>Comprehensive coverage from core concepts to advanced system design patterns.</p>
+            </div>
+            <div class="homepage-feature-card">
+                <div class="homepage-feature-icon">🎯</div>
+                <h3>Interview Ready</h3>
+                <p>Practice real system design interview questions with detailed solutions.</p>
+            </div>
+            <div class="homepage-feature-card">
+                <div class="homepage-feature-icon">📝</div>
+                <h3>Personal Notes</h3>
+                <p>Take notes per chapter with auto-save. Your study companion, built in.</p>
+            </div>
+            <div class="homepage-feature-card">
+                <div class="homepage-feature-icon">🌙</div>
+                <h3>Dark &amp; Light</h3>
+                <p>Beautiful reading experience in both themes. Easy on your eyes, day or night.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="homepage-footer">
+        <p>Built from <a href="https://github.com/donnemartin/system-design-primer" target="_blank" rel="noopener">system-design-primer</a> by Donne Martin. Interactive edition.</p>
+    </footer>
+
+    <script>
+    (function() {
+        // Restore theme
+        var saved = localStorage.getItem('sdp_theme');
+        if (saved) document.documentElement.setAttribute('data-theme', saved);
+
+        // Theme toggle
+        document.getElementById('themeToggle').addEventListener('click', function() {
+            var current = document.documentElement.getAttribute('data-theme');
+            var next = current === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', next);
+            localStorage.setItem('sdp_theme', next);
+        });
+
+        // Counter animations
+        setTimeout(function() {
+            document.querySelectorAll('.homepage-stat-number[data-target]').forEach(function(el) {
+                var target = parseInt(el.getAttribute('data-target'));
+                var duration = 1200;
+                var start = performance.now();
+                function tick(now) {
+                    var elapsed = now - start;
+                    var progress = Math.min(elapsed / duration, 1);
+                    var eased = 1 - Math.pow(1 - progress, 3);
+                    el.textContent = Math.round(target * eased);
+                    if (progress < 1) requestAnimationFrame(tick);
+                }
+                requestAnimationFrame(tick);
+            });
+        }, 600);
+    })();
+    </script>
+</body>
+</html>
diff --git a/website/js/app.js b/website/js/app.js
new file mode 100644
index 00000000000..f302c8dfa2a
--- /dev/null
+++ b/website/js/app.js
@@ -0,0 +1,955 @@
+/**
+ * System Design Primer — Documentation App
+ * Navigation, theme, search, progress tracking, notes, shadcn tabs
+ * Runs on /docs/ page only.
+ */
+
+(function () {
+    'use strict';
+
+    // ============================================
+    // DOM References
+    // ============================================
+    const sidebar = document.getElementById('sidebar');
+    const sidebarOverlay = document.getElementById('sidebarOverlay');
+    const sidebarClose = document.getElementById('sidebarClose');
+    const menuToggle = document.getElementById('menuToggle');
+    const themeToggle = document.getElementById('themeToggle');
+    const searchInput = document.getElementById('searchInput');
+    const sidebarNav = document.getElementById('sidebarNav');
+    const progressFill = document.getElementById('progressFill');
+    const progressText = document.getElementById('progressText');
+    const contentArea = document.getElementById('contentArea');
+    const chapterContent = document.getElementById('chapterContent');
+    const breadcrumb = document.getElementById('breadcrumb');
+    const markComplete = document.getElementById('markComplete');
+    const prevChapter = document.getElementById('prevChapter');
+    const nextChapter = document.getElementById('nextChapter');
+    const prevLabel = document.getElementById('prevLabel');
+    const nextLabel = document.getElementById('nextLabel');
+    const backToTop = document.getElementById('backToTop');
+    const lightbox = document.getElementById('lightbox');
+    const lightboxImg = document.getElementById('lightboxImg');
+
+    // Notes
+    const notesToggle = document.getElementById('notesToggle');
+    const notesPanel = document.getElementById('notesPanel');
+    const notesPanelClose = document.getElementById('notesPanelClose');
+    const notesPanelChapter = document.getElementById('notesPanelChapter');
+    const notesTextarea = document.getElementById('notesTextarea');
+    const notesSavedIndicator = document.getElementById('notesSavedIndicator');
+    const notesOverlay = document.getElementById('notesOverlay');
+
+    // Search results
+    const searchResults = document.getElementById('searchResults');
+    const searchResultsList = document.getElementById('searchResultsList');
+    const searchResultsCount = document.getElementById('searchResultsCount');
+    const searchResultsClose = document.getElementById('searchResultsClose');
+
+    // Table of Contents
+    const chapterToc = document.getElementById('chapterToc');
+    const chapterTocNav = document.getElementById('chapterTocNav');
+
+    // ============================================
+    // State
+    // ============================================
+    let currentChapter = 'motivation';
+    let completedChapters = new Set();
+    let chapterNotes = {};
+    let notesSaveTimeout = null;
+    let quizScores = {};         // { chapterKey: { answered: [0-based indices answered], correct: count } }
+    let searchDebounce = null;
+    let tocScrollRAF = null;
+
+    // ============================================
+    // Initialization
+    // ============================================
+    function init() {
+        loadState();
+        restoreTheme();
+
+        // Check if #resume hash is present — load saved chapter
+        if (window.location.hash === '#resume' && currentChapter) {
+            loadChapter(currentChapter);
+        } else {
+            loadChapter(currentChapter);
+        }
+
+        updateProgress();
+        bindEvents();
+
+        // Clean up the hash so URL looks clean
+        if (window.location.hash) {
+            history.replaceState(null, '', window.location.pathname);
+        }
+    }
+
+    // ============================================
+    // State Persistence (localStorage)
+    // ============================================
+    function loadState() {
+        try {
+            const saved = localStorage.getItem('sdp_completed');
+            if (saved) completedChapters = new Set(JSON.parse(saved));
+
+            const savedChapter = localStorage.getItem('sdp_current');
+            if (savedChapter && CHAPTERS[savedChapter]) currentChapter = savedChapter;
+
+            const savedNotes = localStorage.getItem('sdp_notes');
+            if (savedNotes) chapterNotes = JSON.parse(savedNotes);
+
+            const savedQuiz = localStorage.getItem('sdp_quiz');
+            if (savedQuiz) quizScores = JSON.parse(savedQuiz);
+        } catch (e) { /* ignore */ }
+    }
+
+    function saveState() {
+        try {
+            localStorage.setItem('sdp_completed', JSON.stringify([...completedChapters]));
+            localStorage.setItem('sdp_current', currentChapter);
+            localStorage.setItem('sdp_notes', JSON.stringify(chapterNotes));
+            localStorage.setItem('sdp_quiz', JSON.stringify(quizScores));
+        } catch (e) { /* ignore */ }
+    }
+
+    // ============================================
+    // Theme
+    // ============================================
+    function restoreTheme() {
+        const saved = localStorage.getItem('sdp_theme');
+        if (saved) {
+            document.documentElement.setAttribute('data-theme', saved);
+        }
+    }
+
+    function toggleTheme() {
+        const current = document.documentElement.getAttribute('data-theme');
+        const next = current === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('sdp_theme', next);
+    }
+
+    // ============================================
+    // Sidebar (mobile toggle)
+    // ============================================
+    function openSidebar() {
+        sidebar.classList.add('open');
+        sidebarOverlay.classList.add('active');
+        document.body.style.overflow = 'hidden';
+    }
+
+    function closeSidebar() {
+        sidebar.classList.remove('open');
+        sidebarOverlay.classList.remove('active');
+        document.body.style.overflow = '';
+    }
+
+    // ============================================
+    // Chapter Loading
+    // ============================================
+    function loadChapter(key) {
+        if (!CHAPTERS[key]) return;
+        currentChapter = key;
+
+        const chapter = CHAPTERS[key];
+        const html = chapter.content || getComingSoonContent(key);
+
+        // Animate content change
+        chapterContent.style.opacity = '0';
+        chapterContent.style.transform = 'translateY(8px)';
+
+        setTimeout(() => {
+            chapterContent.innerHTML = html;
+            chapterContent.style.opacity = '1';
+            chapterContent.style.transform = 'translateY(0)';
+
+            // Scroll to top
+            contentArea.scrollTop = 0;
+            window.scrollTo({ top: 0 });
+
+            // Update UI
+            updateBreadcrumb(chapter);
+            updateActiveNav(key);
+            updateChapterNav(key);
+            updateMarkCompleteBtn(key);
+            updateNotesIndicator(key);
+            bindImageZoom();
+            bindAccordions();
+            bindShadcnTabs();
+            renderMermaidDiagrams();
+            buildTableOfContents();
+            renderQuiz(key);
+
+            saveState();
+        }, 150);
+    }
+
+    function updateBreadcrumb(chapter) {
+        breadcrumb.innerHTML = `
+            <span class="breadcrumb-part">${chapter.part}</span>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+            <span class="breadcrumb-chapter">${chapter.title}</span>
+        `;
+    }
+
+    function updateActiveNav(key) {
+        document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
+        const activeItem = document.querySelector(`.nav-item[data-chapter="${key}"]`);
+        if (activeItem) {
+            activeItem.classList.add('active');
+            const group = activeItem.closest('.nav-group-items');
+            if (group && group.classList.contains('collapsed')) {
+                group.classList.remove('collapsed');
+            }
+            activeItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+    }
+
+    function updateChapterNav(key) {
+        const idx = CHAPTER_ORDER.indexOf(key);
+
+        if (idx > 0) {
+            prevChapter.disabled = false;
+            prevLabel.textContent = CHAPTERS[CHAPTER_ORDER[idx - 1]].title;
+        } else {
+            prevChapter.disabled = true;
+            prevLabel.textContent = '—';
+        }
+
+        if (idx < CHAPTER_ORDER.length - 1) {
+            nextChapter.disabled = false;
+            nextLabel.textContent = CHAPTERS[CHAPTER_ORDER[idx + 1]].title;
+        } else {
+            nextChapter.disabled = true;
+            nextLabel.textContent = '—';
+        }
+    }
+
+    function updateMarkCompleteBtn(key) {
+        if (completedChapters.has(key)) {
+            markComplete.classList.add('completed');
+            markComplete.querySelector('span').textContent = 'Completed';
+        } else {
+            markComplete.classList.remove('completed');
+            markComplete.querySelector('span').textContent = 'Mark Complete';
+        }
+    }
+
+    // ============================================
+    // Progress Tracking
+    // ============================================
+    function updateProgress() {
+        const total = CHAPTER_ORDER.length;
+        const done = completedChapters.size;
+        const pct = Math.round((done / total) * 100);
+
+        progressFill.style.width = pct + '%';
+        progressText.textContent = `${done}/${total} chapters — ${pct}% complete`;
+
+        document.querySelectorAll('.nav-item-status').forEach(el => {
+            const key = el.getAttribute('data-check');
+            if (completedChapters.has(key)) {
+                el.classList.add('completed');
+            } else {
+                el.classList.remove('completed');
+            }
+        });
+    }
+
+    function toggleChapterComplete() {
+        if (completedChapters.has(currentChapter)) {
+            completedChapters.delete(currentChapter);
+        } else {
+            completedChapters.add(currentChapter);
+        }
+        updateMarkCompleteBtn(currentChapter);
+        updateProgress();
+        saveState();
+    }
+
+    // ============================================
+    // Notes Panel
+    // ============================================
+    function openNotesPanel() {
+        const chapter = CHAPTERS[currentChapter];
+        notesPanelChapter.textContent = 'Chapter: ' + chapter.title;
+        notesTextarea.value = chapterNotes[currentChapter] || '';
+        notesPanel.classList.add('open');
+        notesOverlay.classList.add('active');
+        notesSavedIndicator.textContent = 'All changes saved';
+        setTimeout(function () { notesTextarea.focus(); }, 300);
+    }
+
+    function closeNotesPanel() {
+        notesPanel.classList.remove('open');
+        notesOverlay.classList.remove('active');
+        saveCurrentNote();
+    }
+
+    function saveCurrentNote() {
+        var text = notesTextarea.value.trim();
+        if (text) {
+            chapterNotes[currentChapter] = text;
+        } else {
+            delete chapterNotes[currentChapter];
+        }
+        saveState();
+        updateNotesIndicator(currentChapter);
+    }
+
+    function handleNoteInput() {
+        notesSavedIndicator.textContent = 'Saving...';
+        clearTimeout(notesSaveTimeout);
+        notesSaveTimeout = setTimeout(function () {
+            saveCurrentNote();
+            notesSavedIndicator.textContent = 'All changes saved';
+        }, 500);
+    }
+
+    function updateNotesIndicator(key) {
+        if (chapterNotes[key] && chapterNotes[key].trim()) {
+            notesToggle.classList.add('has-notes');
+        } else {
+            notesToggle.classList.remove('has-notes');
+        }
+    }
+
+    // ============================================
+    // Full-Text Search
+    // ============================================
+    // Build a search index: strip HTML tags from chapter content
+    let searchIndex = null;
+
+    function buildSearchIndex() {
+        if (searchIndex) return searchIndex;
+        searchIndex = [];
+        CHAPTER_ORDER.forEach(key => {
+            const ch = CHAPTERS[key];
+            if (!ch || !ch.content) return;
+            // Strip HTML to get plain text
+            const div = document.createElement('div');
+            div.innerHTML = ch.content;
+            const text = div.textContent || div.innerText || '';
+            searchIndex.push({ key, title: ch.title, part: ch.part, text });
+        });
+        return searchIndex;
+    }
+
+    function handleSearch(query) {
+        const q = query.toLowerCase().trim();
+        const navItems = document.querySelectorAll('.nav-item');
+
+        // Always filter nav items by title
+        navItems.forEach(item => {
+            const label = item.querySelector('.nav-item-label').textContent.toLowerCase();
+            const chapter = item.getAttribute('data-chapter');
+            const chapterData = CHAPTERS[chapter];
+            const partMatch = chapterData ? chapterData.part.toLowerCase().includes(q) : false;
+
+            if (q === '' || label.includes(q) || partMatch) {
+                item.classList.remove('hidden');
+            } else {
+                item.classList.add('hidden');
+            }
+        });
+
+        if (q) {
+            document.querySelectorAll('.nav-group-items').forEach(g => g.classList.remove('collapsed'));
+        }
+
+        // Debounce content search
+        clearTimeout(searchDebounce);
+        if (q.length < 2) {
+            searchResults.hidden = true;
+            return;
+        }
+
+        searchDebounce = setTimeout(() => {
+            performContentSearch(q);
+        }, 200);
+    }
+
+    function performContentSearch(query) {
+        const index = buildSearchIndex();
+        const results = [];
+
+        index.forEach(entry => {
+            const lowerText = entry.text.toLowerCase();
+            const idx = lowerText.indexOf(query);
+            if (idx !== -1) {
+                // Grab a snippet around the match
+                const start = Math.max(0, idx - 60);
+                const end = Math.min(entry.text.length, idx + query.length + 80);
+                let snippet = (start > 0 ? '...' : '') + entry.text.substring(start, end) + (end < entry.text.length ? '...' : '');
+                results.push({ key: entry.key, title: entry.title, part: entry.part, snippet, matchIdx: idx });
+            }
+
+            // Also check title match
+            if (entry.title.toLowerCase().includes(query) && idx === -1) {
+                results.push({ key: entry.key, title: entry.title, part: entry.part, snippet: entry.text.substring(0, 120) + '...', matchIdx: 0 });
+            }
+        });
+
+        if (results.length === 0) {
+            searchResultsCount.textContent = '0 results';
+            searchResultsList.innerHTML = '<div class="search-no-results">No results found for &ldquo;' + escapeHTML(query) + '&rdquo;</div>';
+            searchResults.hidden = false;
+            return;
+        }
+
+        searchResultsCount.textContent = results.length + ' result' + (results.length !== 1 ? 's' : '');
+
+        const escapedQuery = escapeHTML(query);
+        searchResultsList.innerHTML = results.map(r => {
+            const highlightedSnippet = highlightMatch(escapeHTML(r.snippet), escapedQuery);
+            return '<button class="search-result-item" data-chapter="' + r.key + '">' +
+                '<div class="search-result-item-title">' +
+                    '<span>' + escapeHTML(r.title) + '</span>' +
+                    '<span class="search-result-item-part">' + escapeHTML(r.part) + '</span>' +
+                '</div>' +
+                '<div class="search-result-item-snippet">' + highlightedSnippet + '</div>' +
+            '</button>';
+        }).join('');
+
+        // Bind clicks
+        searchResultsList.querySelectorAll('.search-result-item').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const key = btn.getAttribute('data-chapter');
+                loadChapter(key);
+                closeSidebar();
+                searchResults.hidden = true;
+                searchInput.value = '';
+                handleSearch('');
+            });
+        });
+
+        searchResults.hidden = false;
+    }
+
+    function escapeHTML(str) {
+        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+
+    function highlightMatch(text, query) {
+        if (!query) return text;
+        const regex = new RegExp('(' + query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
+        return text.replace(regex, '<mark>$1</mark>');
+    }
+
+    function closeSearchResults() {
+        searchResults.hidden = true;
+    }
+
+    // ============================================
+    // Table of Contents (floating, scroll-spy)
+    // ============================================
+    function buildTableOfContents() {
+        if (!chapterTocNav) return;
+        const headings = chapterContent.querySelectorAll('h2, h3');
+
+        if (headings.length < 2) {
+            chapterToc.style.display = 'none';
+            chapterTocNav.innerHTML = '';
+            return;
+        }
+
+        // Restore display (CSS handles media query)
+        chapterToc.style.display = '';
+
+        // Ensure headings have IDs
+        headings.forEach((h, i) => {
+            if (!h.id) {
+                h.id = 'toc-' + i + '-' + h.textContent.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+            }
+        });
+
+        chapterTocNav.innerHTML = Array.from(headings).map(h => {
+            const level = h.tagName === 'H3' ? 'toc-h3' : '';
+            return '<a class="chapter-toc-link ' + level + '" data-toc-target="' + h.id + '">' + h.textContent.trim() + '</a>';
+        }).join('');
+
+        // Clicking a TOC link scrolls to heading
+        chapterTocNav.querySelectorAll('.chapter-toc-link').forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const id = link.getAttribute('data-toc-target');
+                const target = document.getElementById(id);
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+            });
+        });
+
+        // Init scroll spy
+        setupScrollSpy(headings);
+    }
+
+    function setupScrollSpy(headings) {
+        // Use IntersectionObserver for scroll spy
+        if (window._tocObserver) {
+            window._tocObserver.disconnect();
+        }
+
+        const tocLinks = chapterTocNav.querySelectorAll('.chapter-toc-link');
+        if (tocLinks.length === 0) return;
+
+        const headingArr = Array.from(headings);
+
+        window._tocObserver = new IntersectionObserver((entries) => {
+            // Find the first heading that is intersecting or has passed
+            let activeId = null;
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    activeId = entry.target.id;
+                }
+            });
+
+            if (!activeId) {
+                // Fallback: find the last heading that is above the viewport middle
+                const midY = window.innerHeight / 3;
+                for (let i = headingArr.length - 1; i >= 0; i--) {
+                    const rect = headingArr[i].getBoundingClientRect();
+                    if (rect.top <= midY) {
+                        activeId = headingArr[i].id;
+                        break;
+                    }
+                }
+            }
+
+            if (activeId) {
+                tocLinks.forEach(l => l.classList.remove('active'));
+                const active = chapterTocNav.querySelector('[data-toc-target="' + activeId + '"]');
+                if (active) active.classList.add('active');
+            }
+        }, {
+            rootMargin: '-10% 0px -70% 0px',
+            threshold: [0, 0.5, 1]
+        });
+
+        headingArr.forEach(h => window._tocObserver.observe(h));
+
+        // Also activate first by default
+        if (tocLinks.length > 0) tocLinks[0].classList.add('active');
+    }
+
+    // ============================================
+    // Quiz Mode
+    // ============================================
+    function renderQuiz(chapterKey) {
+        if (typeof QUIZZES === 'undefined') return;
+        const questions = QUIZZES[chapterKey];
+        if (!questions || questions.length === 0) return;
+
+        const score = quizScores[chapterKey] || { answered: {}, correct: 0 };
+        const totalAnswered = Object.keys(score.answered).length;
+
+        let html = '<div class="quiz-section">' +
+            '<div class="quiz-section-header">' +
+                '<span class="quiz-section-title">🧠 Knowledge Check</span>' +
+                '<span class="quiz-section-badge">' + questions.length + ' question' + (questions.length !== 1 ? 's' : '') + '</span>' +
+            '</div>';
+
+        questions.forEach((q, qi) => {
+            const answered = score.answered[qi] !== undefined;
+            const selectedIdx = score.answered[qi];
+            const isCorrect = selectedIdx === q.answer;
+            const cardClass = answered ? (isCorrect ? 'answered-correct' : 'answered-wrong') : '';
+
+            html += '<div class="quiz-card ' + cardClass + '" data-quiz-idx="' + qi + '">' +
+                '<div class="quiz-question-number">Question ' + (qi + 1) + '</div>' +
+                '<div class="quiz-question-text">' + q.q + '</div>' +
+                '<div class="quiz-options">';
+
+            const markers = ['A', 'B', 'C', 'D', 'E', 'F'];
+            q.options.forEach((opt, oi) => {
+                let optClass = answered ? 'disabled' : '';
+                if (answered && oi === q.answer) optClass += ' correct';
+                if (answered && oi === selectedIdx && oi !== q.answer) optClass += ' wrong';
+                if (answered && oi === selectedIdx) optClass += ' selected';
+
+                html += '<button class="quiz-option ' + optClass + '" data-question="' + qi + '" data-option="' + oi + '">' +
+                    '<span class="quiz-option-marker">' + markers[oi] + '</span>' +
+                    '<span>' + opt + '</span>' +
+                '</button>';
+            });
+
+            html += '</div>';
+            html += '<div class="quiz-explanation ' + (answered ? 'visible' : '') + '" data-explain="' + qi + '">' +
+                (isCorrect ? '✅ Correct! ' : (answered ? '❌ Incorrect. ' : '')) + q.explanation +
+            '</div>';
+            html += '</div>';
+        });
+
+        // Score bar
+        if (totalAnswered > 0) {
+            const pct = Math.round((score.correct / questions.length) * 100);
+            html += '<div class="quiz-score">' +
+                '<span class="quiz-score-label">Score</span>' +
+                '<span class="quiz-score-value">' + score.correct + '/' + questions.length + '</span>' +
+                '<div class="quiz-score-bar"><div class="quiz-score-fill" style="width:' + pct + '%"></div></div>' +
+                '<button class="quiz-reset-btn" data-quiz-reset="' + chapterKey + '">Reset</button>' +
+            '</div>';
+        }
+
+        html += '</div>';
+
+        // Append to chapter content
+        chapterContent.insertAdjacentHTML('beforeend', html);
+
+        // Bind quiz option clicks
+        chapterContent.querySelectorAll('.quiz-option:not(.disabled)').forEach(btn => {
+            btn.addEventListener('click', () => handleQuizAnswer(chapterKey, btn));
+        });
+
+        // Bind reset
+        const resetBtn = chapterContent.querySelector('[data-quiz-reset]');
+        if (resetBtn) {
+            resetBtn.addEventListener('click', () => {
+                delete quizScores[chapterKey];
+                saveState();
+                renderQuiz.__reloading = true;
+                // Re-render by reloading chapter
+                loadChapter(chapterKey);
+            });
+        }
+    }
+
+    function handleQuizAnswer(chapterKey, btn) {
+        const qi = parseInt(btn.getAttribute('data-question'));
+        const oi = parseInt(btn.getAttribute('data-option'));
+        const questions = QUIZZES[chapterKey];
+        if (!questions) return;
+        const q = questions[qi];
+
+        // Init score
+        if (!quizScores[chapterKey]) quizScores[chapterKey] = { answered: {}, correct: 0 };
+        const score = quizScores[chapterKey];
+
+        // Already answered?
+        if (score.answered[qi] !== undefined) return;
+
+        score.answered[qi] = oi;
+        if (oi === q.answer) score.correct++;
+        saveState();
+
+        // Update UI
+        const card = chapterContent.querySelector('.quiz-card[data-quiz-idx="' + qi + '"]');
+        if (!card) return;
+
+        card.classList.add(oi === q.answer ? 'answered-correct' : 'answered-wrong');
+
+        card.querySelectorAll('.quiz-option').forEach(opt => {
+            opt.classList.add('disabled');
+            const optIdx = parseInt(opt.getAttribute('data-option'));
+            if (optIdx === q.answer) opt.classList.add('correct');
+            if (optIdx === oi && oi !== q.answer) opt.classList.add('wrong');
+            if (optIdx === oi) opt.classList.add('selected');
+        });
+
+        // Show explanation
+        const explain = card.querySelector('[data-explain="' + qi + '"]');
+        if (explain) {
+            explain.textContent = (oi === q.answer ? '✅ Correct! ' : '❌ Incorrect. ') + q.explanation;
+            explain.classList.add('visible');
+        }
+
+        // Update score bar if all answered
+        const totalAnswered = Object.keys(score.answered).length;
+        if (totalAnswered === questions.length) {
+            // Remove existing score bar and re-add
+            const existingScore = chapterContent.querySelector('.quiz-score');
+            if (existingScore) existingScore.remove();
+
+            const pct = Math.round((score.correct / questions.length) * 100);
+            const scoreHtml = '<div class="quiz-score">' +
+                '<span class="quiz-score-label">Score</span>' +
+                '<span class="quiz-score-value">' + score.correct + '/' + questions.length + '</span>' +
+                '<div class="quiz-score-bar"><div class="quiz-score-fill" style="width:' + pct + '%"></div></div>' +
+                '<button class="quiz-reset-btn" data-quiz-reset="' + chapterKey + '">Reset</button>' +
+            '</div>';
+
+            const quizSection = chapterContent.querySelector('.quiz-section');
+            if (quizSection) {
+                quizSection.insertAdjacentHTML('beforeend', scoreHtml);
+                const resetBtn = quizSection.querySelector('[data-quiz-reset]');
+                if (resetBtn) {
+                    resetBtn.addEventListener('click', () => {
+                        delete quizScores[chapterKey];
+                        saveState();
+                        loadChapter(chapterKey);
+                    });
+                }
+            }
+        }
+    }
+
+    // ============================================
+    // Nav Group Toggle
+    // ============================================
+    function toggleNavGroup(header) {
+        const groupId = header.getAttribute('data-group');
+        const items = document.querySelector(`[data-group-items="${groupId}"]`);
+        if (items) {
+            items.classList.toggle('collapsed');
+        }
+    }
+
+    // ============================================
+    // Image Lightbox
+    // ============================================
+    function bindImageZoom() {
+        document.querySelectorAll('.chapter-content img.zoomable').forEach(img => {
+            img.addEventListener('click', () => {
+                lightboxImg.src = img.src;
+                lightboxImg.alt = img.alt;
+                lightbox.classList.add('active');
+            });
+        });
+    }
+
+    function closeLightbox() {
+        lightbox.classList.remove('active');
+        lightboxImg.src = '';
+    }
+
+    // ============================================
+    // Accordions in chapter content
+    // ============================================
+    function bindAccordions() {
+        document.querySelectorAll('.accordion-header').forEach(header => {
+            header.addEventListener('click', () => {
+                header.classList.toggle('open');
+                const body = header.nextElementSibling;
+                if (body) body.classList.toggle('open');
+            });
+        });
+    }
+
+    // ============================================
+    // Shadcn-style Tabs
+    // ============================================
+    function bindShadcnTabs() {
+        document.querySelectorAll('.shadcn-tab-trigger').forEach(trigger => {
+            trigger.addEventListener('click', () => {
+                const tabId = trigger.getAttribute('data-tab');
+
+                // Deactivate siblings within the same tabs container
+                const container = trigger.closest('.shadcn-tabs');
+                if (!container) return;
+
+                container.querySelectorAll('.shadcn-tab-trigger').forEach(t => t.classList.remove('active'));
+                container.querySelectorAll('.shadcn-tab-content').forEach(c => c.classList.remove('active'));
+
+                // Activate selected
+                trigger.classList.add('active');
+                const panel = document.getElementById(tabId);
+                if (panel) panel.classList.add('active');
+            });
+        });
+    }
+
+    // ============================================
+    // Mermaid Diagrams
+    // ============================================
+    let mermaidInitialized = false;
+    function renderMermaidDiagrams() {
+        const containers = document.querySelectorAll('.mermaid-diagram');
+        if (containers.length === 0) return;
+
+        if (typeof mermaid === 'undefined') return;
+
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: isDark ? 'dark' : 'default',
+            themeVariables: isDark ? {
+                primaryColor: '#1f6feb',
+                primaryTextColor: '#e6edf3',
+                primaryBorderColor: '#30363d',
+                lineColor: '#8b949e',
+                secondaryColor: '#21262d',
+                tertiaryColor: '#161b22',
+                background: '#0d1117',
+                mainBkg: '#161b22',
+                nodeBorder: '#30363d',
+                clusterBkg: '#161b2288',
+                clusterBorder: '#30363d',
+                titleColor: '#e6edf3',
+                edgeLabelBackground: '#161b22',
+                nodeTextColor: '#e6edf3',
+                actorTextColor: '#e6edf3',
+                actorBorder: '#30363d',
+                actorBkg: '#161b22',
+                actorLineColor: '#8b949e',
+                signalColor: '#e6edf3',
+                signalTextColor: '#e6edf3',
+                labelBoxBkgColor: '#161b22',
+                labelBoxBorderColor: '#30363d',
+                labelTextColor: '#e6edf3',
+                loopTextColor: '#8b949e',
+                noteBkgColor: '#21262d',
+                noteTextColor: '#e6edf3',
+                noteBorderColor: '#30363d',
+                activationBorderColor: '#1f6feb',
+                activationBkgColor: '#1f6feb33',
+                sequenceNumberColor: '#e6edf3',
+                classText: '#e6edf3'
+            } : {
+                primaryColor: '#0969da',
+                primaryTextColor: '#1f2328',
+                primaryBorderColor: '#d0d7de',
+                lineColor: '#656d76',
+                secondaryColor: '#f6f8fa',
+                tertiaryColor: '#f0f2f5',
+                background: '#ffffff',
+                mainBkg: '#f6f8fa',
+                nodeBorder: '#d0d7de',
+                clusterBkg: '#f6f8fa88',
+                clusterBorder: '#d0d7de',
+                titleColor: '#1f2328',
+                edgeLabelBackground: '#ffffff'
+            },
+            flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'basis' },
+            sequence: { useMaxWidth: true, actorMargin: 60 },
+            classDiagram: { useMaxWidth: true }
+        });
+
+        containers.forEach(async (container, i) => {
+            const code = container.querySelector('.mermaid-code');
+            if (!code) return;
+            const graphDef = code.textContent.trim();
+            const id = 'mermaid-svg-' + Date.now() + '-' + i;
+            try {
+                const { svg } = await mermaid.render(id, graphDef);
+                const display = container.querySelector('.mermaid-display');
+                if (display) {
+                    display.innerHTML = svg;
+                    // Make SVG responsive
+                    const svgEl = display.querySelector('svg');
+                    if (svgEl) {
+                        svgEl.style.maxWidth = '100%';
+                        svgEl.style.height = 'auto';
+                    }
+                }
+            } catch (err) {
+                console.warn('Mermaid render error:', err);
+                const display = container.querySelector('.mermaid-display');
+                if (display) {
+                    display.innerHTML = '<pre style="color:var(--text-tertiary);font-size:0.85rem;">Diagram rendering failed</pre>';
+                }
+            }
+        });
+        mermaidInitialized = true;
+    }
+
+    // ============================================
+    // Back to Top
+    // ============================================
+    function handleScroll() {
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        if (scrollTop > 300) {
+            backToTop.classList.add('visible');
+        } else {
+            backToTop.classList.remove('visible');
+        }
+    }
+
+    // ============================================
+    // Event Bindings
+    // ============================================
+    function bindEvents() {
+        // Theme toggle
+        themeToggle.addEventListener('click', toggleTheme);
+
+        // Mobile sidebar
+        menuToggle.addEventListener('click', openSidebar);
+        sidebarClose.addEventListener('click', closeSidebar);
+        sidebarOverlay.addEventListener('click', closeSidebar);
+
+        // Nav group toggles
+        document.querySelectorAll('.nav-group-header').forEach(header => {
+            header.addEventListener('click', () => toggleNavGroup(header));
+        });
+
+        // Nav item clicks
+        document.querySelectorAll('.nav-item').forEach(item => {
+            item.addEventListener('click', (e) => {
+                e.preventDefault();
+                const key = item.getAttribute('data-chapter');
+                if (key) {
+                    loadChapter(key);
+                    closeSidebar();
+                }
+            });
+        });
+
+        // Search
+        searchInput.addEventListener('input', (e) => handleSearch(e.target.value));
+        searchResultsClose.addEventListener('click', closeSearchResults);
+
+        // Close search results when clicking outside sidebar-search
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.sidebar-search') && !searchResults.hidden) {
+                closeSearchResults();
+            }
+        });
+
+        // Mark complete
+        markComplete.addEventListener('click', toggleChapterComplete);
+
+        // Notes
+        notesToggle.addEventListener('click', openNotesPanel);
+        notesPanelClose.addEventListener('click', closeNotesPanel);
+        notesOverlay.addEventListener('click', closeNotesPanel);
+        notesTextarea.addEventListener('input', handleNoteInput);
+
+        // Prev/Next chapter
+        prevChapter.addEventListener('click', () => {
+            const idx = CHAPTER_ORDER.indexOf(currentChapter);
+            if (idx > 0) loadChapter(CHAPTER_ORDER[idx - 1]);
+        });
+        nextChapter.addEventListener('click', () => {
+            const idx = CHAPTER_ORDER.indexOf(currentChapter);
+            if (idx < CHAPTER_ORDER.length - 1) loadChapter(CHAPTER_ORDER[idx + 1]);
+        });
+
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                e.preventDefault();
+                searchInput.focus();
+            }
+            if (e.key === 'Escape') {
+                closeLightbox();
+                closeSidebar();
+                closeNotesPanel();
+                closeSearchResults();
+                searchInput.blur();
+            }
+            if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+                if (e.key === 'ArrowLeft') prevChapter.click();
+                if (e.key === 'ArrowRight') nextChapter.click();
+            }
+        });
+
+        // Back to top
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        backToTop.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+
+        // Lightbox
+        lightbox.addEventListener('click', (e) => {
+            if (e.target !== lightboxImg) closeLightbox();
+        });
+    }
+
+    // ============================================
+    // Boot
+    // ============================================
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();
diff --git a/website/js/chapters/chapters-a.js b/website/js/chapters/chapters-a.js
new file mode 100644
index 00000000000..c1e3e0631a9
--- /dev/null
+++ b/website/js/chapters/chapters-a.js
@@ -0,0 +1,428 @@
+/**
+ * Part A: Getting Started — Chapters 01–04
+ * Motivation, Anki Flashcards, Study Guide, Interview Approach
+ *
+ * Registered into global CHAPTERS_A object.
+ */
+
+const CHAPTERS_A = {
+
+    // ================================================================
+    // Chapter 01 — Motivation
+    // ================================================================
+    'motivation': {
+        part: 'Part A',
+        title: 'Motivation',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 01 — Getting Started</div>
+                <h1>Motivation</h1>
+                <p class="chapter-subtitle">Why learn system design? Understanding how to build large-scale systems is one of the most valuable skills for any software engineer.</p>
+
+                <hr class="shadcn-separator">
+
+                <h2>Learn How to Design Large-Scale Systems</h2>
+                <p>Learning how to design scalable systems will help you become a <strong>better engineer</strong>.</p>
+                <p>System design is a broad topic. There are a <strong>vast number of resources scattered throughout the web</strong> on system design principles.</p>
+                <p>This course is an <strong>organized collection</strong> of resources to help you learn how to build systems at scale.</p>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Key Insight
+                    </div>
+                    <div class="shadcn-alert-description">System design isn't just for interviews — it's the foundation of building reliable, scalable software in the real world.</div>
+                </div>
+
+                <h2>Learn from the Open Source Community</h2>
+                <p>This is a continually updated, open source project. Contributions are welcome! The best way to learn is by engaging with the community and seeing how real systems are built.</p>
+
+                <h2>Prep for the System Design Interview</h2>
+                <p>In addition to coding interviews, system design is a <strong>required component</strong> of the <strong>technical interview process</strong> at many tech companies.</p>
+                <p><strong>Practice common system design interview questions</strong> and <strong>compare</strong> your results with <strong>sample solutions</strong>: discussions, code, and diagrams.</p>
+
+                <h3>What You'll Learn</h3>
+                <div class="concept-grid">
+                    <div class="concept-card">
+                        <div class="concept-card-icon">📚</div>
+                        <h4>Study Guide</h4>
+                        <p>A structured study plan for short, medium, and long timelines.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">🎯</div>
+                        <h4>Interview Approach</h4>
+                        <p>Step-by-step methodology for tackling system design questions.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">💡</div>
+                        <h4>Design Problems with Solutions</h4>
+                        <p>Real-world system design problems with detailed walkthroughs.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">🏗️</div>
+                        <h4>Core Concepts</h4>
+                        <p>In-depth coverage of scalability, caching, databases, networking, and more.</p>
+                    </div>
+                </div>
+
+                <h2>Course Overview</h2>
+                <p>This interactive course is organized into the following parts:</p>
+
+                <div class="table-wrapper">
+                    <table>
+                        <thead>
+                            <tr><th>Part</th><th>Topics</th><th>Chapters</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>A</strong></td><td>Getting Started</td><td>Motivation, Flashcards, Study Guide, Interview Approach</td></tr>
+                            <tr><td><strong>B</strong></td><td>Core Concepts</td><td>Performance, Latency, Availability, Consistency Patterns</td></tr>
+                            <tr><td><strong>C</strong></td><td>Infrastructure</td><td>DNS, CDN, Load Balancer, Reverse Proxy</td></tr>
+                            <tr><td><strong>D</strong></td><td>Data Layer</td><td>Application Layer, Database, Cache, Asynchronism</td></tr>
+                            <tr><td><strong>E</strong></td><td>Communication</td><td>TCP, UDP, RPC, REST, Security</td></tr>
+                            <tr><td><strong>F</strong></td><td>Practice Problems</td><td>8 system design problems with solutions</td></tr>
+                            <tr><td><strong>G</strong></td><td>OO Design</td><td>6 object-oriented design problems</td></tr>
+                            <tr><td><strong>H</strong></td><td>Appendix</td><td>Reference tables, additional questions, real-world architectures</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="callout callout-tip">
+                    <div class="callout-title">✅ Getting Started</div>
+                    <p>Ready to begin? Click <strong>"Mark Complete"</strong> above when you're done with this section, then move on to Chapter 02: Anki Flashcards. Use the sidebar to navigate between chapters anytime.</p>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 02 — Anki Flashcards
+    // ================================================================
+    'flashcards': {
+        part: 'Part A',
+        title: 'Anki Flashcards',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 02 — Getting Started</div>
+                <h1>Anki Flashcards</h1>
+                <p class="chapter-subtitle">Use spaced repetition to retain key system design concepts. Anki flashcard decks are a proven study method for long-term knowledge retention.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container">
+                    <img src="../images/zdCAkB3.png" alt="Anki Flashcards" class="zoomable">
+                    <div class="img-caption">Anki flashcard interface for system design study</div>
+                </div>
+
+                <h2>Available Flashcard Decks</h2>
+                <p>The provided <a href="https://apps.ankiweb.net/" target="_blank" rel="noopener">Anki flashcard decks</a> use spaced repetition to help you retain key system design concepts.</p>
+
+                <div class="concept-grid">
+                    <div class="concept-card">
+                        <div class="concept-card-icon">🃏</div>
+                        <h4>System Design Deck</h4>
+                        <p>Core system design concepts, trade-offs, and patterns in a flashcard format.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">🏋️</div>
+                        <h4>System Design Exercises</h4>
+                        <p>Practice exercises to test your understanding of system design principles.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">🎨</div>
+                        <h4>OO Design Deck</h4>
+                        <p>Object-oriented design concepts and exercises for interview prep.</p>
+                    </div>
+                </div>
+
+                <h2>How to Use Anki</h2>
+                <ol>
+                    <li>Download <a href="https://apps.ankiweb.net/" target="_blank" rel="noopener">Anki</a> (free for desktop & Android, paid on iOS)</li>
+                    <li>Import the <code>.apkg</code> flashcard deck files</li>
+                    <li>Review cards daily — Anki will schedule cards based on spaced repetition</li>
+                    <li>Rate your recall honestly (Again / Hard / Good / Easy) for effective scheduling</li>
+                </ol>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Tip: Great for On-the-Go Study
+                    </div>
+                    <div class="shadcn-alert-description">Anki flashcards are especially effective for studying during commutes, breaks, or any downtime. The mobile app syncs with the desktop version.</div>
+                </div>
+
+                <h2>Coding Interview Resources</h2>
+                <p>Looking for resources to help you prep for the <strong>Coding Interview</strong>? Check out the sister repo <a href="https://github.com/donnemartin/interactive-coding-challenges" target="_blank" rel="noopener">Interactive Coding Challenges</a>, which contains an additional Anki deck for coding concepts.</p>
+
+                <div class="img-container">
+                    <img src="../images/b4YtAEN.png" alt="Interactive Coding Challenges" class="zoomable">
+                    <div class="img-caption">Interactive Coding Challenges repository</div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="https://apps.ankiweb.net/" target="_blank" rel="noopener">Anki Official Website</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://github.com/donnemartin/interactive-coding-challenges" target="_blank" rel="noopener">Interactive Coding Challenges (sister repo)</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 03 — Study Guide
+    // ================================================================
+    'study-guide': {
+        part: 'Part A',
+        title: 'Study Guide',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 03 — Getting Started</div>
+                <h1>Study Guide</h1>
+                <p class="chapter-subtitle">Suggested topics to review based on your interview timeline. Adjust this guide based on your experience, target positions, and target companies.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container">
+                    <img src="../images/OfVllex.png" alt="Study Guide Overview" class="zoomable">
+                    <div class="img-caption">Study guide overview — topics mapped to timelines</div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Do I need to know everything here?
+                    </div>
+                    <div class="shadcn-alert-description"><strong>No, you don't need to know everything here to prepare for the interview.</strong> What you are asked depends on your experience, technical background, target positions, and which companies you're interviewing with. Start broad and go deeper in a few areas.</div>
+                </div>
+
+                <h2>Factors That Affect Your Prep</h2>
+                <ul>
+                    <li>How much <strong>experience</strong> you have</li>
+                    <li>What your <strong>technical background</strong> is</li>
+                    <li>What <strong>positions</strong> you are interviewing for</li>
+                    <li>Which <strong>companies</strong> you are interviewing with</li>
+                    <li>A bit of <strong>luck</strong> 🍀</li>
+                </ul>
+                <p>More experienced candidates are generally expected to know more about system design. Architects or team leads might be expected to know more than individual contributors. Top tech companies are likely to have one or more design interview rounds.</p>
+
+                <h2>Timeline-Based Strategy</h2>
+
+                <div class="concept-grid">
+                    <div class="concept-card">
+                        <div class="concept-card-icon">⚡</div>
+                        <h4>Short Timeline</h4>
+                        <p>Aim for <strong>breadth</strong> with system design topics. Practice by solving <strong>some</strong> interview questions.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">📊</div>
+                        <h4>Medium Timeline</h4>
+                        <p>Aim for <strong>breadth and some depth</strong> with system design topics. Practice by solving <strong>many</strong> interview questions.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">🎯</div>
+                        <h4>Long Timeline</h4>
+                        <p>Aim for <strong>breadth and more depth</strong> with system design topics. Practice by solving <strong>most</strong> interview questions.</p>
+                    </div>
+                </div>
+
+                <h2>Study Plan Matrix</h2>
+                <div class="table-wrapper">
+                    <table>
+                        <thead>
+                            <tr><th>Activity</th><th>Short</th><th>Medium</th><th>Long</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Read through system design topics for a broad understanding</td>
+                                <td>✅</td><td>✅</td><td>✅</td>
+                            </tr>
+                            <tr>
+                                <td>Read company engineering blogs for your target companies</td>
+                                <td>✅</td><td>✅</td><td>✅</td>
+                            </tr>
+                            <tr>
+                                <td>Read through real world architectures</td>
+                                <td>✅</td><td>✅</td><td>✅</td>
+                            </tr>
+                            <tr>
+                                <td>Review "How to approach a system design interview question"</td>
+                                <td>✅</td><td>✅</td><td>✅</td>
+                            </tr>
+                            <tr>
+                                <td>Work through system design interview questions with solutions</td>
+                                <td>Some</td><td>Many</td><td>Most</td>
+                            </tr>
+                            <tr>
+                                <td>Work through OO design interview questions with solutions</td>
+                                <td>Some</td><td>Many</td><td>Most</td>
+                            </tr>
+                            <tr>
+                                <td>Review additional system design interview questions</td>
+                                <td>Some</td><td>Many</td><td>Most</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="callout callout-tip">
+                    <div class="callout-title">✅ Recommendation</div>
+                    <p>Even on a short timeline, make sure to cover the core concepts (Part B) and at least 2-3 practice problems (Part F). Understanding trade-offs is more important than memorizing specific architectures.</p>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 04 — Interview Approach
+    // ================================================================
+    'interview-approach': {
+        part: 'Part A',
+        title: 'Interview Approach',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 04 — Getting Started</div>
+                <h1>How to Approach a System Design Interview Question</h1>
+                <p class="chapter-subtitle">The system design interview is an open-ended conversation. You are expected to lead it. Use the following framework to guide the discussion systematically.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="callout callout-warning">
+                    <div class="callout-title">⚠️ Important</div>
+                    <p>The system design interview is <strong>not</strong> about getting the "right" answer. It's about demonstrating your thought process, ability to make trade-offs, and capacity to design systems under constraints.</p>
+                </div>
+
+                <h2>Step 1: Outline Use Cases, Constraints, and Assumptions</h2>
+                <p>Gather requirements and scope the problem. Ask questions to clarify use cases and constraints. Discuss assumptions.</p>
+
+                <div class="concept-grid">
+                    <div class="concept-card">
+                        <div class="concept-card-icon">👥</div>
+                        <h4>Who uses it?</h4>
+                        <p>Identify the users and their roles in the system.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">⚙️</div>
+                        <h4>What does it do?</h4>
+                        <p>Define the core functionality and behavior.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">📊</div>
+                        <h4>How much scale?</h4>
+                        <p>Users, data volume, requests per second.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">📈</div>
+                        <h4>Input/Output?</h4>
+                        <p>What goes in and what comes out of the system.</p>
+                    </div>
+                </div>
+
+                <h3>Key Questions to Ask</h3>
+                <ul>
+                    <li>Who is going to use it?</li>
+                    <li>How are they going to use it?</li>
+                    <li>How many users are there?</li>
+                    <li>What does the system do?</li>
+                    <li>What are the inputs and outputs of the system?</li>
+                    <li>How much data do we expect to handle?</li>
+                    <li>How many requests per second do we expect?</li>
+                    <li>What is the expected read to write ratio?</li>
+                </ul>
+
+                <h2>Step 2: Create a High-Level Design</h2>
+                <p>Outline a high-level design with all important components.</p>
+                <ul>
+                    <li><strong>Sketch</strong> the main components and connections</li>
+                    <li><strong>Justify</strong> your ideas and decisions</li>
+                </ul>
+
+                <div class="callout callout-tip">
+                    <div class="callout-title">✅ Pro Tip</div>
+                    <p>Draw a simple diagram with boxes and arrows. Start with the client, load balancer, web server, application server, database, and cache. Then add more detail as needed.</p>
+                </div>
+
+                <h2>Step 3: Design Core Components</h2>
+                <p>Dive into details for each core component. For example, if you were asked to design a URL shortening service, discuss:</p>
+                <ul>
+                    <li>Generating and storing a hash of the full URL
+                        <ul>
+                            <li>MD5 and Base62 hashing</li>
+                            <li>Hash collisions</li>
+                            <li>SQL or NoSQL</li>
+                            <li>Database schema</li>
+                        </ul>
+                    </li>
+                    <li>Translating a hashed URL to the full URL
+                        <ul>
+                            <li>Database lookup</li>
+                        </ul>
+                    </li>
+                    <li>API and object-oriented design</li>
+                </ul>
+
+                <h2>Step 4: Scale the Design</h2>
+                <p>Identify and address bottlenecks, given the constraints. Consider whether you need:</p>
+
+                <div class="concept-grid">
+                    <div class="concept-card">
+                        <div class="concept-card-icon">⚖️</div>
+                        <h4>Load Balancer</h4>
+                        <p>Distribute traffic across multiple servers for reliability.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">↔️</div>
+                        <h4>Horizontal Scaling</h4>
+                        <p>Add more machines to handle increased load.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">⚡</div>
+                        <h4>Caching</h4>
+                        <p>Reduce database load and improve response times.</p>
+                    </div>
+                    <div class="concept-card">
+                        <div class="concept-card-icon">🗄️</div>
+                        <h4>Database Sharding</h4>
+                        <p>Split data across multiple databases for scale.</p>
+                    </div>
+                </div>
+
+                <p>Discuss potential solutions and trade-offs. <strong>Everything is a trade-off.</strong> Address bottlenecks using principles of scalable system design.</p>
+
+                <h2>Back-of-the-Envelope Calculations</h2>
+                <p>You might be asked to do some estimates by hand. Keep these references handy:</p>
+                <ul>
+                    <li>Use back-of-the-envelope calculations to evaluate different designs</li>
+                    <li>Powers of two table (see Appendix)</li>
+                    <li>Latency numbers every programmer should know (see Appendix)</li>
+                </ul>
+
+                <h2>Summary Framework</h2>
+                <div class="table-wrapper">
+                    <table>
+                        <thead>
+                            <tr><th>Step</th><th>Action</th><th>Time (~45 min interview)</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>1</strong></td><td>Requirements & Constraints</td><td>~5 minutes</td></tr>
+                            <tr><td><strong>2</strong></td><td>High-Level Design</td><td>~10 minutes</td></tr>
+                            <tr><td><strong>3</strong></td><td>Core Component Design</td><td>~20 minutes</td></tr>
+                            <tr><td><strong>4</strong></td><td>Scale & Trade-offs</td><td>~10 minutes</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="https://web.archive.org/web/20210505130322/https://www.palantir.com/2011/10/how-to-rock-a-systems-design-interview/" target="_blank" rel="noopener">How to ace a systems design interview</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="http://www.hiredintech.com/system-design" target="_blank" rel="noopener">The system design interview</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://www.youtube.com/watch?v=ZgdS0EUmn70" target="_blank" rel="noopener">Intro to Architecture and Systems Design Interviews</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://leetcode.com/discuss/career/229177/My-System-Design-Template" target="_blank" rel="noopener">System design template</a></li>
+                </ul>
+            </div>
+        `
+    }
+
+};
diff --git a/website/js/chapters/chapters-b.js b/website/js/chapters/chapters-b.js
new file mode 100644
index 00000000000..5ac611c554a
--- /dev/null
+++ b/website/js/chapters/chapters-b.js
@@ -0,0 +1,796 @@
+/**
+ * Part B: Core Concepts — Chapters 05–09
+ * Performance vs Scalability, Latency vs Throughput,
+ * Availability vs Consistency, Consistency Patterns, Availability Patterns
+ *
+ * Registered into global CHAPTERS_B object.
+ */
+
+const CHAPTERS_B = {
+
+    // ================================================================
+    // Chapter 05 — Performance vs Scalability
+    // ================================================================
+    'performance-scalability': {
+        part: 'Part B',
+        title: 'Performance vs Scalability',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 05 — Core Concepts</div>
+                <h1>Performance vs Scalability</h1>
+                <p class="chapter-subtitle">Understanding the fundamental difference between performance and scalability — and why conflating them leads to flawed system designs.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Scalability Decision Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["System is slow"] --> B{"Slow for single user?"}
+    B -->|Yes| C["Performance Problem"]
+    C --> D["Optimize code / algorithms"]
+    B -->|No| E{"Slow under load?"}
+    E -->|Yes| F["Scalability Problem"]
+    F --> G{"Stateless service?"}
+    G -->|Yes| H["Scale Horizontally"]
+    G -->|No| I["Scale Vertically"]
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Principle
+                    </div>
+                    <div class="shadcn-alert-description">Everything is a trade-off. A service is <strong>scalable</strong> if it results in increased <strong>performance</strong> proportional to resources added.</div>
+                </div>
+
+                <h2>What is Scalability?</h2>
+                <p>A service is <strong>scalable</strong> if it results in increased <strong>performance</strong> in a manner proportional to resources added. Generally, increasing performance means serving more units of work, but it can also mean handling larger units of work, such as when datasets grow.</p>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="perf-tab" data-tabgroup="perf">Performance Problem</button>
+                        <button class="shadcn-tab-trigger" data-tab="scale-tab" data-tabgroup="perf">Scalability Problem</button>
+                    </div>
+                    <div class="shadcn-tab-content active" id="perf-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Performance Problem <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Slow</span></div>
+                                <p class="shadcn-card-description">Your system is slow for a single user.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>If you have a <strong>performance</strong> problem, your system is slow even for a single user. This might be caused by inefficient algorithms, unoptimized database queries, or poor resource utilization.</p>
+                                <p>Fixing a performance problem means making the system faster for <em>everyone</em>, even without adding more hardware.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="shadcn-tab-content" id="scale-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Scalability Problem <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Load</span></div>
+                                <p class="shadcn-card-description">Your system is fast for one user but slow under heavy load.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>If you have a <strong>scalability</strong> problem, your system performs well for a single user but degrades under heavy load. The system cannot handle growth in users, data, or traffic.</p>
+                                <p>Fixing a scalability problem means the system can grow by adding resources (scaling up or out) proportionally.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Side-by-Side Comparison</h2>
+
+                <div class="shadcn-comparison-grid">
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">Performance</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>How fast is each individual request?</li>
+                                <li>Measured in latency (ms)</li>
+                                <li>Improved by optimization</li>
+                                <li>Better algorithms, caching, indexing</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">Scalability</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>How does the system handle growth?</li>
+                                <li>Measured in throughput (req/s)</li>
+                                <li>Improved by architecture</li>
+                                <li>Horizontal scaling, sharding, replication</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Key Takeaway</h2>
+                <div class="shadcn-card">
+                    <div class="shadcn-card-content">
+                        <p style="margin:0">You can have a system with great <span class="shadcn-badge shadcn-badge-green">performance</span> that doesn't scale, and a system that <span class="shadcn-badge shadcn-badge-blue">scales</span> well but has mediocre per-request performance. The best systems optimize both — but start by understanding which problem you're actually solving.</p>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="http://www.allthingsdistributed.com/2006/03/a_word_on_scalability.html" target="_blank" rel="noopener">A word on scalability</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="http://www.slideshare.net/jboner/scalability-availability-stability-patterns/" target="_blank" rel="noopener">Scalability, availability, stability, patterns</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 06 — Latency vs Throughput
+    // ================================================================
+    'latency-throughput': {
+        part: 'Part B',
+        title: 'Latency vs Throughput',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 06 — Core Concepts</div>
+                <h1>Latency vs Throughput</h1>
+                <p class="chapter-subtitle">Two fundamental measures of system performance — learn when to optimize for each, and how they interact.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Latency vs Throughput
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart LR
+    A["Request"] --> B["Queue Wait"]
+    B --> C["Processing"]
+    C --> D["Response"]
+    A -.->|"Latency = total time"| D
+    E["Throughput"] -.->|"Requests / second"| C
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Principle
+                    </div>
+                    <div class="shadcn-alert-description">Generally, you should aim for <strong>maximal throughput</strong> with <strong>acceptable latency</strong>.</div>
+                </div>
+
+                <h2>Definitions</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber" style="margin-right:8px">Latency</span> Time per Action</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p><strong>Latency</strong> is the time to perform some action or to produce some result. It is typically measured in milliseconds (ms) or microseconds (µs).</p>
+                            <p>Examples: time for a database query to return, time for an API response, round-trip time of a network packet.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue" style="margin-right:8px">Throughput</span> Actions per Time</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p><strong>Throughput</strong> is the number of such actions or results per unit of time. It is typically measured in requests per second (req/s), queries per second (QPS), or bits per second (bps).</p>
+                            <p>Examples: web server handling 10,000 req/s, disk reading 500 MB/s, network transmitting 1 Gbps.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Side-by-Side Comparison</h2>
+
+                <div class="shadcn-comparison-grid">
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">Latency</div>
+                            <p class="shadcn-card-description">How long does one operation take?</p>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>Measured in <strong>ms</strong> or <strong>µs</strong></li>
+                                <li>Lower is better</li>
+                                <li>Affected by network hops, disk I/O, processing time</li>
+                                <li>Critical for real-time systems (gaming, trading)</li>
+                                <li>Analogy: <em>how fast a single car travels on a highway</em></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">Throughput</div>
+                            <p class="shadcn-card-description">How many operations per second?</p>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>Measured in <strong>req/s</strong>, <strong>QPS</strong>, or <strong>bps</strong></li>
+                                <li>Higher is better</li>
+                                <li>Affected by concurrency, bandwidth, parallelism</li>
+                                <li>Critical for batch processing, data pipelines</li>
+                                <li>Analogy: <em>how many cars pass a point per hour</em></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>The Relationship</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-content">
+                        <p>Latency and throughput are related but <strong>not inversely proportional</strong> in all cases. You can improve throughput (by adding parallelism) without reducing latency of individual requests. Conversely, reducing latency doesn't always increase throughput.</p>
+                        <div class="callout callout-info">
+                            <div class="callout-title">💡 Design Guideline</div>
+                            <p>Aim for <strong>maximal throughput</strong> with <strong>acceptable latency</strong>. Don't sacrifice latency beyond what your users or SLAs can tolerate, but within that envelope, push throughput as high as possible.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="https://community.cadence.com/cadence_blogs_8/b/fv/posts/understanding-latency-vs-throughput" target="_blank" rel="noopener">Understanding latency vs throughput</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 07 — Availability vs Consistency
+    // ================================================================
+    'availability-consistency': {
+        part: 'Part B',
+        title: 'Availability vs Consistency',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 07 — Core Concepts</div>
+                <h1>Availability vs Consistency</h1>
+                <p class="chapter-subtitle">The CAP theorem and the fundamental trade-off every distributed system must make.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> CAP Theorem Decision Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Distributed System"] --> B{"Network Partition?"}
+    B -->|No partition| C["Can have C + A"]
+    B -->|Partition occurs| D{"Choose one:"}
+    D -->|Consistency| E["CP System"]
+    E --> F["Reject requests until partition heals"]
+    D -->|Availability| G["AP System"]
+    G --> H["Serve possibly stale data"]
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>CAP Theorem</h2>
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/bgLMI2u.png" class="zoomable" alt="CAP theorem Venn diagram" style="max-width:480px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="https://robertgreiner.com/cap-theorem-revisited" target="_blank" rel="noopener">Source: CAP theorem revisited</a></em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-warning">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                        CAP Trade-Off
+                    </div>
+                    <div class="shadcn-alert-description">In a distributed computer system, you can only support <strong>two</strong> of the following three guarantees simultaneously.</div>
+                </div>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">C</span> Consistency</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Every read receives the <strong>most recent write</strong> or an error.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">A</span> Availability</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Every request receives a <strong>response</strong>, without guarantee it contains the most recent version.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">P</span> Partition Tolerance</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>The system continues to operate despite arbitrary <strong>network partitioning</strong> due to failures.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-warning">
+                    <div class="callout-title">⚠️ Networks Aren't Reliable</div>
+                    <p>Networks aren't reliable, so you'll <strong>always</strong> need to support partition tolerance. This means you must make a software trade-off between <strong>consistency</strong> and <strong>availability</strong>.</p>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>CP vs AP</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="cp-tab" data-tabgroup="cap">CP — Consistency + Partition Tolerance</button>
+                        <button class="shadcn-tab-trigger" data-tab="ap-tab" data-tabgroup="cap">AP — Availability + Partition Tolerance</button>
+                    </div>
+                    <div class="shadcn-tab-content active" id="cp-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">CP — Consistency &amp; Partition Tolerance <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Strong Reads</span></div>
+                                <p class="shadcn-card-description">Sacrifice availability for correctness during partitions.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Waiting for a response from the partitioned node might result in a <strong>timeout error</strong>. CP is a good choice if your business needs require <strong>atomic reads and writes</strong>.</p>
+                                <ul style="padding-left:18px">
+                                    <li>Guarantees every read returns the latest write</li>
+                                    <li>May return errors or timeouts during network partitions</li>
+                                    <li>Use cases: financial transactions, inventory management, distributed locks</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="shadcn-tab-content" id="ap-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">AP — Availability &amp; Partition Tolerance <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Always On</span></div>
+                                <p class="shadcn-card-description">Sacrifice consistency for uptime during partitions.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Responses return the most readily available version of the data on any node, which <strong>might not be the latest</strong>. Writes might take some time to propagate when the partition is resolved.</p>
+                                <p>AP is a good choice if the business needs to allow for <strong>eventual consistency</strong> or when the system needs to continue working despite external errors.</p>
+                                <ul style="padding-left:18px">
+                                    <li>Always returns a response — even if stale</li>
+                                    <li>Data eventually converges across nodes</li>
+                                    <li>Use cases: social media feeds, shopping carts, DNS</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📄</span> <a href="https://robertgreiner.com/cap-theorem-revisited/" target="_blank" rel="noopener">CAP theorem revisited</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="http://ksat.me/a-plain-english-introduction-to-cap-theorem" target="_blank" rel="noopener">A plain english introduction to CAP theorem</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://github.com/henryr/cap-faq" target="_blank" rel="noopener">CAP FAQ</a></li>
+                    <li><span class="resource-icon">🎥</span> <a href="https://www.youtube.com/watch?v=k-Yaq8AHlFA" target="_blank" rel="noopener">The CAP theorem (video)</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 08 — Consistency Patterns
+    // ================================================================
+    'consistency-patterns': {
+        part: 'Part B',
+        title: 'Consistency Patterns',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 08 — Core Concepts</div>
+                <h1>Consistency Patterns</h1>
+                <p class="chapter-subtitle">With multiple copies of the same data, how do you synchronize them so clients have a consistent view?</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Consistency Pattern Selection
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Choose Consistency"] --> B{"Need real-time accuracy?"}
+    B -->|Yes| C["Strong Consistency"]
+    C --> D["RDBMS / Transactions"]
+    B -->|No| E{"Tolerate stale reads?"}
+    E -->|Briefly| F["Eventual Consistency"]
+    F --> G["DNS / Email / Async replication"]
+    E -->|Yes| H["Weak Consistency"]
+    H --> I["VoIP / Video chat / Gaming"]
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Recall
+                    </div>
+                    <div class="shadcn-alert-description">From the <strong>CAP theorem</strong>: Consistency means every read receives the most recent write or an error. With multiple copies of data, we must choose <em>how</em> to synchronize them.</div>
+                </div>
+
+                <h2>Three Consistency Patterns</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="weak-tab" data-tabgroup="consistency">Weak</button>
+                        <button class="shadcn-tab-trigger" data-tab="eventual-tab" data-tabgroup="consistency">Eventual</button>
+                        <button class="shadcn-tab-trigger" data-tab="strong-tab" data-tabgroup="consistency">Strong</button>
+                    </div>
+
+                    <div class="shadcn-tab-content active" id="weak-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Weak Consistency <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Best Effort</span></div>
+                                <p class="shadcn-card-description">After a write, reads may or may not see it.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>A <strong>best effort</strong> approach is taken. After a write, there is no guarantee that subsequent reads will return the updated value.</p>
+                                <p>This approach is seen in systems such as <span class="shadcn-badge shadcn-badge-outline">memcached</span>. Weak consistency works well in <strong>real-time use cases</strong> such as:</p>
+                                <ul style="padding-left:18px">
+                                    <li><strong>VoIP</strong> — if you lose reception, you don't hear what was spoken during the loss</li>
+                                    <li><strong>Video chat</strong> — dropped frames are simply skipped</li>
+                                    <li><strong>Realtime multiplayer games</strong> — brief desync is acceptable</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="eventual-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Eventual Consistency <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Converges</span></div>
+                                <p class="shadcn-card-description">After a write, reads will eventually see it (typically within milliseconds).</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Data is replicated <strong>asynchronously</strong>. After a write completes, reads will eventually return the updated value — typically within milliseconds.</p>
+                                <p>This approach is seen in systems such as:</p>
+                                <ul style="padding-left:18px">
+                                    <li><span class="shadcn-badge shadcn-badge-outline">DNS</span> — record updates propagate over minutes/hours</li>
+                                    <li><span class="shadcn-badge shadcn-badge-outline">Email</span> — eventual delivery across servers</li>
+                                    <li><strong>Highly available systems</strong> — where uptime is more critical than immediate consistency</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="strong-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Strong Consistency <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Guaranteed</span></div>
+                                <p class="shadcn-card-description">After a write, reads will see it immediately.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Data is replicated <strong>synchronously</strong>. After a write completes, any subsequent read will return the updated value. This provides the strongest guarantees but at the cost of higher latency.</p>
+                                <p>This approach is seen in systems such as:</p>
+                                <ul style="padding-left:18px">
+                                    <li><span class="shadcn-badge shadcn-badge-outline">File systems</span> — writes are durable and immediately visible</li>
+                                    <li><span class="shadcn-badge shadcn-badge-outline">RDBMSes</span> — transactional guarantees (ACID)</li>
+                                    <li><strong>Systems that need transactions</strong> — banking, inventory, booking</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Comparison at a Glance</h2>
+
+                <div class="table-wrapper" style="overflow-x:auto;">
+                    <table style="width:100%;border-collapse:collapse;">
+                        <thead>
+                            <tr>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Pattern</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">After Write</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Replication</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Use Cases</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-amber">Weak</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">May or may not see it</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Best effort</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">VoIP, video chat, games</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-blue">Eventual</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Eventually sees it (ms)</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Asynchronous</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">DNS, email, HA systems</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;"><span class="shadcn-badge shadcn-badge-green">Strong</span></td>
+                                <td style="padding:0.75rem;">Sees it immediately</td>
+                                <td style="padding:0.75rem;">Synchronous</td>
+                                <td style="padding:0.75rem;">RDBMS, file systems, transactions</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📄</span> <a href="http://snarfed.org/transactions_across_datacenters_io.html" target="_blank" rel="noopener">Transactions across data centers</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 09 — Availability Patterns
+    // ================================================================
+    'availability-patterns': {
+        part: 'Part B',
+        title: 'Availability Patterns',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 09 — Core Concepts</div>
+                <h1>Availability Patterns</h1>
+                <p class="chapter-subtitle">Two complementary patterns to support high availability: fail-over and replication — plus how to quantify availability in numbers.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Failover Architecture Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Active Server"] --> B["Heartbeat Monitor"]
+    C["Passive Server"] --> B
+    B --> D{"Active healthy?"}
+    D -->|Yes| E["Route traffic to Active"]
+    D -->|No| F["Promote Passive to Active"]
+    F --> G["DNS / VIP Failover"]
+    G --> E
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Overview
+                    </div>
+                    <div class="shadcn-alert-description">There are two complementary patterns to support high availability: <strong>fail-over</strong> and <strong>replication</strong>.</div>
+                </div>
+
+                <!-- ===== FAIL-OVER ===== -->
+                <h2>Fail-over</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="active-passive-tab" data-tabgroup="failover">Active-Passive</button>
+                        <button class="shadcn-tab-trigger" data-tab="active-active-tab" data-tabgroup="failover">Active-Active</button>
+                    </div>
+
+                    <div class="shadcn-tab-content active" id="active-passive-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Active-Passive <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Master-Slave</span></div>
+                                <p class="shadcn-card-description">One active server handles traffic; a passive standby takes over on failure.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>With active-passive fail-over, <strong>heartbeats</strong> are sent between the active and the passive server on standby. If the heartbeat is interrupted, the passive server takes over the active's IP address and resumes service.</p>
+                                <p>The length of downtime is determined by whether the passive server is already running in <span class="shadcn-badge shadcn-badge-green">'hot' standby</span> or whether it needs to start up from <span class="shadcn-badge shadcn-badge-amber">'cold' standby</span>.</p>
+                                <p>Only the <strong>active server handles traffic</strong>. Active-passive failover can also be referred to as master-slave failover.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="active-active-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Active-Active <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Master-Master</span></div>
+                                <p class="shadcn-card-description">Both servers manage traffic, spreading the load between them.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>In active-active, <strong>both servers are managing traffic</strong>, spreading the load between them.</p>
+                                <ul style="padding-left:18px">
+                                    <li>If the servers are <strong>public-facing</strong>, the DNS would need to know about the public IPs of both servers.</li>
+                                    <li>If the servers are <strong>internal-facing</strong>, application logic would need to know about both servers.</li>
+                                </ul>
+                                <p>Active-active failover can also be referred to as master-master failover.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-destructive" style="margin-top:1rem;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        Disadvantages of Fail-over
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>Fail-over adds <strong>more hardware</strong> and additional <strong>complexity</strong>.</li>
+                            <li>There is a potential for <strong>loss of data</strong> if the active system fails before any newly written data can be replicated to the passive.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- ===== REPLICATION ===== -->
+                <h2>Replication</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Master-Slave &amp; Master-Master Replication</div>
+                        <p class="shadcn-card-description">Replication strategies are covered in depth in the Database section.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <div class="shadcn-comparison-grid">
+                            <div class="shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Master-Slave</span></div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Master serves reads and writes; replicates writes to one or more slaves. Slaves serve reads only. If the master goes offline, the system continues in read-only mode until a slave is promoted.</p>
+                                </div>
+                            </div>
+                            <div class="shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Master-Master</span></div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Both masters serve reads and writes, coordinating with each other. If either master goes down, the other continues with both reads and writes. Increases write availability but adds complexity.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- ===== AVAILABILITY IN NUMBERS ===== -->
+                <h2>Availability in Numbers</h2>
+
+                <p>Availability is often quantified by uptime (or downtime) as a <strong>percentage of time</strong> the service is available. Availability is generally measured in <strong>number of 9s</strong> — a service with 99.99% availability is described as having <em>four 9s</em>.</p>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="three-nines-tab" data-tabgroup="nines">99.9% — Three 9s</button>
+                        <button class="shadcn-tab-trigger" data-tab="four-nines-tab" data-tabgroup="nines">99.99% — Four 9s</button>
+                    </div>
+
+                    <div class="shadcn-tab-content active" id="three-nines-tab">
+                        <div class="table-wrapper" style="overflow-x:auto;">
+                            <table style="width:100%;border-collapse:collapse;">
+                                <thead>
+                                    <tr>
+                                        <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Duration</th>
+                                        <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Acceptable Downtime</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Downtime per year</td>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><strong>8h 45min 57s</strong></td>
+                                    </tr>
+                                    <tr>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Downtime per month</td>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><strong>43m 49.7s</strong></td>
+                                    </tr>
+                                    <tr>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Downtime per week</td>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><strong>10m 4.8s</strong></td>
+                                    </tr>
+                                    <tr>
+                                        <td style="padding:0.75rem;">Downtime per day</td>
+                                        <td style="padding:0.75rem;"><strong>1m 26.4s</strong></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="four-nines-tab">
+                        <div class="table-wrapper" style="overflow-x:auto;">
+                            <table style="width:100%;border-collapse:collapse;">
+                                <thead>
+                                    <tr>
+                                        <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Duration</th>
+                                        <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Acceptable Downtime</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Downtime per year</td>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><strong>52min 35.7s</strong></td>
+                                    </tr>
+                                    <tr>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Downtime per month</td>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><strong>4m 23s</strong></td>
+                                    </tr>
+                                    <tr>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Downtime per week</td>
+                                        <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><strong>1m 5s</strong></td>
+                                    </tr>
+                                    <tr>
+                                        <td style="padding:0.75rem;">Downtime per day</td>
+                                        <td style="padding:0.75rem;"><strong>8.6s</strong></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- ===== IN SEQUENCE vs IN PARALLEL ===== -->
+                <h2>Availability in Sequence vs in Parallel</h2>
+
+                <p>If a service consists of multiple components prone to failure, the service's overall availability depends on whether the components are <strong>in sequence</strong> or <strong>in parallel</strong>.</p>
+
+                <div class="shadcn-comparison-grid">
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">In Sequence <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Decreases</span></div>
+                            <p class="shadcn-card-description">Overall availability decreases when components are in sequence.</p>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <div style="background:var(--muted);padding:1rem;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:0.9rem;margin-bottom:0.75rem;">
+                                Availability(Total) = Avail(Foo) × Avail(Bar)
+                            </div>
+                            <p>If both <code>Foo</code> and <code>Bar</code> each had <strong>99.9%</strong> availability, their total availability in sequence would be <strong>99.8%</strong>.</p>
+                        </div>
+                    </div>
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">In Parallel <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Increases</span></div>
+                            <p class="shadcn-card-description">Overall availability increases when components are in parallel.</p>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <div style="background:var(--muted);padding:1rem;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:0.9rem;margin-bottom:0.75rem;">
+                                Availability(Total) = 1 − (1 − Avail(Foo)) × (1 − Avail(Bar))
+                            </div>
+                            <p>If both <code>Foo</code> and <code>Bar</code> each had <strong>99.9%</strong> availability, their total availability in parallel would be <strong>99.9999%</strong>.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-info" style="margin-top:1rem;">
+                    <div class="callout-title">💡 Key Insight</div>
+                    <p>Use <strong>redundancy</strong> (parallel components) to improve availability. Every serial dependency is a single point of failure that drags down your overall uptime.</p>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📄</span> <a href="https://availabilitydigest.com/public_articles/0201/predictions.pdf" target="_blank" rel="noopener">Availability digest</a></li>
+                </ul>
+            </div>
+        `
+    }
+
+};
diff --git a/website/js/chapters/chapters-c.js b/website/js/chapters/chapters-c.js
new file mode 100644
index 00000000000..1178bb2ab94
--- /dev/null
+++ b/website/js/chapters/chapters-c.js
@@ -0,0 +1,825 @@
+/**
+ * Part C: Infrastructure — Chapters 10–13
+ * Domain Name System, Content Delivery Network,
+ * Load Balancer, Reverse Proxy
+ *
+ * Registered into global CHAPTERS_C object.
+ */
+
+const CHAPTERS_C = {
+
+    // ================================================================
+    // Chapter 10 — Domain Name System
+    // ================================================================
+    'dns': {
+        part: 'Part C',
+        title: 'Domain Name System',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 10 — Infrastructure</div>
+                <h1>Domain Name System</h1>
+                <p class="chapter-subtitle">How the internet's phonebook translates human-readable domain names into machine-routable IP addresses — and the trade-offs involved.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">🔄</span> DNS Resolution Flow
+                        <span class="diagram-type-badge">Sequence</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+sequenceDiagram
+    participant Browser
+    participant Local as Local DNS Cache
+    participant Root as Root Server
+    participant TLD as TLD Server
+    participant Auth as Authoritative Server
+    Browser->>Local: Resolve example.com
+    alt Cache Hit
+        Local-->>Browser: Return cached IP
+    else Cache Miss
+        Local->>Root: Query root
+        Root-->>Local: Refer to .com TLD
+        Local->>TLD: Query .com
+        TLD-->>Local: Refer to authoritative
+        Local->>Auth: Query example.com
+        Auth-->>Local: Return IP address
+        Local-->>Browser: Return IP
+    end
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/IOyLj4i.jpg" class="zoomable" alt="DNS security presentation" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://www.slideshare.net/srikrupa5/dns-security-presentation-issa" target="_blank" rel="noopener">Source: DNS security presentation</a></em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Concept
+                    </div>
+                    <div class="shadcn-alert-description">A <strong>Domain Name System (DNS)</strong> translates a domain name such as <code>www.example.com</code> to an IP address. DNS is hierarchical, with a few authoritative servers at the top level.</div>
+                </div>
+
+                <h2>How DNS Works</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Hierarchical Resolution &amp; Caching</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p>DNS is <strong>hierarchical</strong>, with a few authoritative servers at the top level. Your router or ISP provides information about which DNS server(s) to contact when doing a lookup.</p>
+                        <p>Lower level DNS servers <strong>cache mappings</strong>, which could become stale due to DNS propagation delays. DNS results can also be cached by your <strong>browser or OS</strong> for a certain period of time, determined by the <strong>time to live (TTL)</strong>.</p>
+                    </div>
+                </div>
+
+                <h2>DNS Record Types</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">NS</span> Name Server</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Specifies the DNS servers for your domain/subdomain.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">MX</span> Mail Exchange</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Specifies the mail servers for accepting messages.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">A</span> Address Record</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Points a name to an IP address.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">CNAME</span> Canonical</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Points a name to another name or <code>CNAME</code> (e.g. <code>example.com</code> to <code>www.example.com</code>) or to an <code>A</code> record.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Managed DNS &amp; Traffic Routing</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Managed DNS Services</div>
+                        <p class="shadcn-card-description">Services such as CloudFlare and Route 53 provide managed DNS with advanced traffic routing.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <div class="shadcn-tabs">
+                            <div class="shadcn-tabs-list">
+                                <button class="shadcn-tab-trigger active" data-tab="dns-weighted-tab" data-tabgroup="dns-routing">Weighted Round Robin</button>
+                                <button class="shadcn-tab-trigger" data-tab="dns-latency-tab" data-tabgroup="dns-routing">Latency-Based</button>
+                                <button class="shadcn-tab-trigger" data-tab="dns-geo-tab" data-tabgroup="dns-routing">Geolocation-Based</button>
+                            </div>
+
+                            <div class="shadcn-tab-content active" id="dns-weighted-tab">
+                                <div class="shadcn-card" style="border:1px solid var(--border);">
+                                    <div class="shadcn-card-header">
+                                        <div class="shadcn-card-title">Weighted Round Robin <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Flexible</span></div>
+                                    </div>
+                                    <div class="shadcn-card-content">
+                                        <p>Distributes traffic based on assigned weights. Useful for:</p>
+                                        <ul style="padding-left:18px">
+                                            <li>Prevent traffic from going to servers under <strong>maintenance</strong></li>
+                                            <li>Balance between varying <strong>cluster sizes</strong></li>
+                                            <li><strong>A/B testing</strong> — send a percentage of users to a new version</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="shadcn-tab-content" id="dns-latency-tab">
+                                <div class="shadcn-card" style="border:1px solid var(--border);">
+                                    <div class="shadcn-card-header">
+                                        <div class="shadcn-card-title">Latency-Based Routing <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Performance</span></div>
+                                    </div>
+                                    <div class="shadcn-card-content">
+                                        <p>Routes users to the region that provides the <strong>lowest latency</strong>. AWS Route 53 measures latency between your users and AWS regions to determine the best endpoint.</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="shadcn-tab-content" id="dns-geo-tab">
+                                <div class="shadcn-card" style="border:1px solid var(--border);">
+                                    <div class="shadcn-card-header">
+                                        <div class="shadcn-card-title">Geolocation-Based Routing <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Location</span></div>
+                                    </div>
+                                    <div class="shadcn-card-content">
+                                        <p>Routes users based on their <strong>geographic location</strong>. Useful for content localization, regulatory compliance, and distributing load across regions.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Disadvantages</h2>
+
+                <div class="shadcn-alert shadcn-alert-destructive">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        Disadvantages of DNS
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>Accessing a DNS server introduces a <strong>slight delay</strong>, although mitigated by caching.</li>
+                            <li>DNS server management can be <strong>complex</strong> and is generally managed by governments, ISPs, and large companies.</li>
+                            <li>DNS services have come under <strong>DDoS attack</strong>, preventing users from accessing websites without knowing the IP address(es) directly.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📄</span> <a href="https://technet.microsoft.com/en-us/library/dd197427(v=ws.10).aspx" target="_blank" rel="noopener">DNS architecture</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Domain_Name_System" target="_blank" rel="noopener">Wikipedia — Domain Name System</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://support.dnsimple.com/categories/dns/" target="_blank" rel="noopener">DNS articles (dnsimple)</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 11 — Content Delivery Network
+    // ================================================================
+    'cdn': {
+        part: 'Part C',
+        title: 'Content Delivery Network',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 11 — Infrastructure</div>
+                <h1>Content Delivery Network</h1>
+                <p class="chapter-subtitle">Globally distributed proxy servers that serve content from locations closer to the user — accelerating delivery and offloading origin servers.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Push vs Pull CDN Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    subgraph Push CDN
+        A1["Content changes"] --> B1["Origin pushes to CDN"]
+        B1 --> C1["CDN stores content"]
+        D1["User request"] --> C1
+        C1 --> E1["Serve from edge"]
+    end
+    subgraph Pull CDN
+        D2["User request"] --> F2["CDN Edge"]
+        F2 --> G2{"Content cached?"}
+        G2 -->|Hit| H2["Serve from edge"]
+        G2 -->|Miss| I2["Fetch from Origin"]
+        I2 --> J2["Cache at edge"]
+        J2 --> H2
+    end
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/h9TAuGI.jpg" class="zoomable" alt="Why use a CDN" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="https://www.creative-artworks.eu/why-use-a-content-delivery-network-cdn/" target="_blank" rel="noopener">Source: Why use a CDN</a></em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Concept
+                    </div>
+                    <div class="shadcn-alert-description">A <strong>content delivery network (CDN)</strong> is a globally distributed network of proxy servers, serving content from locations closer to the user. Generally, static files such as HTML/CSS/JS, photos, and videos are served from CDN, although some CDNs such as Amazon's CloudFront support dynamic content.</div>
+                </div>
+
+                <h2>Why Use a CDN?</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Performance Benefits</div>
+                        <p class="shadcn-card-description">CDNs significantly improve performance in two key ways.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Proximity</span></div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Users receive content from <strong>data centers close to them</strong>, reducing latency and improving load times.</p>
+                                </div>
+                            </div>
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Offloading</span></div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Your servers <strong>do not have to serve requests</strong> that the CDN fulfills, freeing origin capacity.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Push vs Pull CDNs</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="cdn-push-tab" data-tabgroup="cdn-type">Push CDN</button>
+                        <button class="shadcn-tab-trigger" data-tab="cdn-pull-tab" data-tabgroup="cdn-type">Pull CDN</button>
+                    </div>
+
+                    <div class="shadcn-tab-content active" id="cdn-push-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Push CDN <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Upload on Change</span></div>
+                                <p class="shadcn-card-description">You proactively upload content to the CDN when changes occur.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Push CDNs receive new content whenever changes occur on your server. You take full responsibility for providing content, uploading directly to the CDN and rewriting URLs to point to the CDN.</p>
+                                <p>You can configure when content <strong>expires</strong> and when it is <strong>updated</strong>. Content is uploaded only when it is new or changed, <strong>minimizing traffic</strong> but <strong>maximizing storage</strong>.</p>
+                                <div class="callout callout-info" style="margin-top:1rem;">
+                                    <div class="callout-title">💡 Best For</div>
+                                    <p>Sites with a <strong>small amount of traffic</strong> or sites with content that <strong>isn't often updated</strong>. Content is placed on the CDN once, instead of being re-pulled at regular intervals.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="cdn-pull-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Pull CDN <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Lazy Fetch</span></div>
+                                <p class="shadcn-card-description">CDN grabs content from your server on the first user request.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Pull CDNs grab new content from your server when the first user requests the content. You leave the content on your server and rewrite URLs to point to the CDN. This results in a <strong>slower first request</strong> until the content is cached on the CDN.</p>
+                                <p>A <strong>time-to-live (TTL)</strong> determines how long content is cached. Pull CDNs <strong>minimize storage space</strong> on the CDN, but can create redundant traffic if files expire and are pulled before they have actually changed.</p>
+                                <div class="callout callout-info" style="margin-top:1rem;">
+                                    <div class="callout-title">💡 Best For</div>
+                                    <p>Sites with <strong>heavy traffic</strong>, as traffic is spread out more evenly with only recently-requested content remaining on the CDN.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Comparison at a Glance</h2>
+
+                <div class="shadcn-comparison-grid">
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">Push CDN</div>
+                            <p class="shadcn-card-description">Proactive upload model</p>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>You upload content when it changes</li>
+                                <li>Full control of expiry and updates</li>
+                                <li>Minimizes traffic, maximizes storage</li>
+                                <li>Best for low-traffic or rarely-updated sites</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">Pull CDN</div>
+                            <p class="shadcn-card-description">On-demand fetch model</p>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>CDN fetches content on first request</li>
+                                <li>TTL determines cache duration</li>
+                                <li>Minimizes CDN storage, possible redundant pulls</li>
+                                <li>Best for heavy-traffic sites</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Disadvantages</h2>
+
+                <div class="shadcn-alert shadcn-alert-destructive">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        Disadvantages of CDN
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>CDN costs could be <strong>significant</strong> depending on traffic, although this should be weighed with additional costs you would incur not using a CDN.</li>
+                            <li>Content might be <strong>stale</strong> if it is updated before the TTL expires it.</li>
+                            <li>CDNs require <strong>changing URLs</strong> for static content to point to the CDN.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📄</span> <a href="https://figshare.com/articles/Globally_distributed_content_delivery/6605972" target="_blank" rel="noopener">Globally distributed content delivery</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://www.geeksforgeeks.org/system-design/pull-cdn-vs-push-cdn/" target="_blank" rel="noopener">The differences between push and pull CDNs</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Content_delivery_network" target="_blank" rel="noopener">Wikipedia — Content delivery network</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 12 — Load Balancer
+    // ================================================================
+    'load-balancer': {
+        part: 'Part C',
+        title: 'Load Balancer',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 12 — Infrastructure</div>
+                <h1>Load Balancer</h1>
+                <p class="chapter-subtitle">Distributing incoming client requests across computing resources to improve reliability, eliminate single points of failure, and enable horizontal scaling.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Load Balancer Request Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Client Request"] --> B["Load Balancer"]
+    B --> C{"L4 or L7?"}
+    C -->|L4 Transport| D["Route by IP/Port"]
+    C -->|L7 Application| E["Route by URL/Headers"]
+    D --> F["Server Pool"]
+    E --> F
+    F --> G["Health Check"]
+    G -->|Healthy| H["Process Request"]
+    G -->|Unhealthy| I["Remove from Pool"]
+    H --> J["Response to Client"]
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/h81n9iK.png" class="zoomable" alt="Scalable system design patterns" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://horicky.blogspot.com/2010/10/scalable-system-design-patterns.html" target="_blank" rel="noopener">Source: Scalable system design patterns</a></em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Concept
+                    </div>
+                    <div class="shadcn-alert-description"><strong>Load balancers</strong> distribute incoming client requests to computing resources such as application servers and databases. The load balancer returns the response from the computing resource to the appropriate client.</div>
+                </div>
+
+                <h2>What Load Balancers Do</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Effectiveness</div>
+                        <p class="shadcn-card-description">Load balancers address three critical concerns.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <div class="concept-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;">
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Health</span></div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Preventing requests from going to <strong>unhealthy servers</strong>.</p>
+                                </div>
+                            </div>
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Load</span></div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Preventing <strong>overloading</strong> resources.</p>
+                                </div>
+                            </div>
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">SPOF</span></div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Helping to eliminate a <strong>single point of failure</strong>.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Implementation &amp; Benefits</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-content">
+                        <p>Load balancers can be implemented with <strong>hardware</strong> (expensive) or with <strong>software</strong> such as HAProxy.</p>
+                        <p>Additional benefits include:</p>
+                        <ul style="padding-left:18px">
+                            <li><strong>SSL termination</strong> — Decrypt incoming requests and encrypt server responses so backend servers do not have to perform these potentially expensive operations. Removes the need to install X.509 certificates on each server.</li>
+                            <li><strong>Session persistence</strong> — Issue cookies and route a specific client's requests to the same instance if the web apps do not keep track of sessions.</li>
+                        </ul>
+                        <div class="callout callout-info" style="margin-top:1rem;">
+                            <div class="callout-title">💡 High Availability</div>
+                            <p>To protect against failures, it's common to set up <strong>multiple load balancers</strong>, either in <strong>active-passive</strong> or <strong>active-active</strong> mode.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Routing Methods</h2>
+
+                <div class="table-wrapper" style="overflow-x:auto;">
+                    <table style="width:100%;border-collapse:collapse;">
+                        <thead>
+                            <tr>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Method</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-outline">Random</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Distributes requests randomly across servers</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-outline">Least Loaded</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Sends requests to the server with the fewest active connections</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-outline">Session / Cookies</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Routes based on session affinity or cookie values</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-outline">Round Robin</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Cycles through servers sequentially (or weighted)</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-blue">Layer 4</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Transport layer — routes based on IP/ports</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;"><span class="shadcn-badge shadcn-badge-green">Layer 7</span></td>
+                                <td style="padding:0.75rem;">Application layer — routes based on headers, message, cookies</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Layer 4 vs Layer 7 Load Balancing</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="lb-l4-tab" data-tabgroup="lb-layer">Layer 4</button>
+                        <button class="shadcn-tab-trigger" data-tab="lb-l7-tab" data-tabgroup="lb-layer">Layer 7</button>
+                    </div>
+
+                    <div class="shadcn-tab-content active" id="lb-l4-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Layer 4 Load Balancing <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Transport</span></div>
+                                <p class="shadcn-card-description">Operates at the transport layer — fast and efficient.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Layer 4 load balancers look at info at the <strong>transport layer</strong> to decide how to distribute requests. Generally, this involves the source, destination IP addresses, and ports in the header, but <strong>not the contents of the packet</strong>.</p>
+                                <p>Layer 4 load balancers forward network packets to and from the upstream server, performing <strong>Network Address Translation (NAT)</strong>.</p>
+                                <ul style="padding-left:18px">
+                                    <li>Less time and computing resources required</li>
+                                    <li>Less flexible — cannot inspect application data</li>
+                                    <li>Faster for high-throughput scenarios</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="lb-l7-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Layer 7 Load Balancing <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Application</span></div>
+                                <p class="shadcn-card-description">Operates at the application layer — flexible and content-aware.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Layer 7 load balancers look at the <strong>application layer</strong> to decide how to distribute requests. This can involve contents of the header, message, and cookies.</p>
+                                <p>Layer 7 load balancers <strong>terminate network traffic</strong>, read the message, make a load-balancing decision, then open a connection to the selected server. For example, a layer 7 load balancer can direct video traffic to video servers while directing billing traffic to security-hardened servers.</p>
+                                <ul style="padding-left:18px">
+                                    <li>More time and computing resources required</li>
+                                    <li>Highly flexible — can route based on content</li>
+                                    <li>Enables smart routing and content-based decisions</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-warning" style="margin-top:1rem;">
+                    <div class="callout-title">⚠️ Trade-Off</div>
+                    <p>At the cost of flexibility, <strong>Layer 4</strong> load balancing requires less time and computing resources than <strong>Layer 7</strong>, although the performance impact can be minimal on modern commodity hardware.</p>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Horizontal Scaling</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Scaling Out with Commodity Machines</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p>Load balancers enable <strong>horizontal scaling</strong>, improving both performance and availability. Scaling out using commodity machines is more <strong>cost efficient</strong> and results in <strong>higher availability</strong> than scaling up a single server on more expensive hardware (<strong>Vertical Scaling</strong>).</p>
+                        <p>It is also easier to hire for talent working on commodity hardware than it is for specialized enterprise systems.</p>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-warning" style="margin-top:1rem;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                        Disadvantages of Horizontal Scaling
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>Scaling horizontally introduces complexity and involves <strong>cloning servers</strong>.</li>
+                            <li>Servers should be <strong>stateless</strong>: they should not contain any user-related data like sessions or profile pictures.</li>
+                            <li>Sessions can be stored in a <strong>centralized data store</strong> such as a database (SQL, NoSQL) or a persistent cache (Redis, Memcached).</li>
+                            <li>Downstream servers such as caches and databases need to handle <strong>more simultaneous connections</strong> as upstream servers scale out.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Disadvantages</h2>
+
+                <div class="shadcn-alert shadcn-alert-destructive">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        Disadvantages of Load Balancer
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>The load balancer can become a <strong>performance bottleneck</strong> if it does not have enough resources or is not configured properly.</li>
+                            <li>Introducing a load balancer to eliminate a single point of failure results in <strong>increased complexity</strong>.</li>
+                            <li>A single load balancer is a <strong>single point of failure</strong>; configuring multiple load balancers further increases complexity.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📄</span> <a href="https://www.nginx.com/blog/inside-nginx-how-we-designed-for-performance-scale/" target="_blank" rel="noopener">NGINX architecture</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="http://www.haproxy.org/download/1.2/doc/architecture.txt" target="_blank" rel="noopener">HAProxy architecture guide</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Load_balancing_(computing)" target="_blank" rel="noopener">Wikipedia — Load balancing</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://www.nginx.com/resources/glossary/layer-4-load-balancing/" target="_blank" rel="noopener">Layer 4 load balancing</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://www.nginx.com/resources/glossary/layer-7-load-balancing/" target="_blank" rel="noopener">Layer 7 load balancing</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 13 — Reverse Proxy
+    // ================================================================
+    'reverse-proxy': {
+        part: 'Part C',
+        title: 'Reverse Proxy',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 13 — Infrastructure</div>
+                <h1>Reverse Proxy</h1>
+                <p class="chapter-subtitle">A web server that centralizes internal services and provides unified interfaces to the public — adding security, scalability, and caching in one layer.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Reverse Proxy Request Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Client"] --> B["Reverse Proxy"]
+    B --> C["SSL Termination"]
+    C --> D["Compression"]
+    D --> E{"Static content?"}
+    E -->|Yes| F["Serve from Cache"]
+    E -->|No| G["Forward to Backend"]
+    G --> H["Backend Server 1"]
+    G --> I["Backend Server 2"]
+    H --> J["Response"]
+    I --> J
+    J --> B
+    B --> A
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/n41Azff.png" class="zoomable" alt="Wikipedia reverse proxy diagram" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="https://upload.wikimedia.org/wikipedia/commons/6/67/Reverse_proxy_h2g2bob.svg" target="_blank" rel="noopener">Source: Wikipedia</a></em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Concept
+                    </div>
+                    <div class="shadcn-alert-description">A <strong>reverse proxy</strong> is a web server that centralizes internal services and provides unified interfaces to the public. Requests from clients are forwarded to a server that can fulfill it before the reverse proxy returns the server's response to the client.</div>
+                </div>
+
+                <h2>Benefits</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Security</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Hide information about <strong>backend servers</strong>, blacklist IPs, limit number of connections per client.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Scalability</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Clients only see the reverse proxy's IP, allowing you to <strong>scale servers</strong> or change their configuration transparently.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">SSL Termination</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Decrypt incoming requests and encrypt server responses so backend servers do not have to perform these <strong>expensive operations</strong>. Removes the need to install X.509 certificates on each server.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Compression</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p><strong>Compress server responses</strong> to reduce bandwidth usage and improve transfer speed.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Additional Capabilities</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Caching</span></div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Return the response for <strong>cached requests</strong> without hitting the origin server.</p>
+                                </div>
+                            </div>
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Static Content</span></div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Serve <strong>static content</strong> directly — HTML/CSS/JS, photos, videos, etc.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Load Balancer vs Reverse Proxy</h2>
+
+                <div class="shadcn-comparison-grid">
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">Load Balancer</div>
+                            <p class="shadcn-card-description">Multiple servers required</p>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>Useful when you have <strong>multiple servers</strong></li>
+                                <li>Routes traffic to a set of servers serving the <strong>same function</strong></li>
+                                <li>Primary goal: distribute load</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title">Reverse Proxy</div>
+                            <p class="shadcn-card-description">Even one server benefits</p>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>Useful even with <strong>just one</strong> web server or application server</li>
+                                <li>Provides security, caching, compression, SSL termination</li>
+                                <li>Primary goal: centralize and protect</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-info" style="margin-top:1rem;">
+                    <div class="callout-title">💡 Key Insight</div>
+                    <p>Solutions such as <strong>NGINX</strong> and <strong>HAProxy</strong> can support both layer 7 reverse proxying and load balancing.</p>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Disadvantages</h2>
+
+                <div class="shadcn-alert shadcn-alert-destructive">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        Disadvantages of Reverse Proxy
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>Introducing a reverse proxy results in <strong>increased complexity</strong>.</li>
+                            <li>A single reverse proxy is a <strong>single point of failure</strong>; configuring multiple reverse proxies (i.e. a failover) further increases complexity.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📄</span> <a href="https://www.nginx.com/resources/glossary/reverse-proxy-vs-load-balancer/" target="_blank" rel="noopener">Reverse proxy vs load balancer</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://www.nginx.com/blog/inside-nginx-how-we-designed-for-performance-scale/" target="_blank" rel="noopener">NGINX architecture</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="http://www.haproxy.org/download/1.2/doc/architecture.txt" target="_blank" rel="noopener">HAProxy architecture guide</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Reverse_proxy" target="_blank" rel="noopener">Wikipedia — Reverse proxy</a></li>
+                </ul>
+            </div>
+        `
+    }
+
+};
diff --git a/website/js/chapters/chapters-core.js b/website/js/chapters/chapters-core.js
new file mode 100644
index 00000000000..34e83c59acc
--- /dev/null
+++ b/website/js/chapters/chapters-core.js
@@ -0,0 +1,56 @@
+/**
+ * Chapter Registry — Core
+ * Merges all CHAPTERS_A through CHAPTERS_H into a single CHAPTERS object,
+ * defines the chapter order, and provides utility functions.
+ *
+ * This file must be loaded AFTER all chapters-*.js part files.
+ */
+
+// Merge all part objects into the master CHAPTERS map
+const CHAPTERS = Object.assign({},
+    typeof CHAPTERS_A !== 'undefined' ? CHAPTERS_A : {},
+    typeof CHAPTERS_B !== 'undefined' ? CHAPTERS_B : {},
+    typeof CHAPTERS_C !== 'undefined' ? CHAPTERS_C : {},
+    typeof CHAPTERS_D !== 'undefined' ? CHAPTERS_D : {},
+    typeof CHAPTERS_E !== 'undefined' ? CHAPTERS_E : {},
+    typeof CHAPTERS_F !== 'undefined' ? CHAPTERS_F : {},
+    typeof CHAPTERS_G !== 'undefined' ? CHAPTERS_G : {},
+    typeof CHAPTERS_H !== 'undefined' ? CHAPTERS_H : {}
+);
+
+// Ordered list of chapter keys for navigation
+const CHAPTER_ORDER = [
+    // Part A: Getting Started
+    'motivation', 'flashcards', 'study-guide', 'interview-approach',
+    // Part B: Core Concepts
+    'performance-scalability', 'latency-throughput', 'availability-consistency', 'consistency-patterns', 'availability-patterns',
+    // Part C: Infrastructure
+    'dns', 'cdn', 'load-balancer', 'reverse-proxy',
+    // Part D: Data Layer
+    'application-layer', 'database', 'cache', 'asynchronism',
+    // Part E: Communication
+    'communication', 'security',
+    // Part F: Practice Problems
+    'design-pastebin', 'design-twitter', 'design-web-crawler', 'design-mint',
+    'design-social-graph', 'design-kv-store', 'design-sales-rank', 'design-scaling-aws',
+    // Part G: OO Design
+    'oo-hash-map', 'oo-lru-cache', 'oo-call-center', 'oo-deck-of-cards', 'oo-parking-lot', 'oo-online-chat',
+    // Part H: Appendix
+    'powers-of-two', 'latency-numbers', 'additional-questions', 'real-world-architectures', 'engineering-blogs'
+];
+
+/**
+ * Generate "Coming Soon" placeholder content for chapters not yet built.
+ */
+function getComingSoonContent(chapterKey) {
+    const chapter = CHAPTERS[chapterKey];
+    if (!chapter) return '<p>Chapter not found.</p>';
+    return `
+        <div class="coming-soon">
+            <div class="coming-soon-icon">🚧</div>
+            <h2>Coming Soon</h2>
+            <p><strong>${chapter.title}</strong> content is being prepared.<br>
+            This chapter will be available in a future update.</p>
+        </div>
+    `;
+}
diff --git a/website/js/chapters/chapters-d.js b/website/js/chapters/chapters-d.js
new file mode 100644
index 00000000000..defb7cd7fd6
--- /dev/null
+++ b/website/js/chapters/chapters-d.js
@@ -0,0 +1,1145 @@
+/**
+ * Part D: Data Layer — Chapters 14–17
+ * Application Layer, Database, Cache, Asynchronism
+ *
+ * Registered into global CHAPTERS_D object.
+ */
+
+const CHAPTERS_D = {
+
+    // ================================================================
+    // Chapter 14 — Application Layer
+    // ================================================================
+    'application-layer': {
+        part: 'Part D',
+        title: 'Application Layer',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 14 — Data Layer</div>
+                <h1>Application Layer</h1>
+                <p class="chapter-subtitle">Separating the web layer from the application (platform) layer allows you to scale and configure both independently — a cornerstone of resilient system design.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Application Layer Request Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Client"] --> B["Web Layer"]
+    B --> C["Application Layer"]
+    C --> D{"Request type"}
+    D -->|Read| E["Cache Layer"]
+    D -->|Write| F["Message Queue"]
+    E -->|Miss| G["Database"]
+    F --> H["Worker Service"]
+    H --> G
+    E -->|Hit| I["Return Response"]
+    G --> I
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/yB5SYwm.png" class="zoomable" alt="Intro to architecting systems for scale" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://lethain.com/introduction-to-architecting-systems-for-scale" target="_blank" rel="noopener">Source: Intro to architecting systems for scale</a></em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Concept
+                    </div>
+                    <div class="shadcn-alert-description">Separating out the <strong>web layer</strong> from the <strong>application layer</strong> (also known as the <strong>platform layer</strong>) allows you to scale and configure both layers independently. Adding a new API results in adding application servers without necessarily adding additional web servers. The <strong>single responsibility principle</strong> advocates for small and autonomous services that work together.</div>
+                </div>
+
+                <h2>Why Separate the Layers?</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Independent Scaling</div>
+                        <p class="shadcn-card-description">Scale each layer according to its own demand profile.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px">
+                            <li>Adding a new API results in adding <strong>application servers</strong> without necessarily adding additional web servers.</li>
+                            <li>The <strong>single responsibility principle</strong> advocates for small and autonomous services that work together.</li>
+                            <li><strong>Workers</strong> in the application layer also enable asynchronism — processing tasks from message queues independently.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Key Concepts</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="app-micro-tab" data-tabgroup="app-concepts">Microservices</button>
+                        <button class="shadcn-tab-trigger" data-tab="app-discovery-tab" data-tabgroup="app-concepts">Service Discovery</button>
+                    </div>
+
+                    <div class="shadcn-tab-content active" id="app-micro-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Microservices <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Architecture</span></div>
+                                <p class="shadcn-card-description">A suite of independently deployable, small, modular services.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Each service runs a unique process and communicates through a well-defined, lightweight mechanism to serve a business goal.</p>
+                                <div class="callout callout-tip">
+                                    <div class="callout-title">💡 Example — Pinterest</div>
+                                    <p>Pinterest could have the following microservices: user profile, follower, feed, search, photo upload, etc. Each can be developed, deployed, and scaled independently.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="app-discovery-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Service Discovery <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Operations</span></div>
+                                <p class="shadcn-card-description">Finding and connecting to services based on registered names, addresses, and ports.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Systems such as <strong>Consul</strong>, <strong>Etcd</strong>, and <strong>Zookeeper</strong> can help services find each other by tracking registered names, addresses, and ports. <strong>Health checks</strong> help verify service integrity and are often done using an HTTP endpoint.</p>
+                                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem;">
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Consul</span></div>
+                                        </div>
+                                        <div class="shadcn-card-content">
+                                            <p>Service mesh, health checking, key/value store by HashiCorp.</p>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Etcd</span></div>
+                                        </div>
+                                        <div class="shadcn-card-content">
+                                            <p>Distributed key-value store for shared configuration and service discovery.</p>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Zookeeper</span></div>
+                                        </div>
+                                        <div class="shadcn-card-content">
+                                            <p>Centralized service for maintaining configuration, naming, synchronization, and group services.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Disadvantages</h2>
+
+                <div class="shadcn-alert shadcn-alert-destructive">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        Disadvantages of the Application Layer
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>Adding an application layer with loosely coupled services requires a different approach from an <strong>architectural, operations, and process</strong> viewpoint (vs a monolithic system).</li>
+                            <li>Microservices can add complexity in terms of <strong>deployments</strong> and <strong>operations</strong>.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="http://lethain.com/introduction-to-architecting-systems-for-scale" target="_blank" rel="noopener">Intro to architecting systems for scale</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="http://www.puncsky.com/blog/2016-02-13-crack-the-system-design-interview" target="_blank" rel="noopener">Crack the system design interview</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Service-oriented_architecture" target="_blank" rel="noopener">Service-oriented architecture</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="http://www.slideshare.net/sauravhaloi/introduction-to-apache-zookeeper" target="_blank" rel="noopener">Introduction to Zookeeper</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://cloudncode.wordpress.com/2016/07/22/msa-getting-started/" target="_blank" rel="noopener">Here's what you need to know about building microservices</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 15 — Database
+    // ================================================================
+    'database': {
+        part: 'Part D',
+        title: 'Database',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 15 — Data Layer</div>
+                <h1>Database</h1>
+                <p class="chapter-subtitle">A comprehensive guide to relational and non-relational databases, replication strategies, sharding, denormalization, SQL tuning, and choosing between SQL and NoSQL.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> SQL vs NoSQL Decision Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Choose Database"] --> B{"Structured with relationships?"}
+    B -->|Yes| C{"Need ACID transactions?"}
+    C -->|Yes| D["Relational DB / SQL"]
+    C -->|No| E["Consider NoSQL"]
+    B -->|No| F{"Data pattern?"}
+    F -->|Key-Value| G["Redis / DynamoDB"]
+    F -->|Document| H["MongoDB / CouchDB"]
+    F -->|Wide Column| I["Cassandra / HBase"]
+    F -->|Graph| J["Neo4j"]
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/Xkm5CXz.png" class="zoomable" alt="Scaling up to your first 10 million users" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://www.slideshare.net/AmazonWebServices/from-0-to-10s-of-millions-of-users-startup-lessons-on-aws" target="_blank" rel="noopener">Source: Scaling up to your first 10 million users</a></em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Overview
+                    </div>
+                    <div class="shadcn-alert-description">Databases are at the heart of most systems. Choosing the right database technology, replication strategy, and scaling mechanism is critical for building reliable, performant applications.</div>
+                </div>
+
+                <!-- =========================== -->
+                <!-- RDBMS vs NoSQL Tabs          -->
+                <!-- =========================== -->
+                <h2>Database Types</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="db-rdbms-tab" data-tabgroup="db-types">Relational (RDBMS)</button>
+                        <button class="shadcn-tab-trigger" data-tab="db-nosql-tab" data-tabgroup="db-types">NoSQL</button>
+                    </div>
+
+                    <!-- RDBMS Tab -->
+                    <div class="shadcn-tab-content active" id="db-rdbms-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Relational Database Management System (RDBMS) <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">SQL</span></div>
+                                <p class="shadcn-card-description">A collection of data items organized in tables with ACID guarantees.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <h4>ACID Properties</h4>
+                                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0;">
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">A</span> Atomicity</div>
+                                        </div>
+                                        <div class="shadcn-card-content"><p>Each transaction is all or nothing.</p></div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">C</span> Consistency</div>
+                                        </div>
+                                        <div class="shadcn-card-content"><p>Any transaction will bring the database from one valid state to another.</p></div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">I</span> Isolation</div>
+                                        </div>
+                                        <div class="shadcn-card-content"><p>Executing transactions concurrently has the same results as if they were executed serially.</p></div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">D</span> Durability</div>
+                                        </div>
+                                        <div class="shadcn-card-content"><p>Once a transaction has been committed, it will remain so.</p></div>
+                                    </div>
+                                </div>
+
+                                <p>There are many techniques to scale a relational database: <strong>master-slave replication</strong>, <strong>master-master replication</strong>, <strong>federation</strong>, <strong>sharding</strong>, <strong>denormalization</strong>, and <strong>SQL tuning</strong>.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- NoSQL Tab -->
+                    <div class="shadcn-tab-content" id="db-nosql-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">NoSQL <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Non-Relational</span></div>
+                                <p class="shadcn-card-description">A collection of data items represented in a key-value store, document store, wide column store, or graph database. Data is denormalized and joins are generally done in application code.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <h4>BASE Properties</h4>
+                                <div class="callout callout-info">
+                                    <div class="callout-title">💡 BASE vs ACID</div>
+                                    <p>Most NoSQL stores lack true ACID transactions and favor <strong>eventual consistency</strong>.</p>
+                                </div>
+                                <ul style="padding-left:18px">
+                                    <li><strong>Basically available</strong> — the system guarantees availability.</li>
+                                    <li><strong>Soft state</strong> — the state of the system may change over time, even without input.</li>
+                                    <li><strong>Eventual consistency</strong> — the system will become consistent over a period of time, given no new input.</li>
+                                </ul>
+
+                                <hr style="margin:1.5rem 0;border-color:var(--border);">
+
+                                <h4>NoSQL Store Types</h4>
+
+                                <div class="shadcn-tabs">
+                                    <div class="shadcn-tabs-list">
+                                        <button class="shadcn-tab-trigger active" data-tab="nosql-kv-tab" data-tabgroup="nosql-types">Key-Value</button>
+                                        <button class="shadcn-tab-trigger" data-tab="nosql-doc-tab" data-tabgroup="nosql-types">Document</button>
+                                        <button class="shadcn-tab-trigger" data-tab="nosql-wide-tab" data-tabgroup="nosql-types">Wide Column</button>
+                                        <button class="shadcn-tab-trigger" data-tab="nosql-graph-tab" data-tabgroup="nosql-types">Graph</button>
+                                    </div>
+
+                                    <div class="shadcn-tab-content active" id="nosql-kv-tab">
+                                        <div class="shadcn-card" style="border:1px solid var(--border);">
+                                            <div class="shadcn-card-header">
+                                                <div class="shadcn-card-title">Key-Value Store <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">O(1)</span></div>
+                                            </div>
+                                            <div class="shadcn-card-content">
+                                                <p>Abstraction: hash table. Allows for <strong>O(1) reads and writes</strong> and is often backed by memory or SSD. Data stores can maintain keys in lexicographic order, allowing efficient retrieval of key ranges. Key-value stores provide high performance and are often used for simple data models or rapidly-changing data, such as an in-memory cache layer.</p>
+                                                <p><strong>Examples:</strong> Redis, Memcached.</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="shadcn-tab-content" id="nosql-doc-tab">
+                                        <div class="shadcn-card" style="border:1px solid var(--border);">
+                                            <div class="shadcn-card-header">
+                                                <div class="shadcn-card-title">Document Store <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Flexible</span></div>
+                                            </div>
+                                            <div class="shadcn-card-content">
+                                                <p>Abstraction: key-value store with documents stored as values. Documents are organized by collections, tags, metadata, or directories. Although documents can be organized or grouped together, documents may have fields that are completely different from each other.</p>
+                                                <p>Some document stores like <strong>MongoDB</strong> and <strong>CouchDB</strong> also provide a SQL-like language to perform complex queries. <strong>DynamoDB</strong> supports both key-values and documents.</p>
+                                                <p>Documents can be stored in XML, JSON, binary, etc.</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="shadcn-tab-content" id="nosql-wide-tab">
+                                        <div class="shadcn-card" style="border:1px solid var(--border);">
+                                            <div class="shadcn-card-header">
+                                                <div class="shadcn-card-title">Wide Column Store <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Columnar</span></div>
+                                            </div>
+                                            <div class="shadcn-card-content">
+                                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                                    <img src="../images/n16iOGk.png" class="zoomable" alt="Wide column store" style="max-width:520px;width:100%;border-radius:8px;">
+                                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>Source: SQL &amp; NoSQL, a brief history</em></p>
+                                                </div>
+                                                <p>Abstraction: nested map <code>ColumnFamily&lt;RowKey, Columns&lt;ColKey, Value, Timestamp&gt;&gt;</code>. Each column family can be thought of as a set of rows that share the same set of columns. A basic unit of data is a column (name/value pair). Columns can be grouped in column families. Super column families further group column families.</p>
+                                                <p>Wide column stores offer high availability and high scalability, often used for very large data sets.</p>
+                                                <p><strong>Examples:</strong> Bigtable, HBase, Cassandra.</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="shadcn-tab-content" id="nosql-graph-tab">
+                                        <div class="shadcn-card" style="border:1px solid var(--border);">
+                                            <div class="shadcn-card-header">
+                                                <div class="shadcn-card-title">Graph Database <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Relationships</span></div>
+                                            </div>
+                                            <div class="shadcn-card-content">
+                                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                                    <img src="../images/fNcl65g.png" class="zoomable" alt="Graph database" style="max-width:520px;width:100%;border-radius:8px;">
+                                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>Source: Graph database</em></p>
+                                                </div>
+                                                <p>Abstraction: graph. In a graph database, each node is a record and each arc is a relationship between two nodes. Graph databases are optimized to represent complex relationships with many foreign keys or many-to-many relationships.</p>
+                                                <p>Graphs databases offer high performance for data models with complex relationships, such as social networks.</p>
+                                                <p><strong>Examples:</strong> Neo4j, FlockDB.</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- =========================== -->
+                <!-- Replication Strategies       -->
+                <!-- =========================== -->
+                <h2>Replication</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="db-masterslave-tab" data-tabgroup="db-replication">Master-Slave</button>
+                        <button class="shadcn-tab-trigger" data-tab="db-mastermaster-tab" data-tabgroup="db-replication">Master-Master</button>
+                    </div>
+
+                    <div class="shadcn-tab-content active" id="db-masterslave-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Master-Slave Replication <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Read Scaling</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                    <img src="../images/C9ioGtn.png" class="zoomable" alt="Master-slave replication" style="max-width:520px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="https://github.com/donnemartin/system-design-primer" target="_blank" rel="noopener">Source: Scalability, availability, stability, patterns</a></em></p>
+                                </div>
+                                <p>The master serves reads and writes, replicating writes to one or more slaves, which serve only reads. Slaves can also replicate to additional slaves in a tree-like fashion. If the master goes offline, the system can continue to operate in <strong>read-only mode</strong> until a slave is promoted to a master or a new master is provisioned.</p>
+                                <div class="callout callout-warning">
+                                    <div class="callout-title">⚠️ Disadvantage</div>
+                                    <p>Additional logic is needed to promote a slave to a master.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="db-mastermaster-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Master-Master Replication <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Write Scaling</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                    <img src="../images/krAHLGg.png" class="zoomable" alt="Master-master replication" style="max-width:520px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="https://github.com/donnemartin/system-design-primer" target="_blank" rel="noopener">Source: Scalability, availability, stability, patterns</a></em></p>
+                                </div>
+                                <p>Both masters serve reads and writes and coordinate with each other on writes. If either master goes down, the other master can continue to operate with both reads and writes.</p>
+                                <div class="callout callout-warning">
+                                    <div class="callout-title">⚠️ Disadvantages</div>
+                                    <ul style="padding-left:18px">
+                                        <li>You'll need a <strong>load balancer</strong> or you'll need to make changes to your application logic to determine where to write.</li>
+                                        <li>Most master-master systems are either <strong>loosely consistent</strong> (violating ACID) or have increased <strong>write latency</strong> due to synchronization.</li>
+                                        <li><strong>Conflict resolution</strong> comes more into play as more write nodes are added and as latency increases.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-info" style="margin-top:1rem;">
+                    <div class="callout-title">💡 Replication Disadvantages (General)</div>
+                    <ul style="padding-left:18px">
+                        <li>There is potential for <strong>loss of data</strong> if the master fails before newly written data can be replicated.</li>
+                        <li>Writes are <strong>replayed</strong> to the read replicas — if there are a lot of writes, the read replicas can get bogged down and can't do as many reads.</li>
+                        <li>The more read slaves, the more you have to replicate, which leads to greater <strong>replication lag</strong>.</li>
+                        <li>Replication adds more <strong>hardware</strong> and additional <strong>complexity</strong>.</li>
+                    </ul>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- =========================== -->
+                <!-- Scaling Techniques           -->
+                <!-- =========================== -->
+                <h2>Scaling Techniques</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="db-federation-tab" data-tabgroup="db-scaling">Federation</button>
+                        <button class="shadcn-tab-trigger" data-tab="db-sharding-tab" data-tabgroup="db-scaling">Sharding</button>
+                        <button class="shadcn-tab-trigger" data-tab="db-denorm-tab" data-tabgroup="db-scaling">Denormalization</button>
+                        <button class="shadcn-tab-trigger" data-tab="db-tuning-tab" data-tabgroup="db-scaling">SQL Tuning</button>
+                    </div>
+
+                    <!-- Federation -->
+                    <div class="shadcn-tab-content active" id="db-federation-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Federation (Functional Partitioning) <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Split by Function</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                    <img src="../images/U3qV33e.png" class="zoomable" alt="Federation" style="max-width:520px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="https://github.com/donnemartin/system-design-primer" target="_blank" rel="noopener">Source: Scaling up to your first 10 million users</a></em></p>
+                                </div>
+                                <p>Federation (or functional partitioning) splits up databases <strong>by function</strong>. For example, instead of a single, monolithic database, you could have three databases: <strong>forums</strong>, <strong>users</strong>, and <strong>products</strong>, resulting in less read and write traffic to each database and therefore less replication lag.</p>
+                                <p>Smaller databases result in more data that can fit in memory, which in turn results in more <strong>cache hits</strong> due to the improved cache locality. With no single central master serializing writes, you can <strong>write in parallel</strong>, increasing throughput.</p>
+
+                                <div class="callout callout-warning">
+                                    <div class="callout-title">⚠️ Disadvantages</div>
+                                    <ul style="padding-left:18px">
+                                        <li>Federation is not effective if your schema requires huge functions or tables.</li>
+                                        <li>You'll need to update your application logic to determine which database to read and write.</li>
+                                        <li>Joining data from two databases is more <strong>complex</strong> with a server link.</li>
+                                        <li>Federation adds more <strong>hardware</strong> and additional complexity.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Sharding -->
+                    <div class="shadcn-tab-content" id="db-sharding-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Sharding <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Horizontal Partition</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                    <img src="../images/wU8x5Id.png" class="zoomable" alt="Sharding" style="max-width:520px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://www.slideshare.net/jboner/scalability-availability-stability-patterns/" target="_blank" rel="noopener">Source: Scalability, availability, stability, patterns</a></em></p>
+                                </div>
+                                <p>Sharding distributes data across different databases such that each database can only manage a subset of the data. Taking a users database as an example, as the number of users increases, more shards are added to the cluster.</p>
+                                <p>Similar to the advantages of federation, sharding results in less read and write traffic, less replication, and more cache hits. Index size also goes down, which generally improves performance with faster queries. If one shard goes down, the other shards are still operational. There is no single central master serializing writes, allowing you to write in parallel with increased throughput.</p>
+
+                                <div class="callout callout-warning">
+                                    <div class="callout-title">⚠️ Disadvantages</div>
+                                    <ul style="padding-left:18px">
+                                        <li>You'll need to update your application logic to work with shards, which could result in <strong>complex SQL queries</strong>.</li>
+                                        <li>Data distribution can become <strong>lopsided</strong> in a shard. For example, a set of power users on a shard could result in increased load to that shard compared to others.</li>
+                                        <li>Joining data from multiple shards is more <strong>complex</strong>.</li>
+                                        <li>Sharding adds more <strong>hardware</strong> and additional complexity.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Denormalization -->
+                    <div class="shadcn-tab-content" id="db-denorm-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Denormalization <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Read Optimized</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Denormalization attempts to improve read performance at the expense of some write performance. Redundant copies of the data are written in multiple tables to avoid expensive joins. Some RDBMS such as PostgreSQL and Oracle support <strong>materialized views</strong> which handle the work of storing redundant information and keeping redundant copies consistent.</p>
+                                <p>Once data becomes distributed with techniques such as federation and sharding, managing joins across data centers further increases complexity. Denormalization might circumvent the need for such complex joins.</p>
+
+                                <div class="callout callout-info">
+                                    <div class="callout-title">💡 When to Denormalize</div>
+                                    <p>In most systems, reads can heavily outnumber writes <strong>100:1</strong> or even <strong>1000:1</strong>. A read resulting in a complex database join can be very expensive, spending a significant amount of time on disk operations.</p>
+                                </div>
+
+                                <div class="callout callout-warning" style="margin-top:1rem;">
+                                    <div class="callout-title">⚠️ Disadvantages</div>
+                                    <ul style="padding-left:18px">
+                                        <li>Data is <strong>duplicated</strong>.</li>
+                                        <li>Constraints can help redundant copies of information stay in sync, which increases <strong>complexity</strong> of the database design.</li>
+                                        <li>A denormalized database under heavy write load might perform <strong>worse</strong> than its normalized counterpart.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- SQL Tuning -->
+                    <div class="shadcn-tab-content" id="db-tuning-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">SQL Tuning <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Optimization</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>SQL tuning is a broad topic and many books have been written as reference. It's important to <strong>benchmark</strong> and <strong>profile</strong> to simulate and uncover bottlenecks.</p>
+
+                                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0;">
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Benchmark</span></div>
+                                        </div>
+                                        <div class="shadcn-card-content">
+                                            <p>Simulate high-load situations with tools such as <strong>ab</strong> (ApacheBench).</p>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Profile</span></div>
+                                        </div>
+                                        <div class="shadcn-card-content">
+                                            <p>Enable tools such as the <strong>slow query log</strong> to help track performance issues.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <h4>Optimization Tips</h4>
+                                <div class="table-wrapper">
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <th>Technique</th>
+                                                <th>Details</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td><strong>Tighten up the schema</strong></td>
+                                                <td>Use <code>CHAR</code> instead of <code>VARCHAR</code> for fixed-length fields. <code>TEXT</code> for large blocks of text. <code>INT</code> for numbers up to 2^32. <code>DECIMAL</code> for currency to avoid floating point errors. Avoid storing large <code>BLOBS</code> — store the location instead. <code>VARCHAR(255)</code> is the max number of chars that can be counted in an 8-bit number. Set the <code>NOT NULL</code> constraint where applicable.</td>
+                                            </tr>
+                                            <tr>
+                                                <td><strong>Use good indices</strong></td>
+                                                <td>Columns that you are querying (<code>SELECT</code>, <code>GROUP BY</code>, <code>ORDER BY</code>, <code>JOIN</code>) could be faster with indices. Indices are usually represented as self-balancing <strong>B-tree</strong> that keeps data sorted and allows searches, sequential access, insertions, and deletions in <strong>logarithmic time</strong>.</td>
+                                            </tr>
+                                            <tr>
+                                                <td><strong>Avoid expensive joins</strong></td>
+                                                <td>Denormalize where performance demands it.</td>
+                                            </tr>
+                                            <tr>
+                                                <td><strong>Partition tables</strong></td>
+                                                <td>Break up a table by putting hot spots in a separate table to help keep it in memory.</td>
+                                            </tr>
+                                            <tr>
+                                                <td><strong>Tune the query cache</strong></td>
+                                                <td>In some cases, the query cache could lead to performance issues.</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- =========================== -->
+                <!-- SQL or NoSQL                 -->
+                <!-- =========================== -->
+                <h2>SQL or NoSQL</h2>
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/wXGqG5f.png" class="zoomable" alt="SQL or NoSQL" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="https://github.com/donnemartin/system-design-primer" target="_blank" rel="noopener">Source: Transitioning from RDBMS to NoSQL</a></em></p>
+                </div>
+
+                <div class="shadcn-comparison-grid">
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue" style="margin-right:8px">SQL</span> Reasons to Use</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>Structured data</li>
+                                <li>Strict schema</li>
+                                <li>Relational data</li>
+                                <li>Need for complex joins</li>
+                                <li>Transactions</li>
+                                <li>Clear patterns for scaling</li>
+                                <li>More established: developers, community, code, tools, etc.</li>
+                                <li>Lookups by index are very fast</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green" style="margin-right:8px">NoSQL</span> Reasons to Use</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>Semi-structured data</li>
+                                <li>Dynamic or flexible schema</li>
+                                <li>Non-relational data</li>
+                                <li>No need for complex joins</li>
+                                <li>Store many TB (or PB) of data</li>
+                                <li>Very data intensive workload</li>
+                                <li>Very high throughput for IOPS</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="callout callout-tip" style="margin-top:1rem;">
+                    <div class="callout-title">💡 Sample NoSQL Data Well-Suited for NoSQL</div>
+                    <ul style="padding-left:18px">
+                        <li>Rapid ingest of clickstream and log data</li>
+                        <li>Leaderboard or scoring data</li>
+                        <li>Temporary data, such as a shopping cart</li>
+                        <li>Frequently accessed ("hot") tables</li>
+                        <li>Metadata/lookup tables</li>
+                    </ul>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="http://www.slideshare.net/AmazonWebServices/from-0-to-10s-of-millions-of-users-startup-lessons-on-aws" target="_blank" rel="noopener">Scaling up to your first 10 million users</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Master%E2%80%93slave_(technology)" target="_blank" rel="noopener">Master-slave replication</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Multi-master_replication" target="_blank" rel="noopener">Multi-master replication</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="http://www.slideshare.net/jboner/scalability-availability-stability-patterns/" target="_blank" rel="noopener">Scalability, availability, stability, patterns</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Federation_(information_technology)" target="_blank" rel="noopener">Federation</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Shard_(database_architecture)" target="_blank" rel="noopener">Sharding</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Denormalization" target="_blank" rel="noopener">Denormalization</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://www.percona.com/blog/2009/02/26/sql-vs-nosql/" target="_blank" rel="noopener">SQL vs NoSQL</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener">NoSQL</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/NoSQL#Types_and_examples_of_NoSQL_databases" target="_blank" rel="noopener">NoSQL patterns</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 16 — Cache
+    // ================================================================
+    'cache': {
+        part: 'Part D',
+        title: 'Cache',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 16 — Data Layer</div>
+                <h1>Cache</h1>
+                <p class="chapter-subtitle">Caching improves page load times and reduces the load on your servers and databases — but cache invalidation is one of the hardest problems in computer science.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">🔄</span> Caching Strategy Flow
+                        <span class="diagram-type-badge">Sequence</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+sequenceDiagram
+    participant App
+    participant Cache
+    participant DB
+    Note over App,DB: Cache-Aside Pattern
+    App->>Cache: Read key
+    alt Cache Hit
+        Cache-->>App: Return value
+    else Cache Miss
+        App->>DB: Query database
+        DB-->>App: Return value
+        App->>Cache: Store in cache
+    end
+    Note over App,DB: Write-Through Pattern
+    App->>Cache: Write key
+    Cache->>DB: Write to database
+    DB-->>Cache: Confirm
+    Cache-->>App: Confirm
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/Q6z24La.png" class="zoomable" alt="Scalable system design patterns" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://horicky.blogspot.com/2010/10/scalable-system-design-patterns.html" target="_blank" rel="noopener">Source: Scalable system design patterns</a></em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Concept
+                    </div>
+                    <div class="shadcn-alert-description">Caching improves page load times and can reduce the load on your servers and databases. In this model, the dispatcher will first look up if the request has been made before and try to find the previous result to return, in order to save the actual execution.</div>
+                </div>
+
+                <h2>Where to Cache</h2>
+
+                <p>Caches can be located at multiple levels in your architecture in order to serve previously computed results.</p>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Client</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Caching can be located on the client side (OS or browser), server side, or in a distinct cache layer.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">CDN</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>CDNs are considered a type of cache.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Web Server</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Reverse proxies and caches such as <strong>Varnish</strong> can serve static and dynamic content directly. Web servers can also cache requests, returning responses without having to contact application servers.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Database</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Your database usually includes some level of caching in a default configuration, optimized for a generic use case.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Application Caching <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">In-Memory</span></div>
+                        <p class="shadcn-card-description">In-memory caches such as Memcached and Redis are key-value stores between your application and your data storage.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p>Since the data is held in RAM, it is much faster than typical databases where data is stored on disk. RAM is more limited than disk, so <strong>cache invalidation</strong> algorithms such as <strong>least recently used (LRU)</strong> can help invalidate "cold" entries and keep "hot" data in memory.</p>
+                        <div class="callout callout-tip">
+                            <div class="callout-title">💡 Redis Features</div>
+                            <p>Redis has the following additional features: <strong>persistence</strong> option, built-in data structures such as <strong>sorted sets</strong> and <strong>lists</strong>.</p>
+                        </div>
+                        <h4>What to Cache</h4>
+                        <p>There are multiple levels of caching available depending on granularity:</p>
+                        <ul style="padding-left:18px">
+                            <li><strong>Row level</strong></li>
+                            <li><strong>Query-level caching</strong></li>
+                            <li><strong>Fully-formed serializable objects</strong></li>
+                            <li><strong>Fully-rendered HTML</strong></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Caching Strategies</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="cache-query-tab" data-tabgroup="cache-level">DB Query Level</button>
+                        <button class="shadcn-tab-trigger" data-tab="cache-object-tab" data-tabgroup="cache-level">Object Level</button>
+                    </div>
+
+                    <div class="shadcn-tab-content active" id="cache-query-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Caching at the Database Query Level</div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Whenever you query the database, hash the query as a key and store the result to the cache. This approach suffers from expiration issues:</p>
+                                <ul style="padding-left:18px">
+                                    <li>Hard to delete a cached result with <strong>complex queries</strong>.</li>
+                                    <li>If one piece of data changes (e.g. a table cell), you need to delete all cached queries that might include the changed cell — <strong>cascading invalidation</strong>.</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="cache-object-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Caching at the Object Level <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Recommended</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>See your data as an object, similar to what you do with your application code. Have your application assemble the dataset from the database into a class instance or a data structure. Remove the object from cache if its underlying data has changed. Allows for asynchronous processing: workers assemble objects by consuming the latest cached object.</p>
+                                <h4>Suggestions of what to cache:</h4>
+                                <ul style="padding-left:18px">
+                                    <li>User sessions</li>
+                                    <li>Fully rendered web pages</li>
+                                    <li>Activity streams</li>
+                                    <li>User graph data</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Cache Update Strategies</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="cache-aside-tab" data-tabgroup="cache-update">Cache-Aside</button>
+                        <button class="shadcn-tab-trigger" data-tab="cache-wt-tab" data-tabgroup="cache-update">Write-Through</button>
+                        <button class="shadcn-tab-trigger" data-tab="cache-wb-tab" data-tabgroup="cache-update">Write-Behind</button>
+                        <button class="shadcn-tab-trigger" data-tab="cache-ra-tab" data-tabgroup="cache-update">Refresh-Ahead</button>
+                    </div>
+
+                    <!-- Cache-Aside -->
+                    <div class="shadcn-tab-content active" id="cache-aside-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Cache-Aside (Lazy Loading) <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">On-Demand</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                    <img src="../images/ONjORqk.png" class="zoomable" alt="Cache-aside" style="max-width:520px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://www.slideshare.net/taborlin/from-cache-to-in-memory-data-grid-introduction-to-hazelcast" target="_blank" rel="noopener">Source: From cache to in-memory data grid</a></em></p>
+                                </div>
+                                <p>The application is responsible for reading and writing from storage. The cache does not interact with storage directly. The application does the following:</p>
+                                <ol style="padding-left:18px">
+                                    <li>Look for entry in cache, resulting in a cache miss</li>
+                                    <li>Load entry from the database</li>
+                                    <li>Add entry to cache</li>
+                                    <li>Return entry</li>
+                                </ol>
+                                <div class="callout callout-warning">
+                                    <div class="callout-title">⚠️ Disadvantages</div>
+                                    <ul style="padding-left:18px">
+                                        <li>Each cache miss results in <strong>three trips</strong> — which can cause a noticeable delay.</li>
+                                        <li>Data can become <strong>stale</strong> if it is updated in the database. This issue is mitigated by setting a time-to-live (TTL) which forces an update of the cache entry, or by using write-through.</li>
+                                        <li>When a node fails, it is replaced by a new, empty node, increasing latency.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Write-Through -->
+                    <div class="shadcn-tab-content" id="cache-wt-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Write-Through <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Consistent</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                    <img src="../images/0vBc0hN.png" class="zoomable" alt="Write-through cache" style="max-width:520px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://www.slideshare.net/jaborlin/scalable-cache-design" target="_blank" rel="noopener">Source: Scalability, availability, stability, patterns</a></em></p>
+                                </div>
+                                <p>The application uses the cache as the main data store, reading and writing data to it, while the cache is responsible for reading and writing to the database.</p>
+                                <ul style="padding-left:18px">
+                                    <li>Application adds/updates entry in cache</li>
+                                    <li>Cache synchronously writes entry to data store</li>
+                                    <li>Return</li>
+                                </ul>
+                                <p>Write-through is a slow overall operation due to the write operation, but subsequent reads of just written data are fast. Users are generally more tolerant of latency when updating data than reading data. Data in the cache is <strong>not stale</strong>.</p>
+                                <div class="callout callout-warning">
+                                    <div class="callout-title">⚠️ Disadvantages</div>
+                                    <ul style="padding-left:18px">
+                                        <li>When a new node is created due to failure or scaling, the new node will not cache entries until the entry is updated in the database. Cache-aside in conjunction with write through can mitigate this issue.</li>
+                                        <li>Most data written might <strong>never be read</strong>, which can be minimized with a TTL.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Write-Behind -->
+                    <div class="shadcn-tab-content" id="cache-wb-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Write-Behind (Write-Back) <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Async</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                    <img src="../images/rgSrvjG.png" class="zoomable" alt="Write-behind cache" style="max-width:520px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://www.slideshare.net/jaborlin/scalable-cache-design" target="_blank" rel="noopener">Source: Scalability, availability, stability, patterns</a></em></p>
+                                </div>
+                                <p>In write-behind, the application does the following:</p>
+                                <ol style="padding-left:18px">
+                                    <li>Add/update entry in cache</li>
+                                    <li>Asynchronously write entry to the data store, improving write performance</li>
+                                </ol>
+                                <div class="callout callout-warning">
+                                    <div class="callout-title">⚠️ Disadvantages</div>
+                                    <ul style="padding-left:18px">
+                                        <li>There could be <strong>data loss</strong> if the cache goes down prior to its contents hitting the data store.</li>
+                                        <li>It is more complex to implement write-behind than it is to implement cache-aside or write-through.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Refresh-Ahead -->
+                    <div class="shadcn-tab-content" id="cache-ra-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Refresh-Ahead <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Predictive</span></div>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:1rem 0;">
+                                    <img src="../images/kxtjqgE.png" class="zoomable" alt="Refresh-ahead cache" style="max-width:520px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://www.slideshare.net/taborlin/from-cache-to-in-memory-data-grid-introduction-to-hazelcast" target="_blank" rel="noopener">Source: From cache to in-memory data grid</a></em></p>
+                                </div>
+                                <p>You can configure the cache to automatically refresh any recently accessed cache entry prior to its expiration. Refresh-ahead can result in reduced latency vs read-through if the cache can accurately predict which items are likely to be needed in the future.</p>
+                                <div class="callout callout-warning">
+                                    <div class="callout-title">⚠️ Disadvantages</div>
+                                    <p>Not accurately predicting which items are likely to be needed in the future can result in <strong>reduced performance</strong> than without refresh-ahead.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Disadvantages</h2>
+
+                <div class="shadcn-alert shadcn-alert-destructive">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        General Cache Disadvantages
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>Need to maintain consistency between caches and the source of truth such as the database through <strong>cache invalidation</strong>.</li>
+                            <li>Cache invalidation is a difficult problem — there is additional complexity associated with when to update the cache.</li>
+                            <li>Need to make application changes such as adding <strong>Redis</strong> or <strong>memcached</strong>.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="http://horicky.blogspot.com/2010/10/scalable-system-design-patterns.html" target="_blank" rel="noopener">Scalable system design patterns</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="http://lethain.com/introduction-to-architecting-systems-for-scale" target="_blank" rel="noopener">Introduction to architecting systems for scale</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Cache_(computing)" target="_blank" rel="noopener">Wikipedia — Cache</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="http://www.slideshare.net/taborlin/from-cache-to-in-memory-data-grid-introduction-to-hazelcast" target="_blank" rel="noopener">From cache to in-memory data grid</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 17 — Asynchronism
+    // ================================================================
+    'asynchronism': {
+        part: 'Part D',
+        title: 'Asynchronism',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 17 — Data Layer</div>
+                <h1>Asynchronism</h1>
+                <p class="chapter-subtitle">Asynchronous workflows help reduce request times for expensive operations that would otherwise be performed in-line — improving responsiveness and enabling scale.</p>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">🔄</span> Async Message Queue Flow
+                        <span class="diagram-type-badge">Sequence</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+sequenceDiagram
+    participant Client
+    participant App
+    participant Queue as Message Queue
+    participant Worker
+    Client->>App: Submit request
+    App->>Queue: Enqueue task
+    App-->>Client: Accepted (202)
+    Queue->>Worker: Dequeue task
+    Worker->>Worker: Process task
+    Worker-->>Queue: Acknowledge
+    Note over Client,Worker: Client polls or receives callback
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/54GYsSx.png" class="zoomable" alt="Intro to architecting systems for scale" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="http://lethain.com/introduction-to-architecting-systems-for-scale" target="_blank" rel="noopener">Source: Intro to architecting systems for scale</a></em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Concept
+                    </div>
+                    <div class="shadcn-alert-description">Asynchronous workflows help reduce request times for expensive operations that would otherwise be performed in-line. They can also help by doing time-consuming work in advance, such as periodic aggregation of data.</div>
+                </div>
+
+                <h2>Async Patterns</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="async-mq-tab" data-tabgroup="async-patterns">Message Queues</button>
+                        <button class="shadcn-tab-trigger" data-tab="async-tq-tab" data-tabgroup="async-patterns">Task Queues</button>
+                        <button class="shadcn-tab-trigger" data-tab="async-bp-tab" data-tabgroup="async-patterns">Back Pressure</button>
+                    </div>
+
+                    <!-- Message Queues -->
+                    <div class="shadcn-tab-content active" id="async-mq-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Message Queues <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Decoupling</span></div>
+                                <p class="shadcn-card-description">Receive, hold, and deliver messages. The user is not blocked and the job is processed in the background.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Message queues receive, hold, and deliver messages. If an operation is too slow to perform inline, you can use a message queue with the following workflow:</p>
+                                <ol style="padding-left:18px">
+                                    <li>An application publishes a job to the queue, then notifies the user of job status</li>
+                                    <li>A worker picks up the job from the queue, processes it, then signals the job is complete</li>
+                                </ol>
+                                <p>The user is <strong>not blocked</strong> and the job is processed in the background. During this time, the client might optionally do a small amount of processing to make it seem like the task has completed.</p>
+
+                                <h4>Popular Implementations</h4>
+                                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem;">
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Redis</span></div>
+                                        </div>
+                                        <div class="shadcn-card-content">
+                                            <p>Useful as a simple message broker but messages can be lost.</p>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">RabbitMQ</span></div>
+                                        </div>
+                                        <div class="shadcn-card-content">
+                                            <p>Popular, mature, supports AMQP protocol. Requires you to adapt to the "AMQP" protocol and manage your own nodes.</p>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-header">
+                                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Amazon SQS</span></div>
+                                        </div>
+                                        <div class="shadcn-card-content">
+                                            <p>Hosted — but can have high latency and has the possibility of messages being delivered twice.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Task Queues -->
+                    <div class="shadcn-tab-content" id="async-tq-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Task Queues <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Compute</span></div>
+                                <p class="shadcn-card-description">Receive tasks and related data, run them, then deliver their results.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>Tasks queues receive tasks and their related data, runs them, then delivers their results. They can support scheduling and can be used to run computationally-intensive jobs in the background.</p>
+                                <div class="callout callout-tip">
+                                    <div class="callout-title">💡 Python — Celery</div>
+                                    <p><strong>Celery</strong> has support for scheduling and primarily has python support.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Back Pressure -->
+                    <div class="shadcn-tab-content" id="async-bp-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">Back Pressure <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Flow Control</span></div>
+                                <p class="shadcn-card-description">Limit queue sizes to maintain high throughput rates and good response times for jobs already in the queue.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <p>If queues start to grow significantly, the queue size can become larger than memory, resulting in <strong>cache misses</strong>, <strong>disk reads</strong>, and even <strong>slower performance</strong>. Back pressure can help by limiting the queue size, thereby maintaining a high throughput rate and good response times for jobs already in the queue.</p>
+                                <p>Once the queue fills up, clients get a server busy or <strong>HTTP 503</strong> status code to try again later. Clients can retry the request at a later time, perhaps with <strong>exponential backoff</strong>.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Disadvantages</h2>
+
+                <div class="shadcn-alert shadcn-alert-destructive">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        Disadvantages of Asynchronism
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>Use cases such as <strong>inexpensive calculations</strong> and <strong>real-time workflows</strong> might be better suited for synchronous operations, as introducing queues can add delays and complexity.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="http://lethain.com/introduction-to-architecting-systems-for-scale" target="_blank" rel="noopener">Introduction to architecting systems for scale</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://www.quora.com/What-is-the-difference-between-a-message-queue-and-a-task-queue-Why-would-a-task-queue-require-a-message-broker-like-RabbitMQ-Redis-Celery-or-IronMQ-to-function" target="_blank" rel="noopener">What is the difference between a message queue and a task queue?</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="http://mechanical-sympathy.blogspot.com/2012/05/apply-back-pressure-when-overloaded.html" target="_blank" rel="noopener">Apply back pressure when overloaded</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Little%27s_law" target="_blank" rel="noopener">Little's law</a></li>
+                </ul>
+            </div>
+        `
+    }
+
+};
diff --git a/website/js/chapters/chapters-e.js b/website/js/chapters/chapters-e.js
new file mode 100644
index 00000000000..40ec9f20218
--- /dev/null
+++ b/website/js/chapters/chapters-e.js
@@ -0,0 +1,660 @@
+/**
+ * Part E: Communication — Chapters 18–19
+ * Communication, Security
+ *
+ * Registered into global CHAPTERS_E object.
+ */
+
+const CHAPTERS_E = {
+
+    // ================================================================
+    // Chapter 18 — Communication
+    // ================================================================
+    'communication': {
+        part: 'Part E',
+        title: 'Communication',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 18 — Communication</div>
+                <h1>Communication</h1>
+                <p class="chapter-subtitle">How systems talk to each other — from low-level transport protocols to high-level architectural styles like REST and RPC.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/5KeocQs.jpg" class="zoomable" alt="OSI 7 layer model" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>OSI 7 Layer Model</em></p>
+                </div>
+
+                <!-- ────────── HTTP ────────── -->
+
+                <h2>Hypertext Transfer Protocol (HTTP)</h2>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Application Layer Protocol
+                    </div>
+                    <div class="shadcn-alert-description">HTTP is a method for encoding and transporting data between a client and a server. It is a <strong>request/response protocol</strong>: clients issue requests and servers issue responses with relevant content and completion status info about the request.</div>
+                </div>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">How HTTP Works</div>
+                        <p class="shadcn-card-description">Self-contained request/response protocol relying on lower-level TCP and UDP.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p>HTTP is <strong>self-contained</strong>, allowing requests and responses to flow through many intermediate routers and servers that perform load balancing, caching, encryption, and compression.</p>
+                        <p>A basic HTTP request consists of a <strong>verb</strong> (method) and a <strong>resource</strong> (endpoint). HTTP is an application layer protocol relying on lower-level protocols such as <strong>TCP</strong> and <strong>UDP</strong>.</p>
+                    </div>
+                </div>
+
+                <h3>HTTP Verbs</h3>
+
+                <div class="table-wrapper" style="overflow-x:auto;margin:1.5rem 0;">
+                    <table style="width:100%;border-collapse:collapse;font-size:0.92rem;">
+                        <thead>
+                            <tr style="border-bottom:2px solid var(--border);text-align:left;">
+                                <th style="padding:10px 12px;">Verb</th>
+                                <th style="padding:10px 12px;">Description</th>
+                                <th style="padding:10px 12px;">Idempotent*</th>
+                                <th style="padding:10px 12px;">Safe</th>
+                                <th style="padding:10px 12px;">Cacheable</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr style="border-bottom:1px solid var(--border);">
+                                <td style="padding:10px 12px;"><span class="shadcn-badge shadcn-badge-green">GET</span></td>
+                                <td style="padding:10px 12px;">Reads a resource</td>
+                                <td style="padding:10px 12px;">Yes</td>
+                                <td style="padding:10px 12px;">Yes</td>
+                                <td style="padding:10px 12px;">Yes</td>
+                            </tr>
+                            <tr style="border-bottom:1px solid var(--border);">
+                                <td style="padding:10px 12px;"><span class="shadcn-badge shadcn-badge-blue">POST</span></td>
+                                <td style="padding:10px 12px;">Creates a resource or triggers a process</td>
+                                <td style="padding:10px 12px;">No</td>
+                                <td style="padding:10px 12px;">No</td>
+                                <td style="padding:10px 12px;">Yes if response contains freshness info</td>
+                            </tr>
+                            <tr style="border-bottom:1px solid var(--border);">
+                                <td style="padding:10px 12px;"><span class="shadcn-badge shadcn-badge-amber">PUT</span></td>
+                                <td style="padding:10px 12px;">Creates or replaces a resource</td>
+                                <td style="padding:10px 12px;">Yes</td>
+                                <td style="padding:10px 12px;">No</td>
+                                <td style="padding:10px 12px;">No</td>
+                            </tr>
+                            <tr style="border-bottom:1px solid var(--border);">
+                                <td style="padding:10px 12px;"><span class="shadcn-badge shadcn-badge-outline">PATCH</span></td>
+                                <td style="padding:10px 12px;">Partially updates a resource</td>
+                                <td style="padding:10px 12px;">No</td>
+                                <td style="padding:10px 12px;">No</td>
+                                <td style="padding:10px 12px;">Yes if response contains freshness info</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:10px 12px;"><span class="shadcn-badge shadcn-badge-destructive">DELETE</span></td>
+                                <td style="padding:10px 12px;">Deletes a resource</td>
+                                <td style="padding:10px 12px;">Yes</td>
+                                <td style="padding:10px 12px;">No</td>
+                                <td style="padding:10px 12px;">No</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <p style="font-size:0.82rem;color:var(--muted-foreground);margin-top:0.5rem;">* Can be called many times without different outcomes.</p>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- ────────── TCP vs UDP ────────── -->
+
+                <h2>Transport Protocols: TCP vs UDP</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="tcp-tab" data-tabgroup="transport">TCP — Transmission Control Protocol</button>
+                        <button class="shadcn-tab-trigger" data-tab="udp-tab" data-tabgroup="transport">UDP — User Datagram Protocol</button>
+                    </div>
+
+                    <!-- TCP -->
+                    <div class="shadcn-tab-content active" id="tcp-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">TCP — Transmission Control Protocol <span class="shadcn-badge shadcn-badge-green" style="margin-left:8px">Reliable</span></div>
+                                <p class="shadcn-card-description">Connection-oriented protocol over an IP network. Guarantees delivery, order, and integrity.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:0 0 1.5rem 0;">
+                                    <img src="../images/JdAsdvG.jpg" class="zoomable" alt="TCP connection handshake" style="max-width:560px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>TCP connection handshake</em></p>
+                                </div>
+
+                                <p>TCP is a <strong>connection-oriented</strong> protocol over an IP network. Connection is established and terminated using a <strong>handshake</strong>.</p>
+                                <p>All packets sent are <strong>guaranteed to reach the destination in the original order</strong> and without corruption through:</p>
+                                <ul style="padding-left:18px">
+                                    <li><strong>Sequence numbers</strong> and <strong>checksum fields</strong> for each packet</li>
+                                    <li><strong>Acknowledgement packets</strong> and automatic retransmission</li>
+                                </ul>
+                                <p>If the sender does not receive a correct response, it will <strong>resend the packets</strong>. If there are multiple timeouts, the connection is <strong>dropped</strong>.</p>
+                                <p>TCP also implements <strong>flow control</strong> and <strong>congestion control</strong>. These guarantees cause delays and generally result in <strong>less efficient transmission</strong> than UDP.</p>
+
+                                <div class="callout callout-warning" style="margin-top:1rem;">
+                                    <div class="callout-title">⚠️ Resource Usage</div>
+                                    <p>To ensure high throughput, web servers can keep a large number of TCP connections open, resulting in <strong>high memory usage</strong>. Connection pooling can help mitigate this, as well as switching to UDP where applicable.</p>
+                                </div>
+
+                                <h4 style="margin-top:1.2rem;">Use TCP When You Need:</h4>
+                                <ul style="padding-left:18px">
+                                    <li><strong>All of the data to arrive intact</strong></li>
+                                    <li>The best automatic estimation of <strong>network throughput</strong></li>
+                                </ul>
+
+                                <h4 style="margin-top:1rem;">Common Use Cases:</h4>
+                                <div class="concept-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;margin:0.75rem 0;">
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-content" style="padding:0.75rem;text-align:center;">
+                                            <strong>Web Servers</strong>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-content" style="padding:0.75rem;text-align:center;">
+                                            <strong>Database</strong>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-content" style="padding:0.75rem;text-align:center;">
+                                            <strong>SMTP / FTP / SSH</strong>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- UDP -->
+                    <div class="shadcn-tab-content" id="udp-tab">
+                        <div class="shadcn-card">
+                            <div class="shadcn-card-header">
+                                <div class="shadcn-card-title">UDP — User Datagram Protocol <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Fast</span></div>
+                                <p class="shadcn-card-description">Connectionless protocol. Datagrams may arrive out of order or not at all — but it's very fast.</p>
+                            </div>
+                            <div class="shadcn-card-content">
+                                <div class="img-container" style="text-align:center;margin:0 0 1.5rem 0;">
+                                    <img src="../images/yzDrJtA.jpg" class="zoomable" alt="UDP datagram" style="max-width:560px;width:100%;border-radius:8px;">
+                                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>UDP datagram structure</em></p>
+                                </div>
+
+                                <p>UDP is <strong>connectionless</strong>. Datagrams (analogous to packets) are guaranteed only at the datagram level. Datagrams might reach their destination <strong>out of order</strong> or <strong>not at all</strong>.</p>
+                                <p>UDP does not support congestion control. Without the guarantees that TCP support, UDP is generally <strong>more efficient</strong>.</p>
+                                <p>UDP can <strong>broadcast</strong>, sending datagrams to all devices on the subnet. This is useful with <strong>DHCP</strong> because the client has not yet received an IP address, thus preventing a way for TCP to stream without the IP address.</p>
+
+                                <div class="callout callout-info" style="margin-top:1rem;">
+                                    <div class="callout-title">💡 When to Use UDP</div>
+                                    <p>Use UDP when you need the <strong>lowest latency</strong>, when <strong>late data is worse than loss of data</strong>, or when you want to implement your <strong>own error correction</strong>.</p>
+                                </div>
+
+                                <h4 style="margin-top:1.2rem;">Use UDP When You Need:</h4>
+                                <ul style="padding-left:18px">
+                                    <li>The <strong>lowest latency</strong></li>
+                                    <li>Late data is <strong>worse than loss</strong> of data</li>
+                                    <li>You want to implement your <strong>own error correction</strong></li>
+                                </ul>
+
+                                <h4 style="margin-top:1rem;">Common Use Cases:</h4>
+                                <div class="concept-grid" style="display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin:0.75rem 0;">
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-content" style="padding:0.75rem;text-align:center;">
+                                            <strong>VoIP / Video Chat</strong>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-content" style="padding:0.75rem;text-align:center;">
+                                            <strong>Streaming Media</strong>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-content" style="padding:0.75rem;text-align:center;">
+                                            <strong>Realtime Multiplayer Games</strong>
+                                        </div>
+                                    </div>
+                                    <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                        <div class="shadcn-card-content" style="padding:0.75rem;text-align:center;">
+                                            <strong>DHCP / DNS (lookups)</strong>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <h3>TCP vs UDP — Side-by-Side</h3>
+
+                <div class="shadcn-comparison-grid">
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green" style="margin-right:8px">TCP</span> Reliable &amp; Ordered</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>Connection-oriented (handshake)</li>
+                                <li>Guaranteed delivery &amp; ordering</li>
+                                <li>Flow control &amp; congestion control</li>
+                                <li>Higher latency; higher overhead</li>
+                                <li>Best for: web, DB, email, file transfer</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue" style="margin-right:8px">UDP</span> Fast &amp; Lightweight</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <ul style="padding-left:18px">
+                                <li>Connectionless (no handshake)</li>
+                                <li>No delivery or ordering guarantees</li>
+                                <li>No congestion control</li>
+                                <li>Lower latency; lower overhead</li>
+                                <li>Best for: streaming, gaming, VoIP</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- ────────── RPC ────────── -->
+
+                <h2>Remote Procedure Call (RPC)</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">RPC Overview <span class="shadcn-badge shadcn-badge-amber" style="margin-left:8px">Behavior-Focused</span></div>
+                        <p class="shadcn-card-description">A client causes a procedure to execute on a different address space (remote server), coded as if it were a local procedure call.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <div class="img-container" style="text-align:center;margin:0 0 1.5rem 0;">
+                            <img src="../images/iF4Mkb5.png" class="zoomable" alt="RPC request/response flow" style="max-width:620px;width:100%;border-radius:8px;">
+                            <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>RPC request/response flow</em></p>
+                        </div>
+
+                        <p>In an RPC, a client causes a procedure to execute on a different address space, usually a <strong>remote server</strong>. The procedure is coded as if it were a local procedure call, <strong>abstracting away the details</strong> of how to communicate with the server from the client program.</p>
+                        <p>Remote calls are usually <strong>slower and less reliable</strong> than local calls, so it is helpful to distinguish them. Popular RPC frameworks include <strong>Protobuf</strong>, <strong>Thrift</strong>, and <strong>Avro</strong>.</p>
+
+                        <h4 style="margin-top:1.2rem;">RPC Call Flow</h4>
+                        <div class="shadcn-card" style="border:1px solid var(--border);margin:1rem 0;">
+                            <div class="shadcn-card-content" style="font-size:0.9rem;">
+                                <ol style="padding-left:18px;margin:0;">
+                                    <li><strong>Client program</strong> — calls the client stub procedure</li>
+                                    <li><strong>Client stub procedure</strong> — marshals (packs) the procedure ID and arguments into a request message</li>
+                                    <li><strong>Client communication module</strong> — OS sends the message from the client to the server</li>
+                                    <li><strong>Server communication module</strong> — OS passes the incoming packets to the server stub procedure</li>
+                                    <li><strong>Server stub procedure</strong> — unmarshalls the results, calls the server procedure matching the procedure ID</li>
+                                    <li><strong>Server procedure</strong> — executes and returns result to the server stub, which reverses the process back to the client</li>
+                                </ol>
+                            </div>
+                        </div>
+
+                        <p>RPC is focused on <strong>exposing behaviors</strong>. RPCs are often used for <strong>performance reasons</strong> with internal communications, as you can hand-craft native calls to better fit your use cases.</p>
+
+                        <div class="callout callout-info" style="margin-top:1rem;">
+                            <div class="callout-title">💡 Choose a Native Library (SDK) When:</div>
+                            <ul style="padding-left:18px;margin:0;">
+                                <li>You <strong>know your target platform</strong></li>
+                                <li>You want to <strong>control how your "logic" is accessed</strong></li>
+                                <li>You want to <strong>control how error control happens</strong> off your library</li>
+                                <li><strong>Performance</strong> and end user experience is your primary concern</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <h3>Disadvantages of RPC</h3>
+
+                <div class="shadcn-alert shadcn-alert-destructive">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        RPC Trade-Offs
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>RPC clients become <strong>tightly coupled</strong> to the service implementation</li>
+                            <li>A <strong>new API must be defined</strong> for every new operation or use case</li>
+                            <li>It can be <strong>difficult to debug</strong> RPC calls</li>
+                            <li>You might not be able to leverage <strong>existing technologies out of the box</strong> — for example, it might require additional effort to ensure RPC calls are properly cached on caching servers such as Squid</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- ────────── REST ────────── -->
+
+                <h2>Representational State Transfer (REST)</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">REST Overview <span class="shadcn-badge shadcn-badge-blue" style="margin-left:8px">Data-Focused</span></div>
+                        <p class="shadcn-card-description">An architectural style enforcing a client/server model where the client acts on a set of resources managed by the server.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p>REST is an architectural style enforcing a <strong>client/server model</strong> where the client acts on a set of resources managed by the server. The server provides a representation of resources and actions that can either manipulate or get a new representation of resources. All communication must be <strong>stateless</strong> and <strong>cacheable</strong>.</p>
+
+                        <h4 style="margin-top:1.2rem;">Four Qualities of a RESTful Interface</h4>
+                        <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0;">
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">1</span> Identify Resources</div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Identify resources via <strong>URI</strong> — use the same URI regardless of any operation.</p>
+                                </div>
+                            </div>
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">2</span> Change with Representations</div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Change with representations — use <strong>verbs</strong> (GET, POST, PUT, DELETE, etc.).</p>
+                                </div>
+                            </div>
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">3</span> Self-Descriptive Messages</div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p>Self-descriptive error messages — use <strong>status codes</strong>; don't reinvent the wheel.</p>
+                                </div>
+                            </div>
+                            <div class="concept-card shadcn-card" style="border:1px solid var(--border);">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">4</span> HATEOAS</div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <p><strong>Hypermedia as the Engine of Application State</strong> — the response should include links to related resources.</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <p>REST is focused on <strong>exposing data</strong>. It minimizes the coupling between client/server and is often used for <strong>public HTTP APIs</strong>. REST excels at <strong>horizontal scaling</strong> and <strong>partitioning</strong>.</p>
+                    </div>
+                </div>
+
+                <h3>Disadvantages of REST</h3>
+
+                <div class="shadcn-alert shadcn-alert-destructive">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                        REST Trade-Offs
+                    </div>
+                    <div class="shadcn-alert-description">
+                        <ul style="padding-left:18px;margin:0;">
+                            <li>REST may <strong>not be well-suited</strong> for resources that are not naturally organized in a simple hierarchy</li>
+                            <li>The <strong>limited set of verbs</strong> may not fit every use case, and some actions are awkward to model as CRUD</li>
+                            <li>Fetching complicated resources with <strong>nested hierarchies</strong> requires multiple round trips between the client and server</li>
+                            <li>Over time, more fields might be added to an API response, leading to <strong>payload bloat</strong> — older clients receiving data they don't need</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <!-- ────────── RPC vs REST ────────── -->
+
+                <h2>RPC vs REST</h2>
+
+                <div class="shadcn-tabs">
+                    <div class="shadcn-tabs-list">
+                        <button class="shadcn-tab-trigger active" data-tab="rpcrest-compare-tab" data-tabgroup="rpc-rest">Comparison Table</button>
+                        <button class="shadcn-tab-trigger" data-tab="rpcrest-tradeoffs-tab" data-tabgroup="rpc-rest">Key Differences</button>
+                    </div>
+
+                    <div class="shadcn-tab-content active" id="rpcrest-compare-tab">
+                        <div class="table-wrapper" style="overflow-x:auto;margin:1rem 0;">
+                            <table style="width:100%;border-collapse:collapse;font-size:0.92rem;">
+                                <thead>
+                                    <tr style="border-bottom:2px solid var(--border);text-align:left;">
+                                        <th style="padding:10px 12px;">Operation</th>
+                                        <th style="padding:10px 12px;">RPC</th>
+                                        <th style="padding:10px 12px;">REST</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Signup</strong></td>
+                                        <td style="padding:10px 12px;"><code>POST /signup</code></td>
+                                        <td style="padding:10px 12px;"><code>POST /persons</code></td>
+                                    </tr>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Resign</strong></td>
+                                        <td style="padding:10px 12px;"><code>POST /resign</code><br><code>{"personid": "1234"}</code></td>
+                                        <td style="padding:10px 12px;"><code>DELETE /persons/1234</code></td>
+                                    </tr>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Read a person</strong></td>
+                                        <td style="padding:10px 12px;"><code>GET /readPerson?personid=1234</code></td>
+                                        <td style="padding:10px 12px;"><code>GET /persons/1234</code></td>
+                                    </tr>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Read person's items</strong></td>
+                                        <td style="padding:10px 12px;"><code>GET /readUsersItemsList?personid=1234</code></td>
+                                        <td style="padding:10px 12px;"><code>GET /persons/1234/items</code></td>
+                                    </tr>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Add an item</strong></td>
+                                        <td style="padding:10px 12px;"><code>POST /addItemToUsersItemsList</code><br><code>{...}</code></td>
+                                        <td style="padding:10px 12px;"><code>POST /persons/1234/items</code><br><code>{...}</code></td>
+                                    </tr>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Update an item</strong></td>
+                                        <td style="padding:10px 12px;"><code>POST /modifyItem</code><br><code>{...}</code></td>
+                                        <td style="padding:10px 12px;"><code>PUT /items/456</code><br><code>{...}</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td style="padding:10px 12px;"><strong>Delete an item</strong></td>
+                                        <td style="padding:10px 12px;"><code>POST /removeItem</code><br><code>{"itemid": "456"}</code></td>
+                                        <td style="padding:10px 12px;"><code>DELETE /items/456</code></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div class="shadcn-tab-content" id="rpcrest-tradeoffs-tab">
+                        <div class="shadcn-comparison-grid">
+                            <div class="shadcn-card">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber" style="margin-right:8px">RPC</span> Behavior-Focused</div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <ul style="padding-left:18px">
+                                        <li>Focused on <strong>exposing behaviors</strong></li>
+                                        <li>Used for <strong>internal communications</strong> for performance</li>
+                                        <li>Tightly coupled to service implementation</li>
+                                        <li>Frameworks: Protobuf, Thrift, Avro</li>
+                                        <li>New API needed per operation/use case</li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="shadcn-card">
+                                <div class="shadcn-card-header">
+                                    <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue" style="margin-right:8px">REST</span> Data-Focused</div>
+                                </div>
+                                <div class="shadcn-card-content">
+                                    <ul style="padding-left:18px">
+                                        <li>Focused on <strong>exposing data</strong></li>
+                                        <li>Used for <strong>public APIs</strong> and external interfaces</li>
+                                        <li>Minimizes coupling between client/server</li>
+                                        <li>Great for horizontal scaling &amp; partitioning</li>
+                                        <li>Standard verbs &amp; status codes</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📄</span> <a href="https://www.nginx.com/blog/building-microservices-inter-process-communication/" target="_blank" rel="noopener">Building microservices: inter-process communication</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Representational_state_transfer" target="_blank" rel="noopener">Wikipedia — REST</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://apihandyman.io/do-you-really-know-why-you-prefer-rest-over-rpc/" target="_blank" rel="noopener">Do you really know why you prefer REST over RPC?</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Transmission_Control_Protocol" target="_blank" rel="noopener">Wikipedia — TCP</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/User_Datagram_Protocol" target="_blank" rel="noopener">Wikipedia — UDP</a></li>
+                    <li><span class="resource-icon">📄</span> <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol" target="_blank" rel="noopener">Wikipedia — HTTP</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 19 — Security
+    // ================================================================
+    'security': {
+        part: 'Part E',
+        title: 'Security',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 19 — Communication</div>
+                <h1>Security</h1>
+                <p class="chapter-subtitle">Security is a broad topic. Unless you have considerable experience, a security background, or are applying for a position that requires knowledge of security, you probably don't need to know more than the basics.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-warning">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                        Security Essentials
+                    </div>
+                    <div class="shadcn-alert-description">Security is a <strong>broad topic</strong>. Unless you have considerable experience, a security background, or are applying for a position that requires knowledge of security, you probably don't need to know more than the <strong>basics</strong>.</div>
+                </div>
+
+                <h2>Core Security Principles</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">1</span> Encrypt in Transit &amp; at Rest</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <div class="shadcn-alert shadcn-alert-info" style="margin:0;">
+                                <div class="shadcn-alert-title">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                                    Encryption
+                                </div>
+                                <div class="shadcn-alert-description">Encrypt data <strong>in transit</strong> (TLS/SSL for network communication) and <strong>at rest</strong> (encrypt databases, file storage, backups). This protects sensitive data from interception and unauthorized access.</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">2</span> Sanitize All User Inputs</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <div class="shadcn-alert shadcn-alert-info" style="margin:0;">
+                                <div class="shadcn-alert-title">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                                    Input Sanitization
+                                </div>
+                                <div class="shadcn-alert-description">Sanitize <strong>all user inputs</strong> or any input parameters exposed to the user to prevent <strong>XSS</strong> (Cross-Site Scripting) and <strong>SQL injection</strong> attacks. Never trust user input.</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">3</span> Parameterized Queries</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <div class="shadcn-alert shadcn-alert-info" style="margin:0;">
+                                <div class="shadcn-alert-title">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                                    SQL Injection Prevention
+                                </div>
+                                <div class="shadcn-alert-description">Use <strong>parameterized queries</strong> to prevent SQL injection. Never build SQL queries by concatenating user-supplied strings — use prepared statements or an ORM's built-in protections.</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">4</span> Principle of Least Privilege</div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <div class="shadcn-alert shadcn-alert-info" style="margin:0;">
+                                <div class="shadcn-alert-title">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                                    Least Privilege
+                                </div>
+                                <div class="shadcn-alert-description">Apply the <strong>principle of least privilege</strong>. Every module, process, or user should only have access to the information and resources necessary for its legitimate purpose. Minimize the blast radius of any potential breach.</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Quick Reference</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Security Checklist</div>
+                        <p class="shadcn-card-description">A concise summary of the key security practices every system designer should follow.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <div class="table-wrapper" style="overflow-x:auto;">
+                            <table style="width:100%;border-collapse:collapse;font-size:0.92rem;">
+                                <thead>
+                                    <tr style="border-bottom:2px solid var(--border);text-align:left;">
+                                        <th style="padding:10px 12px;">Principle</th>
+                                        <th style="padding:10px 12px;">What To Do</th>
+                                        <th style="padding:10px 12px;">Threats Mitigated</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Encrypt in transit</strong></td>
+                                        <td style="padding:10px 12px;">Use TLS/SSL for all network communication</td>
+                                        <td style="padding:10px 12px;">Man-in-the-middle, eavesdropping</td>
+                                    </tr>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Encrypt at rest</strong></td>
+                                        <td style="padding:10px 12px;">Encrypt databases, file storage, and backups</td>
+                                        <td style="padding:10px 12px;">Data breach, unauthorized access</td>
+                                    </tr>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Sanitize inputs</strong></td>
+                                        <td style="padding:10px 12px;">Validate and escape all user-provided data</td>
+                                        <td style="padding:10px 12px;">XSS, SQL injection</td>
+                                    </tr>
+                                    <tr style="border-bottom:1px solid var(--border);">
+                                        <td style="padding:10px 12px;"><strong>Parameterized queries</strong></td>
+                                        <td style="padding:10px 12px;">Use prepared statements; never concatenate SQL</td>
+                                        <td style="padding:10px 12px;">SQL injection</td>
+                                    </tr>
+                                    <tr>
+                                        <td style="padding:10px 12px;"><strong>Least privilege</strong></td>
+                                        <td style="padding:10px 12px;">Grant minimum permissions needed per role/service</td>
+                                        <td style="padding:10px 12px;">Privilege escalation, blast radius</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="https://github.com/shieldfy/API-Security-Checklist" target="_blank" rel="noopener">API security checklist</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://github.com/FallibleInc/security-guide-for-developers" target="_blank" rel="noopener">Security guide for developers</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://www.owasp.org/index.php/OWASP_Top_Ten_Cheat_Sheet" target="_blank" rel="noopener">OWASP Top Ten</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+};
diff --git a/website/js/chapters/chapters-f.js b/website/js/chapters/chapters-f.js
new file mode 100644
index 00000000000..9ac0486fd35
--- /dev/null
+++ b/website/js/chapters/chapters-f.js
@@ -0,0 +1,1284 @@
+/**
+ * Part F: Practice Problems — Chapters 20–27
+ * Design Pastebin, Design Twitter, Design Web Crawler,
+ * Design Mint.com, Design Social Network, Design Key-Value Cache,
+ * Design Sales Ranking, Scaling on AWS
+ *
+ * Registered into global CHAPTERS_F object.
+ */
+
+const CHAPTERS_F = {
+
+    // ================================================================
+    // Chapter 20 — Design Pastebin (or Bit.ly)
+    // ================================================================
+    'design-pastebin': {
+        part: 'Part F',
+        title: 'Design Pastebin',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 20 — Practice Problems</div>
+                <h1>Design Pastebin (or Bit.ly)</h1>
+                <p class="chapter-subtitle">Design a URL shortening service like Pastebin or Bit.ly — where users enter text or a URL and receive a randomly generated short link that redirects to the original content.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/4edXG0T.png" class="zoomable" alt="Design Pastebin architecture diagram" style="max-width:720px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>High-level architecture for a Pastebin / URL shortening service</em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Interview Tip
+                    </div>
+                    <div class="shadcn-alert-description"><strong>Design Bit.ly</strong> is a similar question, except Pastebin requires storing the paste contents instead of the original unshortened URL. Both fundamentally involve generating and storing a hash of the full URL.</div>
+                </div>
+
+                <h2>Use Cases &amp; Constraints</h2>
+
+                <div class="table-wrapper" style="margin:1.5rem 0;">
+                    <table>
+                        <thead>
+                            <tr><th>Use Case</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>Create paste</strong></td><td>User enters a block of text and gets a randomly generated short link (with optional expiration)</td></tr>
+                            <tr><td><strong>View paste</strong></td><td>User enters a paste's short URL and views the contents</td></tr>
+                            <tr><td><strong>Analytics</strong></td><td>Service tracks monthly visit stats for pages</td></tr>
+                            <tr><td><strong>Expiration</strong></td><td>Service deletes expired pastes; default is no expiration</td></tr>
+                            <tr><td><strong>High availability</strong></td><td>Service remains available even during partial failures</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Back-of-the-Envelope Estimates</div>
+                        <p class="shadcn-card-description">Key numbers to ground the design</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li>10 million users, 10 million paste writes/month, 100 million reads/month</li>
+                            <li><strong>10:1 read-to-write ratio</strong> — read-heavy system</li>
+                            <li>~1 KB content per paste → 12.7 GB new content per month</li>
+                            <li>~4 writes/sec average, ~40 reads/sec average</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Request Flow — Read & Write Paths
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Client"] --> B["Web Server"]
+    B --> C{"Write or Read?"}
+    C -->|Write| D["Write API"]
+    D --> E["Generate short URL"]
+    E --> F["Store in SQL DB"]
+    E --> G["Store content in Object Store"]
+    C -->|Read| H["Read API"]
+    H --> I["Check Cache"]
+    I -->|Hit| J["Return content"]
+    I -->|Miss| K["Query SQL DB"]
+    K --> L["Fetch from Object Store"]
+    L --> J
+                    </div>
+                </div>
+
+                <h2>Key Design Decisions</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Hash Generation</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Generate a unique short URL using <strong>MD5</strong> hash → take the first 7 characters and <strong>Base62</strong> encode. Check for collisions in the database and regenerate if needed.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">SQL vs NoSQL</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Use a <strong>relational database</strong> as a large hash table mapping generated URLs to paste file paths. Alternatively, consider a <strong>NoSQL key-value store</strong> for simpler lookups.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Caching</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Cache frequently accessed URLs in a <strong>Memory Cache</strong> (Redis/Memcached) to handle the read-heavy workload efficiently and reduce database load.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Object Store</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Store paste contents in a managed <strong>Object Store</strong> (e.g. Amazon S3) instead of managing a file server directly. The database maps short URLs to object store paths.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Architecture Overview</h2>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Core Components</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li><strong>Client</strong> → <strong>Web Server</strong> (reverse proxy) → <strong>Read/Write API</strong></li>
+                            <li><strong>Write API:</strong> generates unique URL, stores paste in Object Store, saves metadata in SQL Database</li>
+                            <li><strong>Read API:</strong> looks up shortlink, checks Memory Cache first, falls back to SQL Database, fetches paste from Object Store</li>
+                            <li><strong>Analytics Service:</strong> MapReduce jobs on stored logs to compute monthly stats</li>
+                            <li><strong>Cleanup Service:</strong> periodically scans for and deletes expired pastes</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info" style="margin:1.5rem 0;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Database Schema
+                    </div>
+                    <div class="shadcn-alert-description">The <code>pastes</code> table stores: <code>shortlink</code> (char 7, PK), <code>expiration_length_in_minutes</code> (int), <code>created_at</code> (datetime), <code>paste_path</code> (varchar 255). The shortlink column is used as the primary key for fast lookups.</div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card" style="margin:1.5rem 0;border:2px solid var(--primary);">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">📖 Full Solution</div>
+                        <p class="shadcn-card-description">Dive into the complete step-by-step solution with code samples, database schemas, and scaling discussion.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p><a href="https://github.com/donnemartin/system-design-primer/tree/master/solutions/system_design/pastebin" target="_blank" rel="noopener"><strong>View the full Pastebin solution on GitHub →</strong></a></p>
+                    </div>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 21 — Design Twitter Timeline and Search
+    // ================================================================
+    'design-twitter': {
+        part: 'Part F',
+        title: 'Design Twitter',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 21 — Practice Problems</div>
+                <h1>Design Twitter Timeline and Search</h1>
+                <p class="chapter-subtitle">Design the core infrastructure behind Twitter's home timeline, user timeline, and search functionality — handling hundreds of billions of reads per month and fan-out to millions of followers.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/jrUBAF7.png" class="zoomable" alt="Design Twitter architecture diagram" style="max-width:720px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>High-level architecture for Twitter timeline and search</em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Interview Tip
+                    </div>
+                    <div class="shadcn-alert-description"><strong>Design the Facebook feed</strong> and <strong>Design Facebook search</strong> are similar questions. The core challenges — fan-out, timeline assembly, and search indexing — are shared across social media feed systems.</div>
+                </div>
+
+                <h2>Use Cases &amp; Constraints</h2>
+
+                <div class="table-wrapper" style="margin:1.5rem 0;">
+                    <table>
+                        <thead>
+                            <tr><th>Use Case</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>Post tweet</strong></td><td>User posts a tweet; service pushes to followers via push notifications and emails</td></tr>
+                            <tr><td><strong>User timeline</strong></td><td>User views their own activity feed</td></tr>
+                            <tr><td><strong>Home timeline</strong></td><td>User views activity from people they follow</td></tr>
+                            <tr><td><strong>Search</strong></td><td>User searches keywords and sees matching tweets</td></tr>
+                            <tr><td><strong>High availability</strong></td><td>Service remains available even during partial failures</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Back-of-the-Envelope Estimates</div>
+                        <p class="shadcn-card-description">Key numbers to ground the design</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li>100 million active users, 500 million tweets/day</li>
+                            <li>Each tweet fans out to ~10 followers on average → 5 billion deliveries/day</li>
+                            <li>250 billion read requests/month, 10 billion searches/month</li>
+                            <li>~10 KB per tweet (including media) → 150 TB new content/month</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Tweet Fan-Out Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["User posts tweet"] --> B["Write API"]
+    B --> C["Store in SQL DB"]
+    B --> D["Fan-Out Service"]
+    D --> E{"User has < 10K followers?"}
+    E -->|Yes| F["Fan-out on write"]
+    F --> G["Push to follower timelines in Cache"]
+    E -->|No| H["Fan-out on read"]
+    H --> I["Merge at read time"]
+    J["User views timeline"] --> K["Timeline Service"]
+    K --> L["Read from Cache"]
+    L --> M["Merge with celebrity tweets"]
+    M --> N["Return timeline"]
+                    </div>
+                </div>
+
+                <h2>Key Design Decisions</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Fan-Out</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p><strong>Fan-out on write:</strong> pre-compute timelines when a tweet is posted, pushing to each follower's cached timeline. Fast reads but expensive writes for popular users.</p>
+                            <p><strong>Fan-out on read:</strong> assemble timeline at read time by querying followees' tweets. Slower reads but cheap writes — useful for celebrity accounts with millions of followers.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Hybrid Approach</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Use <strong>fan-out on write</strong> for most users and <strong>fan-out on read</strong> for celebrity users (millions of followers). This hybrid approach balances write cost with read performance.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Search Indexing</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Build a <strong>reverse index</strong> mapping search terms to tweet IDs. Tweets are tokenized and indexed on write. Search queries are parsed, normalized, and matched against the index.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Timeline Cache</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Store pre-computed timelines in a <strong>Memory Cache</strong> (Redis). Each user's home timeline is a list of tweet IDs. The cache is updated on fan-out and read from on timeline views.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Architecture Overview</h2>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Core Components</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li><strong>Client</strong> → <strong>Web Server</strong> (reverse proxy) → <strong>Read/Write API</strong></li>
+                            <li><strong>Tweet Write API:</strong> stores tweet in SQL Database, triggers Fan-Out Service to push to follower timelines (Memory Cache)</li>
+                            <li><strong>Fan-Out Service:</strong> queries User Graph Service for followers, writes tweet to each follower's timeline in Memory Cache, enqueues push notifications</li>
+                            <li><strong>Timeline Read API:</strong> fetches pre-computed timeline from Memory Cache, hydrates tweet data from Tweet Info Service</li>
+                            <li><strong>Search API:</strong> parses query, looks up Reverse Index, fetches matching tweet details from Document Store</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info" style="margin:1.5rem 0;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Celebrity Problem
+                    </div>
+                    <div class="shadcn-alert-description">Users with millions of followers (celebrities) make fan-out on write extremely expensive. The hybrid approach handles these users separately — their tweets are fetched on read and merged into the timeline at query time.</div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card" style="margin:1.5rem 0;border:2px solid var(--primary);">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">📖 Full Solution</div>
+                        <p class="shadcn-card-description">Dive into the complete step-by-step solution with code samples, database schemas, and scaling discussion.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p><a href="https://github.com/donnemartin/system-design-primer/tree/master/solutions/system_design/twitter" target="_blank" rel="noopener"><strong>View the full Twitter solution on GitHub →</strong></a></p>
+                    </div>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 22 — Design Web Crawler
+    // ================================================================
+    'design-web-crawler': {
+        part: 'Part F',
+        title: 'Design Web Crawler',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 22 — Practice Problems</div>
+                <h1>Design a Web Crawler</h1>
+                <p class="chapter-subtitle">Design a scalable web crawler that indexes billions of pages — generating reverse indexes, page titles, snippets, and supporting fresh search results across the web.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/bWxPtQA.png" class="zoomable" alt="Design Web Crawler architecture diagram" style="max-width:720px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>High-level architecture for a scalable web crawler</em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Interview Tip
+                    </div>
+                    <div class="shadcn-alert-description">This exercise uses more traditional systems — avoid existing solutions like <strong>Solr</strong> or <strong>Nutch</strong>. The goal is to demonstrate your understanding of crawling, indexing, and distributed systems fundamentals.</div>
+                </div>
+
+                <h2>Use Cases &amp; Constraints</h2>
+
+                <div class="table-wrapper" style="margin:1.5rem 0;">
+                    <table>
+                        <thead>
+                            <tr><th>Use Case</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>Crawl URLs</strong></td><td>Service crawls a list of URLs, generating reverse index of words to pages</td></tr>
+                            <tr><td><strong>Generate metadata</strong></td><td>Service generates titles and snippets for crawled pages (static, not query-dependent)</td></tr>
+                            <tr><td><strong>Search</strong></td><td>User inputs search term and sees relevant pages with titles and snippets</td></tr>
+                            <tr><td><strong>High availability</strong></td><td>Service remains available even during partial failures</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Back-of-the-Envelope Estimates</div>
+                        <p class="shadcn-card-description">Key numbers to ground the design</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li>1 billion links to crawl, refreshed ~weekly → 4 billion links crawled/month</li>
+                            <li>Average stored size per page: 500 KB → 2 PB stored content/month</li>
+                            <li>~1,600 write requests/sec, ~40,000 search requests/sec</li>
+                            <li>100 billion searches per month</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Crawl Pipeline Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["URL Frontier"] --> B["Dequeue URL"]
+    B --> C["DNS Resolver"]
+    C --> D["Crawler Worker"]
+    D --> E["Download Page"]
+    E --> F["Duplicate Check"]
+    F -->|New| G["Parse Links"]
+    F -->|Duplicate| H["Discard"]
+    G --> I["Add to URL Frontier"]
+    G --> J["Reverse Index Service"]
+    J --> K["Document Store"]
+                    </div>
+                </div>
+
+                <h2>Key Design Decisions</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Crawl Strategy</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Use <strong>BFS</strong> with a prioritized URL frontier. Pages are ranked by popularity and freshness. A <strong>sorted set</strong> (e.g. Redis) maintains the ranked crawl queue.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Duplicate Detection</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Compute a <strong>page signature</strong> for each crawled page. Before processing, check against <code>crawled_links</code> in the database. Similar signatures reduce the link's priority to avoid infinite loops.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Distributed Crawling</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Distribute crawling across multiple workers. Each worker pulls top-ranked URLs from the frontier, crawls them, and enqueues jobs for the <strong>Reverse Index Service</strong> and <strong>Document Service</strong>.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Politeness</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Respect <code>robots.txt</code> rules and enforce rate limits per domain. Add delays between requests to the same host to avoid overwhelming target servers.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Architecture Overview</h2>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Core Components</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li><strong>URL Frontier:</strong> prioritized queue of URLs to crawl, stored in Redis sorted sets</li>
+                            <li><strong>Crawler Service:</strong> pulls top-ranked URLs, fetches pages, generates page signatures, checks for duplicates</li>
+                            <li><strong>Reverse Index Service:</strong> builds inverted index mapping words → pages containing those words</li>
+                            <li><strong>Document Service:</strong> generates and stores static titles and snippets for each page</li>
+                            <li><strong>NoSQL Database:</strong> stores <code>links_to_crawl</code> and <code>crawled_links</code> with page signatures</li>
+                            <li><strong>Search API:</strong> queries reverse index, ranks results, and returns pages with titles and snippets</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info" style="margin:1.5rem 0;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Avoiding Infinite Loops
+                    </div>
+                    <div class="shadcn-alert-description">The web is a graph that may contain cycles. The crawler prevents infinite loops by computing page signatures and checking against previously crawled pages. If a similar page signature already exists, the link's priority is reduced rather than re-crawling it.</div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card" style="margin:1.5rem 0;border:2px solid var(--primary);">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">📖 Full Solution</div>
+                        <p class="shadcn-card-description">Dive into the complete step-by-step solution with code samples, database schemas, and scaling discussion.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p><a href="https://github.com/donnemartin/system-design-primer/tree/master/solutions/system_design/web_crawler" target="_blank" rel="noopener"><strong>View the full Web Crawler solution on GitHub →</strong></a></p>
+                    </div>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 23 — Design Mint.com
+    // ================================================================
+    'design-mint': {
+        part: 'Part F',
+        title: 'Design Mint.com',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 23 — Practice Problems</div>
+                <h1>Design Mint.com</h1>
+                <p class="chapter-subtitle">Design a personal finance aggregation service like Mint.com — connecting bank accounts, extracting and categorizing transactions, recommending budgets, and analyzing spending patterns.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/V5q57vU.png" class="zoomable" alt="Design Mint.com architecture diagram" style="max-width:720px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>High-level architecture for Mint.com personal finance service</em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Interview Tip
+                    </div>
+                    <div class="shadcn-alert-description">This problem is <strong>write-heavy</strong> (10:1 write-to-read ratio). Users make transactions daily but few visit the site daily. Focus on efficient transaction ingestion and categorization at scale.</div>
+                </div>
+
+                <h2>Use Cases &amp; Constraints</h2>
+
+                <div class="table-wrapper" style="margin:1.5rem 0;">
+                    <table>
+                        <thead>
+                            <tr><th>Use Case</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>Connect account</strong></td><td>User connects to a financial account</td></tr>
+                            <tr><td><strong>Extract transactions</strong></td><td>Service extracts transactions from connected accounts, updates daily</td></tr>
+                            <tr><td><strong>Categorize</strong></td><td>Service categorizes transactions (with manual override); no automatic re-categorization</td></tr>
+                            <tr><td><strong>Spending analysis</strong></td><td>Service analyzes monthly spending by category</td></tr>
+                            <tr><td><strong>Budget recommendations</strong></td><td>Service recommends a budget; users can manually set budgets; notifications on approach/exceed</td></tr>
+                            <tr><td><strong>High availability</strong></td><td>Service remains available even during partial failures</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Back-of-the-Envelope Estimates</div>
+                        <p class="shadcn-card-description">Key numbers to ground the design</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li>10 million users, 30 million financial accounts, 50,000 sellers</li>
+                            <li>5 billion transactions/month → ~2,000 transactions/sec</li>
+                            <li>500 million read requests/month → ~200 reads/sec</li>
+                            <li>~50 bytes per transaction → 250 GB new content/month</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Data Pipeline Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Bank APIs"] --> B["Transaction Extraction Service"]
+    B --> C["Raw Transactions Queue"]
+    C --> D["Category Service"]
+    D --> E["MapReduce Categorization"]
+    E --> F["Budget Service"]
+    F --> G{"Over budget?"}
+    G -->|Yes| H["Notification Service"]
+    G -->|No| I["Update Dashboard"]
+    H --> J["Email / SMS Alert"]
+    I --> K["Analytics Store"]
+                    </div>
+                </div>
+
+                <h2>Key Design Decisions</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Transaction Categorization</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Use <strong>MapReduce</strong> to categorize transactions at scale. Map sellers to categories using a lookup table. Users can manually override categories, which are stored per-user.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Data Pulling</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Pull transaction data from financial institutions daily using their APIs. Only update accounts for users <strong>active in the past 30 days</strong> to avoid unnecessary load.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Budget Analysis</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Aggregate categorized spending monthly. Compare against user-defined or system-recommended budgets. Send <strong>notifications</strong> when spending approaches or exceeds budget thresholds.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Security</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Financial data requires <strong>encryption at rest and in transit</strong>. Store bank credentials securely (vaulted). Use SSL/TLS for all API communication. Comply with financial data regulations.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Architecture Overview</h2>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Core Components</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li><strong>Client</strong> → <strong>Web Server</strong> (reverse proxy) → <strong>Accounts API / Budget API</strong></li>
+                            <li><strong>Accounts API:</strong> manages user accounts and bank connections in SQL Database</li>
+                            <li><strong>Transaction Extraction Service:</strong> pulls transactions daily from financial APIs, stores raw data</li>
+                            <li><strong>Category Service:</strong> MapReduce jobs categorize transactions using seller → category mapping</li>
+                            <li><strong>Budget Service:</strong> analyzes monthly categorized spend and compares against budgets</li>
+                            <li><strong>Notification Service:</strong> sends alerts when budgets are approached or exceeded</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info" style="margin:1.5rem 0;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Database Schema
+                    </div>
+                    <div class="shadcn-alert-description">Key tables: <code>accounts</code> (user_id, account_url, account_login, account_password_hash, created_at, updated_at), <code>transactions</code> (id, created_at, seller, amount, user_id, category_id), and <code>monthly_spending</code> (user_id, month, category_id, amount).</div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card" style="margin:1.5rem 0;border:2px solid var(--primary);">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">📖 Full Solution</div>
+                        <p class="shadcn-card-description">Dive into the complete step-by-step solution with code samples, MapReduce implementation, and scaling discussion.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p><a href="https://github.com/donnemartin/system-design-primer/tree/master/solutions/system_design/mint" target="_blank" rel="noopener"><strong>View the full Mint.com solution on GitHub →</strong></a></p>
+                    </div>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 24 — Design Social Network Data Structures
+    // ================================================================
+    'design-social-graph': {
+        part: 'Part F',
+        title: 'Design Social Network',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 24 — Practice Problems</div>
+                <h1>Design Social Network Data Structures</h1>
+                <p class="chapter-subtitle">Design the data structures and algorithms for a social network — enabling users to search for someone and see the shortest path of connections to that person (like LinkedIn's "degrees of connection").</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/cdCv5g7.png" class="zoomable" alt="Design Social Network architecture diagram" style="max-width:720px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>High-level architecture for social graph shortest path</em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Interview Tip
+                    </div>
+                    <div class="shadcn-alert-description">This exercise uses more traditional systems — avoid graph-specific solutions like <strong>GraphQL</strong> or graph databases like <strong>Neo4j</strong>. Focus on demonstrating BFS, adjacency lists, and distributed system fundamentals.</div>
+                </div>
+
+                <h2>Use Cases &amp; Constraints</h2>
+
+                <div class="table-wrapper" style="margin:1.5rem 0;">
+                    <table>
+                        <thead>
+                            <tr><th>Use Case</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>Shortest path</strong></td><td>User searches for someone and sees the shortest path of connections to that person</td></tr>
+                            <tr><td><strong>High availability</strong></td><td>Service remains available even during partial failures</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Back-of-the-Envelope Estimates</div>
+                        <p class="shadcn-card-description">Key numbers to ground the design</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li>100 million users, 50 friends per user on average</li>
+                            <li>5 billion friend relationships total</li>
+                            <li>1 billion friend searches/month → ~400 searches/sec</li>
+                            <li>Graph data won't fit on a single machine — must be distributed</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Bidirectional BFS Search Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Search: User A to User B"] --> B["BFS Service"]
+    B --> C["Start BFS from User A"]
+    B --> D["Start BFS from User B"]
+    C --> E["Person Server Lookup"]
+    D --> E
+    E --> F["Query User Graph Shard"]
+    F --> G{"Paths intersect?"}
+    G -->|Yes| H["Return shortest path"]
+    G -->|No| I["Expand next BFS level"]
+    I --> E
+                    </div>
+                </div>
+
+                <h2>Key Design Decisions</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">BFS Shortest Path</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Use <strong>Breadth-First Search (BFS)</strong> to find the shortest unweighted path between two users. BFS explores all nodes at distance <em>k</em> before moving to distance <em>k+1</em>, guaranteeing the shortest path.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Bidirectional BFS</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Optimize with <strong>bidirectional BFS</strong> — search from both the source and destination simultaneously. When the two frontiers meet, we've found the shortest path. This dramatically reduces the search space.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Sharding</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Shard users across multiple machines using a <strong>Person Server</strong> lookup. Each machine stores a subset of users and their adjacency lists. Lookups route to the correct shard via a lookup service.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Caching</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Cache frequently accessed user adjacency lists in <strong>Memory Cache</strong>. Popular users (many connections) are accessed often and benefit greatly from caching to reduce database lookups.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Architecture Overview</h2>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Core Components</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li><strong>Client</strong> → <strong>Web Server</strong> (reverse proxy) → <strong>Search API</strong></li>
+                            <li><strong>User Graph Service:</strong> stores user friend relationships as adjacency lists, sharded across machines</li>
+                            <li><strong>Person Server:</strong> lookup service mapping user IDs to the machine storing their data</li>
+                            <li><strong>BFS Service:</strong> performs bidirectional BFS across sharded graph data, communicating with multiple Person Servers</li>
+                            <li><strong>Memory Cache:</strong> caches hot adjacency lists (Redis/Memcached) to speed up BFS traversal</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info" style="margin:1.5rem 0;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Graph Edges
+                    </div>
+                    <div class="shadcn-alert-description">Graph edges are <strong>unweighted</strong> — each friend connection has equal weight. This makes BFS the optimal algorithm since it naturally finds shortest paths in unweighted graphs. With 50 friends per user average and 100M users, there are 5 billion edges to store and traverse.</div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card" style="margin:1.5rem 0;border:2px solid var(--primary);">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">📖 Full Solution</div>
+                        <p class="shadcn-card-description">Dive into the complete step-by-step solution with BFS code, sharding strategies, and scaling discussion.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p><a href="https://github.com/donnemartin/system-design-primer/tree/master/solutions/system_design/social_graph" target="_blank" rel="noopener"><strong>View the full Social Network solution on GitHub →</strong></a></p>
+                    </div>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 25 — Design Key-Value Store for Search Engine
+    // ================================================================
+    'design-kv-store': {
+        part: 'Part F',
+        title: 'Design Key-Value Cache',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 25 — Practice Problems</div>
+                <h1>Design a Key-Value Cache for a Search Engine</h1>
+                <p class="chapter-subtitle">Design a key-value cache that stores the results of the most recent web server queries — enabling fast cache hits, LRU eviction, and distributed operation across multiple machines.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/4j99mhe.png" class="zoomable" alt="Design Key-Value Cache architecture diagram" style="max-width:720px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>High-level architecture for a key-value search cache</em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Interview Tip
+                    </div>
+                    <div class="shadcn-alert-description">This problem focuses on the <strong>cache layer</strong> itself — how to structure an efficient key-value store with LRU eviction. Consider hash tables, linked lists, and memory management as core building blocks.</div>
+                </div>
+
+                <h2>Use Cases &amp; Constraints</h2>
+
+                <div class="table-wrapper" style="margin:1.5rem 0;">
+                    <table>
+                        <thead>
+                            <tr><th>Use Case</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>Cache hit</strong></td><td>User sends a search request; service returns cached results for matching queries</td></tr>
+                            <tr><td><strong>Cache miss</strong></td><td>User sends a search request with no cached result; service queries backend and caches the result</td></tr>
+                            <tr><td><strong>High availability</strong></td><td>Service remains available with eventual consistency</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Back-of-the-Envelope Estimates</div>
+                        <p class="shadcn-card-description">Key numbers to ground the design</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li>10 million users, 10 billion queries/month → ~4,000 requests/sec</li>
+                            <li>Cache entry: query (50 bytes) + title (20 bytes) + snippet (200 bytes) = ~270 bytes</li>
+                            <li>2.7 TB of cache data/month if all queries were unique</li>
+                            <li>Popular queries should almost always be in cache — need smart expiration/refresh</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Cache Hit / Miss Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Query API"] --> B["Memory Cache"]
+    B --> C{"Cache Hit?"}
+    C -->|Yes| D["Return cached result"]
+    C -->|Miss| E["Reverse Index Service"]
+    E --> F["Document Service"]
+    F --> G["Return result"]
+    G --> H["Store in Cache (LRU)"]
+    H --> D
+                    </div>
+                </div>
+
+                <h2>Key Design Decisions</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">LRU Eviction</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Use a <strong>doubly-linked list</strong> for LRU ordering: new/accessed items move to the head, evicted items are removed from the tail. Combined with a <strong>hash table</strong> for O(1) lookups to each node.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Hash + Linked List</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>The hash table maps query strings to linked list nodes. On <strong>cache hit</strong>, move the node to head. On <strong>cache miss</strong>, add to head and evict from tail if capacity reached. Both operations are O(1).</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Distribution</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Distribute cache across multiple machines using <strong>consistent hashing</strong>. Each machine handles a subset of the key space. This allows horizontal scaling and graceful handling of node additions/removals.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Memory Management</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Limited memory in cache requires careful management. Track memory usage and evict LRU entries when approaching limits. Monitor <strong>cache hit ratio</strong> to tune capacity and eviction policies.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Architecture Overview</h2>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Core Components</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li><strong>Client</strong> → <strong>Web Server</strong> (reverse proxy) → <strong>Query API</strong></li>
+                            <li><strong>Query API:</strong> parses query (removes markup, fixes typos, normalizes), checks Memory Cache</li>
+                            <li><strong>Memory Cache:</strong> distributed hash table + LRU linked list across multiple machines</li>
+                            <li><strong>Reverse Index Service:</strong> on cache miss, finds documents matching the query terms</li>
+                            <li><strong>Document Service:</strong> returns titles and snippets for matching documents</li>
+                            <li>Results are cached in Memory Cache before returning to client</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info" style="margin:1.5rem 0;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Cache Invalidation
+                    </div>
+                    <div class="shadcn-alert-description">Cache entries become stale as underlying data changes. Strategies include <strong>TTL-based expiration</strong> (entries expire after a set time), <strong>write-through</strong> (update cache on write), or <strong>event-driven invalidation</strong> (invalidate when source data changes). Choose based on consistency requirements.</div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card" style="margin:1.5rem 0;border:2px solid var(--primary);">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">📖 Full Solution</div>
+                        <p class="shadcn-card-description">Dive into the complete step-by-step solution with LRU cache code, query processing, and scaling discussion.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p><a href="https://github.com/donnemartin/system-design-primer/tree/master/solutions/system_design/query_cache" target="_blank" rel="noopener"><strong>View the full Key-Value Cache solution on GitHub →</strong></a></p>
+                    </div>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 26 — Design Amazon's Sales Ranking
+    // ================================================================
+    'design-sales-rank': {
+        part: 'Part F',
+        title: 'Design Sales Ranking',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 26 — Practice Problems</div>
+                <h1>Design Amazon's Sales Ranking by Category</h1>
+                <p class="chapter-subtitle">Design the sales ranking feature for an e-commerce platform like Amazon — computing the most popular products by category from billions of monthly transactions and serving rankings to users at scale.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/MzExP06.png" class="zoomable" alt="Design Sales Ranking architecture diagram" style="max-width:720px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>High-level architecture for sales ranking by category</em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Interview Tip
+                    </div>
+                    <div class="shadcn-alert-description">Focus on the <strong>ranking computation</strong> — not the general e-commerce platform. The key challenge is efficiently processing billions of transactions to produce per-category rankings updated hourly.</div>
+                </div>
+
+                <h2>Use Cases &amp; Constraints</h2>
+
+                <div class="table-wrapper" style="margin:1.5rem 0;">
+                    <table>
+                        <thead>
+                            <tr><th>Use Case</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>Compute rankings</strong></td><td>Service calculates the past week's most popular products by category</td></tr>
+                            <tr><td><strong>View rankings</strong></td><td>User views the most popular products by category</td></tr>
+                            <tr><td><strong>High availability</strong></td><td>Service remains available even during partial failures</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Back-of-the-Envelope Estimates</div>
+                        <p class="shadcn-card-description">Key numbers to ground the design</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li>10 million products across 1,000 categories</li>
+                            <li>1 billion transactions/month → ~400 writes/sec</li>
+                            <li>100 billion read requests/month → ~40,000 reads/sec</li>
+                            <li><strong>100:1 read-to-write ratio</strong> — extremely read-heavy</li>
+                            <li>~40 bytes per transaction → 40 GB new content/month</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Sales Ranking Pipeline
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Sales Logs"] --> B["Map Phase"]
+    B --> C["Extract category + sales count"]
+    C --> D["Reduce Phase"]
+    D --> E["Aggregate per category"]
+    E --> F["Sort by rank"]
+    F --> G["Store in SQL DB"]
+    G --> H["Cache Layer"]
+    H --> I["Sales Rank API"]
+                    </div>
+                </div>
+
+                <h2>Key Design Decisions</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">MapReduce</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Use a multi-step <strong>MapReduce</strong> pipeline: (1) Map sales logs to extract <code>(category, product_id, quantity)</code>, (2) Reduce to aggregate sales per product per category, (3) Sort by quantity within each category to produce rankings.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Sales Log Processing</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Store raw sales logs in a managed <strong>Object Store</strong> (e.g. Amazon S3). MapReduce jobs process these logs periodically. Items can appear in <strong>multiple categories</strong> but cannot change categories.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Periodic Updates</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Rankings are updated <strong>hourly</strong> (more frequently for popular products). Results are written to a <code>sales_rank</code> table in the SQL Database. The past week's data is used for ranking computation.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Caching Rankings</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Cache computed rankings in a <strong>Memory Cache</strong> (Redis/Memcached). With a 100:1 read-to-write ratio, caching is critical. Rankings change infrequently (hourly) so cache invalidation is straightforward.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Architecture Overview</h2>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Core Components</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li><strong>Client</strong> → <strong>Web Server</strong> (reverse proxy) → <strong>Sales Rank API</strong></li>
+                            <li><strong>Sales API:</strong> ingests purchase events, writes raw sales logs to Object Store</li>
+                            <li><strong>Sales Rank Service (MapReduce):</strong> processes sales logs → aggregates per category → sorts to produce rankings → writes to SQL Database</li>
+                            <li><strong>SQL Database:</strong> stores <code>sales_rank</code> table with <code>(product_id, category_id, rank, total_sold, time_period)</code></li>
+                            <li><strong>Memory Cache:</strong> caches rankings per category for fast reads at 40K req/sec</li>
+                            <li><strong>Sales Rank API:</strong> checks cache first, falls back to database, returns ranked products</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info" style="margin:1.5rem 0;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Multi-Category Items
+                    </div>
+                    <div class="shadcn-alert-description">Items can appear in <strong>multiple categories</strong> simultaneously. The MapReduce pipeline emits a separate <code>(category, product_id, quantity)</code> tuple for each category an item belongs to, so an item can rank differently across its categories.</div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card" style="margin:1.5rem 0;border:2px solid var(--primary);">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">📖 Full Solution</div>
+                        <p class="shadcn-card-description">Dive into the complete step-by-step solution with MapReduce pipeline, database schemas, and scaling discussion.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p><a href="https://github.com/donnemartin/system-design-primer/tree/master/solutions/system_design/sales_rank" target="_blank" rel="noopener"><strong>View the full Sales Ranking solution on GitHub →</strong></a></p>
+                    </div>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 27 — Design Scaling to Millions on AWS
+    // ================================================================
+    'design-scaling-aws': {
+        part: 'Part F',
+        title: 'Scaling on AWS',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 27 — Practice Problems</div>
+                <h1>Design a System that Scales to Millions of Users on AWS</h1>
+                <p class="chapter-subtitle">Design an iterative approach to scaling a system from a single user to millions on AWS — progressively adding components like load balancers, CDNs, caching, read replicas, and auto scaling as bottlenecks appear.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/jj3A5N8.png" class="zoomable" alt="Design Scaling on AWS architecture diagram" style="max-width:720px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em>High-level architecture for scaling to millions of users on AWS</em></p>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Interview Tip
+                    </div>
+                    <div class="shadcn-alert-description">AWS-specific knowledge is not required unless applying for an AWS-focused role. The <strong>general scaling principles</strong> discussed here apply broadly across cloud providers and on-premise infrastructure. Focus on the iterative approach: benchmark → profile → address bottleneck → repeat.</div>
+                </div>
+
+                <h2>Use Cases &amp; Constraints</h2>
+
+                <div class="table-wrapper" style="margin:1.5rem 0;">
+                    <table>
+                        <thead>
+                            <tr><th>Use Case</th><th>Description</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td><strong>Read/write requests</strong></td><td>User makes a read or write request; service processes and returns results</td></tr>
+                            <tr><td><strong>Scale iteratively</strong></td><td>Service evolves from serving a small number of users to millions</td></tr>
+                            <tr><td><strong>General patterns</strong></td><td>Discuss general scaling patterns as the architecture evolves</td></tr>
+                            <tr><td><strong>High availability</strong></td><td>Service remains available even during partial failures</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Back-of-the-Envelope Estimates</div>
+                        <p class="shadcn-card-description">Key numbers to ground the design at full scale</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li>10 million users at full scale</li>
+                            <li>1 billion writes/month → ~400 writes/sec</li>
+                            <li>100 billion reads/month → ~40,000 reads/sec</li>
+                            <li><strong>100:1 read-to-write ratio</strong></li>
+                            <li>1 KB per write → 1 TB new content/month</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Progressive Scaling Architecture
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Single EC2 Instance"] --> B["Separate DB: RDS"]
+    B --> C["Add ElastiCache"]
+    C --> D["Multiple EC2 behind ELB"]
+    D --> E["Auto Scaling Group"]
+    E --> F["Multi-AZ Deployment"]
+    F --> G["Add CloudFront CDN"]
+    G --> H["Route 53 DNS"]
+                    </div>
+                </div>
+
+                <h2>Key Design Decisions — Iterative Scaling</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Start Simple</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Begin with a <strong>single EC2 instance</strong> running the web server and MySQL database. Use <strong>vertical scaling</strong> first — simply choose a bigger box. Monitor CPU, memory, IO, and network to identify bottlenecks.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Separate Components</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Move the database to a <strong>separate instance</strong> (Amazon RDS). Add a <strong>MySQL read replica</strong> to handle read-heavy traffic. Separate the web server from the database to scale independently.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Add Caching &amp; CDN</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Add <strong>ElastiCache</strong> (Memcached/Redis) to cache database queries and session data. Use a <strong>CDN</strong> (CloudFront) to serve static content globally. These dramatically reduce database load and latency.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Horizontal Scaling</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Add an <strong>Elastic Load Balancer (ELB)</strong> distributing traffic across multiple web servers. Enable <strong>Auto Scaling</strong> to add/remove instances based on demand. Deploy across <strong>multiple Availability Zones</strong> for fault tolerance.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Architecture Evolution</h2>
+
+                <div class="shadcn-card" style="margin:1.5rem 0;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Progressive Scaling Steps</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;">
+                            <li><strong>1 user:</strong> Single EC2 instance (web server + MySQL) — vertical scaling</li>
+                            <li><strong>Users+:</strong> Separate MySQL to Amazon RDS, add read replica</li>
+                            <li><strong>Users++:</strong> Add ElastiCache for read-heavy queries, CDN for static assets</li>
+                            <li><strong>Users+++:</strong> ELB → multiple web server instances with Auto Scaling</li>
+                            <li><strong>Users++++:</strong> Multiple Availability Zones, MySQL Multi-AZ deployment</li>
+                            <li><strong>Millions:</strong> Additional read replicas, sharding for writes, microservices decomposition, dedicated analytics infrastructure</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="shadcn-alert shadcn-alert-info" style="margin:1.5rem 0;">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Iterative Approach
+                    </div>
+                    <div class="shadcn-alert-description">The key pattern is: <strong>(1) Benchmark/Load Test</strong> → <strong>(2) Profile for bottlenecks</strong> → <strong>(3) Address bottleneck while evaluating trade-offs</strong> → <strong>(4) Repeat</strong>. Don't over-engineer upfront — add complexity only when metrics show it's needed.</div>
+                </div>
+
+                <h2>AWS Components Summary</h2>
+
+                <div class="table-wrapper" style="margin:1.5rem 0;">
+                    <table>
+                        <thead>
+                            <tr><th>Component</th><th>AWS Service</th><th>Role</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>Compute</td><td>EC2 + Auto Scaling</td><td>Web/app servers that scale horizontally</td></tr>
+                            <tr><td>Database</td><td>Amazon RDS (MySQL)</td><td>Managed relational database with read replicas</td></tr>
+                            <tr><td>Cache</td><td>ElastiCache</td><td>In-memory caching for hot queries and sessions</td></tr>
+                            <tr><td>CDN</td><td>CloudFront</td><td>Global content delivery for static assets</td></tr>
+                            <tr><td>Load Balancer</td><td>ELB</td><td>Distributes traffic across multiple instances</td></tr>
+                            <tr><td>DNS</td><td>Route 53</td><td>DNS with health checks and failover routing</td></tr>
+                            <tr><td>Storage</td><td>S3</td><td>Object storage for static files and logs</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card" style="margin:1.5rem 0;border:2px solid var(--primary);">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">📖 Full Solution</div>
+                        <p class="shadcn-card-description">Dive into the complete step-by-step solution with detailed AWS architecture evolution and scaling discussion.</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <p><a href="https://github.com/donnemartin/system-design-primer/tree/master/solutions/system_design/scaling_aws" target="_blank" rel="noopener"><strong>View the full Scaling on AWS solution on GitHub →</strong></a></p>
+                    </div>
+                </div>
+            </div>
+        `
+    }
+
+};
diff --git a/website/js/chapters/chapters-g.js b/website/js/chapters/chapters-g.js
new file mode 100644
index 00000000000..3afb4189be9
--- /dev/null
+++ b/website/js/chapters/chapters-g.js
@@ -0,0 +1,1159 @@
+/**
+ * Part G: Object-Oriented Design Problems — Chapters 28–33
+ * Design Hash Map, Design LRU Cache, Design Call Center,
+ * Design Deck of Cards, Design Parking Lot, Design Online Chat
+ *
+ * Registered into global CHAPTERS_G object.
+ */
+
+const CHAPTERS_G = {
+
+    // ================================================================
+    // Chapter 28 — Design Hash Map
+    // ================================================================
+    'oo-hash-map': {
+        part: 'Part G',
+        title: 'Design Hash Map',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 28 — OO Design</div>
+                <h1>Design Hash Map</h1>
+                <p class="chapter-subtitle">Design a hash table that maps keys to values with O(1) average-case lookup, insert, and delete — handling collisions and dynamic resizing gracefully.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Problem Statement
+                    </div>
+                    <div class="shadcn-alert-description">Design a <strong>HashTable</strong> class that supports <code>get</code>, <code>set</code>, and <code>remove</code> operations. Handle hash collisions, support dynamic resizing when the load factor exceeds a threshold, and ensure O(1) average time complexity for all operations.</div>
+                </div>
+
+                <h2>Key Design Concepts</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Hash Function</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Maps keys to array indices. A good hash function distributes keys uniformly to minimize collisions.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Collision Handling</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p><strong>Chaining</strong>: each bucket stores a linked list of entries. <strong>Open addressing</strong>: probes for the next available slot.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Load Factor</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Ratio of stored items to table size. When it exceeds a threshold (e.g. 0.75), the table resizes to maintain performance.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Dynamic Resizing</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>When the load factor is exceeded, allocate a larger array and rehash all existing entries into the new table.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Class Hierarchy</h2>
+
+                <div class="table-wrapper" style="overflow-x:auto;">
+                    <table style="width:100%;border-collapse:collapse;">
+                        <thead>
+                            <tr>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Class</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Responsibility</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Key Methods / Fields</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-blue">HashTable</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Core data structure managing the array of buckets</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>get(key)</code>, <code>set(key, val)</code>, <code>remove(key)</code>, <code>_hash(key)</code>, <code>_resize()</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;"><span class="shadcn-badge shadcn-badge-outline">Item</span></td>
+                                <td style="padding:0.75rem;">Represents a key-value pair stored in the table</td>
+                                <td style="padding:0.75rem;"><code>key</code>, <code>value</code></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📐</span> Hash Map Class Structure
+                        <span class="diagram-type-badge">Class Diagram</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+classDiagram
+    class HashTable {
+        +size : int
+        +table : list
+        +get(key) value
+        +set(key, value)
+        +remove(key)
+        -_hash_function(key) int
+    }
+    class Item {
+        +key
+        +value
+    }
+    HashTable "1" --> "*" Item : contains
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> set() Operation Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["set(key, value)"] --> B["Hash the key"]
+    B --> C["Get bucket index"]
+    C --> D{"Key exists in bucket?"}
+    D -->|Yes| E["Update existing Item value"]
+    D -->|No| F["Append new Item to bucket"]
+    E --> G["Done"]
+    F --> G
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Design Considerations</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Key Decisions</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px">
+                            <li><strong>Chaining vs Open Addressing</strong> — Chaining is simpler to implement and handles high load factors well; open addressing has better cache performance but degrades as load increases.</li>
+                            <li><strong>Resize threshold</strong> — A load factor of 0.75 balances memory usage and collision frequency. Resizing typically doubles the table capacity.</li>
+                            <li><strong>Hash function quality</strong> — A poor hash leads to clustering. Use prime-number modular arithmetic or well-known hash algorithms.</li>
+                            <li><strong>Thread safety</strong> — Consider concurrent access: fine-grained locking per bucket vs a global lock vs lock-free designs.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                        Jupyter Notebook Solution
+                    </div>
+                    <div class="shadcn-alert-description">Work through the full implementation with test cases in the interactive notebook: <a href="../solutions/viewer.html?notebook=object_oriented_design/hash_table/hash_map.ipynb" target="_blank" rel="noopener"><strong>hash_map.ipynb</strong></a></div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📓</span> <a href="../solutions/viewer.html?notebook=object_oriented_design/hash_table/hash_map.ipynb" target="_blank" rel="noopener">Hash Map — Jupyter Notebook Solution</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://en.wikipedia.org/wiki/Hash_table" target="_blank" rel="noopener">Hash table — Wikipedia</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 29 — Design LRU Cache
+    // ================================================================
+    'oo-lru-cache': {
+        part: 'Part G',
+        title: 'Design LRU Cache',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 29 — OO Design</div>
+                <h1>Design LRU Cache</h1>
+                <p class="chapter-subtitle">Design a cache with a fixed capacity that evicts the least recently used item when full — achieving O(1) time for both reads and writes.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Problem Statement
+                    </div>
+                    <div class="shadcn-alert-description">Design a <strong>Least Recently Used (LRU) Cache</strong> with a fixed capacity. Support <code>get(key)</code> and <code>set(key, value)</code> in O(1) time. When the cache is full, evict the least recently used entry before inserting a new one.</div>
+                </div>
+
+                <h2>Key Design Concepts</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Doubly Linked List</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Maintains access order. The most recently used item is at the head; the least recently used is at the tail for O(1) eviction.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Hash Map</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Maps keys directly to linked list nodes, enabling O(1) lookup without traversing the list.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Eviction Policy</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>When the cache reaches capacity, remove the node at the tail (least recently used) before inserting the new entry.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Move to Head</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>On every <code>get</code> or <code>set</code>, move the accessed node to the head of the list to mark it as most recently used.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Class Hierarchy</h2>
+
+                <div class="table-wrapper" style="overflow-x:auto;">
+                    <table style="width:100%;border-collapse:collapse;">
+                        <thead>
+                            <tr>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Class</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Responsibility</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Key Methods / Fields</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-blue">LRUCache</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Manages the cache with hash map + linked list</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>get(key)</code>, <code>set(key, val)</code>, <code>_move_to_head(node)</code>, <code>_evict()</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;"><span class="shadcn-badge shadcn-badge-outline">Node</span></td>
+                                <td style="padding:0.75rem;">Doubly-linked list node holding key, value, prev, next</td>
+                                <td style="padding:0.75rem;"><code>key</code>, <code>value</code>, <code>prev</code>, <code>next</code></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📐</span> LRU Cache Class Structure
+                        <span class="diagram-type-badge">Class Diagram</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+classDiagram
+    class LRUCache {
+        +size : int
+        +capacity : int
+        +lookup_map : map
+        +linked_list : LinkedList
+        +get(key) value
+        +set(key, value)
+        -_move_to_front(node)
+        -_remove_oldest()
+    }
+    class Node {
+        +key
+        +value
+        +prev : Node
+        +next : Node
+    }
+    LRUCache "1" --> "*" Node : manages
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">🔄</span> get() and set() Operations
+                        <span class="diagram-type-badge">Sequence</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+sequenceDiagram
+    participant Client
+    participant Cache as LRUCache
+    participant Map as lookup_map
+    participant List as linked_list
+    Note over Client,List: get(key) Operation
+    Client->>Cache: get(key)
+    Cache->>Map: lookup key
+    alt Cache Hit
+        Map-->>Cache: node found
+        Cache->>List: move node to front
+        Cache-->>Client: return value
+    else Cache Miss
+        Map-->>Cache: not found
+        Cache-->>Client: return None
+    end
+    Note over Client,List: set(key, value) Operation
+    Client->>Cache: set(key, value)
+    Cache->>Map: lookup key
+    alt Key Exists
+        Map-->>Cache: node found
+        Cache->>List: update and move to front
+    else New Key
+        alt Cache Full
+            Cache->>List: remove oldest node
+            Cache->>Map: delete oldest key
+        end
+        Cache->>List: add new node to front
+        Cache->>Map: store new key
+    end
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Design Considerations</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Key Decisions</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px">
+                            <li><strong>Why doubly linked list?</strong> — Singly linked lists require O(n) to remove a node because you need the previous pointer. A doubly linked list enables O(1) removal.</li>
+                            <li><strong>Sentinel nodes</strong> — Use dummy head and tail nodes to avoid null-check edge cases when adding/removing from the list.</li>
+                            <li><strong>Thread safety</strong> — For concurrent access, consider read-write locks or a concurrent hash map with per-segment locking.</li>
+                            <li><strong>TTL support</strong> — Extend the design with a time-to-live field per entry and a background thread or lazy eviction.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                        Jupyter Notebook Solution
+                    </div>
+                    <div class="shadcn-alert-description">Work through the full implementation with test cases in the interactive notebook: <a href="../solutions/viewer.html?notebook=object_oriented_design/lru_cache/lru_cache.ipynb" target="_blank" rel="noopener"><strong>lru_cache.ipynb</strong></a></div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📓</span> <a href="../solutions/viewer.html?notebook=object_oriented_design/lru_cache/lru_cache.ipynb" target="_blank" rel="noopener">LRU Cache — Jupyter Notebook Solution</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://en.wikipedia.org/wiki/Cache_replacement_policies#LRU" target="_blank" rel="noopener">LRU Cache replacement policy — Wikipedia</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 30 — Design Call Center
+    // ================================================================
+    'oo-call-center': {
+        part: 'Part G',
+        title: 'Design Call Center',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 30 — OO Design</div>
+                <h1>Design Call Center</h1>
+                <p class="chapter-subtitle">Model a call center with a hierarchy of employees — routing incoming calls to available staff and escalating when necessary.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Problem Statement
+                    </div>
+                    <div class="shadcn-alert-description">Design a <strong>Call Center</strong> with three levels of employees: <strong>respondent</strong>, <strong>manager</strong>, and <strong>director</strong>. An incoming call is first assigned to an available respondent. If the respondent can't handle the call, it escalates to a manager, then to a director.</div>
+                </div>
+
+                <h2>Key Design Concepts</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Employee Hierarchy</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Three tiers: <strong>Respondent → Manager → Director</strong>. Each level has different capabilities and authority to resolve calls.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Call Routing</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Incoming calls are dispatched to the first available employee at the lowest level. Use queues per level to track who is free.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Escalation</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>When an employee cannot handle a call, it escalates to the next tier. If no one at any level is available, the call is queued.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Inheritance</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>A base <code>Employee</code> class with shared logic; subclasses <code>Respondent</code>, <code>Manager</code>, <code>Director</code> override escalation behavior.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Class Hierarchy</h2>
+
+                <div class="table-wrapper" style="overflow-x:auto;">
+                    <table style="width:100%;border-collapse:collapse;">
+                        <thead>
+                            <tr>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Class</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Responsibility</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Key Methods / Fields</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-blue">CallCenter</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Manages employee queues and dispatches calls</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>dispatch_call(call)</code>, <code>notify_call_completed(call)</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-green">Employee</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Base class — tracks availability and current call</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>take_call(call)</code>, <code>complete_call()</code>, <code>escalate()</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-outline">Respondent / Manager / Director</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Subclasses defining rank-specific behavior</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Inherits from <code>Employee</code>, sets rank level</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;"><span class="shadcn-badge shadcn-badge-amber">Call</span></td>
+                                <td style="padding:0.75rem;">Represents an incoming call with a minimum required rank</td>
+                                <td style="padding:0.75rem;"><code>rank</code>, <code>state</code>, <code>handler</code></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📐</span> Call Center Class Structure
+                        <span class="diagram-type-badge">Class Diagram</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+classDiagram
+    class CallCenter {
+        +respondents : list
+        +managers : list
+        +directors : list
+        +dispatch_call(call)
+    }
+    class Employee {
+        &lt;&lt;abstract&gt;&gt;
+        +call : Call
+        +can_handle(call) bool
+        +take_call(call)
+        +complete_call()
+    }
+    class Respondent
+    class Manager
+    class Director
+    class Call {
+        +rank : int
+        +caller : str
+    }
+    Employee <|-- Respondent
+    Employee <|-- Manager
+    Employee <|-- Director
+    CallCenter --> Employee : manages
+    Employee --> Call : handles
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Call Dispatch Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Incoming Call"] --> B{"Respondent available?"}
+    B -->|Yes| C["Assign to Respondent"]
+    B -->|No| D{"Manager available?"}
+    D -->|Yes| E["Escalate to Manager"]
+    D -->|No| F{"Director available?"}
+    F -->|Yes| G["Escalate to Director"]
+    F -->|No| H["Queue the Call"]
+    C --> I["Call Handled"]
+    E --> I
+    G --> I
+    H --> J["Retry when available"]
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Design Considerations</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Key Decisions</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px">
+                            <li><strong>Queue per rank</strong> — Maintain separate queues of available employees for each tier to enable fast lookup of the first free employee.</li>
+                            <li><strong>Call queuing</strong> — If all employees at every level are busy, hold the call in a waiting queue and assign it when someone frees up.</li>
+                            <li><strong>Escalation path</strong> — A call's <code>rank</code> field defines the minimum tier that can handle it. Escalation simply increments this rank.</li>
+                            <li><strong>Notification pattern</strong> — When a call completes, the employee notifies the call center so it can dispatch queued calls.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                        Jupyter Notebook Solution
+                    </div>
+                    <div class="shadcn-alert-description">Work through the full implementation with test cases in the interactive notebook: <a href="../solutions/viewer.html?notebook=object_oriented_design/call_center/call_center.ipynb" target="_blank" rel="noopener"><strong>call_center.ipynb</strong></a></div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📓</span> <a href="../solutions/viewer.html?notebook=object_oriented_design/call_center/call_center.ipynb" target="_blank" rel="noopener">Call Center — Jupyter Notebook Solution</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://en.wikipedia.org/wiki/Call_centre" target="_blank" rel="noopener">Call centre — Wikipedia</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 31 — Design Deck of Cards
+    // ================================================================
+    'oo-deck-of-cards': {
+        part: 'Part G',
+        title: 'Design Deck of Cards',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 31 — OO Design</div>
+                <h1>Design Deck of Cards</h1>
+                <p class="chapter-subtitle">Model a generic deck of cards using OOP — with support for shuffling, dealing, and extending to specific card games like Blackjack.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Problem Statement
+                    </div>
+                    <div class="shadcn-alert-description">Design a <strong>Deck of Cards</strong> using object-oriented principles. The deck should support shuffling and dealing cards. Demonstrate how to extend the design to support a specific game such as <strong>Blackjack</strong>, including hand scoring.</div>
+                </div>
+
+                <h2>Key Design Concepts</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Enums for Suits &amp; Values</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Use enumerations for <strong>Suit</strong> (Hearts, Diamonds, Clubs, Spades) and <strong>Face</strong> values to enforce type safety.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Inheritance &amp; Polymorphism</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>A base <code>Hand</code> class with game-specific subclasses like <code>BlackjackHand</code> that override scoring logic.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Shuffle &amp; Deal</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>The <code>Deck</code> encapsulates the collection of cards and provides <code>shuffle()</code> and <code>deal_card()</code> operations.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Extensibility</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Design for extension: new card games only need to subclass <code>Hand</code> and implement their own scoring — no changes to <code>Deck</code> or <code>Card</code>.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Class Hierarchy</h2>
+
+                <div class="table-wrapper" style="overflow-x:auto;">
+                    <table style="width:100%;border-collapse:collapse;">
+                        <thead>
+                            <tr>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Class</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Responsibility</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Key Methods / Fields</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-outline">Suit (Enum)</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Enumerates the four suits</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">HEARTS, DIAMONDS, CLUBS, SPADES</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-amber">Card</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">A single card with suit and face value</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>suit</code>, <code>value</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-blue">Deck</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Holds 52 cards, provides shuffle and deal</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>shuffle()</code>, <code>deal_card()</code>, <code>remaining_cards()</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-green">Hand</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Base class for a player's hand of cards</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>add_card(card)</code>, <code>score()</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;"><span class="shadcn-badge shadcn-badge-green">BlackjackHand</span></td>
+                                <td style="padding:0.75rem;">Extends Hand with Blackjack-specific scoring (Ace = 1 or 11)</td>
+                                <td style="padding:0.75rem;"><code>score()</code>, <code>is_bust()</code></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📐</span> Deck of Cards Class Structure
+                        <span class="diagram-type-badge">Class Diagram</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+classDiagram
+    class Suit {
+        &lt;&lt;enumeration&gt;&gt;
+        HEART
+        DIAMOND
+        CLUB
+        SPADE
+    }
+    class Card {
+        +suit : Suit
+        +value : int
+    }
+    class Deck {
+        +cards : list
+        +shuffle()
+        +deal_card() Card
+        +remaining() int
+    }
+    class Hand {
+        +cards : list
+        +add_card(card)
+        +score() int
+    }
+    class BlackjackHand {
+        +score() int
+        +is_bust() bool
+    }
+    Card --> Suit : has
+    Deck "1" --> "*" Card : contains
+    Hand "1" --> "*" Card : holds
+    Hand <|-- BlackjackHand
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Design Considerations</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Key Decisions</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px">
+                            <li><strong>Generic vs game-specific</strong> — Keep <code>Deck</code> and <code>Card</code> game-agnostic. Game rules live in <code>Hand</code> subclasses.</li>
+                            <li><strong>Ace handling in Blackjack</strong> — An Ace counts as 11 unless it causes a bust, in which case it becomes 1. The <code>score()</code> method must handle this dynamically.</li>
+                            <li><strong>Enum vs constants</strong> — Enums for suits and face values prevent invalid card creation and improve readability.</li>
+                            <li><strong>Multiple decks</strong> — For casino games, extend to support a "shoe" of multiple shuffled decks.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                        Jupyter Notebook Solution
+                    </div>
+                    <div class="shadcn-alert-description">Work through the full implementation with test cases in the interactive notebook: <a href="../solutions/viewer.html?notebook=object_oriented_design/deck_of_cards/deck_of_cards.ipynb" target="_blank" rel="noopener"><strong>deck_of_cards.ipynb</strong></a></div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📓</span> <a href="../solutions/viewer.html?notebook=object_oriented_design/deck_of_cards/deck_of_cards.ipynb" target="_blank" rel="noopener">Deck of Cards — Jupyter Notebook Solution</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://en.wikipedia.org/wiki/Standard_52-card_deck" target="_blank" rel="noopener">Standard 52-card deck — Wikipedia</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 32 — Design Parking Lot
+    // ================================================================
+    'oo-parking-lot': {
+        part: 'Part G',
+        title: 'Design Parking Lot',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 32 — OO Design</div>
+                <h1>Design Parking Lot</h1>
+                <p class="chapter-subtitle">Model a multi-level parking lot that handles different vehicle sizes, assigns spots intelligently, and tracks availability in real time.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Problem Statement
+                    </div>
+                    <div class="shadcn-alert-description">Design a <strong>Parking Lot</strong> with multiple levels. Each level has rows of spots in three sizes: <strong>small</strong> (motorcycle), <strong>compact</strong> (car), and <strong>large</strong> (bus). A vehicle is assigned to an appropriate spot based on its size. Track available spots per level.</div>
+                </div>
+
+                <h2>Key Design Concepts</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">Vehicle Sizing</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Vehicles have different sizes: <strong>Motorcycle</strong> fits in any spot, <strong>Car</strong> fits in compact or large, <strong>Bus</strong> requires multiple large spots.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Spot Assignment</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Each level tries to park the vehicle in the smallest suitable spot, scanning rows to find availability.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Multi-Level Structure</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>The <code>ParkingLot</code> contains multiple <code>Level</code> objects. When one level is full, try the next level.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">Availability Tracking</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Each level tracks its available spot count. The lot reports total availability across all levels.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Class Hierarchy</h2>
+
+                <div class="table-wrapper" style="overflow-x:auto;">
+                    <table style="width:100%;border-collapse:collapse;">
+                        <thead>
+                            <tr>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Class</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Responsibility</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Key Methods / Fields</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-blue">ParkingLot</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Top-level container managing multiple levels</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>park_vehicle(vehicle)</code>, <code>available_spots()</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-green">Level</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">A single floor with rows of parking spots</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>park_vehicle(vehicle)</code>, <code>available_spots()</code>, <code>unpark(spot)</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-amber">ParkingSpot</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">A single spot with a size (small, compact, large)</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>can_fit(vehicle)</code>, <code>park(vehicle)</code>, <code>unpark()</code>, <code>is_available</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-outline">Vehicle (Base)</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Abstract base class defining vehicle size</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>size</code>, <code>spots_needed</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;"><span class="shadcn-badge shadcn-badge-outline">Motorcycle / Car / Bus</span></td>
+                                <td style="padding:0.75rem;">Concrete vehicle types with specific size constraints</td>
+                                <td style="padding:0.75rem;">Inherits from <code>Vehicle</code></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📐</span> Parking Lot Class Structure
+                        <span class="diagram-type-badge">Class Diagram</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+classDiagram
+    class ParkingLot {
+        +levels : list
+        +park_vehicle(vehicle) bool
+    }
+    class Level {
+        +floor : int
+        +spots : list
+        +park_vehicle(vehicle) bool
+        +available_spots() int
+    }
+    class ParkingSpot {
+        +size : str
+        +vehicle : Vehicle
+        +is_available() bool
+        +park(vehicle)
+        +remove_vehicle()
+    }
+    class Vehicle {
+        &lt;&lt;abstract&gt;&gt;
+        +spots_needed : int
+        +size : str
+        +license_plate : str
+    }
+    class Motorcycle
+    class Car
+    class Bus
+    ParkingLot "1" --> "*" Level : has
+    Level "1" --> "*" ParkingSpot : contains
+    ParkingSpot --> Vehicle : holds
+    Vehicle <|-- Motorcycle
+    Vehicle <|-- Car
+    Vehicle <|-- Bus
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📊</span> Vehicle Parking Flow
+                        <span class="diagram-type-badge">Flow</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+flowchart TD
+    A["Vehicle Arrives"] --> B["Find Level with Space"]
+    B --> C{"Level found?"}
+    C -->|No| D["Parking Full"]
+    C -->|Yes| E["Find Spot matching size"]
+    E --> F{"Spot available?"}
+    F -->|No| G["Try next Level"]
+    G --> C
+    F -->|Yes| H["Park Vehicle in Spot"]
+    H --> I["spot.is_available = false"]
+    I --> J["Return Success"]
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Design Considerations</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Key Decisions</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px">
+                            <li><strong>Bus spanning multiple spots</strong> — A bus requires several contiguous large spots. The level must find a row with enough consecutive available large spots.</li>
+                            <li><strong>Spot selection strategy</strong> — Use the smallest spot that fits the vehicle to maximize capacity. A motorcycle can park in any spot, but prefers a small one.</li>
+                            <li><strong>Concurrency</strong> — In a real parking system, spot assignment must be atomic to prevent two vehicles from being assigned the same spot.</li>
+                            <li><strong>Extensibility</strong> — Adding new vehicle types (e.g. handicapped, electric with charging) should require minimal code changes.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                        Jupyter Notebook Solution
+                    </div>
+                    <div class="shadcn-alert-description">Work through the full implementation with test cases in the interactive notebook: <a href="../solutions/viewer.html?notebook=object_oriented_design/parking_lot/parking_lot.ipynb" target="_blank" rel="noopener"><strong>parking_lot.ipynb</strong></a></div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📓</span> <a href="../solutions/viewer.html?notebook=object_oriented_design/parking_lot/parking_lot.ipynb" target="_blank" rel="noopener">Parking Lot — Jupyter Notebook Solution</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://en.wikipedia.org/wiki/Parking_lot" target="_blank" rel="noopener">Parking lot — Wikipedia</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 33 — Design Online Chat
+    // ================================================================
+    'oo-online-chat': {
+        part: 'Part G',
+        title: 'Design Online Chat',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 33 — OO Design</div>
+                <h1>Design Online Chat</h1>
+                <p class="chapter-subtitle">Model an online chat system supporting one-on-one and group conversations, user presence, and message history.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Problem Statement
+                    </div>
+                    <div class="shadcn-alert-description">Design an <strong>Online Chat</strong> system (similar to Facebook Messenger). Support <strong>1:1 private chats</strong> and <strong>group chats</strong>. Track user status (online, offline, away). Store message history and allow users to add/remove participants from group conversations.</div>
+                </div>
+
+                <h2>Key Design Concepts</h2>
+
+                <div class="concept-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;">
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-blue">User Management</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Each user has a unique ID, profile, buddy list, and a <strong>status</strong> (online, offline, away). The server tracks all connected users.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-green">Conversation Model</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>A base <code>Conversation</code> class with <code>PrivateChat</code> (two users) and <code>GroupChat</code> (multiple users with admin controls) subclasses.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-amber">Message History</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>Each conversation stores an ordered list of <code>Message</code> objects with timestamps, sender info, and content.</p>
+                        </div>
+                    </div>
+                    <div class="concept-card shadcn-card">
+                        <div class="shadcn-card-header">
+                            <div class="shadcn-card-title"><span class="shadcn-badge shadcn-badge-outline">User Status</span></div>
+                        </div>
+                        <div class="shadcn-card-content">
+                            <p>An enum representing <strong>Online</strong>, <strong>Offline</strong>, and <strong>Away</strong>. Status changes are broadcast to the user's contacts.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h2>Class Hierarchy</h2>
+
+                <div class="table-wrapper" style="overflow-x:auto;">
+                    <table style="width:100%;border-collapse:collapse;">
+                        <thead>
+                            <tr>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Class</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Responsibility</th>
+                                <th style="text-align:left;padding:0.75rem;border-bottom:2px solid var(--border);">Key Methods / Fields</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-blue">ChatServer</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Central server managing users and conversations</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>sign_in(user)</code>, <code>sign_out(user)</code>, <code>send_message(msg)</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-green">User</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Represents a user with profile, status, and buddy list</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>id</code>, <code>name</code>, <code>status</code>, <code>contacts</code>, <code>conversations</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-outline">UserStatus (Enum)</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Enumerates possible user states</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">ONLINE, OFFLINE, AWAY</td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-amber">Conversation</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Base class for private and group chats</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>participants</code>, <code>messages</code>, <code>add_message(msg)</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><span class="shadcn-badge shadcn-badge-amber">GroupChat</span></td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);">Extends Conversation with admin controls</td>
+                                <td style="padding:0.75rem;border-bottom:1px solid var(--border);"><code>add_user(user)</code>, <code>remove_user(user)</code>, <code>admins</code></td>
+                            </tr>
+                            <tr>
+                                <td style="padding:0.75rem;"><span class="shadcn-badge shadcn-badge-outline">Message</span></td>
+                                <td style="padding:0.75rem;">A single message with content, sender, and timestamp</td>
+                                <td style="padding:0.75rem;"><code>content</code>, <code>sender</code>, <code>timestamp</code></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">📐</span> Online Chat Class Structure
+                        <span class="diagram-type-badge">Class Diagram</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+classDiagram
+    class ChatServer {
+        +users : list
+        +conversations : list
+        +add_user(user)
+        +remove_user(user)
+        +create_conversation(users) Conversation
+        +send_message(user, conversation, content)
+    }
+    class User {
+        +id : int
+        +name : str
+        +status : UserStatus
+    }
+    class UserStatus {
+        &lt;&lt;enumeration&gt;&gt;
+        ONLINE
+        OFFLINE
+        AWAY
+    }
+    class Conversation {
+        +users : list
+        +messages : list
+        +add_message(message)
+    }
+    class GroupChat {
+        +add_user(user)
+        +remove_user(user)
+    }
+    class Message {
+        +content : str
+        +timestamp : datetime
+        +sender : User
+    }
+    ChatServer "1" --> "*" User : manages
+    ChatServer "1" --> "*" Conversation : hosts
+    User --> UserStatus : has
+    Conversation <|-- GroupChat
+    Conversation "1" --> "*" Message : contains
+    Message --> User : sent by
+                    </div>
+                </div>
+
+                <div class="mermaid-diagram">
+                    <div class="mermaid-diagram-header">
+                        <span class="diagram-icon">🔄</span> Send Message Flow
+                        <span class="diagram-type-badge">Sequence</span>
+                    </div>
+                    <div class="mermaid-display"></div>
+                    <div class="mermaid-code">
+sequenceDiagram
+    participant A as User A
+    participant Server as ChatServer
+    participant Conv as Conversation
+    participant B as User B
+    A->>Server: send_message(conversation, content)
+    Server->>Server: validate user and conversation
+    Server->>Conv: add_message(message)
+    Conv->>Conv: store in messages list
+    Server->>B: notify new message
+    B-->>Server: acknowledge
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Design Considerations</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Key Decisions</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px">
+                            <li><strong>Private vs Group chat</strong> — A <code>PrivateChat</code> always has exactly two participants. A <code>GroupChat</code> can have many, with add/remove semantics and admin roles.</li>
+                            <li><strong>Status notifications</strong> — When a user's status changes, notify all contacts using an observer pattern rather than polling.</li>
+                            <li><strong>Message delivery</strong> — For offline users, queue messages and deliver them upon sign-in. For online users, push messages in real time.</li>
+                            <li><strong>Scalability hooks</strong> — The OO model maps to a distributed system: the <code>ChatServer</code> becomes a cluster, conversations shard by ID, and message queues handle delivery.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                        Jupyter Notebook Solution
+                    </div>
+                    <div class="shadcn-alert-description">Work through the full implementation with test cases in the interactive notebook: <a href="../solutions/viewer.html?notebook=object_oriented_design/online_chat/online_chat.ipynb" target="_blank" rel="noopener"><strong>online_chat.ipynb</strong></a></div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📓</span> <a href="../solutions/viewer.html?notebook=object_oriented_design/online_chat/online_chat.ipynb" target="_blank" rel="noopener">Online Chat — Jupyter Notebook Solution</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://en.wikipedia.org/wiki/Online_chat" target="_blank" rel="noopener">Online chat — Wikipedia</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+};
diff --git a/website/js/chapters/chapters-h.js b/website/js/chapters/chapters-h.js
new file mode 100644
index 00000000000..221298424f1
--- /dev/null
+++ b/website/js/chapters/chapters-h.js
@@ -0,0 +1,849 @@
+/**
+ * Part H: Appendix — Chapters 34–38
+ * Powers of Two Table, Latency Numbers, Additional Questions,
+ * Real World Architectures, Engineering Blogs
+ *
+ * Registered into global CHAPTERS_H object.
+ */
+
+const CHAPTERS_H = {
+
+    // ================================================================
+    // Chapter 34 — Powers of Two Table
+    // ================================================================
+    'powers-of-two': {
+        part: 'Part H',
+        title: 'Powers of Two Table',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 34 — Appendix</div>
+                <h1>Powers of Two Table</h1>
+                <p class="chapter-subtitle">A quick-reference table for back-of-the-envelope calculations — essential for estimating storage, memory, and bandwidth requirements in system design interviews.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Why This Matters
+                    </div>
+                    <div class="shadcn-alert-description">You'll often be asked to do <strong>back-of-the-envelope estimates</strong> in system design interviews — for example, determining how long it takes to generate 100 image thumbnails from disk, or how much memory a data structure will consume. Knowing powers of two by heart lets you quickly convert between KB, MB, GB, and TB without a calculator.</div>
+                </div>
+
+                <h2>Powers of Two Reference</h2>
+
+                <div class="table-wrapper">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Power</th>
+                                <th>Exact Value</th>
+                                <th>Approx Value</th>
+                                <th>Bytes</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td><span class="shadcn-badge shadcn-badge-outline">2<sup>7</sup></span></td>
+                                <td>128</td>
+                                <td>—</td>
+                                <td>—</td>
+                            </tr>
+                            <tr>
+                                <td><span class="shadcn-badge shadcn-badge-outline">2<sup>8</sup></span></td>
+                                <td>256</td>
+                                <td>—</td>
+                                <td>—</td>
+                            </tr>
+                            <tr>
+                                <td><span class="shadcn-badge shadcn-badge-blue">2<sup>10</sup></span></td>
+                                <td>1,024</td>
+                                <td>1 thousand</td>
+                                <td><strong>1 KB</strong></td>
+                            </tr>
+                            <tr>
+                                <td><span class="shadcn-badge shadcn-badge-outline">2<sup>16</sup></span></td>
+                                <td>65,536</td>
+                                <td>—</td>
+                                <td>64 KB</td>
+                            </tr>
+                            <tr>
+                                <td><span class="shadcn-badge shadcn-badge-green">2<sup>20</sup></span></td>
+                                <td>1,048,576</td>
+                                <td>1 million</td>
+                                <td><strong>1 MB</strong></td>
+                            </tr>
+                            <tr>
+                                <td><span class="shadcn-badge shadcn-badge-amber">2<sup>30</sup></span></td>
+                                <td>1,073,741,824</td>
+                                <td>1 billion</td>
+                                <td><strong>1 GB</strong></td>
+                            </tr>
+                            <tr>
+                                <td><span class="shadcn-badge shadcn-badge-outline">2<sup>32</sup></span></td>
+                                <td>4,294,967,296</td>
+                                <td>—</td>
+                                <td>4 GB</td>
+                            </tr>
+                            <tr>
+                                <td><span class="shadcn-badge shadcn-badge-destructive">2<sup>40</sup></span></td>
+                                <td>1,099,511,627,776</td>
+                                <td>1 trillion</td>
+                                <td><strong>1 TB</strong></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Quick Mental Math Tips</div>
+                        <p class="shadcn-card-description">Useful shortcuts for estimation</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px">
+                            <li><strong>1 KB</strong> ≈ 1 thousand bytes — a short email or text snippet</li>
+                            <li><strong>1 MB</strong> ≈ 1 million bytes — a high-resolution photo or a minute of MP3 audio</li>
+                            <li><strong>1 GB</strong> ≈ 1 billion bytes — a movie in SD or ~1000 photos</li>
+                            <li><strong>1 TB</strong> ≈ 1 trillion bytes — roughly 500 hours of HD video</li>
+                            <li>Each jump of <strong>10 powers</strong> ≈ multiply by <strong>~1000</strong></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="https://en.wikipedia.org/wiki/Power_of_two" target="_blank" rel="noopener">Powers of two</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 35 — Latency Numbers Every Programmer Should Know
+    // ================================================================
+    'latency-numbers': {
+        part: 'Part H',
+        title: 'Latency Numbers',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 35 — Appendix</div>
+                <h1>Latency Numbers Every Programmer Should Know</h1>
+                <p class="chapter-subtitle">Memorize these order-of-magnitude latency figures to make quick, informed decisions during system design discussions.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Core Reference
+                    </div>
+                    <div class="shadcn-alert-description">These numbers give you an intuitive sense of the <strong>relative costs</strong> of different operations. Knowing that a main memory reference is ~200× faster than an SSD read can guide caching and architecture decisions instantly.</div>
+                </div>
+
+                <h2>Latency Comparison Numbers</h2>
+
+                <div class="table-wrapper">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Operation</th>
+                                <th>Latency (ns)</th>
+                                <th>Latency (μs)</th>
+                                <th>Latency (ms)</th>
+                                <th>Notes</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>L1 cache reference</td>
+                                <td><span class="shadcn-badge shadcn-badge-green">0.5 ns</span></td>
+                                <td>—</td>
+                                <td>—</td>
+                                <td>—</td>
+                            </tr>
+                            <tr>
+                                <td>Branch mispredict</td>
+                                <td><span class="shadcn-badge shadcn-badge-green">5 ns</span></td>
+                                <td>—</td>
+                                <td>—</td>
+                                <td>—</td>
+                            </tr>
+                            <tr>
+                                <td>L2 cache reference</td>
+                                <td><span class="shadcn-badge shadcn-badge-green">7 ns</span></td>
+                                <td>—</td>
+                                <td>—</td>
+                                <td>14× L1 cache</td>
+                            </tr>
+                            <tr>
+                                <td>Mutex lock/unlock</td>
+                                <td><span class="shadcn-badge shadcn-badge-green">25 ns</span></td>
+                                <td>—</td>
+                                <td>—</td>
+                                <td>—</td>
+                            </tr>
+                            <tr>
+                                <td>Main memory reference</td>
+                                <td><span class="shadcn-badge shadcn-badge-green">100 ns</span></td>
+                                <td>—</td>
+                                <td>—</td>
+                                <td>20× L2 cache, 200× L1 cache</td>
+                            </tr>
+                            <tr>
+                                <td>Compress 1K bytes with Zippy</td>
+                                <td><span class="shadcn-badge shadcn-badge-blue">10,000 ns</span></td>
+                                <td>10 μs</td>
+                                <td>—</td>
+                                <td>—</td>
+                            </tr>
+                            <tr>
+                                <td>Send 1 KB over 1 Gbps network</td>
+                                <td><span class="shadcn-badge shadcn-badge-blue">10,000 ns</span></td>
+                                <td>10 μs</td>
+                                <td>—</td>
+                                <td>—</td>
+                            </tr>
+                            <tr>
+                                <td>Read 4 KB randomly from SSD*</td>
+                                <td><span class="shadcn-badge shadcn-badge-blue">150,000 ns</span></td>
+                                <td>150 μs</td>
+                                <td>—</td>
+                                <td>~1 GB/sec SSD</td>
+                            </tr>
+                            <tr>
+                                <td>Read 1 MB sequentially from memory</td>
+                                <td><span class="shadcn-badge shadcn-badge-blue">250,000 ns</span></td>
+                                <td>250 μs</td>
+                                <td>—</td>
+                                <td>—</td>
+                            </tr>
+                            <tr>
+                                <td>Round trip within same datacenter</td>
+                                <td><span class="shadcn-badge shadcn-badge-blue">500,000 ns</span></td>
+                                <td>500 μs</td>
+                                <td>—</td>
+                                <td>—</td>
+                            </tr>
+                            <tr>
+                                <td>Read 1 MB sequentially from SSD*</td>
+                                <td><span class="shadcn-badge shadcn-badge-amber">1,000,000 ns</span></td>
+                                <td>1,000 μs</td>
+                                <td>1 ms</td>
+                                <td>~1 GB/sec SSD, 4× memory</td>
+                            </tr>
+                            <tr>
+                                <td>HDD seek</td>
+                                <td><span class="shadcn-badge shadcn-badge-amber">10,000,000 ns</span></td>
+                                <td>10,000 μs</td>
+                                <td>10 ms</td>
+                                <td>20× datacenter roundtrip</td>
+                            </tr>
+                            <tr>
+                                <td>Read 1 MB sequentially from 1 Gbps</td>
+                                <td><span class="shadcn-badge shadcn-badge-amber">10,000,000 ns</span></td>
+                                <td>10,000 μs</td>
+                                <td>10 ms</td>
+                                <td>40× memory, 10× SSD</td>
+                            </tr>
+                            <tr>
+                                <td>Read 1 MB sequentially from HDD</td>
+                                <td><span class="shadcn-badge shadcn-badge-amber">30,000,000 ns</span></td>
+                                <td>30,000 μs</td>
+                                <td>30 ms</td>
+                                <td>120× memory, 30× SSD</td>
+                            </tr>
+                            <tr>
+                                <td>Send packet CA → Netherlands → CA</td>
+                                <td><span class="shadcn-badge shadcn-badge-destructive">150,000,000 ns</span></td>
+                                <td>150,000 μs</td>
+                                <td>150 ms</td>
+                                <td>—</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="shadcn-card" style="margin-top:1.5rem;">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Unit Conversions</div>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px;margin:0">
+                            <li><strong>1 ns</strong> = 10<sup>−9</sup> seconds</li>
+                            <li><strong>1 μs</strong> = 10<sup>−6</sup> seconds = 1,000 ns</li>
+                            <li><strong>1 ms</strong> = 10<sup>−3</sup> seconds = 1,000 μs = 1,000,000 ns</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Handy Metrics</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Throughput &amp; Round-Trip Rules of Thumb</div>
+                        <p class="shadcn-card-description">Derived from the latency numbers above</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul style="padding-left:18px">
+                            <li><span class="shadcn-badge shadcn-badge-amber" style="margin-right:6px;">HDD</span> Read sequentially from HDD at <strong>30 MB/s</strong></li>
+                            <li><span class="shadcn-badge shadcn-badge-blue" style="margin-right:6px;">Network</span> Read sequentially from 1 Gbps Ethernet at <strong>100 MB/s</strong></li>
+                            <li><span class="shadcn-badge shadcn-badge-green" style="margin-right:6px;">SSD</span> Read sequentially from SSD at <strong>1 GB/s</strong></li>
+                            <li><span class="shadcn-badge shadcn-badge-green" style="margin-right:6px;">Memory</span> Read sequentially from main memory at <strong>4 GB/s</strong></li>
+                            <li><span class="shadcn-badge shadcn-badge-destructive" style="margin-right:6px;">WAN</span> <strong>6–7</strong> world-wide round trips per second</li>
+                            <li><span class="shadcn-badge shadcn-badge-blue" style="margin-right:6px;">DC</span> <strong>2,000</strong> round trips per second within a data center</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h3>Further Reading</h3>
+                <ul class="resource-list">
+                    <li><span class="resource-icon">📎</span> <a href="https://gist.github.com/jboner/2841832" target="_blank" rel="noopener">Latency numbers every programmer should know - 1</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://gist.github.com/hellerbarde/2843375" target="_blank" rel="noopener">Latency numbers every programmer should know - 2</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="http://www.cs.cornell.edu/projects/ladis2009/talks/dean-keynote-ladis2009.pdf" target="_blank" rel="noopener">Designs, lessons, and advice from building large distributed systems</a></li>
+                    <li><span class="resource-icon">📎</span> <a href="https://static.googleusercontent.com/media/research.google.com/en//people/jeff/stanford-295-talk.pdf" target="_blank" rel="noopener">Software Engineering Advice from Building Large-Scale Distributed Systems</a></li>
+                </ul>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 36 — Additional System Design Interview Questions
+    // ================================================================
+    'additional-questions': {
+        part: 'Part H',
+        title: 'Additional Questions',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 36 — Appendix</div>
+                <h1>Additional System Design Interview Questions</h1>
+                <p class="chapter-subtitle">Common system design interview questions with links to resources on how to solve each — use these for extra practice beyond the core exercises.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Practice Tip
+                    </div>
+                    <div class="shadcn-alert-description">Each of these questions can be approached using the same structured framework: <strong>clarify requirements → estimate scale → define API → design high-level architecture → deep-dive into components → identify bottlenecks</strong>. The linked references show how experts think through each problem.</div>
+                </div>
+
+                <h2>Questions &amp; References</h2>
+
+                <div class="table-wrapper">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Question</th>
+                                <th>Reference(s)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Design a file sync service like Dropbox</td>
+                                <td><a href="https://www.youtube.com/watch?v=PE4gwstWhmc" target="_blank" rel="noopener">youtube.com</a></td>
+                            </tr>
+                            <tr>
+                                <td>Design a search engine like Google</td>
+                                <td>
+                                    <a href="http://queue.acm.org/detail.cfm?id=988407" target="_blank" rel="noopener">queue.acm.org</a><br/>
+                                    <a href="http://programmers.stackexchange.com/questions/38324/interview-question-how-would-you-implement-google-search" target="_blank" rel="noopener">stackexchange.com</a><br/>
+                                    <a href="http://www.ardendertat.com/2012/01/11/implementing-search-engines/" target="_blank" rel="noopener">ardendertat.com</a><br/>
+                                    <a href="http://infolab.stanford.edu/~backrub/google.html" target="_blank" rel="noopener">stanford.edu</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design a scalable web crawler like Google</td>
+                                <td><a href="https://www.quora.com/How-can-I-build-a-web-crawler-from-scratch" target="_blank" rel="noopener">quora.com</a></td>
+                            </tr>
+                            <tr>
+                                <td>Design Google docs</td>
+                                <td>
+                                    <a href="https://code.google.com/p/google-mobwrite/" target="_blank" rel="noopener">code.google.com</a><br/>
+                                    <a href="https://neil.fraser.name/writing/sync/" target="_blank" rel="noopener">neil.fraser.name</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design a key-value store like Redis</td>
+                                <td>
+                                    <a href="http://codecapsule.com/2012/11/07/ikvs-implementing-a-key-value-store-table-of-contents/" target="_blank" rel="noopener">codecapsule.com</a><br/>
+                                    <a href="https://www.allthingsdistributed.com/files/amazon-dynamo-sosp2007.pdf" target="_blank" rel="noopener">allthingsdistributed.com</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design a cache system like Memcached</td>
+                                <td><a href="http://www.slideshare.net/oemebamo/introduction-to-memcached" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                            <tr>
+                                <td>Design a recommendation system like Amazon's</td>
+                                <td>
+                                    <a href="https://web.archive.org/web/20170406065247/http://tech.hulu.com/blog/2011/09/19/recommendation-system.html" target="_blank" rel="noopener">hulu.com</a><br/>
+                                    <a href="http://ijcai13.org/files/tutorial_slides/td3.pdf" target="_blank" rel="noopener">ijcai13.org</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design a tinyurl system like Bitly</td>
+                                <td><a href="http://n00tc0d3r.blogspot.com/" target="_blank" rel="noopener">n00tc0d3r.blogspot.com</a></td>
+                            </tr>
+                            <tr>
+                                <td>Design a chat app like WhatsApp</td>
+                                <td><a href="http://highscalability.com/blog/2014/2/26/the-whatsapp-architecture-facebook-bought-for-19-billion.html" target="_blank" rel="noopener">highscalability.com</a></td>
+                            </tr>
+                            <tr>
+                                <td>Design a picture sharing system like Instagram</td>
+                                <td>
+                                    <a href="http://highscalability.com/flickr-architecture" target="_blank" rel="noopener">highscalability.com</a><br/>
+                                    <a href="http://highscalability.com/blog/2011/12/6/instagram-architecture-14-million-users-terabytes-of-photos.html" target="_blank" rel="noopener">highscalability.com</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design the Facebook news feed function</td>
+                                <td>
+                                    <a href="http://www.quora.com/What-are-best-practices-for-building-something-like-a-News-Feed" target="_blank" rel="noopener">quora.com</a><br/>
+                                    <a href="http://www.quora.com/Activity-Streams/What-are-the-scaling-issues-to-keep-in-mind-while-developing-a-social-network-feed" target="_blank" rel="noopener">quora.com</a><br/>
+                                    <a href="http://www.slideshare.net/danmckinley/etsy-activity-feeds-architecture" target="_blank" rel="noopener">slideshare.net</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design the Facebook timeline function</td>
+                                <td>
+                                    <a href="https://www.facebook.com/note.php?note_id=10150468255628920" target="_blank" rel="noopener">facebook.com</a><br/>
+                                    <a href="http://highscalability.com/blog/2012/1/23/facebook-timeline-brought-to-you-by-the-power-of-denormaliza.html" target="_blank" rel="noopener">highscalability.com</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design the Facebook chat function</td>
+                                <td>
+                                    <a href="http://www.erlang-factory.com/upload/presentations/31/EugeneLetuchy-ErlangatFacebook.pdf" target="_blank" rel="noopener">erlang-factory.com</a><br/>
+                                    <a href="https://www.facebook.com/note.php?note_id=14218138919&id=9445547199&index=0" target="_blank" rel="noopener">facebook.com</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design a graph search function like Facebook's</td>
+                                <td>
+                                    <a href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-building-out-the-infrastructure-for-graph-search/10151347573598920" target="_blank" rel="noopener">facebook.com</a><br/>
+                                    <a href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-indexing-and-ranking-in-graph-search/10151361720763920" target="_blank" rel="noopener">facebook.com</a><br/>
+                                    <a href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-natural-language-interface-of-graph-search/10151432733048920" target="_blank" rel="noopener">facebook.com</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design a content delivery network like CloudFlare</td>
+                                <td><a href="https://figshare.com/articles/Globally_distributed_content_delivery/6605972" target="_blank" rel="noopener">figshare.com</a></td>
+                            </tr>
+                            <tr>
+                                <td>Design a trending topic system like Twitter's</td>
+                                <td>
+                                    <a href="http://www.michael-noll.com/blog/2013/01/18/implementing-real-time-trending-topics-in-storm/" target="_blank" rel="noopener">michael-noll.com</a><br/>
+                                    <a href="http://snikolov.wordpress.com/2012/11/14/early-detection-of-twitter-trends/" target="_blank" rel="noopener">snikolov.wordpress.com</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design a random ID generation system</td>
+                                <td>
+                                    <a href="https://blog.twitter.com/2010/announcing-snowflake" target="_blank" rel="noopener">blog.twitter.com</a><br/>
+                                    <a href="https://github.com/twitter/snowflake/" target="_blank" rel="noopener">github.com</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Return the top k requests during a time interval</td>
+                                <td>
+                                    <a href="https://www.cs.ucsb.edu/sites/default/files/documents/2005-23.pdf" target="_blank" rel="noopener">cs.ucsb.edu</a><br/>
+                                    <a href="http://davis.wpi.edu/xmdv/docs/EDBT11-diyang.pdf" target="_blank" rel="noopener">wpi.edu</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design a system that serves data from multiple data centers</td>
+                                <td><a href="http://highscalability.com/blog/2009/8/24/how-google-serves-data-from-multiple-datacenters.html" target="_blank" rel="noopener">highscalability.com</a></td>
+                            </tr>
+                            <tr>
+                                <td>Design an online multiplayer card game</td>
+                                <td>
+                                    <a href="https://web.archive.org/web/20180929181117/http://www.indieflashblog.com/how-to-create-an-asynchronous-multiplayer-game.html" target="_blank" rel="noopener">indieflashblog.com</a><br/>
+                                    <a href="http://buildnewgames.com/real-time-multiplayer/" target="_blank" rel="noopener">buildnewgames.com</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design a garbage collection system</td>
+                                <td>
+                                    <a href="http://journal.stuffwithstuff.com/2013/12/08/babys-first-garbage-collector/" target="_blank" rel="noopener">stuffwithstuff.com</a><br/>
+                                    <a href="http://courses.cs.washington.edu/courses/csep521/07wi/prj/rick.pdf" target="_blank" rel="noopener">washington.edu</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Design an API rate limiter</td>
+                                <td><a href="https://stripe.com/blog/rate-limiters" target="_blank" rel="noopener">stripe.com/blog/</a></td>
+                            </tr>
+                            <tr>
+                                <td>Design a Stock Exchange (like NASDAQ or Binance)</td>
+                                <td>
+                                    <a href="https://youtu.be/b1e4t2k2KJY" target="_blank" rel="noopener">Jane Street (YouTube)</a><br/>
+                                    <a href="https://around25.com/blog/building-a-trading-engine-for-a-crypto-exchange/" target="_blank" rel="noopener">Golang Implementation</a><br/>
+                                    <a href="http://bhomnick.net/building-a-simple-limit-order-in-go/" target="_blank" rel="noopener">Go Implementation</a>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-content">
+                        <p style="margin:0">Want to contribute a new question? See the <strong>Contributing</strong> section in the main README for guidelines on adding system design interview questions.</p>
+                    </div>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 37 — Real World Architectures
+    // ================================================================
+    'real-world-architectures': {
+        part: 'Part H',
+        title: 'Real World Architectures',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 37 — Appendix</div>
+                <h1>Real World Architectures</h1>
+                <p class="chapter-subtitle">Articles on how real-world systems are designed — study the shared principles, common technologies, and patterns across these architectures.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        How to Study These
+                    </div>
+                    <div class="shadcn-alert-description">Don't focus on nitty-gritty details for the following articles. Instead: <strong>identify shared principles</strong>, common technologies, and patterns. Study what problems are solved by each component, where it works, and where it doesn't. Review the <strong>lessons learned</strong>.</div>
+                </div>
+
+                <div class="img-container" style="text-align:center;margin:1.5rem 0;">
+                    <img src="../images/TcUo2fw.png" class="zoomable" alt="Twitter timelines at scale" style="max-width:620px;width:100%;border-radius:8px;">
+                    <p style="font-size:0.85rem;color:var(--muted-foreground);margin-top:0.5rem;"><em><a href="https://www.infoq.com/presentations/Twitter-Timeline-Scalability" target="_blank" rel="noopener">Source: Twitter timelines at scale</a></em></p>
+                </div>
+
+                <h2>System Architectures by Category</h2>
+
+                <div class="table-wrapper">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Type</th>
+                                <th>System</th>
+                                <th>Reference(s)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td rowspan="3"><span class="shadcn-badge shadcn-badge-blue">Data Processing</span></td>
+                                <td><strong>MapReduce</strong> — Distributed data processing from Google</td>
+                                <td><a href="http://static.googleusercontent.com/media/research.google.com/zh-CN/us/archive/mapreduce-osdi04.pdf" target="_blank" rel="noopener">research.google.com</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Spark</strong> — Distributed data processing from Databricks</td>
+                                <td><a href="http://www.slideshare.net/AGrishchenko/apache-spark-architecture" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Storm</strong> — Distributed data processing from Twitter</td>
+                                <td><a href="http://www.slideshare.net/previa/storm-16094009" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                            <tr>
+                                <td rowspan="8"><span class="shadcn-badge shadcn-badge-green">Data Store</span></td>
+                                <td><strong>Bigtable</strong> — Distributed column-oriented database from Google</td>
+                                <td><a href="http://www.read.seas.harvard.edu/~kohler/class/cs239-w08/chang06bigtable.pdf" target="_blank" rel="noopener">harvard.edu</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>HBase</strong> — Open source implementation of Bigtable</td>
+                                <td><a href="http://www.slideshare.net/alexbaranau/intro-to-hbase" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Cassandra</strong> — Distributed column-oriented database from Facebook</td>
+                                <td><a href="http://www.slideshare.net/planetcassandra/cassandra-introduction-features-30103666" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>DynamoDB</strong> — Document-oriented database from Amazon</td>
+                                <td><a href="http://www.read.seas.harvard.edu/~kohler/class/cs239-w08/decandia07dynamo.pdf" target="_blank" rel="noopener">harvard.edu</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>MongoDB</strong> — Document-oriented database</td>
+                                <td><a href="http://www.slideshare.net/mdirolf/introduction-to-mongodb" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Spanner</strong> — Globally-distributed database from Google</td>
+                                <td><a href="http://research.google.com/archive/spanner-osdi2012.pdf" target="_blank" rel="noopener">research.google.com</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Memcached</strong> — Distributed memory caching system</td>
+                                <td><a href="http://www.slideshare.net/oemebamo/introduction-to-memcached" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Redis</strong> — Distributed memory caching system with persistence and value types</td>
+                                <td><a href="http://www.slideshare.net/dvirsky/introduction-to-redis" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                            <tr>
+                                <td rowspan="2"><span class="shadcn-badge shadcn-badge-amber">File System</span></td>
+                                <td><strong>Google File System (GFS)</strong> — Distributed file system</td>
+                                <td><a href="http://static.googleusercontent.com/media/research.google.com/zh-CN/us/archive/gfs-sosp2003.pdf" target="_blank" rel="noopener">research.google.com</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Hadoop File System (HDFS)</strong> — Open source implementation of GFS</td>
+                                <td><a href="http://hadoop.apache.org/docs/stable/hadoop-project-dist/hadoop-hdfs/HdfsDesign.html" target="_blank" rel="noopener">apache.org</a></td>
+                            </tr>
+                            <tr>
+                                <td rowspan="4"><span class="shadcn-badge shadcn-badge-outline">Misc</span></td>
+                                <td><strong>Chubby</strong> — Lock service for loosely-coupled distributed systems from Google</td>
+                                <td><a href="http://static.googleusercontent.com/external_content/untrusted_dlcp/research.google.com/en/us/archive/chubby-osdi06.pdf" target="_blank" rel="noopener">research.google.com</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Dapper</strong> — Distributed systems tracing infrastructure</td>
+                                <td><a href="http://static.googleusercontent.com/media/research.google.com/en//pubs/archive/36356.pdf" target="_blank" rel="noopener">research.google.com</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Kafka</strong> — Pub/sub message queue from LinkedIn</td>
+                                <td><a href="http://www.slideshare.net/mumrah/kafka-talk-tri-hug" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Zookeeper</strong> — Centralized infrastructure and services enabling synchronization</td>
+                                <td><a href="http://www.slideshare.net/sauravhaloi/introduction-to-apache-zookeeper" target="_blank" rel="noopener">slideshare.net</a></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <h2>Company Architectures</h2>
+
+                <div class="table-wrapper">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Company</th>
+                                <th>Reference(s)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td><strong>Amazon</strong></td>
+                                <td><a href="http://highscalability.com/amazon-architecture" target="_blank" rel="noopener">Amazon architecture</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Cinchcast</strong></td>
+                                <td><a href="http://highscalability.com/blog/2012/7/16/cinchcast-architecture-producing-1500-hours-of-audio-every-d.html" target="_blank" rel="noopener">Producing 1,500 hours of audio every day</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>DataSift</strong></td>
+                                <td><a href="http://highscalability.com/blog/2011/11/29/datasift-architecture-realtime-datamining-at-120000-tweets-p.html" target="_blank" rel="noopener">Realtime datamining at 120,000 tweets per second</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Dropbox</strong></td>
+                                <td><a href="https://www.youtube.com/watch?v=PE4gwstWhmc" target="_blank" rel="noopener">How we've scaled Dropbox</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>ESPN</strong></td>
+                                <td><a href="http://highscalability.com/blog/2013/11/4/espns-architecture-at-scale-operating-at-100000-duh-nuh-nuhs.html" target="_blank" rel="noopener">Operating at 100,000 duh nuh nuhs per second</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Google</strong></td>
+                                <td><a href="http://highscalability.com/google-architecture" target="_blank" rel="noopener">Google architecture</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Instagram</strong></td>
+                                <td>
+                                    <a href="http://highscalability.com/blog/2011/12/6/instagram-architecture-14-million-users-terabytes-of-photos.html" target="_blank" rel="noopener">14 million users, terabytes of photos</a><br/>
+                                    <a href="http://instagram-engineering.tumblr.com/post/13649370142/what-powers-instagram-hundreds-of-instances" target="_blank" rel="noopener">What powers Instagram</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td><strong>Justin.tv</strong></td>
+                                <td><a href="http://highscalability.com/blog/2010/3/16/justintvs-live-video-broadcasting-architecture.html" target="_blank" rel="noopener">Justin.Tv's live video broadcasting architecture</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Facebook</strong></td>
+                                <td>
+                                    <a href="https://cs.uwaterloo.ca/~brecht/courses/854-Emerging-2014/readings/key-value/fb-memcached-nsdi-2013.pdf" target="_blank" rel="noopener">Scaling memcached at Facebook</a><br/>
+                                    <a href="https://cs.uwaterloo.ca/~brecht/courses/854-Emerging-2014/readings/data-store/tao-facebook-distributed-datastore-atc-2013.pdf" target="_blank" rel="noopener">TAO: Facebook's distributed data store for the social graph</a><br/>
+                                    <a href="https://www.usenix.org/legacy/event/osdi10/tech/full_papers/Beaver.pdf" target="_blank" rel="noopener">Facebook's photo storage</a><br/>
+                                    <a href="http://highscalability.com/blog/2016/6/27/how-facebook-live-streams-to-800000-simultaneous-viewers.html" target="_blank" rel="noopener">How Facebook Live Streams To 800,000 Simultaneous Viewers</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td><strong>Flickr</strong></td>
+                                <td><a href="http://highscalability.com/flickr-architecture" target="_blank" rel="noopener">Flickr architecture</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Mailbox</strong></td>
+                                <td><a href="http://highscalability.com/blog/2013/6/18/scaling-mailbox-from-0-to-one-million-users-in-6-weeks-and-1.html" target="_blank" rel="noopener">From 0 to one million users in 6 weeks</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Netflix</strong></td>
+                                <td>
+                                    <a href="http://highscalability.com/blog/2015/11/9/a-360-degree-view-of-the-entire-netflix-stack.html" target="_blank" rel="noopener">A 360 Degree View Of The Entire Netflix Stack</a><br/>
+                                    <a href="http://highscalability.com/blog/2017/12/11/netflix-what-happens-when-you-press-play.html" target="_blank" rel="noopener">Netflix: What Happens When You Press Play?</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td><strong>Pinterest</strong></td>
+                                <td>
+                                    <a href="http://highscalability.com/blog/2013/4/15/scaling-pinterest-from-0-to-10s-of-billions-of-page-views-a.html" target="_blank" rel="noopener">From 0 to 10s of billions of page views a month</a><br/>
+                                    <a href="http://highscalability.com/blog/2012/5/21/pinterest-architecture-update-18-million-visitors-10x-growth.html" target="_blank" rel="noopener">18 million visitors, 10x growth, 12 employees</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td><strong>Playfish</strong></td>
+                                <td><a href="http://highscalability.com/blog/2010/9/21/playfishs-social-gaming-architecture-50-million-monthly-user.html" target="_blank" rel="noopener">50 million monthly users and growing</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>PlentyOfFish</strong></td>
+                                <td><a href="http://highscalability.com/plentyoffish-architecture" target="_blank" rel="noopener">PlentyOfFish architecture</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Salesforce</strong></td>
+                                <td><a href="http://highscalability.com/blog/2013/9/23/salesforce-architecture-how-they-handle-13-billion-transacti.html" target="_blank" rel="noopener">How they handle 1.3 billion transactions a day</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Stack Overflow</strong></td>
+                                <td><a href="http://highscalability.com/blog/2009/8/5/stack-overflow-architecture.html" target="_blank" rel="noopener">Stack Overflow architecture</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>TripAdvisor</strong></td>
+                                <td><a href="http://highscalability.com/blog/2011/6/27/tripadvisor-architecture-40m-visitors-200m-dynamic-page-view.html" target="_blank" rel="noopener">40M visitors, 200M dynamic page views, 30TB data</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Tumblr</strong></td>
+                                <td><a href="http://highscalability.com/blog/2012/2/13/tumblr-architecture-15-billion-page-views-a-month-and-harder.html" target="_blank" rel="noopener">15 billion page views a month</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>Twitter</strong></td>
+                                <td>
+                                    <a href="http://highscalability.com/scaling-twitter-making-twitter-10000-percent-faster" target="_blank" rel="noopener">Making Twitter 10000 percent faster</a><br/>
+                                    <a href="http://highscalability.com/blog/2011/12/19/how-twitter-stores-250-million-tweets-a-day-using-mysql.html" target="_blank" rel="noopener">Storing 250 million tweets a day using MySQL</a><br/>
+                                    <a href="http://highscalability.com/blog/2013/7/8/the-architecture-twitter-uses-to-deal-with-150m-active-users.html" target="_blank" rel="noopener">150M active users, 300K QPS, a 22 MB/S firehose</a><br/>
+                                    <a href="https://www.infoq.com/presentations/Twitter-Timeline-Scalability" target="_blank" rel="noopener">Timelines at scale</a><br/>
+                                    <a href="https://www.youtube.com/watch?v=5cKTP36HVgI" target="_blank" rel="noopener">Big and small data at Twitter</a><br/>
+                                    <a href="https://www.youtube.com/watch?v=z8LU0Cj6BOU" target="_blank" rel="noopener">Operations at Twitter: scaling beyond 100 million users</a><br/>
+                                    <a href="http://highscalability.com/blog/2016/4/20/how-twitter-handles-3000-images-per-second.html" target="_blank" rel="noopener">How Twitter Handles 3,000 Images Per Second</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td><strong>Uber</strong></td>
+                                <td>
+                                    <a href="http://highscalability.com/blog/2015/9/14/how-uber-scales-their-real-time-market-platform.html" target="_blank" rel="noopener">How Uber scales their real-time market platform</a><br/>
+                                    <a href="http://highscalability.com/blog/2016/10/12/lessons-learned-from-scaling-uber-to-2000-engineers-1000-ser.html" target="_blank" rel="noopener">Lessons Learned From Scaling Uber To 2000 Engineers, 1000 Services, And 8000 Git Repositories</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td><strong>WhatsApp</strong></td>
+                                <td><a href="http://highscalability.com/blog/2014/2/26/the-whatsapp-architecture-facebook-bought-for-19-billion.html" target="_blank" rel="noopener">The WhatsApp architecture Facebook bought for $19 billion</a></td>
+                            </tr>
+                            <tr>
+                                <td><strong>YouTube</strong></td>
+                                <td>
+                                    <a href="https://www.youtube.com/watch?v=w5WVu624fY8" target="_blank" rel="noopener">YouTube scalability</a><br/>
+                                    <a href="http://highscalability.com/youtube-architecture" target="_blank" rel="noopener">YouTube architecture</a>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        `
+    },
+
+    // ================================================================
+    // Chapter 38 — Engineering Blogs
+    // ================================================================
+    'engineering-blogs': {
+        part: 'Part H',
+        title: 'Engineering Blogs',
+        content: `
+            <div class="shadcn-chapter">
+                <div class="chapter-badge">Chapter 38 — Appendix</div>
+                <h1>Engineering Blogs</h1>
+                <p class="chapter-subtitle">Architectures for companies you are interviewing with — questions you encounter might be from the same domain.</p>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-alert shadcn-alert-info">
+                    <div class="shadcn-alert-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                        Interview Prep Tip
+                    </div>
+                    <div class="shadcn-alert-description">Before interviewing at a company, <strong>read their engineering blog</strong>. It gives you insight into the technologies they use, the scale they operate at, and the problems they've solved — all of which can come up in system design interviews.</div>
+                </div>
+
+                <h2>Engineering Blogs Directory</h2>
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-header">
+                        <div class="shadcn-card-title">Company Engineering Blogs</div>
+                        <p class="shadcn-card-description">Alphabetical list of engineering blogs from top tech companies</p>
+                    </div>
+                    <div class="shadcn-card-content">
+                        <ul class="resource-list">
+                            <li><span class="resource-icon">📝</span> <a href="http://nerds.airbnb.com/" target="_blank" rel="noopener">Airbnb Engineering</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://developer.atlassian.com/blog/" target="_blank" rel="noopener">Atlassian Developers</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://aws.amazon.com/blogs/aws/" target="_blank" rel="noopener">AWS Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://word.bitly.com/" target="_blank" rel="noopener">Bitly Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://blog.box.com/blog/category/engineering" target="_blank" rel="noopener">Box Blogs</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://blog.cloudera.com/" target="_blank" rel="noopener">Cloudera Developer Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://tech.dropbox.com/" target="_blank" rel="noopener">Dropbox Tech Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://www.quora.com/q/quoraengineering" target="_blank" rel="noopener">Engineering at Quora</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://www.ebaytechblog.com/" target="_blank" rel="noopener">eBay Tech Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://blog.evernote.com/tech/" target="_blank" rel="noopener">Evernote Tech Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://codeascraft.com/" target="_blank" rel="noopener">Etsy Code as Craft</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://www.facebook.com/Engineering" target="_blank" rel="noopener">Facebook Engineering</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://code.flickr.net/" target="_blank" rel="noopener">Flickr Code</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://engineering.foursquare.com/" target="_blank" rel="noopener">Foursquare Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://github.blog/category/engineering" target="_blank" rel="noopener">GitHub Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://googleresearch.blogspot.com/" target="_blank" rel="noopener">Google Research Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://engineering.groupon.com/" target="_blank" rel="noopener">Groupon Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://engineering.heroku.com/" target="_blank" rel="noopener">Heroku Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://product.hubspot.com/blog/topic/engineering" target="_blank" rel="noopener">HubSpot Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://highscalability.com/" target="_blank" rel="noopener">High Scalability</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://instagram-engineering.tumblr.com/" target="_blank" rel="noopener">Instagram Engineering</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://software.intel.com/en-us/blogs/" target="_blank" rel="noopener">Intel Software Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://blogs.janestreet.com/category/ocaml/" target="_blank" rel="noopener">Jane Street Tech Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://engineering.linkedin.com/blog" target="_blank" rel="noopener">LinkedIn Engineering</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://engineering.microsoft.com/" target="_blank" rel="noopener">Microsoft Engineering</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://blogs.msdn.microsoft.com/pythonengineering/" target="_blank" rel="noopener">Microsoft Python Engineering</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://techblog.netflix.com/" target="_blank" rel="noopener">Netflix Tech Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://developer.paypal.com/community/blog/" target="_blank" rel="noopener">PayPal Developer Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://medium.com/@Pinterest_Engineering" target="_blank" rel="noopener">Pinterest Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://www.redditblog.com/" target="_blank" rel="noopener">Reddit Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://developer.salesforce.com/blogs/engineering/" target="_blank" rel="noopener">Salesforce Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://slack.engineering/" target="_blank" rel="noopener">Slack Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://labs.spotify.com/" target="_blank" rel="noopener">Spotify Labs</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://stripe.com/blog/engineering" target="_blank" rel="noopener">Stripe Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://www.twilio.com/engineering" target="_blank" rel="noopener">Twilio Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://blog.twitter.com/engineering/" target="_blank" rel="noopener">Twitter Engineering</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://eng.uber.com/" target="_blank" rel="noopener">Uber Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://yahooeng.tumblr.com/" target="_blank" rel="noopener">Yahoo Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="http://engineeringblog.yelp.com/" target="_blank" rel="noopener">Yelp Engineering Blog</a></li>
+                            <li><span class="resource-icon">📝</span> <a href="https://www.zynga.com/blogs/engineering" target="_blank" rel="noopener">Zynga Engineering Blog</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr class="shadcn-separator">
+
+                <div class="shadcn-card">
+                    <div class="shadcn-card-content">
+                        <p style="margin:0">Looking to add a blog? To avoid duplicating work, consider adding your company blog to: <a href="https://github.com/kilimchoi/engineering-blogs" target="_blank" rel="noopener"><strong>kilimchoi/engineering-blogs</strong></a></p>
+                    </div>
+                </div>
+            </div>
+        `
+    },
+
+};
diff --git a/website/js/quizzes.js b/website/js/quizzes.js
new file mode 100644
index 00000000000..5a3d631d08c
--- /dev/null
+++ b/website/js/quizzes.js
@@ -0,0 +1,323 @@
+/**
+ * Quiz data for System Design Primer chapters.
+ * Each key matches a chapter key from CHAPTERS.
+ * Questions: { q: question, options: [A,B,C,D], answer: 0-based index, explanation: string }
+ */
+var QUIZZES = {
+    'performance-scalability': [
+        {
+            q: 'What is the key difference between performance and scalability?',
+            options: [
+                'Performance measures speed, scalability measures cost',
+                'A service has a performance problem if it is slow for a single user; a scalability problem if it is fast for one but slow under load',
+                'Performance and scalability are the same concept',
+                'Scalability only applies to databases'
+            ],
+            answer: 1,
+            explanation: 'A performance problem means the system is slow even for one user. A scalability problem means it works for one user but degrades under load.'
+        },
+        {
+            q: 'Which scaling approach adds more machines to a pool of resources?',
+            options: [
+                'Vertical scaling',
+                'Diagonal scaling',
+                'Horizontal scaling',
+                'Functional scaling'
+            ],
+            answer: 2,
+            explanation: 'Horizontal scaling (scaling out) adds more machines, while vertical scaling (scaling up) adds more resources (CPU, RAM) to a single machine.'
+        }
+    ],
+
+    'latency-throughput': [
+        {
+            q: 'What is latency?',
+            options: [
+                'The number of requests processed per second',
+                'The time to perform some action or to produce some result',
+                'The total bandwidth of a network',
+                'The amount of data stored in memory'
+            ],
+            answer: 1,
+            explanation: 'Latency is the time to perform some action or produce some result, typically measured in milliseconds.'
+        },
+        {
+            q: 'What should you generally aim for to optimize system performance?',
+            options: [
+                'Maximum throughput with zero latency',
+                'Minimum latency at the cost of throughput',
+                'Maximum throughput with acceptable latency',
+                'Equal latency and throughput values'
+            ],
+            answer: 2,
+            explanation: 'Generally, you should aim for maximal throughput with acceptable latency.'
+        }
+    ],
+
+    'availability-consistency': [
+        {
+            q: 'According to the CAP theorem, which three properties cannot all be guaranteed simultaneously in a distributed system?',
+            options: [
+                'Cost, Availability, Performance',
+                'Consistency, Availability, Partition Tolerance',
+                'Concurrency, Atomicity, Persistence',
+                'Caching, Authorization, Privacy'
+            ],
+            answer: 1,
+            explanation: 'The CAP theorem states that a distributed system cannot simultaneously guarantee Consistency, Availability, and Partition Tolerance. You must choose two.'
+        },
+        {
+            q: 'In a CP system, what happens during a network partition?',
+            options: [
+                'The system continues serving potentially stale data',
+                'The system shuts down entirely',
+                'The system may return errors or timeouts waiting for consistency',
+                'All data is deleted'
+            ],
+            answer: 2,
+            explanation: 'CP systems prioritize consistency, so during a partition they may return errors or time out rather than serve potentially inconsistent data.'
+        }
+    ],
+
+    'consistency-patterns': [
+        {
+            q: 'In weak consistency, what happens after a write?',
+            options: [
+                'All subsequent reads immediately see the write',
+                'Reads may or may not see the write; a best-effort approach is taken',
+                'The write is rejected if any node is unavailable',
+                'The write is stored but never readable'
+            ],
+            answer: 1,
+            explanation: 'Weak consistency means after a write, reads may or may not see it. This is a best-effort approach seen in systems like memcached and VoIP.'
+        },
+        {
+            q: 'Which consistency pattern guarantees that a read will eventually see the last write?',
+            options: [
+                'Strong consistency',
+                'Weak consistency',
+                'Eventual consistency',
+                'Immediate consistency'
+            ],
+            answer: 2,
+            explanation: 'Eventual consistency guarantees that given enough time without new writes, all reads will return the last written value. Used in systems like DNS and email.'
+        }
+    ],
+
+    'dns': [
+        {
+            q: 'What does DNS translate?',
+            options: [
+                'IP addresses to MAC addresses',
+                'Domain names to IP addresses',
+                'URLs to HTML pages',
+                'Port numbers to service names'
+            ],
+            answer: 1,
+            explanation: 'DNS (Domain Name System) translates domain names like www.example.com to IP addresses like 93.184.216.34.'
+        },
+        {
+            q: 'Which DNS record type maps a name to another name?',
+            options: [
+                'A record',
+                'AAAA record',
+                'CNAME record',
+                'MX record'
+            ],
+            answer: 2,
+            explanation: 'A CNAME (Canonical Name) record maps a name to another name, acting as an alias. A records map to IPv4 addresses.'
+        }
+    ],
+
+    'cdn': [
+        {
+            q: 'What is the primary purpose of a CDN?',
+            options: [
+                'To replace the origin server completely',
+                'To serve content from locations closer to the user, reducing latency',
+                'To compress all files on the server',
+                'To encrypt all traffic'
+            ],
+            answer: 1,
+            explanation: 'CDNs serve content from edge locations geographically closer to users, significantly reducing latency.'
+        },
+        {
+            q: 'In a pull CDN, when is content fetched from the origin?',
+            options: [
+                'As soon as it is created on the origin',
+                'When the first user requests that content',
+                'Every hour on a schedule',
+                'Only when manually triggered'
+            ],
+            answer: 1,
+            explanation: 'Pull CDNs lazily fetch content from the origin server upon the first request, then cache it for subsequent requests based on TTL.'
+        }
+    ],
+
+    'load-balancer': [
+        {
+            q: 'Which load balancing approach operates at the transport layer?',
+            options: [
+                'Layer 7 load balancing',
+                'Layer 4 load balancing',
+                'Layer 3 load balancing',
+                'Application-level proxy'
+            ],
+            answer: 1,
+            explanation: 'Layer 4 load balancing operates at the transport layer and makes routing decisions based on IP addresses and TCP/UDP ports without inspecting packet contents.'
+        },
+        {
+            q: 'What is a major disadvantage of load balancers?',
+            options: [
+                'They make systems slower in all cases',
+                'They can become a bottleneck or single point of failure if not redundant',
+                'They cannot work with HTTPS traffic',
+                'They increase latency by 10x'
+            ],
+            answer: 1,
+            explanation: 'A load balancer can become a bottleneck if under-provisioned or a single point of failure if there is no redundancy. Multiple load balancers in active-passive or active-active configuration mitigate this.'
+        }
+    ],
+
+    'reverse-proxy': [
+        {
+            q: 'What is a reverse proxy?',
+            options: [
+                'A proxy configured by the client to access blocked sites',
+                'A web server that centralizes internal services and provides a unified interface to the public',
+                'A backup server that activates when the primary fails',
+                'A DNS server that reverses IP lookups'
+            ],
+            answer: 1,
+            explanation: 'A reverse proxy is a web server that centralizes internal services and provides unified interfaces to the public, handling tasks like SSL termination, compression, and caching.'
+        }
+    ],
+
+    'application-layer': [
+        {
+            q: 'What is the key benefit of separating the web/application layer from the platform layer?',
+            options: [
+                'It reduces the total number of servers needed',
+                'It allows scaling and configuring each layer independently',
+                'It eliminates the need for load balancers',
+                'It makes the code run faster'
+            ],
+            answer: 1,
+            explanation: 'Separating layers allows you to scale web servers and platform/API servers independently based on their specific load patterns.'
+        }
+    ],
+
+    'database': [
+        {
+            q: 'What is the primary trade-off between SQL and NoSQL databases?',
+            options: [
+                'SQL is always faster than NoSQL',
+                'NoSQL cannot store structured data',
+                'SQL provides ACID guarantees while NoSQL often trades consistency for availability and performance',
+                'NoSQL is always more expensive'
+            ],
+            answer: 2,
+            explanation: 'SQL databases provide strong ACID guarantees (Atomicity, Consistency, Isolation, Durability). NoSQL databases typically sacrifice some consistency (BASE model) in exchange for availability, partition tolerance, and horizontal scalability.'
+        },
+        {
+            q: 'What does master-slave replication provide?',
+            options: [
+                'Two-way writes to both databases',
+                'Read scalability by distributing reads across replicas, with writes going to the master',
+                'Automatic sharding of data',
+                'Zero-downtime migrations'
+            ],
+            answer: 1,
+            explanation: 'In master-slave replication, the master serves reads and writes, and replicates writes to slaves which serve read-only traffic. This scales read throughput.'
+        },
+        {
+            q: 'What is federation (functional partitioning) in databases?',
+            options: [
+                'Splitting one database into many identical copies',
+                'Splitting databases by function (e.g., users, products, forums each in separate DBs)',
+                'Encrypting all database traffic',
+                'Running the database in multiple data centers simultaneously'
+            ],
+            answer: 1,
+            explanation: 'Federation splits up databases by function, so instead of a single monolithic database, you have separate databases for users, products, etc., reducing read and write traffic to each.'
+        }
+    ],
+
+    'cache': [
+        {
+            q: 'What is the "cache-aside" (lazy-loading) pattern?',
+            options: [
+                'The application writes to cache and database simultaneously',
+                'The application reads from cache; on miss, reads from DB and populates cache',
+                'The cache automatically pulls from the database on a timer',
+                'Data is never stored in the database, only in cache'
+            ],
+            answer: 1,
+            explanation: 'In cache-aside, the application first checks the cache. On a miss, it reads from the database, stores the result in the cache, and returns. This lazy loads only requested data.'
+        },
+        {
+            q: 'What is a disadvantage of write-through caching?',
+            options: [
+                'Data in cache can become stale',
+                'Most data written to the cache might never be read, wasting resources',
+                'It cannot work with relational databases',
+                'It requires manual cache invalidation'
+            ],
+            answer: 1,
+            explanation: 'Write-through writes to both cache and DB on every write. The downside is that most data written might never be read before it expires, wasting cache space.'
+        }
+    ],
+
+    'asynchronism': [
+        {
+            q: 'What is the main benefit of message queues in asynchronous workflows?',
+            options: [
+                'They make all operations faster',
+                'They decouple producers from consumers, allowing independent scaling and failure isolation',
+                'They eliminate the need for databases',
+                'They provide real-time responses to users'
+            ],
+            answer: 1,
+            explanation: 'Message queues decouple the producer from the consumer. The producer can publish even if the consumer is down, and each can scale independently.'
+        }
+    ],
+
+    'communication': [
+        {
+            q: 'What is a key difference between TCP and UDP?',
+            options: [
+                'TCP is faster than UDP',
+                'TCP ensures reliable, ordered delivery; UDP is connectionless with no delivery guarantees',
+                'UDP supports encryption but TCP does not',
+                'TCP is for web traffic only, UDP is for email only'
+            ],
+            answer: 1,
+            explanation: 'TCP provides reliable, ordered data delivery with connection establishment. UDP is connectionless and provides no guarantees, making it faster for use cases like video streaming and gaming.'
+        },
+        {
+            q: 'In REST, what does it mean that the API is stateless?',
+            options: [
+                'The server stores no client data at all',
+                'Each request contains all information needed; the server does not store session state between requests',
+                'REST cannot use cookies',
+                'The database has no state'
+            ],
+            answer: 1,
+            explanation: 'REST is stateless - each request from the client must contain all necessary information. The server does not store client context between requests.'
+        }
+    ],
+
+    'security': [
+        {
+            q: 'What is the principle of least privilege?',
+            options: [
+                'Give users the minimum number of passwords',
+                'Grant each user/process only the minimum access required to perform their function',
+                'Use the cheapest security solution available',
+                'Limit the number of security administrators'
+            ],
+            answer: 1,
+            explanation: 'The principle of least privilege means giving each user, process, or system only the minimum access level required to perform their function, reducing the attack surface.'
+        }
+    ]
+};
diff --git a/website/solutions/object_oriented_design/call_center/__init__.py b/website/solutions/object_oriented_design/call_center/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/object_oriented_design/call_center/call_center.ipynb b/website/solutions/object_oriented_design/call_center/call_center.ipynb
new file mode 100644
index 00000000000..c540c6a6422
--- /dev/null
+++ b/website/solutions/object_oriented_design/call_center/call_center.ipynb
@@ -0,0 +1,206 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This notebook was prepared by [Donne Martin](https://github.com/donnemartin). Source and license info is on [GitHub](https://github.com/donnemartin/system-design-primer)."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Design a call center"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Constraints and assumptions\n",
+    "\n",
+    "* What levels of employees are in the call center?\n",
+    "    * Operator, supervisor, director\n",
+    "* Can we assume operators always get the initial calls?\n",
+    "    * Yes\n",
+    "* If there is no available operators or the operator can't handle the call, does the call go to the supervisors?\n",
+    "    * Yes\n",
+    "* If there is no available supervisors or the supervisor can't handle the call, does the call go to the directors?\n",
+    "    * Yes\n",
+    "* Can we assume the directors can handle all calls?\n",
+    "    * Yes\n",
+    "* What happens if nobody can answer the call?\n",
+    "    * It gets queued\n",
+    "* Do we need to handle 'VIP' calls where we put someone to the front of the line?\n",
+    "    * No\n",
+    "* Can we assume inputs are valid or do we have to validate them?\n",
+    "    * Assume they're valid"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Solution"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting call_center.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile call_center.py\n",
+    "from abc import ABCMeta, abstractmethod\n",
+    "from collections import deque\n",
+    "from enum import Enum\n",
+    "\n",
+    "\n",
+    "class Rank(Enum):\n",
+    "\n",
+    "    OPERATOR = 0\n",
+    "    SUPERVISOR = 1\n",
+    "    DIRECTOR = 2\n",
+    "\n",
+    "\n",
+    "class Employee(metaclass=ABCMeta):\n",
+    "\n",
+    "    def __init__(self, employee_id, name, rank, call_center):\n",
+    "        self.employee_id = employee_id\n",
+    "        self.name = name\n",
+    "        self.rank = rank\n",
+    "        self.call = None\n",
+    "        self.call_center = call_center\n",
+    "\n",
+    "    def take_call(self, call):\n",
+    "        \"\"\"Assume the employee will always successfully take the call.\"\"\"\n",
+    "        self.call = call\n",
+    "        self.call.employee = self\n",
+    "        self.call.state = CallState.IN_PROGRESS\n",
+    "\n",
+    "    def complete_call(self):\n",
+    "        self.call.state = CallState.COMPLETE\n",
+    "        self.call_center.notify_call_completed(self.call)\n",
+    "\n",
+    "    @abstractmethod\n",
+    "    def escalate_call(self):\n",
+    "        pass\n",
+    "\n",
+    "    def _escalate_call(self):\n",
+    "        self.call.state = CallState.READY\n",
+    "        call = self.call\n",
+    "        self.call = None\n",
+    "        self.call_center.notify_call_escalated(call)\n",
+    "\n",
+    "\n",
+    "class Operator(Employee):\n",
+    "\n",
+    "    def __init__(self, employee_id, name):\n",
+    "        super(Operator, self).__init__(employee_id, name, Rank.OPERATOR)\n",
+    "\n",
+    "    def escalate_call(self):\n",
+    "        self.call.level = Rank.SUPERVISOR\n",
+    "        self._escalate_call()\n",
+    "\n",
+    "\n",
+    "class Supervisor(Employee):\n",
+    "\n",
+    "    def __init__(self, employee_id, name):\n",
+    "        super(Operator, self).__init__(employee_id, name, Rank.SUPERVISOR)\n",
+    "\n",
+    "    def escalate_call(self):\n",
+    "        self.call.level = Rank.DIRECTOR\n",
+    "        self._escalate_call()\n",
+    "\n",
+    "\n",
+    "class Director(Employee):\n",
+    "\n",
+    "    def __init__(self, employee_id, name):\n",
+    "        super(Operator, self).__init__(employee_id, name, Rank.DIRECTOR)\n",
+    "\n",
+    "    def escalate_call(self):\n",
+    "        raise NotImplemented('Directors must be able to handle any call')\n",
+    "\n",
+    "\n",
+    "class CallState(Enum):\n",
+    "\n",
+    "    READY = 0\n",
+    "    IN_PROGRESS = 1\n",
+    "    COMPLETE = 2\n",
+    "\n",
+    "\n",
+    "class Call(object):\n",
+    "\n",
+    "    def __init__(self, rank):\n",
+    "        self.state = CallState.READY\n",
+    "        self.rank = rank\n",
+    "        self.employee = None\n",
+    "\n",
+    "\n",
+    "class CallCenter(object):\n",
+    "\n",
+    "    def __init__(self, operators, supervisors, directors):\n",
+    "        self.operators = operators\n",
+    "        self.supervisors = supervisors\n",
+    "        self.directors = directors\n",
+    "        self.queued_calls = deque()\n",
+    "\n",
+    "    def dispatch_call(self, call):\n",
+    "        if call.rank not in (Rank.OPERATOR, Rank.SUPERVISOR, Rank.DIRECTOR):\n",
+    "            raise ValueError('Invalid call rank: {}'.format(call.rank))\n",
+    "        employee = None\n",
+    "        if call.rank == Rank.OPERATOR:\n",
+    "            employee = self._dispatch_call(call, self.operators)\n",
+    "        if call.rank == Rank.SUPERVISOR or employee is None:\n",
+    "            employee = self._dispatch_call(call, self.supervisors)\n",
+    "        if call.rank == Rank.DIRECTOR or employee is None:\n",
+    "            employee = self._dispatch_call(call, self.directors)\n",
+    "        if employee is None:\n",
+    "            self.queued_calls.append(call)\n",
+    "\n",
+    "    def _dispatch_call(self, call, employees):\n",
+    "        for employee in employees:\n",
+    "            if employee.call is None:\n",
+    "                employee.take_call(call)\n",
+    "                return employee\n",
+    "        return None\n",
+    "\n",
+    "    def notify_call_escalated(self, call):  # ...\n",
+    "    def notify_call_completed(self, call):  # ...\n",
+    "    def dispatch_queued_call_to_newly_freed_employee(self, call, employee):  # ..."
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.4.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}
diff --git a/website/solutions/object_oriented_design/call_center/call_center.py b/website/solutions/object_oriented_design/call_center/call_center.py
new file mode 100644
index 00000000000..1d5e7bc6bc1
--- /dev/null
+++ b/website/solutions/object_oriented_design/call_center/call_center.py
@@ -0,0 +1,122 @@
+from abc import ABCMeta, abstractmethod
+from collections import deque
+from enum import Enum
+
+
+class Rank(Enum):
+
+    OPERATOR = 0
+    SUPERVISOR = 1
+    DIRECTOR = 2
+
+
+class Employee(metaclass=ABCMeta):
+
+    def __init__(self, employee_id, name, rank, call_center):
+        self.employee_id = employee_id
+        self.name = name
+        self.rank = rank
+        self.call = None
+        self.call_center = call_center
+
+    def take_call(self, call):
+        """Assume the employee will always successfully take the call."""
+        self.call = call
+        self.call.employee = self
+        self.call.state = CallState.IN_PROGRESS
+
+    def complete_call(self):
+        self.call.state = CallState.COMPLETE
+        self.call_center.notify_call_completed(self.call)
+
+    @abstractmethod
+    def escalate_call(self):
+        pass
+
+    def _escalate_call(self):
+        self.call.state = CallState.READY
+        call = self.call
+        self.call = None
+        self.call_center.notify_call_escalated(call)
+
+
+class Operator(Employee):
+
+    def __init__(self, employee_id, name):
+        super(Operator, self).__init__(employee_id, name, Rank.OPERATOR)
+
+    def escalate_call(self):
+        self.call.level = Rank.SUPERVISOR
+        self._escalate_call()
+
+
+class Supervisor(Employee):
+
+    def __init__(self, employee_id, name):
+        super(Operator, self).__init__(employee_id, name, Rank.SUPERVISOR)
+
+    def escalate_call(self):
+        self.call.level = Rank.DIRECTOR
+        self._escalate_call()
+
+
+class Director(Employee):
+
+    def __init__(self, employee_id, name):
+        super(Operator, self).__init__(employee_id, name, Rank.DIRECTOR)
+
+    def escalate_call(self):
+        raise NotImplementedError('Directors must be able to handle any call')
+
+
+class CallState(Enum):
+
+    READY = 0
+    IN_PROGRESS = 1
+    COMPLETE = 2
+
+
+class Call(object):
+
+    def __init__(self, rank):
+        self.state = CallState.READY
+        self.rank = rank
+        self.employee = None
+
+
+class CallCenter(object):
+
+    def __init__(self, operators, supervisors, directors):
+        self.operators = operators
+        self.supervisors = supervisors
+        self.directors = directors
+        self.queued_calls = deque()
+
+    def dispatch_call(self, call):
+        if call.rank not in (Rank.OPERATOR, Rank.SUPERVISOR, Rank.DIRECTOR):
+            raise ValueError('Invalid call rank: {}'.format(call.rank))
+        employee = None
+        if call.rank == Rank.OPERATOR:
+            employee = self._dispatch_call(call, self.operators)
+        if call.rank == Rank.SUPERVISOR or employee is None:
+            employee = self._dispatch_call(call, self.supervisors)
+        if call.rank == Rank.DIRECTOR or employee is None:
+            employee = self._dispatch_call(call, self.directors)
+        if employee is None:
+            self.queued_calls.append(call)
+
+    def _dispatch_call(self, call, employees):
+        for employee in employees:
+            if employee.call is None:
+                employee.take_call(call)
+                return employee
+        return None
+
+    def notify_call_escalated(self, call):
+        pass
+
+    def notify_call_completed(self, call):
+        pass
+
+    def dispatch_queued_call_to_newly_freed_employee(self, call, employee):
+        pass
diff --git a/website/solutions/object_oriented_design/deck_of_cards/__init__.py b/website/solutions/object_oriented_design/deck_of_cards/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/object_oriented_design/deck_of_cards/deck_of_cards.ipynb b/website/solutions/object_oriented_design/deck_of_cards/deck_of_cards.ipynb
new file mode 100644
index 00000000000..1a9bc1c530b
--- /dev/null
+++ b/website/solutions/object_oriented_design/deck_of_cards/deck_of_cards.ipynb
@@ -0,0 +1,195 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This notebook was prepared by [Donne Martin](https://github.com/donnemartin). Source and license info is on [GitHub](https://github.com/donnemartin/system-design-primer)."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Design a deck of cards"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Constraints and assumptions\n",
+    "\n",
+    "* Is this a generic deck of cards for games like poker and black jack?\n",
+    "    * Yes, design a generic deck then extend it to black jack\n",
+    "* Can we assume the deck has 52 cards (2-10, Jack, Queen, King, Ace) and 4 suits?\n",
+    "    * Yes\n",
+    "* Can we assume inputs are valid or do we have to validate them?\n",
+    "    * Assume they're valid"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Solution"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting deck_of_cards.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile deck_of_cards.py\n",
+    "from abc import ABCMeta, abstractmethod\n",
+    "from enum import Enum\n",
+    "import sys\n",
+    "\n",
+    "\n",
+    "class Suit(Enum):\n",
+    "\n",
+    "    HEART = 0\n",
+    "    DIAMOND = 1\n",
+    "    CLUBS = 2\n",
+    "    SPADE = 3\n",
+    "\n",
+    "\n",
+    "class Card(metaclass=ABCMeta):\n",
+    "\n",
+    "    def __init__(self, value, suit):\n",
+    "        self.value = value\n",
+    "        self.suit = suit\n",
+    "        self.is_available = True\n",
+    "\n",
+    "    @property\n",
+    "    @abstractmethod\n",
+    "    def value(self):\n",
+    "        pass\n",
+    "\n",
+    "    @value.setter\n",
+    "    @abstractmethod\n",
+    "    def value(self, other):\n",
+    "        pass\n",
+    "\n",
+    "\n",
+    "class BlackJackCard(Card):\n",
+    "\n",
+    "    def __init__(self, value, suit):\n",
+    "        super(BlackJackCard, self).__init__(value, suit)\n",
+    "\n",
+    "    def is_ace(self):\n",
+    "        return self._value == 1\n",
+    "\n",
+    "    def is_face_card(self):\n",
+    "        \"\"\"Jack = 11, Queen = 12, King = 13\"\"\"\n",
+    "        return 10 < self._value <= 13\n",
+    "\n",
+    "    @property\n",
+    "    def value(self):\n",
+    "        if self.is_ace() == 1:\n",
+    "            return 1\n",
+    "        elif self.is_face_card():\n",
+    "            return 10\n",
+    "        else:\n",
+    "            return self._value\n",
+    "\n",
+    "    @value.setter\n",
+    "    def value(self, new_value):\n",
+    "        if 1 <= new_value <= 13:\n",
+    "            self._value = new_value\n",
+    "        else:\n",
+    "            raise ValueError('Invalid card value: {}'.format(new_value))\n",
+    "\n",
+    "\n",
+    "class Hand(object):\n",
+    "\n",
+    "    def __init__(self, cards):\n",
+    "        self.cards = cards\n",
+    "\n",
+    "    def add_card(self, card):\n",
+    "        self.cards.append(card)\n",
+    "\n",
+    "    def score(self):\n",
+    "        total_value = 0\n",
+    "        for card in self.cards:\n",
+    "            total_value += card.value\n",
+    "        return total_value\n",
+    "\n",
+    "\n",
+    "class BlackJackHand(Hand):\n",
+    "\n",
+    "    BLACKJACK = 21\n",
+    "\n",
+    "    def __init__(self, cards):\n",
+    "        super(BlackJackHand, self).__init__(cards)\n",
+    "\n",
+    "    def score(self):\n",
+    "        min_over = sys.MAXSIZE\n",
+    "        max_under = -sys.MAXSIZE\n",
+    "        for score in self.possible_scores():\n",
+    "            if self.BLACKJACK < score < min_over:\n",
+    "                min_over = score\n",
+    "            elif max_under < score <= self.BLACKJACK:\n",
+    "                max_under = score\n",
+    "        return max_under if max_under != -sys.MAXSIZE else min_over\n",
+    "\n",
+    "    def possible_scores(self):\n",
+    "        \"\"\"Return a list of possible scores, taking Aces into account.\"\"\"\n",
+    "        # ...\n",
+    "\n",
+    "\n",
+    "class Deck(object):\n",
+    "\n",
+    "    def __init__(self, cards):\n",
+    "        self.cards = cards\n",
+    "        self.deal_index = 0\n",
+    "\n",
+    "    def remaining_cards(self):\n",
+    "        return len(self.cards) - deal_index\n",
+    "\n",
+    "    def deal_card():\n",
+    "        try:\n",
+    "            card = self.cards[self.deal_index]\n",
+    "            card.is_available = False\n",
+    "            self.deal_index += 1\n",
+    "        except IndexError:\n",
+    "            return None\n",
+    "        return card\n",
+    "\n",
+    "    def shuffle(self):  # ..."
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.4.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}
diff --git a/website/solutions/object_oriented_design/deck_of_cards/deck_of_cards.py b/website/solutions/object_oriented_design/deck_of_cards/deck_of_cards.py
new file mode 100644
index 00000000000..a47087585e0
--- /dev/null
+++ b/website/solutions/object_oriented_design/deck_of_cards/deck_of_cards.py
@@ -0,0 +1,117 @@
+from abc import ABCMeta, abstractmethod
+from enum import Enum
+import sys
+
+
+class Suit(Enum):
+
+    HEART = 0
+    DIAMOND = 1
+    CLUBS = 2
+    SPADE = 3
+
+
+class Card(metaclass=ABCMeta):
+
+    def __init__(self, value, suit):
+        self.value = value
+        self.suit = suit
+        self.is_available = True
+
+    @property
+    @abstractmethod
+    def value(self):
+        pass
+
+    @value.setter
+    @abstractmethod
+    def value(self, other):
+        pass
+
+
+class BlackJackCard(Card):
+
+    def __init__(self, value, suit):
+        super(BlackJackCard, self).__init__(value, suit)
+
+    def is_ace(self):
+        return True if self._value == 1 else False
+
+    def is_face_card(self):
+        """Jack = 11, Queen = 12, King = 13"""
+        return True if 10 < self._value <= 13 else False
+
+    @property
+    def value(self):
+        if self.is_ace() == 1:
+            return 1
+        elif self.is_face_card():
+            return 10
+        else:
+            return self._value
+
+    @value.setter
+    def value(self, new_value):
+        if 1 <= new_value <= 13:
+            self._value = new_value
+        else:
+            raise ValueError('Invalid card value: {}'.format(new_value))
+
+
+class Hand(object):
+
+    def __init__(self, cards):
+        self.cards = cards
+
+    def add_card(self, card):
+        self.cards.append(card)
+
+    def score(self):
+        total_value = 0
+        for card in self.cards:
+            total_value += card.value
+        return total_value
+
+
+class BlackJackHand(Hand):
+
+    BLACKJACK = 21
+
+    def __init__(self, cards):
+        super(BlackJackHand, self).__init__(cards)
+
+    def score(self):
+        min_over = sys.MAXSIZE
+        max_under = -sys.MAXSIZE
+        for score in self.possible_scores():
+            if self.BLACKJACK < score < min_over:
+                min_over = score
+            elif max_under < score <= self.BLACKJACK:
+                max_under = score
+        return max_under if max_under != -sys.MAXSIZE else min_over
+
+    def possible_scores(self):
+        """Return a list of possible scores, taking Aces into account."""
+        pass
+
+
+class Deck(object):
+
+    def __init__(self, cards):
+        self.cards = cards
+        self.deal_index = 0
+
+    def remaining_cards(self):
+        return len(self.cards) - self.deal_index
+
+    def deal_card(self):
+        try:
+            card = self.cards[self.deal_index]
+            card.is_available = False
+            self.deal_index += 1
+        except IndexError:
+            return None
+        return card
+
+    def shuffle(self):
+        pass
diff --git a/website/solutions/object_oriented_design/hash_table/__init__.py b/website/solutions/object_oriented_design/hash_table/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/object_oriented_design/hash_table/hash_map.ipynb b/website/solutions/object_oriented_design/hash_table/hash_map.ipynb
new file mode 100644
index 00000000000..92713d94bb7
--- /dev/null
+++ b/website/solutions/object_oriented_design/hash_table/hash_map.ipynb
@@ -0,0 +1,121 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This notebook was prepared by [Donne Martin](https://github.com/donnemartin). Source and license info is on [GitHub](https://github.com/donnemartin/system-design-primer)."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Design a hash map"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Constraints and assumptions\n",
+    "\n",
+    "* For simplicity, are the keys integers only?\n",
+    "    * Yes\n",
+    "* For collision resolution, can we use chaining?\n",
+    "    * Yes\n",
+    "* Do we have to worry about load factors?\n",
+    "    * No\n",
+    "* Can we assume inputs are valid or do we have to validate them?\n",
+    "    * Assume they're valid\n",
+    "* Can we assume this fits memory?\n",
+    "    * Yes"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Solution"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting hash_map.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile hash_map.py\n",
+    "class Item(object):\n",
+    "\n",
+    "    def __init__(self, key, value):\n",
+    "        self.key = key\n",
+    "        self.value = value\n",
+    "\n",
+    "\n",
+    "class HashTable(object):\n",
+    "\n",
+    "    def __init__(self, size):\n",
+    "        self.size = size\n",
+    "        self.table = [[] for _ in range(self.size)]\n",
+    "\n",
+    "    def _hash_function(self, key):\n",
+    "        return key % self.size\n",
+    "\n",
+    "    def set(self, key, value):\n",
+    "        hash_index = self._hash_function(key)\n",
+    "        for item in self.table[hash_index]:\n",
+    "            if item.key == key:\n",
+    "                item.value = value\n",
+    "                return\n",
+    "        self.table[hash_index].append(Item(key, value))\n",
+    "\n",
+    "    def get(self, key):\n",
+    "        hash_index = self._hash_function(key)\n",
+    "        for item in self.table[hash_index]:\n",
+    "            if item.key == key:\n",
+    "                return item.value\n",
+    "        raise KeyError('Key not found')\n",
+    "\n",
+    "    def remove(self, key):\n",
+    "        hash_index = self._hash_function(key)\n",
+    "        for index, item in enumerate(self.table[hash_index]):\n",
+    "            if item.key == key:\n",
+    "                del self.table[hash_index][index]\n",
+    "                return\n",
+    "        raise KeyError('Key not found')"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.4.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}
diff --git a/website/solutions/object_oriented_design/hash_table/hash_map.py b/website/solutions/object_oriented_design/hash_table/hash_map.py
new file mode 100644
index 00000000000..33d9a35de15
--- /dev/null
+++ b/website/solutions/object_oriented_design/hash_table/hash_map.py
@@ -0,0 +1,38 @@
+class Item(object):
+
+    def __init__(self, key, value):
+        self.key = key
+        self.value = value
+
+
+class HashTable(object):
+
+    def __init__(self, size):
+        self.size = size
+        self.table = [[] for _ in range(self.size)]
+
+    def _hash_function(self, key):
+        return key % self.size
+
+    def set(self, key, value):
+        hash_index = self._hash_function(key)
+        for item in self.table[hash_index]:
+            if item.key == key:
+                item.value = value
+                return
+        self.table[hash_index].append(Item(key, value))
+
+    def get(self, key):
+        hash_index = self._hash_function(key)
+        for item in self.table[hash_index]:
+            if item.key == key:
+                return item.value
+        raise KeyError('Key not found')
+
+    def remove(self, key):
+        hash_index = self._hash_function(key)
+        for index, item in enumerate(self.table[hash_index]):
+            if item.key == key:
+                del self.table[hash_index][index]
+                return
+        raise KeyError('Key not found')
diff --git a/website/solutions/object_oriented_design/lru_cache/__init__.py b/website/solutions/object_oriented_design/lru_cache/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/object_oriented_design/lru_cache/lru_cache.ipynb b/website/solutions/object_oriented_design/lru_cache/lru_cache.ipynb
new file mode 100644
index 00000000000..cd91da11ba5
--- /dev/null
+++ b/website/solutions/object_oriented_design/lru_cache/lru_cache.ipynb
@@ -0,0 +1,141 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This notebook was prepared by [Donne Martin](https://github.com/donnemartin). Source and license info is on [GitHub](https://github.com/donnemartin/system-design-primer)."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Design an LRU cache"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Constraints and assumptions\n",
+    "\n",
+    "* What are we caching?\n",
+    "    * We are caching the results of web queries\n",
+    "* Can we assume inputs are valid or do we have to validate them?\n",
+    "    * Assume they're valid\n",
+    "* Can we assume this fits memory?\n",
+    "    * Yes"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Solution"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting lru_cache.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile lru_cache.py\n",
+    "class Node(object):\n",
+    "\n",
+    "    def __init__(self, results):\n",
+    "        self.results = results\n",
+    "        self.prev = None\n",
+    "        self.next = None\n",
+    "\n",
+    "\n",
+    "class LinkedList(object):\n",
+    "\n",
+    "    def __init__(self):\n",
+    "        self.head = None\n",
+    "        self.tail = None\n",
+    "\n",
+    "    def move_to_front(self, node):  # ...\n",
+    "    def append_to_front(self, node):  # ...\n",
+    "    def remove_from_tail(self):  # ...\n",
+    "\n",
+    "\n",
+    "class Cache(object):\n",
+    "\n",
+    "    def __init__(self, MAX_SIZE):\n",
+    "        self.MAX_SIZE = MAX_SIZE\n",
+    "        self.size = 0\n",
+    "        self.lookup = {}  # key: query, value: node\n",
+    "        self.linked_list = LinkedList()\n",
+    "\n",
+    "    def get(self, query)\n",
+    "        \"\"\"Get the stored query result from the cache.\n",
+    "        \n",
+    "        Accessing a node updates its position to the front of the LRU list.\n",
+    "        \"\"\"\n",
+    "        node = self.lookup.get(query)\n",
+    "        if node is None:\n",
+    "            return None\n",
+    "        self.linked_list.move_to_front(node)\n",
+    "        return node.results\n",
+    "\n",
+    "    def set(self, results, query):\n",
+    "        \"\"\"Set the result for the given query key in the cache.\n",
+    "        \n",
+    "        When updating an entry, updates its position to the front of the LRU list.\n",
+    "        If the entry is new and the cache is at capacity, removes the oldest entry\n",
+    "        before the new entry is added.\n",
+    "        \"\"\"\n",
+    "        node = self.lookup.get(query)\n",
+    "        if node is not None:\n",
+    "            # Key exists in cache, update the value\n",
+    "            node.results = results\n",
+    "            self.linked_list.move_to_front(node)\n",
+    "        else:\n",
+    "            # Key does not exist in cache\n",
+    "            if self.size == self.MAX_SIZE:\n",
+    "                # Remove the oldest entry from the linked list and lookup\n",
+    "                self.lookup.pop(self.linked_list.tail.query, None)\n",
+    "                self.linked_list.remove_from_tail()\n",
+    "            else:\n",
+    "                self.size += 1\n",
+    "            # Add the new key and value\n",
+    "            new_node = Node(results)\n",
+    "            self.linked_list.append_to_front(new_node)\n",
+    "            self.lookup[query] = new_node"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.4.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}
diff --git a/website/solutions/object_oriented_design/lru_cache/lru_cache.py b/website/solutions/object_oriented_design/lru_cache/lru_cache.py
new file mode 100644
index 00000000000..acee46516eb
--- /dev/null
+++ b/website/solutions/object_oriented_design/lru_cache/lru_cache.py
@@ -0,0 +1,66 @@
+class Node(object):
+
+    def __init__(self, results):
+        self.results = results
+        self.next = next
+
+
+class LinkedList(object):
+
+    def __init__(self):
+        self.head = None
+        self.tail = None
+
+    def move_to_front(self, node):
+        pass
+
+    def append_to_front(self, node):
+        pass
+
+    def remove_from_tail(self):
+        pass
+
+
+class Cache(object):
+
+    def __init__(self, MAX_SIZE):
+        self.MAX_SIZE = MAX_SIZE
+        self.size = 0
+        self.lookup = {}  # key: query, value: node
+        self.linked_list = LinkedList()
+
+    def get(self, query):
+        """Get the stored query result from the cache.
+
+        Accessing a node updates its position to the front of the LRU list.
+        """
+        node = self.lookup.get(query)
+        if node is None:
+            return None
+        self.linked_list.move_to_front(node)
+        return node.results
+
+    def set(self, results, query):
+        """Set the result for the given query key in the cache.
+
+        When updating an entry, updates its position to the front of the LRU list.
+        If the entry is new and the cache is at capacity, removes the oldest entry
+        before the new entry is added.
+        """
+        node = self.lookup.get(query)
+        if node is not None:
+            # Key exists in cache, update the value
+            node.results = results
+            self.linked_list.move_to_front(node)
+        else:
+            # Key does not exist in cache
+            if self.size == self.MAX_SIZE:
+                # Remove the oldest entry from the linked list and lookup
+                self.lookup.pop(self.linked_list.tail.query, None)
+                self.linked_list.remove_from_tail()
+            else:
+                self.size += 1
+            # Add the new key and value
+            new_node = Node(results)
+            self.linked_list.append_to_front(new_node)
+            self.lookup[query] = new_node
diff --git a/website/solutions/object_oriented_design/online_chat/__init__.py b/website/solutions/object_oriented_design/online_chat/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/object_oriented_design/online_chat/online_chat.ipynb b/website/solutions/object_oriented_design/online_chat/online_chat.ipynb
new file mode 100644
index 00000000000..b9f84ef424e
--- /dev/null
+++ b/website/solutions/object_oriented_design/online_chat/online_chat.ipynb
@@ -0,0 +1,171 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This notebook was prepared by [Donne Martin](https://github.com/donnemartin). Source and license info is on [GitHub](https://github.com/donnemartin/system-design-primer)."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Design an online chat"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Constraints and assumptions\n",
+    "\n",
+    "* Assume we'll focus on the following workflows:\n",
+    "    * Text conversations only\n",
+    "    * Users\n",
+    "        * Add a user\n",
+    "        * Remove a user\n",
+    "        * Update a user\n",
+    "        * Add to a user's friends list\n",
+    "            * Add friend request\n",
+    "                * Approve friend request\n",
+    "                * Reject friend request\n",
+    "        * Remove from a user's friends list\n",
+    "    * Create a group chat\n",
+    "        * Invite friends to a group chat\n",
+    "        * Post a message to a group chat\n",
+    "    * Private 1-1 chat\n",
+    "        * Invite a friend to a private chat\n",
+    "        * Post a meesage to a private chat\n",
+    "* No need to worry about scaling initially"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Solution"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting online_chat.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile online_chat.py\n",
+    "from abc import ABCMeta\n",
+    "\n",
+    "\n",
+    "class UserService(object):\n",
+    "\n",
+    "    def __init__(self):\n",
+    "        self.users_by_id = {}  # key: user id, value: User\n",
+    "\n",
+    "    def add_user(self, user_id, name, pass_hash):  # ...\n",
+    "    def remove_user(self, user_id):  # ...\n",
+    "    def add_friend_request(self, from_user_id, to_user_id):  # ...\n",
+    "    def approve_friend_request(self, from_user_id, to_user_id):  # ...\n",
+    "    def reject_friend_request(self, from_user_id, to_user_id):  # ...\n",
+    "\n",
+    "\n",
+    "class User(object):\n",
+    "\n",
+    "    def __init__(self, user_id, name, pass_hash):\n",
+    "        self.user_id = user_id\n",
+    "        self.name = name\n",
+    "        self.pass_hash = pass_hash\n",
+    "        self.friends_by_id = {}  # key: friend id, value: User\n",
+    "        self.friend_ids_to_private_chats = {}  # key: friend id, value: private chats\n",
+    "        self.group_chats_by_id = {}  # key: chat id, value: GroupChat\n",
+    "        self.received_friend_requests_by_friend_id = {}  # key: friend id, value: AddRequest\n",
+    "        self.sent_friend_requests_by_friend_id = {}  # key: friend id, value: AddRequest\n",
+    "\n",
+    "    def message_user(self, friend_id, message):  # ...\n",
+    "    def message_group(self, group_id, message):  # ...\n",
+    "    def send_friend_request(self, friend_id):  # ...\n",
+    "    def receive_friend_request(self, friend_id):  # ...\n",
+    "    def approve_friend_request(self, friend_id):  # ...\n",
+    "    def reject_friend_request(self, friend_id):  # ...\n",
+    "\n",
+    "\n",
+    "class Chat(metaclass=ABCMeta):\n",
+    "\n",
+    "    def __init__(self, chat_id):\n",
+    "        self.chat_id = chat_id\n",
+    "        self.users = []\n",
+    "        self.messages = []\n",
+    "\n",
+    "\n",
+    "class PrivateChat(Chat):\n",
+    "\n",
+    "    def __init__(self, first_user, second_user):\n",
+    "        super(PrivateChat, self).__init__()\n",
+    "        self.users.append(first_user)\n",
+    "        self.users.append(second_user)\n",
+    "\n",
+    "\n",
+    "class GroupChat(Chat):\n",
+    "\n",
+    "    def add_user(self, user):  # ...\n",
+    "    def remove_user(self, user):  # ... \n",
+    "\n",
+    "\n",
+    "class Message(object):\n",
+    "\n",
+    "    def __init__(self, message_id, message, timestamp):\n",
+    "        self.message_id = message_id\n",
+    "        self.message = message\n",
+    "        self.timestamp = timestamp\n",
+    "\n",
+    "\n",
+    "class AddRequest(object):\n",
+    "\n",
+    "    def __init__(self, from_user_id, to_user_id, request_status, timestamp):\n",
+    "        self.from_user_id = from_user_id\n",
+    "        self.to_user_id = to_user_id\n",
+    "        self.request_status = request_status\n",
+    "        self.timestamp = timestamp\n",
+    "\n",
+    "\n",
+    "class RequestStatus(Enum):\n",
+    "\n",
+    "    UNREAD = 0\n",
+    "    READ = 1\n",
+    "    ACCEPTED = 2\n",
+    "    REJECTED = 3"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.4.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}
diff --git a/website/solutions/object_oriented_design/online_chat/online_chat.py b/website/solutions/object_oriented_design/online_chat/online_chat.py
new file mode 100644
index 00000000000..7063ca04426
--- /dev/null
+++ b/website/solutions/object_oriented_design/online_chat/online_chat.py
@@ -0,0 +1,104 @@
+from abc import ABCMeta
+from enum import Enum
+
+
+class UserService(object):
+
+    def __init__(self):
+        self.users_by_id = {}  # key: user id, value: User
+
+    def add_user(self, user_id, name, pass_hash):
+        pass
+
+    def remove_user(self, user_id):
+        pass
+
+    def add_friend_request(self, from_user_id, to_user_id):
+        pass
+
+    def approve_friend_request(self, from_user_id, to_user_id):
+        pass
+
+    def reject_friend_request(self, from_user_id, to_user_id):
+        pass
+
+
+class User(object):
+
+    def __init__(self, user_id, name, pass_hash):
+        self.user_id = user_id
+        self.name = name
+        self.pass_hash = pass_hash
+        self.friends_by_id = {}  # key: friend id, value: User
+        self.friend_ids_to_private_chats = {}  # key: friend id, value: private chats
+        self.group_chats_by_id = {}  # key: chat id, value: GroupChat
+        self.received_friend_requests_by_friend_id = {}  # key: friend id, value: AddRequest
+        self.sent_friend_requests_by_friend_id = {}  # key: friend id, value: AddRequest
+
+    def message_user(self, friend_id, message):
+        pass
+
+    def message_group(self, group_id, message):
+        pass
+
+    def send_friend_request(self, friend_id):
+        pass
+
+    def receive_friend_request(self, friend_id):
+        pass
+
+    def approve_friend_request(self, friend_id):
+        pass
+
+    def reject_friend_request(self, friend_id):
+        pass
+
+
+class Chat(metaclass=ABCMeta):
+
+    def __init__(self, chat_id):
+        self.chat_id = chat_id
+        self.users = []
+        self.messages = []
+
+
+class PrivateChat(Chat):
+
+    def __init__(self, first_user, second_user):
+        super(PrivateChat, self).__init__()
+        self.users.append(first_user)
+        self.users.append(second_user)
+
+
+class GroupChat(Chat):
+
+    def add_user(self, user):
+        pass
+
+    def remove_user(self, user):
+        pass
+
+
+class Message(object):
+
+    def __init__(self, message_id, message, timestamp):
+        self.message_id = message_id
+        self.message = message
+        self.timestamp = timestamp
+
+
+class AddRequest(object):
+
+    def __init__(self, from_user_id, to_user_id, request_status, timestamp):
+        self.from_user_id = from_user_id
+        self.to_user_id = to_user_id
+        self.request_status = request_status
+        self.timestamp = timestamp
+
+
+class RequestStatus(Enum):
+
+    UNREAD = 0
+    READ = 1
+    ACCEPTED = 2
+    REJECTED = 3
diff --git a/website/solutions/object_oriented_design/parking_lot/__init__.py b/website/solutions/object_oriented_design/parking_lot/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/object_oriented_design/parking_lot/parking_lot.ipynb b/website/solutions/object_oriented_design/parking_lot/parking_lot.ipynb
new file mode 100644
index 00000000000..4613b79bded
--- /dev/null
+++ b/website/solutions/object_oriented_design/parking_lot/parking_lot.ipynb
@@ -0,0 +1,204 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This notebook was prepared by [Donne Martin](https://github.com/donnemartin). Source and license info is on [GitHub](https://github.com/donnemartin/system-design-primer)."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Design a parking lot"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Constraints and assumptions\n",
+    "\n",
+    "* What types of vehicles should we support?\n",
+    "    * Motorcycle, Car, Bus\n",
+    "* Does each vehicle type take up a different amount of parking spots?\n",
+    "    * Yes\n",
+    "    * Motorcycle spot -> Motorcycle\n",
+    "    * Compact spot -> Motorcycle, Car\n",
+    "    * Large spot -> Motorcycle, Car\n",
+    "    * Bus can park if we have 5 consecutive \"large\" spots\n",
+    "* Does the parking lot have multiple levels?\n",
+    "    * Yes"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Solution"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting parking_lot.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile parking_lot.py\n",
+    "from abc import ABCMeta, abstractmethod\n",
+    "\n",
+    "\n",
+    "class VehicleSize(Enum):\n",
+    "\n",
+    "    MOTORCYCLE = 0\n",
+    "    COMPACT = 1\n",
+    "    LARGE = 2\n",
+    "\n",
+    "\n",
+    "class Vehicle(metaclass=ABCMeta):\n",
+    "\n",
+    "    def __init__(self, vehicle_size, license_plate, spot_size):\n",
+    "        self.vehicle_size = vehicle_size\n",
+    "        self.license_plate = license_plate\n",
+    "        self.spot_size = spot_size\n",
+    "        self.spots_taken = []\n",
+    "\n",
+    "    def clear_spots(self):\n",
+    "        for spot in self.spots_taken:\n",
+    "            spot.remove_vehicle(self)\n",
+    "        self.spots_taken = []\n",
+    "\n",
+    "    def take_spot(self, spot):\n",
+    "        self.spots_taken.append(spot)\n",
+    "\n",
+    "    @abstractmethod\n",
+    "    def can_fit_in_spot(self, spot):\n",
+    "        pass\n",
+    "\n",
+    "\n",
+    "class Motorcycle(Vehicle):\n",
+    "\n",
+    "    def __init__(self, license_plate):\n",
+    "        super(Motorcycle, self).__init__(VehicleSize.MOTORCYCLE, license_plate, spot_size=1)\n",
+    "\n",
+    "    def can_fit_in_spot(self, spot):\n",
+    "        return True\n",
+    "\n",
+    "\n",
+    "class Car(Vehicle):\n",
+    "\n",
+    "    def __init__(self, license_plate):\n",
+    "        super(Car, self).__init__(VehicleSize.COMPACT, license_plate, spot_size=1)\n",
+    "\n",
+    "    def can_fit_in_spot(self, spot):\n",
+    "        return True if (spot.size == LARGE or spot.size == COMPACT) else False\n",
+    "\n",
+    "\n",
+    "class Bus(Vehicle):\n",
+    "\n",
+    "    def __init__(self, license_plate):\n",
+    "        super(Bus, self).__init__(VehicleSize.LARGE, license_plate, spot_size=5)\n",
+    "\n",
+    "    def can_fit_in_spot(self, spot):\n",
+    "        return True if spot.size == LARGE else False\n",
+    "\n",
+    "\n",
+    "class ParkingLot(object):\n",
+    "\n",
+    "    def __init__(self, num_levels):\n",
+    "        self.num_levels = num_levels\n",
+    "        self.levels = []\n",
+    "\n",
+    "    def park_vehicle(self, vehicle):\n",
+    "        for level in levels:\n",
+    "            if level.park_vehicle(vehicle):\n",
+    "                return True\n",
+    "        return False\n",
+    "\n",
+    "\n",
+    "class Level(object):\n",
+    "\n",
+    "    SPOTS_PER_ROW = 10\n",
+    "\n",
+    "    def __init__(self, floor, total_spots):\n",
+    "        self.floor = floor\n",
+    "        self.num_spots = total_spots\n",
+    "        self.available_spots = 0\n",
+    "        self.parking_spots = []\n",
+    "\n",
+    "    def spot_freed(self):\n",
+    "        self.available_spots += 1\n",
+    "\n",
+    "    def park_vehicle(self, vehicle):\n",
+    "        spot = self._find_available_spot(vehicle)\n",
+    "        if spot is None:\n",
+    "            return None\n",
+    "        else:\n",
+    "            spot.park_vehicle(vehicle)\n",
+    "            return spot\n",
+    "\n",
+    "    def _find_available_spot(self, vehicle):\n",
+    "        \"\"\"Find an available spot where vehicle can fit, or return None\"\"\"\n",
+    "        # ...\n",
+    "\n",
+    "    def _park_starting_at_spot(self, spot, vehicle):\n",
+    "        \"\"\"Occupy starting at spot.spot_number to vehicle.spot_size.\"\"\"\n",
+    "        # ...\n",
+    "\n",
+    "\n",
+    "class ParkingSpot(object):\n",
+    "\n",
+    "    def __init__(self, level, row, spot_number, spot_size, vehicle_size):\n",
+    "        self.level = level\n",
+    "        self.row = row\n",
+    "        self.spot_number = spot_number\n",
+    "        self.spot_size = spot_size\n",
+    "        self.vehicle_size = vehicle_size\n",
+    "        self.vehicle = None\n",
+    "\n",
+    "    def is_available(self):\n",
+    "        return True if self.vehicle is None else False\n",
+    "\n",
+    "    def can_fit_vehicle(self, vehicle):\n",
+    "        if self.vehicle is not None:\n",
+    "            return False\n",
+    "        return vehicle.can_fit_in_spot(self)\n",
+    "\n",
+    "    def park_vehicle(self, vehicle):  # ...\n",
+    "    def remove_vehicle(self):  # ..."
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.4.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}
diff --git a/website/solutions/object_oriented_design/parking_lot/parking_lot.py b/website/solutions/object_oriented_design/parking_lot/parking_lot.py
new file mode 100644
index 00000000000..08852d9dc22
--- /dev/null
+++ b/website/solutions/object_oriented_design/parking_lot/parking_lot.py
@@ -0,0 +1,125 @@
+from abc import ABCMeta, abstractmethod
+from enum import Enum
+
+
+class VehicleSize(Enum):
+
+    MOTORCYCLE = 0
+    COMPACT = 1
+    LARGE = 2
+
+
+class Vehicle(metaclass=ABCMeta):
+
+    def __init__(self, vehicle_size, license_plate, spot_size):
+        self.vehicle_size = vehicle_size
+        self.license_plate = license_plate
+        self.spot_size
+        self.spots_taken = []
+
+    def clear_spots(self):
+        for spot in self.spots_taken:
+            spot.remove_vehicle(self)
+        self.spots_taken = []
+
+    def take_spot(self, spot):
+        self.spots_taken.append(spot)
+
+    @abstractmethod
+    def can_fit_in_spot(self, spot):
+        pass
+
+
+class Motorcycle(Vehicle):
+
+    def __init__(self, license_plate):
+        super(Motorcycle, self).__init__(VehicleSize.MOTORCYCLE, license_plate, spot_size=1)
+
+    def can_fit_in_spot(self, spot):
+        return True
+
+
+class Car(Vehicle):
+
+    def __init__(self, license_plate):
+        super(Car, self).__init__(VehicleSize.COMPACT, license_plate, spot_size=1)
+
+    def can_fit_in_spot(self, spot):
+        return spot.size in (VehicleSize.LARGE, VehicleSize.COMPACT)
+
+
+class Bus(Vehicle):
+
+    def __init__(self, license_plate):
+        super(Bus, self).__init__(VehicleSize.LARGE, license_plate, spot_size=5)
+
+    def can_fit_in_spot(self, spot):
+        return spot.size == VehicleSize.LARGE
+
+
+class ParkingLot(object):
+
+    def __init__(self, num_levels):
+        self.num_levels = num_levels
+        self.levels = []  # List of Levels
+
+    def park_vehicle(self, vehicle):
+        for level in self.levels:
+            if level.park_vehicle(vehicle):
+                return True
+        return False
+
+
+class Level(object):
+
+    SPOTS_PER_ROW = 10
+
+    def __init__(self, floor, total_spots):
+        self.floor = floor
+        self.num_spots = total_spots
+        self.available_spots = 0
+        self.spots = []  # List of ParkingSpots
+
+    def spot_freed(self):
+        self.available_spots += 1
+
+    def park_vehicle(self, vehicle):
+        spot = self._find_available_spot(vehicle)
+        if spot is None:
+            return None
+        else:
+            spot.park_vehicle(vehicle)
+            return spot
+
+    def _find_available_spot(self, vehicle):
+        """Find an available spot where vehicle can fit, or return None"""
+        pass
+
+    def _park_starting_at_spot(self, spot, vehicle):
+        """Occupy starting at spot.spot_number to vehicle.spot_size."""
+        pass
+
+
+class ParkingSpot(object):
+
+    def __init__(self, level, row, spot_number, spot_size, vehicle_size):
+        self.level = level
+        self.row = row
+        self.spot_number = spot_number
+        self.spot_size = spot_size
+        self.vehicle_size = vehicle_size
+        self.vehicle = None
+
+    def is_available(self):
+        return True if self.vehicle is None else False
+
+    def can_fit_vehicle(self, vehicle):
+        if self.vehicle is not None:
+            return False
+        return vehicle.can_fit_in_spot(self)
+
+    def park_vehicle(self, vehicle):
+        pass
+
+    def remove_vehicle(self):
+        pass
diff --git a/website/solutions/system_design/mint/README-zh-Hans.md b/website/solutions/system_design/mint/README-zh-Hans.md
new file mode 100644
index 00000000000..58467bc6bf1
--- /dev/null
+++ b/website/solutions/system_design/mint/README-zh-Hans.md
@@ -0,0 +1,440 @@
+# 设计 Mint.com
+
+**注意：这个文档中的链接会直接指向[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题索引)中的有关部分，以避免重复的内容。您可以参考链接的相关内容，来了解其总的要点、方案的权衡取舍以及可选的替代方案。**
+
+## 第一步：简述用例与约束条件
+
+> 搜集需求与问题的范围。
+> 提出问题来明确用例与约束条件。
+> 讨论假设。
+
+我们将在没有面试官明确说明问题的情况下，自己定义一些用例以及限制条件。
+
+### 用例
+
+#### 我们将把问题限定在仅处理以下用例的范围中
+
+* **用户** 连接到一个财务账户
+* **服务** 从账户中提取交易
+    * 每日更新
+    * 分类交易
+        * 允许用户手动分类
+        * 不自动重新分类
+    * 按类别分析每月支出
+* **服务** 推荐预算
+    * 允许用户手动设置预算
+    * 当接近或者超出预算时，发送通知
+* **服务** 具有高可用性
+
+#### 非用例范围
+
+* **服务** 执行附加的日志记录和分析
+
+### 限制条件与假设
+
+#### 提出假设
+
+* 网络流量非均匀分布
+* 自动账户日更新只适用于 30 天内活跃的用户
+* 添加或者移除财务账户相对较少
+* 预算通知不需要及时
+* 1000 万用户
+    * 每个用户10个预算类别= 1亿个预算项
+    * 示例类别:
+        * Housing = $1,000
+        * Food = $200
+        * Gas = $100
+    * 卖方确定交易类别
+        * 50000 个卖方
+* 3000 万财务账户
+* 每月 50 亿交易
+* 每月 5 亿读请求
+* 10:1 读写比
+    * Write-heavy，用户每天都进行交易，但是每天很少访问该网站
+
+#### 计算用量
+
+**如果你需要进行粗略的用量计算，请向你的面试官说明。**
+
+* 每次交易的用量:
+    * `user_id` - 8 字节
+    * `created_at` - 5 字节
+    * `seller` - 32 字节
+    * `amount` - 5 字节
+    * Total: ~50 字节
+* 每月产生 250 GB 新的交易内容
+    * 每次交易 50 比特 * 50 亿交易每月
+    * 3年内新的交易内容 9 TB
+    * Assume most are new transactions instead of updates to existing ones
+* 平均每秒产生 2000 次交易
+* 平均每秒产生 200 读请求
+
+便利换算指南：
+
+* 每个月有 250 万秒
+* 每秒一个请求 = 每个月 250 万次请求
+* 每秒 40 个请求 = 每个月 1 亿次请求
+* 每秒 400 个请求 = 每个月 10 亿次请求
+
+## 第二步：概要设计
+
+> 列出所有重要组件以规划概要设计。
+
+![Imgur](http://i.imgur.com/E8klrBh.png)
+
+## 第三步：设计核心组件
+
+> 深入每个核心组件的细节。
+
+### 用例：用户连接到一个财务账户
+
+我们可以将 1000 万用户的信息存储在一个[关系数据库](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms)中。我们应该讨论一下[选择SQL或NoSQL之间的用例和权衡](https://github.com/donnemartin/system-design-primer#sql-or-nosql)了。
+
+* **客户端** 作为一个[反向代理](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)，发送请求到 **Web 服务器**
+* **Web 服务器** 转发请求到 **账户API** 服务器
+* **账户API** 服务器将新输入的账户信息更新到 **SQL数据库** 的`accounts`表
+
+**告知你的面试官你准备写多少代码**。
+
+`accounts`表应该具有如下结构：
+
+```
+id int NOT NULL AUTO_INCREMENT
+created_at datetime NOT NULL
+last_update datetime NOT NULL
+account_url varchar(255) NOT NULL
+account_login varchar(32) NOT NULL
+account_password_hash char(64) NOT NULL
+user_id int NOT NULL
+PRIMARY KEY(id)
+FOREIGN KEY(user_id) REFERENCES users(id)
+```
+
+我们将在`id`，`user_id`和`created_at`等字段上创建一个[索引](https://github.com/donnemartin/system-design-primer#use-good-indices)以加速查找（对数时间而不是扫描整个表）并保持数据在内存中。从内存中顺序读取 1 MB数据花费大约250毫秒，而从SSD读取是其4倍，从磁盘读取是其80倍。<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+
+我们将使用公开的[**REST API**](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest):
+
+```
+$ curl -X POST --data '{ "user_id": "foo", "account_url": "bar", \
+    "account_login": "baz", "account_password": "qux" }' \
+    https://mint.com/api/v1/account
+```
+
+对于内部通信，我们可以使用[远程过程调用](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)。
+
+接下来，服务从账户中提取交易。
+
+### 用例：服务从账户中提取交易
+
+如下几种情况下，我们会想要从账户中提取信息：
+
+* 用户首次链接账户
+* 用户手动更新账户
+* 为过去 30 天内活跃的用户自动日更新
+
+数据流:
+
+* **客户端**向 **Web服务器** 发送请求
+* **Web服务器** 将请求转发到 **帐户API** 服务器
+* **帐户API** 服务器将job放在 **队列** 中，如 [Amazon SQS](https://aws.amazon.com/sqs/) 或者 [RabbitMQ](https://www.rabbitmq.com/)
+    * 提取交易可能需要一段时间，我们可能希望[与队列异步](https://github.com/donnemartin/system-design-primer#asynchronism)地来做，虽然这会引入额外的复杂度。
+* **交易提取服务** 执行如下操作：
+    * 从 **Queue** 中拉取并从金融机构中提取给定用户的交易，将结果作为原始日志文件存储在 **对象存储区**。
+    * 使用 **分类服务** 来分类每个交易
+    * 使用 **预算服务** 来按类别计算每月总支出
+        * **预算服务** 使用 **通知服务** 让用户知道他们是否接近或者已经超出预算
+    * 更新具有分类交易的 **SQL数据库** 的`transactions`表
+    * 按类别更新 **SQL数据库** `monthly_spending`表的每月总支出
+    * 通过 **通知服务** 提醒用户交易完成
+        * 使用一个 **队列** (没有画出来) 来异步发送通知
+
+`transactions`表应该具有如下结构：
+
+```
+id int NOT NULL AUTO_INCREMENT
+created_at datetime NOT NULL
+seller varchar(32) NOT NULL
+amount decimal NOT NULL
+user_id int NOT NULL
+PRIMARY KEY(id)
+FOREIGN KEY(user_id) REFERENCES users(id)
+```
+
+我们将在 `id`，`user_id`，和 `created_at`字段上创建[索引](https://github.com/donnemartin/system-design-primer#use-good-indices)。
+
+`monthly_spending`表应该具有如下结构：
+
+```
+id int NOT NULL AUTO_INCREMENT
+month_year date NOT NULL
+category varchar(32)
+amount decimal NOT NULL
+user_id int NOT NULL
+PRIMARY KEY(id)
+FOREIGN KEY(user_id) REFERENCES users(id)
+```
+
+我们将在`id`，`user_id`字段上创建[索引](https://github.com/donnemartin/system-design-primer#use-good-indices)。
+
+#### 分类服务
+
+对于 **分类服务**，我们可以生成一个带有最受欢迎卖家的卖家-类别字典。如果我们估计 50000 个卖家，并估计每个条目占用不少于 255 个字节，该字典只需要大约 12 MB内存。
+
+**告知你的面试官你准备写多少代码**。
+
+```python
+class DefaultCategories(Enum):
+
+    HOUSING = 0
+    FOOD = 1
+    GAS = 2
+    SHOPPING = 3
+    ...
+
+seller_category_map = {}
+seller_category_map['Exxon'] = DefaultCategories.GAS
+seller_category_map['Target'] = DefaultCategories.SHOPPING
+...
+```
+
+对于一开始没有在映射中的卖家，我们可以通过评估用户提供的手动类别来进行众包。在 O(1) 时间内，我们可以用堆来快速查找每个卖家的顶端的手动覆盖。
+
+```python
+class Categorizer(object):
+
+    def __init__(self, seller_category_map, self.seller_category_crowd_overrides_map):
+        self.seller_category_map = seller_category_map
+        self.seller_category_crowd_overrides_map = \
+            seller_category_crowd_overrides_map
+
+    def categorize(self, transaction):
+        if transaction.seller in self.seller_category_map:
+            return self.seller_category_map[transaction.seller]
+        elif transaction.seller in self.seller_category_crowd_overrides_map:
+            self.seller_category_map[transaction.seller] = \
+                self.seller_category_crowd_overrides_map[transaction.seller].peek_min()
+            return self.seller_category_map[transaction.seller]
+        return None
+```
+
+交易实现：
+
+```python
+class Transaction(object):
+
+    def __init__(self, created_at, seller, amount):
+        self.timestamp = timestamp
+        self.seller = seller
+        self.amount = amount
+```
+
+### 用例：服务推荐预算
+
+首先，我们可以使用根据收入等级分配每类别金额的通用预算模板。使用这种方法，我们不必存储在约束中标识的 1 亿个预算项目，只需存储用户覆盖的预算项目。如果用户覆盖预算类别，我们可以在
+`TABLE budget_overrides`中存储此覆盖。
+
+```python
+class Budget(object):
+
+    def __init__(self, income):
+        self.income = income
+        self.categories_to_budget_map = self.create_budget_template()
+
+    def create_budget_template(self):
+        return {
+            'DefaultCategories.HOUSING': income * .4,
+            'DefaultCategories.FOOD': income * .2
+            'DefaultCategories.GAS': income * .1,
+            'DefaultCategories.SHOPPING': income * .2
+            ...
+        }
+
+    def override_category_budget(self, category, amount):
+        self.categories_to_budget_map[category] = amount
+```
+
+对于 **预算服务** 而言，我们可以在`transactions`表上运行SQL查询以生成`monthly_spending`聚合表。由于用户通常每个月有很多交易，所以`monthly_spending`表的行数可能会少于总共50亿次交易的行数。
+
+作为替代，我们可以在原始交易文件上运行 **MapReduce** 作业来：
+
+* 分类每个交易
+* 按类别生成每月总支出
+
+对交易文件的运行分析可以显著减少数据库的负载。
+
+如果用户更新类别，我们可以调用 **预算服务** 重新运行分析。
+
+**告知你的面试官你准备写多少代码**.
+
+日志文件格式样例，以tab分割：
+
+```
+user_id   timestamp   seller  amount
+```
+
+**MapReduce** 实现:
+
+```python
+class SpendingByCategory(MRJob):
+
+    def __init__(self, categorizer):
+        self.categorizer = categorizer
+        self.current_year_month = calc_current_year_month()
+        ...
+
+    def calc_current_year_month(self):
+        """返回当前年月"""
+        ...
+
+    def extract_year_month(self, timestamp):
+        """返回时间戳的年，月部分"""
+        ...
+
+    def handle_budget_notifications(self, key, total):
+        """如果接近或超出预算，调用通知API"""
+        ...
+
+    def mapper(self, _, line):
+        """解析每个日志行，提取和转换相关行。
+
+        参数行应为如下形式：
+
+        user_id   timestamp   seller  amount
+
+        使用分类器来将卖家转换成类别，生成如下形式的key-value对：
+
+        (user_id, 2016-01, shopping), 25
+        (user_id, 2016-01, shopping), 100
+        (user_id, 2016-01, gas), 50
+        """
+        user_id, timestamp, seller, amount = line.split('\t')
+        category = self.categorizer.categorize(seller)
+        period = self.extract_year_month(timestamp)
+        if period == self.current_year_month:
+            yield (user_id, period, category), amount
+
+    def reducer(self, key, value):
+        """将每个key对应的值求和。
+
+        (user_id, 2016-01, shopping), 125
+        (user_id, 2016-01, gas), 50
+        """
+        total = sum(values)
+        yield key, sum(values)
+```
+
+## 第四步：设计扩展
+
+> 根据限制条件，找到并解决瓶颈。
+
+![Imgur](http://i.imgur.com/V5q57vU.png)
+
+**重要提示：不要从最初设计直接跳到最终设计中！**
+
+现在你要 1) **基准测试、负载测试**。2) **分析、描述**性能瓶颈。3) 在解决瓶颈问题的同时，评估替代方案、权衡利弊。4) 重复以上步骤。请阅读[「设计一个系统，并将其扩大到为数以百万计的 AWS 用户服务」](../scaling_aws/README.md) 来了解如何逐步扩大初始设计。
+
+讨论初始设计可能遇到的瓶颈及相关解决方案是很重要的。例如加上一个配置多台 **Web 服务器**的**负载均衡器**是否能够解决问题？**CDN**呢？**主从复制**呢？它们各自的替代方案和需要**权衡**的利弊又有什么呢？
+
+我们将会介绍一些组件来完成设计，并解决架构扩张问题。内置的负载均衡器将不做讨论以节省篇幅。
+
+**为了避免重复讨论**，请参考[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)相关部分来了解其要点、方案的权衡取舍以及可选的替代方案。
+
+* [DNS](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#域名系统)
+* [负载均衡器](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#负载均衡器)
+* [水平拓展](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#水平扩展)
+* [反向代理（web 服务器）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)
+* [API 服务（应用层）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用层)
+* [缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存)
+* [关系型数据库管理系统 (RDBMS)](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#关系型数据库管理系统rdbms)
+* [SQL 故障主从切换](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#故障切换)
+* [主从复制](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#主从复制)
+* [异步](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#异步)
+* [一致性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#一致性模式)
+* [可用性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#可用性模式)
+
+我们将增加一个额外的用例：**用户** 访问摘要和交易数据。
+
+用户会话，按类别统计的统计信息，以及最近的事务可以放在 **内存缓存**（如 Redis 或 Memcached ）中。
+
+* **客户端** 发送读请求给 **Web 服务器**
+* **Web 服务器** 转发请求到 **读 API** 服务器
+    * 静态内容可通过 **对象存储** 比如缓存在 **CDN** 上的 S3 来服务
+* **读 API** 服务器做如下动作:
+    * 检查 **内存缓存** 的内容
+        * 如果URL在 **内存缓存**中，返回缓存的内容
+        * 否则
+            * 如果URL在 **SQL 数据库**中，获取该内容
+                * 以其内容更新 **内存缓存**
+
+参考 [何时更新缓存](https://github.com/donnemartin/system-design-primer#when-to-update-the-cache) 中权衡和替代的内容。以上方法描述了 [cache-aside缓存模式](https://github.com/donnemartin/system-design-primer#cache-aside).
+
+我们可以使用诸如 Amazon Redshift 或者 Google BigQuery 等数据仓库解决方案，而不是将`monthly_spending`聚合表保留在 **SQL 数据库** 中。
+
+我们可能只想在数据库中存储一个月的`交易`数据，而将其余数据存储在数据仓库或者 **对象存储区** 中。**对象存储区** （如Amazon S3) 能够舒服地解决每月 250 GB新内容的限制。
+
+为了解决每秒 *平均* 2000 次读请求数（峰值时更高），受欢迎的内容的流量应由 **内存缓存** 而不是数据库来处理。 **内存缓存** 也可用于处理不均匀分布的流量和流量尖峰。 只要副本不陷入重复写入的困境，**SQL 读副本** 应该能够处理高速缓存未命中。
+
+*平均* 200 次交易写入每秒（峰值时更高）对于单个 **SQL 写入主-从服务** 来说可能是棘手的。我们可能需要考虑其它的 SQL 性能拓展技术：
+
+* [联合](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#联合)
+* [分片](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#分片)
+* [非规范化](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#非规范化)
+* [SQL 调优](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-调优)
+
+我们也可以考虑将一些数据移至 **NoSQL 数据库**。
+
+## 其它要点
+
+> 是否深入这些额外的主题，取决于你的问题范围和剩下的时间。
+
+#### NoSQL
+
+* [键-值存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#键-值存储)
+* [文档类型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#文档类型存储)
+* [列型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#列型存储)
+* [图数据库](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#图数据库)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)
+
+### 缓存
+
+* 在哪缓存
+    * [客户端缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#客户端缓存)
+    * [CDN 缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#cdn-缓存)
+    * [Web 服务器缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#web-服务器缓存)
+    * [数据库缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库缓存)
+    * [应用缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用缓存)
+* 什么需要缓存
+    * [数据库查询级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库查询级别的缓存)
+    * [对象级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#对象级别的缓存)
+* 何时更新缓存
+    * [缓存模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存模式)
+    * [直写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#直写模式)
+    * [回写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#回写模式)
+    * [刷新](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#刷新)
+
+### 异步与微服务
+
+* [消息队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#消息队列)
+* [任务队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#任务队列)
+* [背压](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#背压)
+* [微服务](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#微服务)
+
+### 通信
+
+* 可权衡选择的方案：
+    * 与客户端的外部通信 - [使用 REST 作为 HTTP API](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest)
+    * 服务器内部通信 - [RPC](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)
+* [服务发现](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#服务发现)
+
+### 安全性
+
+请参阅[「安全」](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#安全)一章。
+
+### 延迟数值
+
+请参阅[「每个程序员都应该知道的延迟数」](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数)。
+
+### 持续探讨
+
+* 持续进行基准测试并监控你的系统，以解决他们提出的瓶颈问题。
+* 架构拓展是一个迭代的过程。
diff --git a/website/solutions/system_design/mint/README.md b/website/solutions/system_design/mint/README.md
new file mode 100644
index 00000000000..1ec31674db0
--- /dev/null
+++ b/website/solutions/system_design/mint/README.md
@@ -0,0 +1,441 @@
+# Design Mint.com
+
+*Note: This document links directly to relevant areas found in the [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) to avoid duplication.  Refer to the linked content for general talking points, tradeoffs, and alternatives.*
+
+## Step 1: Outline use cases and constraints
+
+> Gather requirements and scope the problem.
+> Ask questions to clarify use cases and constraints.
+> Discuss assumptions.
+
+Without an interviewer to address clarifying questions, we'll define some use cases and constraints.
+
+### Use cases
+
+#### We'll scope the problem to handle only the following use cases
+
+* **User** connects to a financial account
+* **Service** extracts transactions from the account
+    * Updates daily
+    * Categorizes transactions
+        * Allows manual category override by the user
+        * No automatic re-categorization
+    * Analyzes monthly spending, by category
+* **Service** recommends a budget
+    * Allows users to manually set a budget
+    * Sends notifications when approaching or exceeding budget
+* **Service** has high availability
+
+#### Out of scope
+
+* **Service** performs additional logging and analytics
+
+### Constraints and assumptions
+
+#### State assumptions
+
+* Traffic is not evenly distributed
+* Automatic daily update of accounts applies only to users active in the past 30 days
+* Adding or removing financial accounts is relatively rare
+* Budget notifications don't need to be instant
+* 10 million users
+    * 10 budget categories per user = 100 million budget items
+    * Example categories:
+        * Housing = $1,000
+        * Food = $200
+        * Gas = $100
+    * Sellers are used to determine transaction category
+        * 50,000 sellers
+* 30 million financial accounts
+* 5 billion transactions per month
+* 500 million read requests per month
+* 10:1 write to read ratio
+    * Write-heavy, users make transactions daily, but few visit the site daily
+
+#### Calculate usage
+
+**Clarify with your interviewer if you should run back-of-the-envelope usage calculations.**
+
+* Size per transaction:
+    * `user_id` - 8 bytes
+    * `created_at` - 5 bytes
+    * `seller` - 32 bytes
+    * `amount` - 5 bytes
+    * Total: ~50 bytes
+* 250 GB of new transaction content per month
+    * 50 bytes per transaction * 5 billion transactions per month
+    * 9 TB of new transaction content in 3 years
+    * Assume most are new transactions instead of updates to existing ones
+* 2,000 transactions per second on average
+* 200 read requests per second on average
+
+Handy conversion guide:
+
+* 2.5 million seconds per month
+* 1 request per second = 2.5 million requests per month
+* 40 requests per second = 100 million requests per month
+* 400 requests per second = 1 billion requests per month
+
+## Step 2: Create a high level design
+
+> Outline a high level design with all important components.
+
+![Imgur](http://i.imgur.com/E8klrBh.png)
+
+## Step 3: Design core components
+
+> Dive into details for each core component.
+
+### Use case: User connects to a financial account
+
+We could store info on the 10 million users in a [relational database](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms).  We should discuss the [use cases and tradeoffs between choosing SQL or NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql).
+
+* The **Client** sends a request to the **Web Server**, running as a [reverse proxy](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* The **Web Server** forwards the request to the **Accounts API** server
+* The **Accounts API** server updates the **SQL Database** `accounts` table with the newly entered account info
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+The `accounts` table could have the following structure:
+
+```
+id int NOT NULL AUTO_INCREMENT
+created_at datetime NOT NULL
+last_update datetime NOT NULL
+account_url varchar(255) NOT NULL
+account_login varchar(32) NOT NULL
+account_password_hash char(64) NOT NULL
+user_id int NOT NULL
+PRIMARY KEY(id)
+FOREIGN KEY(user_id) REFERENCES users(id)
+```
+
+We'll create an [index](https://github.com/donnemartin/system-design-primer#use-good-indices) on `id`, `user_id `, and `created_at` to speed up lookups (log-time instead of scanning the entire table) and to keep the data in memory.  Reading 1 MB sequentially from memory takes about 250 microseconds, while reading from SSD takes 4x and from disk takes 80x longer.<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+
+We'll use a public [**REST API**](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest):
+
+```
+$ curl -X POST --data '{ "user_id": "foo", "account_url": "bar", \
+    "account_login": "baz", "account_password": "qux" }' \
+    https://mint.com/api/v1/account
+```
+
+For internal communications, we could use [Remote Procedure Calls](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc).
+
+Next, the service extracts transactions from the account.
+
+### Use case: Service extracts transactions from the account
+
+We'll want to extract information from an account in these cases:
+
+* The user first links the account
+* The user manually refreshes the account
+* Automatically each day for users who have been active in the past 30 days
+
+Data flow:
+
+* The **Client** sends a request to the **Web Server**
+* The **Web Server** forwards the request to the **Accounts API** server
+* The **Accounts API** server places a job on a **Queue** such as [Amazon SQS](https://aws.amazon.com/sqs/) or [RabbitMQ](https://www.rabbitmq.com/)
+    * Extracting transactions could take awhile, we'd probably want to do this [asynchronously with a queue](https://github.com/donnemartin/system-design-primer#asynchronism), although this introduces additional complexity
+* The **Transaction Extraction Service** does the following:
+    * Pulls from the **Queue** and extracts transactions for the given account from the financial institution, storing the results as raw log files in the **Object Store**
+    * Uses the **Category Service** to categorize each transaction
+    * Uses the **Budget Service** to calculate aggregate monthly spending by category
+        * The **Budget Service** uses the **Notification Service** to let users know if they are nearing or have exceeded their budget
+    * Updates the **SQL Database** `transactions` table with categorized transactions
+    * Updates the **SQL Database** `monthly_spending` table with aggregate monthly spending by category
+    * Notifies the user the transactions have completed through the **Notification Service**:
+        * Uses a **Queue** (not pictured) to asynchronously send out notifications
+
+The `transactions` table could have the following structure:
+
+```
+id int NOT NULL AUTO_INCREMENT
+created_at datetime NOT NULL
+seller varchar(32) NOT NULL
+amount decimal NOT NULL
+user_id int NOT NULL
+PRIMARY KEY(id)
+FOREIGN KEY(user_id) REFERENCES users(id)
+```
+
+We'll create an [index](https://github.com/donnemartin/system-design-primer#use-good-indices) on `id`, `user_id `, and `created_at`.
+
+The `monthly_spending` table could have the following structure:
+
+```
+id int NOT NULL AUTO_INCREMENT
+month_year date NOT NULL
+category varchar(32)
+amount decimal NOT NULL
+user_id int NOT NULL
+PRIMARY KEY(id)
+FOREIGN KEY(user_id) REFERENCES users(id)
+```
+
+We'll create an [index](https://github.com/donnemartin/system-design-primer#use-good-indices) on `id` and `user_id `.
+
+#### Category service
+
+For the **Category Service**, we can seed a seller-to-category dictionary with the most popular sellers.  If we estimate 50,000 sellers and estimate each entry to take less than 255 bytes, the dictionary would only take about 12 MB of memory.
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+```python
+class DefaultCategories(Enum):
+
+    HOUSING = 0
+    FOOD = 1
+    GAS = 2
+    SHOPPING = 3
+    ...
+
+seller_category_map = {}
+seller_category_map['Exxon'] = DefaultCategories.GAS
+seller_category_map['Target'] = DefaultCategories.SHOPPING
+...
+```
+
+For sellers not initially seeded in the map, we could use a crowdsourcing effort by evaluating the manual category overrides our users provide.  We could use a heap to quickly lookup the top manual override per seller in O(1) time.
+
+```python
+class Categorizer(object):
+
+    def __init__(self, seller_category_map, seller_category_crowd_overrides_map):
+        self.seller_category_map = seller_category_map
+        self.seller_category_crowd_overrides_map = \
+            seller_category_crowd_overrides_map
+
+    def categorize(self, transaction):
+        if transaction.seller in self.seller_category_map:
+            return self.seller_category_map[transaction.seller]
+        elif transaction.seller in self.seller_category_crowd_overrides_map:
+            self.seller_category_map[transaction.seller] = \
+                self.seller_category_crowd_overrides_map[transaction.seller].peek_min()
+            return self.seller_category_map[transaction.seller]
+        return None
+```
+
+Transaction implementation:
+
+```python
+class Transaction(object):
+
+    def __init__(self, created_at, seller, amount):
+        self.created_at = created_at
+        self.seller = seller
+        self.amount = amount
+```
+
+### Use case: Service recommends a budget
+
+To start, we could use a generic budget template that allocates category amounts based on income tiers.  Using this approach, we would not have to store the 100 million budget items identified in the constraints, only those that the user overrides.  If a user overrides a budget category, which we could store the override in the `TABLE budget_overrides`.
+
+```python
+class Budget(object):
+
+    def __init__(self, income):
+        self.income = income
+        self.categories_to_budget_map = self.create_budget_template()
+
+    def create_budget_template(self):
+        return {
+            DefaultCategories.HOUSING: self.income * .4,
+            DefaultCategories.FOOD: self.income * .2,
+            DefaultCategories.GAS: self.income * .1,
+            DefaultCategories.SHOPPING: self.income * .2,
+            ...
+        }
+
+    def override_category_budget(self, category, amount):
+        self.categories_to_budget_map[category] = amount
+```
+
+For the **Budget Service**, we can potentially run SQL queries on the `transactions` table to generate the `monthly_spending` aggregate table.  The `monthly_spending` table would likely have much fewer rows than the total 5 billion transactions, since users typically have many transactions per month.
+
+As an alternative, we can run **MapReduce** jobs on the raw transaction files to:
+
+* Categorize each transaction
+* Generate aggregate monthly spending by category
+
+Running analyses on the transaction files could significantly reduce the load on the database.
+
+We could call the **Budget Service** to re-run the analysis if the user updates a category.
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+Sample log file format, tab delimited:
+
+```
+user_id   timestamp   seller  amount
+```
+
+**MapReduce** implementation:
+
+```python
+class SpendingByCategory(MRJob):
+
+    def __init__(self, categorizer):
+        self.categorizer = categorizer
+        self.current_year_month = calc_current_year_month()
+        ...
+
+    def calc_current_year_month(self):
+        """Return the current year and month."""
+        ...
+
+    def extract_year_month(self, timestamp):
+        """Return the year and month portions of the timestamp."""
+        ...
+
+    def handle_budget_notifications(self, key, total):
+        """Call notification API if nearing or exceeded budget."""
+        ...
+
+    def mapper(self, _, line):
+        """Parse each log line, extract and transform relevant lines.
+
+        Argument line will be of the form:
+
+        user_id   timestamp   seller  amount
+
+        Using the categorizer to convert seller to category,
+        emit key value pairs of the form:
+
+        (user_id, 2016-01, shopping), 25
+        (user_id, 2016-01, shopping), 100
+        (user_id, 2016-01, gas), 50
+        """
+        user_id, timestamp, seller, amount = line.split('\t')
+        category = self.categorizer.categorize(seller)
+        period = self.extract_year_month(timestamp)
+        if period == self.current_year_month:
+            yield (user_id, period, category), amount
+
+    def reducer(self, key, value):
+        """Sum values for each key.
+
+        (user_id, 2016-01, shopping), 125
+        (user_id, 2016-01, gas), 50
+        """
+        total = sum(values)
+        yield key, sum(values)
+```
+
+## Step 4: Scale the design
+
+> Identify and address bottlenecks, given the constraints.
+
+![Imgur](http://i.imgur.com/V5q57vU.png)
+
+**Important: Do not simply jump right into the final design from the initial design!**
+
+State you would 1) **Benchmark/Load Test**, 2) **Profile** for bottlenecks 3) address bottlenecks while evaluating alternatives and trade-offs, and 4) repeat.  See [Design a system that scales to millions of users on AWS](../scaling_aws/README.md) as a sample on how to iteratively scale the initial design.
+
+It's important to discuss what bottlenecks you might encounter with the initial design and how you might address each of them.  For example, what issues are addressed by adding a **Load Balancer** with multiple **Web Servers**?  **CDN**?  **Master-Slave Replicas**?  What are the alternatives and **Trade-Offs** for each?
+
+We'll introduce some components to complete the design and to address scalability issues.  Internal load balancers are not shown to reduce clutter.
+
+*To avoid repeating discussions*, refer to the following [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) for main talking points, tradeoffs, and alternatives:
+
+* [DNS](https://github.com/donnemartin/system-design-primer#domain-name-system)
+* [CDN](https://github.com/donnemartin/system-design-primer#content-delivery-network)
+* [Load balancer](https://github.com/donnemartin/system-design-primer#load-balancer)
+* [Horizontal scaling](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+* [Web server (reverse proxy)](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* [API server (application layer)](https://github.com/donnemartin/system-design-primer#application-layer)
+* [Cache](https://github.com/donnemartin/system-design-primer#cache)
+* [Relational database management system (RDBMS)](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms)
+* [SQL write master-slave failover](https://github.com/donnemartin/system-design-primer#fail-over)
+* [Master-slave replication](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [Asynchronism](https://github.com/donnemartin/system-design-primer#asynchronism)
+* [Consistency patterns](https://github.com/donnemartin/system-design-primer#consistency-patterns)
+* [Availability patterns](https://github.com/donnemartin/system-design-primer#availability-patterns)
+
+We'll add an additional use case: **User** accesses summaries and transactions.
+
+User sessions, aggregate stats by category, and recent transactions could be placed in a **Memory Cache** such as Redis or Memcached.
+
+* The **Client** sends a read request to the **Web Server**
+* The **Web Server** forwards the request to the **Read API** server
+    * Static content can be served from the **Object Store** such as S3, which is cached on the **CDN**
+* The **Read API** server does the following:
+    * Checks the **Memory Cache** for the content
+        * If the url is in the **Memory Cache**, returns the cached contents
+        * Else
+            * If the url is in the **SQL Database**, fetches the contents
+                * Updates the **Memory Cache** with the contents
+
+Refer to [When to update the cache](https://github.com/donnemartin/system-design-primer#when-to-update-the-cache) for tradeoffs and alternatives.  The approach above describes [cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside).
+
+Instead of keeping the `monthly_spending` aggregate table in the **SQL Database**, we could create a separate **Analytics Database** using a data warehousing solution such as Amazon Redshift or Google BigQuery.
+
+We might only want to store a month of `transactions` data in the database, while storing the rest in a data warehouse or in an **Object Store**.  An **Object Store** such as Amazon S3 can comfortably handle the constraint of 250 GB of new content per month.
+
+To address the 200 *average* read requests per second (higher at peak), traffic for popular content should be handled by the **Memory Cache** instead of the database.  The **Memory Cache** is also useful for handling the unevenly distributed traffic and traffic spikes.  The **SQL Read Replicas** should be able to handle the cache misses, as long as the replicas are not bogged down with replicating writes.
+
+2,000 *average* transaction writes per second (higher at peak) might be tough for a single **SQL Write Master-Slave**.  We might need to employ additional SQL scaling patterns:
+
+* [Federation](https://github.com/donnemartin/system-design-primer#federation)
+* [Sharding](https://github.com/donnemartin/system-design-primer#sharding)
+* [Denormalization](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL Tuning](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+We should also consider moving some data to a **NoSQL Database**.
+
+## Additional talking points
+
+> Additional topics to dive into, depending on the problem scope and time remaining.
+
+#### NoSQL
+
+* [Key-value store](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [Document store](https://github.com/donnemartin/system-design-primer#document-store)
+* [Wide column store](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [Graph database](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### Caching
+
+* Where to cache
+    * [Client caching](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN caching](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web server caching](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [Database caching](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [Application caching](https://github.com/donnemartin/system-design-primer#application-caching)
+* What to cache
+    * [Caching at the database query level](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [Caching at the object level](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* When to update the cache
+    * [Cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [Write-through](https://github.com/donnemartin/system-design-primer#write-through)
+    * [Write-behind (write-back)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [Refresh ahead](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### Asynchronism and microservices
+
+* [Message queues](https://github.com/donnemartin/system-design-primer#message-queues)
+* [Task queues](https://github.com/donnemartin/system-design-primer#task-queues)
+* [Back pressure](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [Microservices](https://github.com/donnemartin/system-design-primer#microservices)
+
+### Communications
+
+* Discuss tradeoffs:
+    * External communication with clients - [HTTP APIs following REST](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * Internal communications - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [Service discovery](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### Security
+
+Refer to the [security section](https://github.com/donnemartin/system-design-primer#security).
+
+### Latency numbers
+
+See [Latency numbers every programmer should know](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know).
+
+### Ongoing
+
+* Continue benchmarking and monitoring your system to address bottlenecks as they come up
+* Scaling is an iterative process
diff --git a/website/solutions/system_design/mint/__init__.py b/website/solutions/system_design/mint/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/system_design/mint/mint.graffle b/website/solutions/system_design/mint/mint.graffle
new file mode 100644
index 00000000000..5ba2e5f8680
Binary files /dev/null and b/website/solutions/system_design/mint/mint.graffle differ
diff --git a/website/solutions/system_design/mint/mint.png b/website/solutions/system_design/mint/mint.png
new file mode 100644
index 00000000000..0994195e812
Binary files /dev/null and b/website/solutions/system_design/mint/mint.png differ
diff --git a/website/solutions/system_design/mint/mint_basic.graffle b/website/solutions/system_design/mint/mint_basic.graffle
new file mode 100644
index 00000000000..95c2e81e34b
Binary files /dev/null and b/website/solutions/system_design/mint/mint_basic.graffle differ
diff --git a/website/solutions/system_design/mint/mint_basic.png b/website/solutions/system_design/mint/mint_basic.png
new file mode 100644
index 00000000000..f14a577ee90
Binary files /dev/null and b/website/solutions/system_design/mint/mint_basic.png differ
diff --git a/website/solutions/system_design/mint/mint_mapreduce.py b/website/solutions/system_design/mint/mint_mapreduce.py
new file mode 100644
index 00000000000..e3554243018
--- /dev/null
+++ b/website/solutions/system_design/mint/mint_mapreduce.py
@@ -0,0 +1,57 @@
+# -*- coding: utf-8 -*-
+
+from mrjob.job import MRJob
+
+
+class SpendingByCategory(MRJob):
+
+    def __init__(self, categorizer):
+        self.categorizer = categorizer
+        ...
+
+    def current_year_month(self):
+        """Return the current year and month."""
+        ...
+
+    def extract_year_month(self, timestamp):
+        """Return the year and month portions of the timestamp."""
+        ...
+
+    def handle_budget_notifications(self, key, total):
+        """Call notification API if nearing or exceeded budget."""
+        ...
+
+    def mapper(self, _, line):
+        """Parse each log line, extract and transform relevant lines.
+
+        Emit key value pairs of the form:
+
+        (2016-01, shopping), 25
+        (2016-01, shopping), 100
+        (2016-01, gas), 50
+        """
+        timestamp, category, amount = line.split('\t')
+        period = self. extract_year_month(timestamp)
+        if period == self.current_year_month():
+            yield (period, category), amount
+
+    def reducer(self, key, values):
+        """Sum values for each key.
+
+        (2016-01, shopping), 125
+        (2016-01, gas), 50
+        """
+        total = sum(values)
+        self.handle_budget_notifications(key, total)
+        yield key, sum(values)
+
+    def steps(self):
+        """Run the map and reduce steps."""
+        return [
+            self.mr(mapper=self.mapper,
+                    reducer=self.reducer)
+        ]
+
+
+if __name__ == '__main__':
+    SpendingByCategory.run()
diff --git a/website/solutions/system_design/mint/mint_snippets.py b/website/solutions/system_design/mint/mint_snippets.py
new file mode 100644
index 00000000000..cc5d228b2a4
--- /dev/null
+++ b/website/solutions/system_design/mint/mint_snippets.py
@@ -0,0 +1,50 @@
+# -*- coding: utf-8 -*-
+
+from enum import Enum
+
+
+class DefaultCategories(Enum):
+
+    HOUSING = 0
+    FOOD = 1
+    GAS = 2
+    SHOPPING = 3
+    # ...
+
+
+seller_category_map = {}
+seller_category_map['Exxon'] = DefaultCategories.GAS
+seller_category_map['Target'] = DefaultCategories.SHOPPING
+
+
+class Categorizer(object):
+
+    def __init__(self, seller_category_map, seller_category_overrides_map):
+        self.seller_category_map = seller_category_map
+        self.seller_category_overrides_map = seller_category_overrides_map
+
+    def categorize(self, transaction):
+        if transaction.seller in self.seller_category_map:
+            return self.seller_category_map[transaction.seller]
+        if transaction.seller in self.seller_category_overrides_map:
+            seller_category_map[transaction.seller] = \
+                self.manual_overrides[transaction.seller].peek_min()
+            return self.seller_category_map[transaction.seller]
+        return None
+
+
+class Transaction(object):
+
+    def __init__(self, timestamp, seller, amount):
+        self.timestamp = timestamp
+        self.seller = seller
+        self.amount = amount
+
+
+class Budget(object):
+
+    def __init__(self, template_categories_to_budget_map):
+        self.categories_to_budget_map = template_categories_to_budget_map
+
+    def override_category_budget(self, category, amount):
+        self.categories_to_budget_map[category] = amount
diff --git a/website/solutions/system_design/pastebin/README-zh-Hans.md b/website/solutions/system_design/pastebin/README-zh-Hans.md
new file mode 100644
index 00000000000..d2946e97090
--- /dev/null
+++ b/website/solutions/system_design/pastebin/README-zh-Hans.md
@@ -0,0 +1,330 @@
+# 设计 Pastebin.com (或者 Bit.ly)
+
+**注意: 为了避免重复，当前文档会直接链接到[系统设计主题](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)的相关区域，请参考链接内容以获得综合的讨论点、权衡和替代方案。**
+
+**设计 Bit.ly** - 是一个类似的问题，区别是 pastebin 需要存储的是 paste 的内容，而不是原始的未短化的 url。
+
+## 第一步：概述用例和约束
+
+> 收集这个问题的需求和范畴。
+> 问相关问题来明确用例和约束。
+> 讨论一些假设。
+
+因为没有面试官来明确这些问题，所以我们自己将定义一些用例和约束。
+
+### 用例
+
+#### 我们将问题的范畴限定在如下用例
+
+* **用户** 输入一段文本，然后得到一个随机生成的链接
+  * 过期设置
+    * 默认的设置是不会过期的
+    * 可以选择设置一个过期的时间
+* **用户** 输入一个 paste 的 url 后，可以看到它存储的内容
+* **用户** 是匿名的
+* **Service** 跟踪页面分析
+  * 一个月的访问统计
+* **Service** 删除过期的 pastes
+* **Service** 需要高可用
+
+#### 超出范畴的用例
+
+* **用户** 可以注册一个账户
+  * **用户** 通过验证邮箱
+* **用户** 可以用注册的账户登录
+  * **用户** 可以编辑文档
+* **用户** 可以设置可见性
+* **用户** 可以设置短链接
+
+### 约束和假设
+
+#### 状态假设
+
+* 访问流量不是均匀分布的
+* 打开一个短链接应该是很快的
+* pastes 只能是文本
+* 页面访问分析数据可以不用实时
+* 一千万的用户量
+* 每个月一千万的 paste 写入量
+* 每个月一亿的 paste 读取量
+* 读写比例在 10:1
+
+#### 计算使用
+
+**向面试官说明你是否应该粗略计算一下使用情况。**
+
+* 每个 paste 的大小
+  * 每一个 paste 1 KB
+  * `shortlink` - 7 bytes
+  * `expiration_length_in_minutes` - 4 bytes
+  * `created_at` - 5 bytes
+  * `paste_path` - 255 bytes
+  * 总共 = ~1.27 KB
+* 每个月新的 paste 内容在 12.7GB
+  * (1.27 * 10000000)KB / 月的 paste
+  * 三年内将近 450GB 的新 paste 内容
+  * 三年内 3.6 亿短链接
+  * 假设大部分都是新的 paste，而不是需要更新已存在的 paste
+* 平均 4paste/s 的写入速度
+* 平均 40paste/s 的读取速度
+
+简单的转换指南:
+
+* 2.5 百万 req/s
+* 1 req/s = 2.5 百万 req/m
+* 40 req/s = 1 亿 req/m
+* 400 req/s = 10 亿 req/m
+
+## 第二步：创建一个高层次设计
+
+> 概述一个包括所有重要的组件的高层次设计
+
+![Imgur](http://i.imgur.com/BKsBnmG.png)
+
+## 第三步：设计核心组件
+
+> 深入每一个核心组件的细节
+
+### 用例：用户输入一段文本，然后得到一个随机生成的链接
+
+我们可以用一个 [关系型数据库](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#关系型数据库管理系统rdbms)作为一个大的哈希表，用来把生成的 url 映射到一个包含 paste 文件的文件服务器和路径上。
+
+为了避免托管一个文件服务器，我们可以用一个托管的**对象存储**，比如 Amazon 的 S3 或者[NoSQL 文档类型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#文档类型存储)。
+
+作为一个大的哈希表的关系型数据库的替代方案，我们可以用[NoSQL 键值存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#键-值存储)。我们需要讨论[选择 SQL 或 NoSQL 之间的权衡](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)。下面的讨论是使用关系型数据库方法。
+
+* **客户端** 发送一个创建 paste 的请求到作为一个[反向代理](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)启动的 **Web 服务器**。
+* **Web 服务器** 转发请求给 **写接口** 服务器
+* **写接口** 服务器执行如下操作：
+  * 生成一个唯一的 url
+    * 检查这个 url 在 **SQL 数据库** 里面是否是唯一的
+    * 如果这个 url 不是唯一的，生成另外一个 url
+    * 如果我们支持自定义 url，我们可以使用用户提供的 url（也需要检查是否重复）
+  * 把生成的 url 存储到 **SQL 数据库** 的 `pastes` 表里面
+  * 存储 paste 的内容数据到 **对象存储** 里面
+  * 返回生成的 url
+
+**向面试官阐明你需要写多少代码**
+
+`pastes` 表可以有如下结构：
+
+```sql
+shortlink char(7) NOT NULL
+expiration_length_in_minutes int NOT NULL
+created_at datetime NOT NULL
+paste_path varchar(255) NOT NULL
+PRIMARY KEY(shortlink)
+```
+
+我们将在 `shortlink` 字段和 `created_at` 字段上创建一个[数据库索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#使用正确的索引)，用来提高查询的速度（避免因为扫描全表导致的长时间查询）并将数据保存在内存中，从内存里面顺序读取 1MB 的数据需要大概 250 微秒，而从 SSD 上读取则需要花费 4 倍的时间，从硬盘上则需要花费 80 倍的时间。<sup><a href=https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数 > 1</a></sup>
+
+为了生成唯一的 url，我们可以：
+
+* 使用 [**MD5**](https://en.wikipedia.org/wiki/MD5) 来哈希用户的 IP 地址 + 时间戳
+  * MD5 是一个普遍用来生成一个 128-bit 长度的哈希值的一种哈希方法
+  * MD5 是一致分布的
+  * 或者我们也可以用 MD5 哈希一个随机生成的数据
+* 用 [**Base 62**](https://www.kerstner.at/2012/07/shortening-strings-using-base-62-encoding/) 编码 MD5 哈希值
+  * 对于 urls，使用 Base 62 编码 `[a-zA-Z0-9]` 是比较合适的
+  * 对于每一个原始输入只会有一个 hash 结果，Base 62 是确定的（不涉及随机性）
+  * Base 64 是另外一个流行的编码方案，但是对于 urls，会因为额外的 `+` 和 `-` 字符串而产生一些问题
+  * 以下 [Base 62 伪代码](http://stackoverflow.com/questions/742013/how-to-code-a-url-shortener) 执行的时间复杂度是 O(k)，k 是数字的数量 = 7：
+
+```python
+def base_encode(num, base=62):
+    digits = []
+    while num > 0
+      remainder = modulo(num, base)
+      digits.push(remainder)
+      num = divide(num, base)
+    digits = digits.reverse
+```
+
+* 取输出的前 7 个字符，结果会有 62^7 个可能的值，应该足以满足在 3 年内处理 3.6 亿个短链接的约束：
+
+```python
+url = base_encode(md5(ip_address+timestamp))[:URL_LENGTH]
+```
+
+我们将会用一个公开的 [**REST 风格接口**](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest)：
+
+```shell
+$ curl -X POST --data '{"expiration_length_in_minutes":"60", \"paste_contents":"Hello World!"}' https://pastebin.com/api/v1/paste
+```
+
+Response:
+
+```json
+{
+    "shortlink": "foobar"
+}
+```
+
+用于内部通信，我们可以用 [RPC](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)。
+
+### 用例：用户输入一个 paste 的 url 后可以看到它存储的内容
+
+* **客户端** 发送一个获取 paste 请求到 **Web Server**
+* **Web Server** 转发请求给 **读取接口** 服务器
+* **读取接口** 服务器执行如下操作：
+  * 在 **SQL 数据库** 检查这个生成的 url
+    * 如果这个 url 在 **SQL 数据库** 里面，则从 **对象存储** 获取这个 paste 的内容
+    * 否则，返回一个错误页面给用户
+
+REST API：
+
+```shell
+curl https://pastebin.com/api/v1/paste?shortlink=foobar
+```
+
+Response:
+
+```json
+{
+    "paste_contents": "Hello World",
+    "created_at": "YYYY-MM-DD HH:MM:SS",
+    "expiration_length_in_minutes": "60"
+}
+```
+
+### 用例： 服务跟踪分析页面
+
+因为实时分析不是必须的，所以我们可以简单的 **MapReduce** **Web Server** 的日志，用来生成点击次数。
+
+```python
+class HitCounts(MRJob):
+
+    def extract_url(self, line):
+        """Extract the generated url from the log line."""
+        ...
+
+    def extract_year_month(self, line):
+        """Return the year and month portions of the timestamp."""
+        ...
+
+    def mapper(self, _, line):
+        """Parse each log line, extract and transform relevant lines.
+
+        Emit key value pairs of the form:
+
+        (2016-01, url0), 1
+        (2016-01, url0), 1
+        (2016-01, url1), 1
+        """
+        url = self.extract_url(line)
+        period = self.extract_year_month(line)
+        yield (period, url), 1
+
+    def reducer(self, key, values):
+        """Sum values for each key.
+
+        (2016-01, url0), 2
+        (2016-01, url1), 1
+        """
+        yield key, sum(values)
+```
+
+### 用例： 服务删除过期的 pastes
+
+为了删除过期的 pastes，我们可以直接搜索 **SQL 数据库** 中所有的过期时间比当前时间更早的记录，
+所有过期的记录将从这张表里面删除（或者将其标记为过期）。
+
+## 第四步：扩展这个设计
+
+> 给定约束条件，识别和解决瓶颈。
+
+![Imgur](http://i.imgur.com/4edXG0T.png)
+
+**重要提示: 不要简单的从最初的设计直接跳到最终的设计**
+
+说明您将迭代地执行这样的操作：1)**Benchmark/Load 测试**，2)**Profile** 出瓶颈，3)在评估替代方案和权衡时解决瓶颈，4)重复前面，可以参考[在 AWS 上设计一个可以支持百万用户的系统](../scaling_aws/README.md)这个用来解决如何迭代地扩展初始设计的例子。
+
+重要的是讨论在初始设计中可能遇到的瓶颈，以及如何解决每个瓶颈。比如，在多个 **Web 服务器** 上添加 **负载平衡器** 可以解决哪些问题？ **CDN** 解决哪些问题？**Master-Slave Replicas** 解决哪些问题? 替代方案是什么和怎么对每一个替代方案进行权衡比较？
+
+我们将介绍一些组件来完成设计，并解决可伸缩性问题。内部的负载平衡器并不能减少杂乱。
+
+**为了避免重复的讨论**， 参考以下[系统设计主题](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)获取主要讨论要点、权衡和替代方案：
+
+* [DNS](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#域名系统)
+* [CDN](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#内容分发网络cdn)
+* [负载均衡器](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#负载均衡器)
+* [水平扩展](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#水平扩展)
+* [反向代理（web 服务器）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)
+* [应用层](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用层)
+* [缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存)
+* [关系型数据库管理系统 (RDBMS)](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#关系型数据库管理系统rdbms)
+* [SQL write master-slave failover](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#故障切换)
+* [主从复制](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#主从复制)
+* [一致性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#一致性模式)
+* [可用性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#可用性模式)
+
+**分析存储数据库** 可以用比如 Amazon Redshift 或者 Google BigQuery 这样的数据仓库解决方案。
+
+一个像 Amazon S3 这样的 **对象存储**，可以轻松处理每月 12.7 GB 的新内容约束。
+
+要处理 *平均* 每秒 40 读请求(峰值更高)，其中热点内容的流量应该由 **内存缓存** 处理，而不是数据库。**内存缓存** 对于处理分布不均匀的流量和流量峰值也很有用。只要副本没有陷入复制写的泥潭，**SQL Read Replicas** 应该能够处理缓存丢失。
+
+对于单个 **SQL Write Master-Slave**，*平均* 每秒 4paste 写入 (峰值更高) 应该是可以做到的。否则，我们需要使用额外的 SQL 扩展模式:
+
+* [联合](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#联合)
+* [分片](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#分片)
+* [非规范化](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#非规范化)
+* [SQL 调优](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#SQL调优)
+
+我们还应该考虑将一些数据移动到 **NoSQL 数据库**。
+
+## 额外的话题
+
+> 是否更深入探讨额外主题，取决于问题的范围和面试剩余的时间。
+
+### NoSQL
+
+* [键值存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#键-值存储)
+* [文档存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#文档类型存储)
+* [列型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#列型存储)
+* [图数据库](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#图数据库)
+* [sql 还是 nosql](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)
+
+### 缓存
+
+* 在哪缓存
+  * [客户端缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#客户端缓存)
+  * [CDN 缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#cdn-缓存)
+  * [Web 服务器缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#web-服务器缓存)
+  * [数据库缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库缓存)
+  * [应用缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用缓存)
+* 缓存什么
+  * [数据库查询级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库查询级别的缓存)
+  * [对象级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#对象级别的缓存)
+* 何时更新缓存
+  * [缓存模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存模式)
+  * [直写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#直写模式)
+  * [回写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#回写模式)
+  * [刷新](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#刷新)
+
+### 异步和微服务
+
+* [消息队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#消息队列)
+* [任务队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#任务队列)
+* [背压](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#背压)
+* [微服务](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#微服务)
+
+### 通信
+
+* 讨论权衡:
+  * 跟客户端之间的外部通信 - [HTTP APIs following REST](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest)
+  * 内部通信 - [RPC](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)
+* [服务发现](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#服务发现)
+
+### 安全
+
+参考[安全](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#安全)。
+
+### 延迟数字
+
+见[每个程序员都应该知道的延迟数](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数)。
+
+### 持续进行
+
+* 继续对系统进行基准测试和监控，以在瓶颈出现时解决它们
+* 扩展是一个迭代的过程
diff --git a/website/solutions/system_design/pastebin/README.md b/website/solutions/system_design/pastebin/README.md
new file mode 100644
index 00000000000..2d87ddcc7e3
--- /dev/null
+++ b/website/solutions/system_design/pastebin/README.md
@@ -0,0 +1,332 @@
+# Design Pastebin.com (or Bit.ly)
+
+*Note: This document links directly to relevant areas found in the [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) to avoid duplication.  Refer to the linked content for general talking points, tradeoffs, and alternatives.*
+
+**Design Bit.ly** - is a similar question, except pastebin requires storing the paste contents instead of the original unshortened url.
+
+## Step 1: Outline use cases and constraints
+
+> Gather requirements and scope the problem.
+> Ask questions to clarify use cases and constraints.
+> Discuss assumptions.
+
+Without an interviewer to address clarifying questions, we'll define some use cases and constraints.
+
+### Use cases
+
+#### We'll scope the problem to handle only the following use cases
+
+* **User** enters a block of text and gets a randomly generated link
+    * Expiration
+        * Default setting does not expire
+        * Can optionally set a timed expiration
+* **User** enters a paste's url and views the contents
+* **User** is anonymous
+* **Service** tracks analytics of pages
+    * Monthly visit stats
+* **Service** deletes expired pastes
+* **Service** has high availability
+
+#### Out of scope
+
+* **User** registers for an account
+    * **User** verifies email
+* **User** logs into a registered account
+    * **User** edits the document
+* **User** can set visibility
+* **User** can set the shortlink
+
+### Constraints and assumptions
+
+#### State assumptions
+
+* Traffic is not evenly distributed
+* Following a short link should be fast
+* Pastes are text only
+* Page view analytics do not need to be realtime
+* 10 million users
+* 10 million paste writes per month
+* 100 million paste reads per month
+* 10:1 read to write ratio
+
+#### Calculate usage
+
+**Clarify with your interviewer if you should run back-of-the-envelope usage calculations.**
+
+* Size per paste
+    * 1 KB content per paste
+    * `shortlink` - 7 bytes
+    * `expiration_length_in_minutes` - 4 bytes
+    * `created_at` - 5 bytes
+    * `paste_path` - 255 bytes
+    * total = ~1.27 KB
+* 12.7 GB of new paste content per month
+    * 1.27 KB per paste * 10 million pastes per month
+    * ~450 GB of new paste content in 3 years
+    * 360 million shortlinks in 3 years
+    * Assume most are new pastes instead of updates to existing ones
+* 4 paste writes per second on average
+* 40 read requests per second on average
+
+Handy conversion guide:
+
+* 2.5 million seconds per month
+* 1 request per second = 2.5 million requests per month
+* 40 requests per second = 100 million requests per month
+* 400 requests per second = 1 billion requests per month
+
+## Step 2: Create a high level design
+
+> Outline a high level design with all important components.
+
+![Imgur](http://i.imgur.com/BKsBnmG.png)
+
+## Step 3: Design core components
+
+> Dive into details for each core component.
+
+### Use case: User enters a block of text and gets a randomly generated link
+
+We could use a [relational database](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms) as a large hash table, mapping the generated url to a file server and path containing the paste file.
+
+Instead of managing a file server, we could use a managed **Object Store** such as Amazon S3 or a [NoSQL document store](https://github.com/donnemartin/system-design-primer#document-store).
+
+An alternative to a relational database acting as a large hash table, we could use a [NoSQL key-value store](https://github.com/donnemartin/system-design-primer#key-value-store).  We should discuss the [tradeoffs between choosing SQL or NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql).  The following discussion uses the relational database approach.
+
+* The **Client** sends a create paste request to the **Web Server**, running as a [reverse proxy](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* The **Web Server** forwards the request to the **Write API** server
+* The **Write API** server does the following:
+    * Generates a unique url
+        * Checks if the url is unique by looking at the **SQL Database** for a duplicate
+        * If the url is not unique, it generates another url
+        * If we supported a custom url, we could use the user-supplied (also check for a duplicate)
+    * Saves to the **SQL Database** `pastes` table
+    * Saves the paste data to the **Object Store**
+    * Returns the url
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+The `pastes` table could have the following structure:
+
+```
+shortlink char(7) NOT NULL
+expiration_length_in_minutes int NOT NULL
+created_at datetime NOT NULL
+paste_path varchar(255) NOT NULL
+PRIMARY KEY(shortlink)
+```
+
+Setting the primary key to be based on the `shortlink` column creates an [index](https://github.com/donnemartin/system-design-primer#use-good-indices) that the database uses to enforce uniqueness. We'll create an additional index on `created_at` to speed up lookups (log-time instead of scanning the entire table) and to keep the data in memory.  Reading 1 MB sequentially from memory takes about 250 microseconds, while reading from SSD takes 4x and from disk takes 80x longer.<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+
+To generate the unique url, we could:
+
+* Take the [**MD5**](https://en.wikipedia.org/wiki/MD5) hash of the user's ip_address + timestamp
+    * MD5 is a widely used hashing function that produces a 128-bit hash value
+    * MD5 is uniformly distributed
+    * Alternatively, we could also take the MD5 hash of randomly-generated data
+* [**Base 62**](https://www.kerstner.at/2012/07/shortening-strings-using-base-62-encoding/) encode the MD5 hash
+    * Base 62 encodes to `[a-zA-Z0-9]` which works well for urls, eliminating the need for escaping special characters
+    * There is only one hash result for the original input and Base 62 is deterministic (no randomness involved)
+    * Base 64 is another popular encoding but provides issues for urls because of the additional `+` and `/` characters
+    * The following [Base 62 pseudocode](http://stackoverflow.com/questions/742013/how-to-code-a-url-shortener) runs in O(k) time where k is the number of digits = 7:
+
+```python
+def base_encode(num, base=62):
+    digits = []
+    while num > 0
+      remainder = modulo(num, base)
+      digits.push(remainder)
+      num = divide(num, base)
+    digits = digits.reverse
+```
+
+* Take the first 7 characters of the output, which results in 62^7 possible values and should be sufficient to handle our constraint of 360 million shortlinks in 3 years:
+
+```python
+url = base_encode(md5(ip_address+timestamp))[:URL_LENGTH]
+```
+
+We'll use a public [**REST API**](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest):
+
+```
+$ curl -X POST --data '{ "expiration_length_in_minutes": "60", \
+    "paste_contents": "Hello World!" }' https://pastebin.com/api/v1/paste
+```
+
+Response:
+
+```
+{
+    "shortlink": "foobar"
+}
+```
+
+For internal communications, we could use [Remote Procedure Calls](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc).
+
+### Use case: User enters a paste's url and views the contents
+
+* The **Client** sends a get paste request to the **Web Server**
+* The **Web Server** forwards the request to the **Read API** server
+* The **Read API** server does the following:
+    * Checks the **SQL Database** for the generated url
+        * If the url is in the **SQL Database**, fetch the paste contents from the **Object Store**
+        * Else, return an error message for the user
+
+REST API:
+
+```
+$ curl https://pastebin.com/api/v1/paste?shortlink=foobar
+```
+
+Response:
+
+```
+{
+    "paste_contents": "Hello World"
+    "created_at": "YYYY-MM-DD HH:MM:SS"
+    "expiration_length_in_minutes": "60"
+}
+```
+
+### Use case: Service tracks analytics of pages
+
+Since realtime analytics are not a requirement, we could simply **MapReduce** the **Web Server** logs to generate hit counts.
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+```python
+class HitCounts(MRJob):
+
+    def extract_url(self, line):
+        """Extract the generated url from the log line."""
+        ...
+
+    def extract_year_month(self, line):
+        """Return the year and month portions of the timestamp."""
+        ...
+
+    def mapper(self, _, line):
+        """Parse each log line, extract and transform relevant lines.
+
+        Emit key value pairs of the form:
+
+        (2016-01, url0), 1
+        (2016-01, url0), 1
+        (2016-01, url1), 1
+        """
+        url = self.extract_url(line)
+        period = self.extract_year_month(line)
+        yield (period, url), 1
+
+    def reducer(self, key, values):
+        """Sum values for each key.
+
+        (2016-01, url0), 2
+        (2016-01, url1), 1
+        """
+        yield key, sum(values)
+```
+
+### Use case: Service deletes expired pastes
+
+To delete expired pastes, we could just scan the **SQL Database** for all entries whose expiration timestamp are older than the current timestamp.  All expired entries would then be deleted (or  marked as expired) from the table.
+
+## Step 4: Scale the design
+
+> Identify and address bottlenecks, given the constraints.
+
+![Imgur](http://i.imgur.com/4edXG0T.png)
+
+**Important: Do not simply jump right into the final design from the initial design!**
+
+State you would do this iteratively: 1) **Benchmark/Load Test**, 2) **Profile** for bottlenecks 3) address bottlenecks while evaluating alternatives and trade-offs, and 4) repeat.  See [Design a system that scales to millions of users on AWS](../scaling_aws/README.md) as a sample on how to iteratively scale the initial design.
+
+It's important to discuss what bottlenecks you might encounter with the initial design and how you might address each of them.  For example, what issues are addressed by adding a **Load Balancer** with multiple **Web Servers**?  **CDN**?  **Master-Slave Replicas**?  What are the alternatives and **Trade-Offs** for each?
+
+We'll introduce some components to complete the design and to address scalability issues.  Internal load balancers are not shown to reduce clutter.
+
+*To avoid repeating discussions*, refer to the following [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) for main talking points, tradeoffs, and alternatives:
+
+* [DNS](https://github.com/donnemartin/system-design-primer#domain-name-system)
+* [CDN](https://github.com/donnemartin/system-design-primer#content-delivery-network)
+* [Load balancer](https://github.com/donnemartin/system-design-primer#load-balancer)
+* [Horizontal scaling](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+* [Web server (reverse proxy)](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* [API server (application layer)](https://github.com/donnemartin/system-design-primer#application-layer)
+* [Cache](https://github.com/donnemartin/system-design-primer#cache)
+* [Relational database management system (RDBMS)](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms)
+* [SQL write master-slave failover](https://github.com/donnemartin/system-design-primer#fail-over)
+* [Master-slave replication](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [Consistency patterns](https://github.com/donnemartin/system-design-primer#consistency-patterns)
+* [Availability patterns](https://github.com/donnemartin/system-design-primer#availability-patterns)
+
+The **Analytics Database** could use a data warehousing solution such as Amazon Redshift or Google BigQuery.
+
+An **Object Store** such as Amazon S3 can comfortably handle the constraint of 12.7 GB of new content per month.
+
+To address the 40 *average* read requests per second (higher at peak), traffic for popular content should be handled by the **Memory Cache** instead of the database.  The **Memory Cache** is also useful for handling the unevenly distributed traffic and traffic spikes.  The **SQL Read Replicas** should be able to handle the cache misses, as long as the replicas are not bogged down with replicating writes.
+
+4 *average* paste writes per second (with higher at peak) should be do-able for a single **SQL Write Master-Slave**.  Otherwise, we'll need to employ additional SQL scaling patterns:
+
+* [Federation](https://github.com/donnemartin/system-design-primer#federation)
+* [Sharding](https://github.com/donnemartin/system-design-primer#sharding)
+* [Denormalization](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL Tuning](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+We should also consider moving some data to a **NoSQL Database**.
+
+## Additional talking points
+
+> Additional topics to dive into, depending on the problem scope and time remaining.
+
+#### NoSQL
+
+* [Key-value store](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [Document store](https://github.com/donnemartin/system-design-primer#document-store)
+* [Wide column store](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [Graph database](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### Caching
+
+* Where to cache
+    * [Client caching](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN caching](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web server caching](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [Database caching](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [Application caching](https://github.com/donnemartin/system-design-primer#application-caching)
+* What to cache
+    * [Caching at the database query level](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [Caching at the object level](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* When to update the cache
+    * [Cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [Write-through](https://github.com/donnemartin/system-design-primer#write-through)
+    * [Write-behind (write-back)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [Refresh ahead](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### Asynchronism and microservices
+
+* [Message queues](https://github.com/donnemartin/system-design-primer#message-queues)
+* [Task queues](https://github.com/donnemartin/system-design-primer#task-queues)
+* [Back pressure](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [Microservices](https://github.com/donnemartin/system-design-primer#microservices)
+
+### Communications
+
+* Discuss tradeoffs:
+    * External communication with clients - [HTTP APIs following REST](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * Internal communications - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [Service discovery](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### Security
+
+Refer to the [security section](https://github.com/donnemartin/system-design-primer#security).
+
+### Latency numbers
+
+See [Latency numbers every programmer should know](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know).
+
+### Ongoing
+
+* Continue benchmarking and monitoring your system to address bottlenecks as they come up
+* Scaling is an iterative process
diff --git a/website/solutions/system_design/pastebin/__init__.py b/website/solutions/system_design/pastebin/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/system_design/pastebin/pastebin.graffle b/website/solutions/system_design/pastebin/pastebin.graffle
new file mode 100644
index 00000000000..879a6275331
Binary files /dev/null and b/website/solutions/system_design/pastebin/pastebin.graffle differ
diff --git a/website/solutions/system_design/pastebin/pastebin.png b/website/solutions/system_design/pastebin/pastebin.png
new file mode 100644
index 00000000000..1841f0a489c
Binary files /dev/null and b/website/solutions/system_design/pastebin/pastebin.png differ
diff --git a/website/solutions/system_design/pastebin/pastebin.py b/website/solutions/system_design/pastebin/pastebin.py
new file mode 100644
index 00000000000..7e8d268a0ea
--- /dev/null
+++ b/website/solutions/system_design/pastebin/pastebin.py
@@ -0,0 +1,46 @@
+# -*- coding: utf-8 -*-
+
+from mrjob.job import MRJob
+
+
+class HitCounts(MRJob):
+
+    def extract_url(self, line):
+        """Extract the generated url from the log line."""
+        pass
+
+    def extract_year_month(self, line):
+        """Return the year and month portions of the timestamp."""
+        pass
+
+    def mapper(self, _, line):
+        """Parse each log line, extract and transform relevant lines.
+
+        Emit key value pairs of the form:
+
+        (2016-01, url0), 1
+        (2016-01, url0), 1
+        (2016-01, url1), 1
+        """
+        url = self.extract_url(line)
+        period = self.extract_year_month(line)
+        yield (period, url), 1
+
+    def reducer(self, key, values):
+        """Sum values for each key.
+
+        (2016-01, url0), 2
+        (2016-01, url1), 1
+        """
+        yield key, sum(values)
+
+    def steps(self):
+        """Run the map and reduce steps."""
+        return [
+            self.mr(mapper=self.mapper,
+                    reducer=self.reducer)
+        ]
+
+
+if __name__ == '__main__':
+    HitCounts.run()
diff --git a/website/solutions/system_design/pastebin/pastebin_basic.graffle b/website/solutions/system_design/pastebin/pastebin_basic.graffle
new file mode 100644
index 00000000000..fad80c23150
Binary files /dev/null and b/website/solutions/system_design/pastebin/pastebin_basic.graffle differ
diff --git a/website/solutions/system_design/pastebin/pastebin_basic.png b/website/solutions/system_design/pastebin/pastebin_basic.png
new file mode 100644
index 00000000000..4cee694281e
Binary files /dev/null and b/website/solutions/system_design/pastebin/pastebin_basic.png differ
diff --git a/website/solutions/system_design/query_cache/README-zh-Hans.md b/website/solutions/system_design/query_cache/README-zh-Hans.md
new file mode 100644
index 00000000000..c6f4be7519b
--- /dev/null
+++ b/website/solutions/system_design/query_cache/README-zh-Hans.md
@@ -0,0 +1,306 @@
+# 设计一个键-值缓存来存储最近 web 服务查询的结果
+
+**注意：这个文档中的链接会直接指向[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)中的有关部分，以避免重复的内容。你可以参考链接的相关内容，来了解其总的要点、方案的权衡取舍以及可选的替代方案。**
+
+## 第一步：简述用例与约束条件
+
+> 搜集需求与问题的范围。
+> 提出问题来明确用例与约束条件。
+> 讨论假设。
+
+我们将在没有面试官明确说明问题的情况下，自己定义一些用例以及限制条件。
+
+### 用例
+
+#### 我们将把问题限定在仅处理以下用例的范围中
+
+* **用户**发送一个搜索请求，命中缓存
+* **用户**发送一个搜索请求，未命中缓存
+* **服务**有着高可用性
+
+### 限制条件与假设
+
+#### 提出假设
+
+* 网络流量不是均匀分布的
+    * 经常被查询的内容应该一直存于缓存中
+    * 需要确定如何规定缓存过期、缓存刷新规则
+* 缓存提供的服务查询速度要快
+* 机器间延迟较低
+* 缓存有内存限制
+    * 需要决定缓存什么、移除什么
+    *  需要缓存百万级的查询
+* 1000 万用户
+* 每个月 100 亿次查询
+
+#### 计算用量
+
+**如果你需要进行粗略的用量计算，请向你的面试官说明。**
+
+* 缓存存储的是键值对有序表，键为 `query`（查询），值为 `results`（结果）。
+    * `query` - 50 字节
+    * `title` - 20 字节
+    * `snippet` - 200 字节
+    * 总计：270 字节
+* 假如 100 亿次查询都是不同的，且全部需要存储，那么每个月需要 2.7 TB 的缓存空间
+    * 单次查询 270 字节 * 每月查询 100 亿次
+    * 假设内存大小有限制，需要决定如何制定缓存过期规则
+* 每秒 4,000 次请求
+
+便利换算指南：
+
+* 每个月有 250 万秒
+* 每秒一个请求 = 每个月 250 万次请求
+* 每秒 40 个请求 = 每个月 1 亿次请求
+* 每秒 400 个请求 = 每个月 10 亿次请求
+
+## 第二步：概要设计
+
+> 列出所有重要组件以规划概要设计。
+
+![Imgur](http://i.imgur.com/KqZ3dSx.png)
+
+## 第三步：设计核心组件
+
+> 深入每个核心组件的细节。
+
+### 用例：用户发送了一次请求，命中了缓存
+
+常用的查询可以由例如 Redis 或者 Memcached 之类的**内存缓存**提供支持，以减少数据读取延迟，并且避免**反向索引服务**以及**文档服务**的过载。从内存读取 1 MB 连续数据大约要花 250 微秒，而从 SSD 读取同样大小的数据要花费 4 倍的时间，从机械硬盘读取需要花费 80 倍以上的时间。<sup><a href=https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数>1</a></sup>
+
+由于缓存容量有限，我们将使用 LRU（近期最少使用算法）来控制缓存的过期。
+
+* **客户端**向运行[反向代理](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)的 **Web 服务器**发送一个请求
+* 这个 **Web 服务器**将请求转发给**查询 API** 服务
+* **查询 API** 服务将会做这些事情：
+    * 分析查询
+        * 移除多余的内容
+        * 将文本分割成词组
+        * 修正拼写错误
+        * 规范化字母的大小写
+        * 将查询转换为布尔运算
+    * 检测**内存缓存**是否有匹配查询的内容
+        * 如果命中**内存缓存**，**内存缓存**将会做以下事情：
+            * 将缓存入口的位置指向 LRU 链表的头部
+            * 返回缓存内容
+        * 否则，**查询 API** 将会做以下事情：
+            * 使用**反向索引服务**来查找匹配查询的文档
+                * **反向索引服务**对匹配到的结果进行排名，然后返回最符合的结果
+            * 使用**文档服务**返回文章标题与片段
+            * 更新**内存缓存**，存入内容，将**内存缓存**入口位置指向 LRU 链表的头部
+
+#### 缓存的实现
+
+缓存可以使用双向链表实现：新元素将会在头结点加入，过期的元素将会在尾节点被删除。我们使用哈希表以便能够快速查找每个链表节点。
+
+**向你的面试官告知你准备写多少代码**。
+
+实现**查询 API 服务**：
+
+```python
+class QueryApi(object):
+
+    def __init__(self, memory_cache, reverse_index_service):
+        self.memory_cache = memory_cache
+        self.reverse_index_service = reverse_index_service
+
+    def parse_query(self, query):
+        """移除多余内容，将文本分割成词组，修复拼写错误，
+        规范化字母大小写，转换布尔运算。
+        """
+        ...
+
+    def process_query(self, query):
+        query = self.parse_query(query)
+        results = self.memory_cache.get(query)
+        if results is None:
+            results = self.reverse_index_service.process_search(query)
+            self.memory_cache.set(query, results)
+        return results
+```
+
+实现**节点**：
+
+```python
+class Node(object):
+
+    def __init__(self, query, results):
+        self.query = query
+        self.results = results
+```
+
+实现**链表**：
+
+```python
+class LinkedList(object):
+
+    def __init__(self):
+        self.head = None
+        self.tail = None
+
+    def move_to_front(self, node):
+        ...
+
+    def append_to_front(self, node):
+        ...
+
+    def remove_from_tail(self):
+        ...
+```
+
+实现**缓存**：
+
+```python
+class Cache(object):
+
+    def __init__(self, MAX_SIZE):
+        self.MAX_SIZE = MAX_SIZE
+        self.size = 0
+        self.lookup = {}  # key: query, value: node
+        self.linked_list = LinkedList()
+
+    def get(self, query)
+        """从缓存取得存储的内容
+
+        将入口节点位置更新为 LRU 链表的头部。
+        """
+        node = self.lookup[query]
+        if node is None:
+            return None
+        self.linked_list.move_to_front(node)
+        return node.results
+
+    def set(self, results, query):
+        """将所给查询键的结果存在缓存中。
+
+        当更新缓存记录的时候，将它的位置指向 LRU 链表的头部。
+        如果这个记录是新的记录，并且缓存空间已满，应该在加入新记录前
+        删除最老的记录。
+        """
+        node = self.lookup[query]
+        if node is not None:
+            # 键存在于缓存中，更新它对应的值
+            node.results = results
+            self.linked_list.move_to_front(node)
+        else:
+            # 键不存在于缓存中
+            if self.size == self.MAX_SIZE:
+                # 在链表中查找并删除最老的记录
+                self.lookup.pop(self.linked_list.tail.query, None)
+                self.linked_list.remove_from_tail()
+            else:
+                self.size += 1
+            # 添加新的键值对
+            new_node = Node(query, results)
+            self.linked_list.append_to_front(new_node)
+            self.lookup[query] = new_node
+```
+
+#### 何时更新缓存
+
+缓存将会在以下几种情况更新：
+
+* 页面内容发生变化
+* 页面被移除或者加入了新页面
+* 页面的权值发生变动
+
+解决这些问题的最直接的方法，就是为缓存记录设置一个它在被更新前能留在缓存中的最长时间，这个时间简称为存活时间（TTL）。
+
+参考 [「何时更新缓存」](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#何时更新缓存)来了解其权衡取舍及替代方案。以上方法在[缓存模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存模式)一章中详细地进行了描述。
+
+## 第四步：架构扩展
+
+> 根据限制条件，找到并解决瓶颈。
+
+![Imgur](http://i.imgur.com/4j99mhe.png)
+
+**重要提示：不要从最初设计直接跳到最终设计中！**
+
+现在你要 1) **基准测试、负载测试**。2) **分析、描述**性能瓶颈。3) 在解决瓶颈问题的同时，评估替代方案、权衡利弊。4) 重复以上步骤。请阅读[「设计一个系统，并将其扩大到为数以百万计的 AWS 用户服务」](../scaling_aws/README.md) 来了解如何逐步扩大初始设计。
+
+讨论初始设计可能遇到的瓶颈及相关解决方案是很重要的。例如加上一个配置多台 **Web 服务器**的**负载均衡器**是否能够解决问题？**CDN**呢？**主从复制**呢？它们各自的替代方案和需要**权衡**的利弊又有什么呢？
+
+我们将会介绍一些组件来完成设计，并解决架构扩张问题。内置的负载均衡器将不做讨论以节省篇幅。
+
+**为了避免重复讨论**，请参考[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)相关部分来了解其要点、方案的权衡取舍以及可选的替代方案。
+
+* [DNS](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#域名系统)
+* [负载均衡器](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#负载均衡器)
+* [水平拓展](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#水平扩展)
+* [反向代理（web 服务器）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)
+* [API 服务（应用层）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用层)
+* [缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存)
+* [一致性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#一致性模式)
+* [可用性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#可用性模式)
+
+### 将内存缓存扩大到多台机器
+
+为了解决庞大的请求负载以及巨大的内存需求，我们将要对架构进行水平拓展。如何在我们的**内存缓存**集群中存储数据呢？我们有以下三个主要可选方案：
+
+* **缓存集群中的每一台机器都有自己的缓存** - 简单，但是它会降低缓存命中率。
+* **缓存集群中的每一台机器都有缓存的拷贝** - 简单，但是它的内存使用效率太低了。
+* **对缓存进行[分片](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#分片)，分别部署在缓存集群中的所有机器中** - 更加复杂，但是它是最佳的选择。我们可以使用哈希，用查询语句 `machine = hash(query)` 来确定哪台机器有需要缓存。当然我们也可以使用[一致性哈希](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#正在完善中)。
+
+## 其它要点
+
+> 是否深入这些额外的主题，取决于你的问题范围和剩下的时间。
+
+### SQL 缩放模式
+
+* [读取复制](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#主从复制)
+* [联合](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#联合)
+* [分片](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#分片)
+* [非规范化](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#非规范化)
+* [SQL 调优](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-调优)
+
+#### NoSQL
+
+* [键-值存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#键-值存储)
+* [文档类型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#文档类型存储)
+* [列型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#列型存储)
+* [图数据库](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#图数据库)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)
+
+### 缓存
+
+* 在哪缓存
+    * [客户端缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#客户端缓存)
+    * [CDN 缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#cdn-缓存)
+    * [Web 服务器缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#web-服务器缓存)
+    * [数据库缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库缓存)
+    * [应用缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用缓存)
+* 什么需要缓存
+    * [数据库查询级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库查询级别的缓存)
+    * [对象级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#对象级别的缓存)
+* 何时更新缓存
+    * [缓存模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存模式)
+    * [直写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#直写模式)
+    * [回写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#回写模式)
+    * [刷新](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#刷新)
+
+### 异步与微服务
+
+* [消息队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#消息队列)
+* [任务队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#任务队列)
+* [背压](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#背压)
+* [微服务](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#微服务)
+
+### 通信
+
+* 可权衡选择的方案：
+    * 与客户端的外部通信 - [使用 REST 作为 HTTP API](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest)
+    * 服务器内部通信 - [RPC](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)
+* [服务发现](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#服务发现)
+
+### 安全性
+
+请参阅[「安全」](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#安全)一章。
+
+### 延迟数值
+
+请参阅[「每个程序员都应该知道的延迟数」](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数)。
+
+### 持续探讨
+
+* 持续进行基准测试并监控你的系统，以解决他们提出的瓶颈问题。
+* 架构拓展是一个迭代的过程。
diff --git a/website/solutions/system_design/query_cache/README.md b/website/solutions/system_design/query_cache/README.md
new file mode 100644
index 00000000000..032adf34abd
--- /dev/null
+++ b/website/solutions/system_design/query_cache/README.md
@@ -0,0 +1,306 @@
+# Design a key-value cache to save the results of the most recent web server queries
+
+*Note: This document links directly to relevant areas found in the [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) to avoid duplication.  Refer to the linked content for general talking points, tradeoffs, and alternatives.*
+
+## Step 1: Outline use cases and constraints
+
+> Gather requirements and scope the problem.
+> Ask questions to clarify use cases and constraints.
+> Discuss assumptions.
+
+Without an interviewer to address clarifying questions, we'll define some use cases and constraints.
+
+### Use cases
+
+#### We'll scope the problem to handle only the following use cases
+
+* **User** sends a search request resulting in a cache hit
+* **User** sends a search request resulting in a cache miss
+* **Service** has high availability
+
+### Constraints and assumptions
+
+#### State assumptions
+
+* Traffic is not evenly distributed
+    * Popular queries should almost always be in the cache
+    * Need to determine how to expire/refresh
+* Serving from cache requires fast lookups
+* Low latency between machines
+* Limited memory in cache
+    * Need to determine what to keep/remove
+    * Need to cache millions of queries
+* 10 million users
+* 10 billion queries per month
+
+#### Calculate usage
+
+**Clarify with your interviewer if you should run back-of-the-envelope usage calculations.**
+
+* Cache stores ordered list of key: query, value: results
+    * `query` - 50 bytes
+    * `title` - 20 bytes
+    * `snippet` - 200 bytes
+    * Total: 270 bytes
+* 2.7 TB of cache data per month if all 10 billion queries are unique and all are stored
+    * 270 bytes per search * 10 billion searches per month
+    * Assumptions state limited memory, need to determine how to expire contents
+* 4,000 requests per second
+
+Handy conversion guide:
+
+* 2.5 million seconds per month
+* 1 request per second = 2.5 million requests per month
+* 40 requests per second = 100 million requests per month
+* 400 requests per second = 1 billion requests per month
+
+## Step 2: Create a high level design
+
+> Outline a high level design with all important components.
+
+![Imgur](http://i.imgur.com/KqZ3dSx.png)
+
+## Step 3: Design core components
+
+> Dive into details for each core component.
+
+### Use case: User sends a request resulting in a cache hit
+
+Popular queries can be served from a **Memory Cache** such as Redis or Memcached to reduce read latency and to avoid overloading the **Reverse Index Service** and **Document Service**.  Reading 1 MB sequentially from memory takes about 250 microseconds, while reading from SSD takes 4x and from disk takes 80x longer.<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+
+Since the cache has limited capacity, we'll use a least recently used (LRU) approach to expire older entries.
+
+* The **Client** sends a request to the **Web Server**, running as a [reverse proxy](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* The **Web Server** forwards the request to the **Query API** server
+* The **Query API** server does the following:
+    * Parses the query
+        * Removes markup
+        * Breaks up the text into terms
+        * Fixes typos
+        * Normalizes capitalization
+        * Converts the query to use boolean operations
+    * Checks the **Memory Cache** for the content matching the query
+        * If there's a hit in the **Memory Cache**, the **Memory Cache** does the following:
+            * Updates the cached entry's position to the front of the LRU list
+            * Returns the cached contents
+        * Else, the **Query API** does the following:
+            * Uses the **Reverse Index Service** to find documents matching the query
+                * The **Reverse Index Service** ranks the matching results and returns the top ones
+            * Uses the **Document Service** to return titles and snippets
+            * Updates the **Memory Cache** with the contents, placing the entry at the front of the LRU list
+
+#### Cache implementation
+
+The cache can use a doubly-linked list: new items will be added to the head while items to expire will be removed from the tail.  We'll use a hash table for fast lookups to each linked list node.
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+**Query API Server** implementation:
+
+```python
+class QueryApi(object):
+
+    def __init__(self, memory_cache, reverse_index_service):
+        self.memory_cache = memory_cache
+        self.reverse_index_service = reverse_index_service
+
+    def parse_query(self, query):
+        """Remove markup, break text into terms, deal with typos,
+        normalize capitalization, convert to use boolean operations.
+        """
+        ...
+
+    def process_query(self, query):
+        query = self.parse_query(query)
+        results = self.memory_cache.get(query)
+        if results is None:
+            results = self.reverse_index_service.process_search(query)
+            self.memory_cache.set(query, results)
+        return results
+```
+
+**Node** implementation:
+
+```python
+class Node(object):
+
+    def __init__(self, query, results):
+        self.query = query
+        self.results = results
+```
+
+**LinkedList** implementation:
+
+```python
+class LinkedList(object):
+
+    def __init__(self):
+        self.head = None
+        self.tail = None
+
+    def move_to_front(self, node):
+        ...
+
+    def append_to_front(self, node):
+        ...
+
+    def remove_from_tail(self):
+        ...
+```
+
+**Cache** implementation:
+
+```python
+class Cache(object):
+
+    def __init__(self, MAX_SIZE):
+        self.MAX_SIZE = MAX_SIZE
+        self.size = 0
+        self.lookup = {}  # key: query, value: node
+        self.linked_list = LinkedList()
+
+    def get(self, query)
+        """Get the stored query result from the cache.
+
+        Accessing a node updates its position to the front of the LRU list.
+        """
+        node = self.lookup[query]
+        if node is None:
+            return None
+        self.linked_list.move_to_front(node)
+        return node.results
+
+    def set(self, results, query):
+        """Set the result for the given query key in the cache.
+
+        When updating an entry, updates its position to the front of the LRU list.
+        If the entry is new and the cache is at capacity, removes the oldest entry
+        before the new entry is added.
+        """
+        node = self.lookup[query]
+        if node is not None:
+            # Key exists in cache, update the value
+            node.results = results
+            self.linked_list.move_to_front(node)
+        else:
+            # Key does not exist in cache
+            if self.size == self.MAX_SIZE:
+                # Remove the oldest entry from the linked list and lookup
+                self.lookup.pop(self.linked_list.tail.query, None)
+                self.linked_list.remove_from_tail()
+            else:
+                self.size += 1
+            # Add the new key and value
+            new_node = Node(query, results)
+            self.linked_list.append_to_front(new_node)
+            self.lookup[query] = new_node
+```
+
+#### When to update the cache
+
+The cache should be updated when:
+
+* The page contents change
+* The page is removed or a new page is added
+* The page rank changes
+
+The most straightforward way to handle these cases is to simply set a max time that a cached entry can stay in the cache before it is updated, usually referred to as time to live (TTL).
+
+Refer to [When to update the cache](https://github.com/donnemartin/system-design-primer#when-to-update-the-cache) for tradeoffs and alternatives.  The approach above describes [cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside).
+
+## Step 4: Scale the design
+
+> Identify and address bottlenecks, given the constraints.
+
+![Imgur](http://i.imgur.com/4j99mhe.png)
+
+**Important: Do not simply jump right into the final design from the initial design!**
+
+State you would 1) **Benchmark/Load Test**, 2) **Profile** for bottlenecks 3) address bottlenecks while evaluating alternatives and trade-offs, and 4) repeat.  See [Design a system that scales to millions of users on AWS](../scaling_aws/README.md) as a sample on how to iteratively scale the initial design.
+
+It's important to discuss what bottlenecks you might encounter with the initial design and how you might address each of them.  For example, what issues are addressed by adding a **Load Balancer** with multiple **Web Servers**?  **CDN**?  **Master-Slave Replicas**?  What are the alternatives and **Trade-Offs** for each?
+
+We'll introduce some components to complete the design and to address scalability issues.  Internal load balancers are not shown to reduce clutter.
+
+*To avoid repeating discussions*, refer to the following [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) for main talking points, tradeoffs, and alternatives:
+
+* [DNS](https://github.com/donnemartin/system-design-primer#domain-name-system)
+* [Load balancer](https://github.com/donnemartin/system-design-primer#load-balancer)
+* [Horizontal scaling](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+* [Web server (reverse proxy)](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* [API server (application layer)](https://github.com/donnemartin/system-design-primer#application-layer)
+* [Cache](https://github.com/donnemartin/system-design-primer#cache)
+* [Consistency patterns](https://github.com/donnemartin/system-design-primer#consistency-patterns)
+* [Availability patterns](https://github.com/donnemartin/system-design-primer#availability-patterns)
+
+### Expanding the Memory Cache to many machines
+
+To handle the heavy request load and the large amount of memory needed, we'll scale horizontally.  We have three main options on how to store the data on our **Memory Cache** cluster:
+
+* **Each machine in the cache cluster has its own cache** - Simple, although it will likely result in a low cache hit rate.
+* **Each machine in the cache cluster has a copy of the cache** - Simple, although it is an inefficient use of memory.
+* **The cache is [sharded](https://github.com/donnemartin/system-design-primer#sharding) across all machines in the cache cluster** - More complex, although it is likely the best option.  We could use hashing to determine which machine could have the cached results of a query using `machine = hash(query)`.  We'll likely want to use [consistent hashing](https://github.com/donnemartin/system-design-primer#under-development).
+
+## Additional talking points
+
+> Additional topics to dive into, depending on the problem scope and time remaining.
+
+### SQL scaling patterns
+
+* [Read replicas](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [Federation](https://github.com/donnemartin/system-design-primer#federation)
+* [Sharding](https://github.com/donnemartin/system-design-primer#sharding)
+* [Denormalization](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL Tuning](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+#### NoSQL
+
+* [Key-value store](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [Document store](https://github.com/donnemartin/system-design-primer#document-store)
+* [Wide column store](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [Graph database](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### Caching
+
+* Where to cache
+    * [Client caching](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN caching](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web server caching](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [Database caching](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [Application caching](https://github.com/donnemartin/system-design-primer#application-caching)
+* What to cache
+    * [Caching at the database query level](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [Caching at the object level](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* When to update the cache
+    * [Cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [Write-through](https://github.com/donnemartin/system-design-primer#write-through)
+    * [Write-behind (write-back)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [Refresh ahead](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### Asynchronism and microservices
+
+* [Message queues](https://github.com/donnemartin/system-design-primer#message-queues)
+* [Task queues](https://github.com/donnemartin/system-design-primer#task-queues)
+* [Back pressure](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [Microservices](https://github.com/donnemartin/system-design-primer#microservices)
+
+### Communications
+
+* Discuss tradeoffs:
+    * External communication with clients - [HTTP APIs following REST](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * Internal communications - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [Service discovery](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### Security
+
+Refer to the [security section](https://github.com/donnemartin/system-design-primer#security).
+
+### Latency numbers
+
+See [Latency numbers every programmer should know](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know).
+
+### Ongoing
+
+* Continue benchmarking and monitoring your system to address bottlenecks as they come up
+* Scaling is an iterative process
diff --git a/website/solutions/system_design/query_cache/__init__.py b/website/solutions/system_design/query_cache/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/system_design/query_cache/query_cache.graffle b/website/solutions/system_design/query_cache/query_cache.graffle
new file mode 100644
index 00000000000..bb122b4f057
Binary files /dev/null and b/website/solutions/system_design/query_cache/query_cache.graffle differ
diff --git a/website/solutions/system_design/query_cache/query_cache.png b/website/solutions/system_design/query_cache/query_cache.png
new file mode 100644
index 00000000000..55c93f402ec
Binary files /dev/null and b/website/solutions/system_design/query_cache/query_cache.png differ
diff --git a/website/solutions/system_design/query_cache/query_cache_basic.graffle b/website/solutions/system_design/query_cache/query_cache_basic.graffle
new file mode 100644
index 00000000000..27ebf47fb20
Binary files /dev/null and b/website/solutions/system_design/query_cache/query_cache_basic.graffle differ
diff --git a/website/solutions/system_design/query_cache/query_cache_basic.png b/website/solutions/system_design/query_cache/query_cache_basic.png
new file mode 100644
index 00000000000..a1128e541e6
Binary files /dev/null and b/website/solutions/system_design/query_cache/query_cache_basic.png differ
diff --git a/website/solutions/system_design/query_cache/query_cache_snippets.py b/website/solutions/system_design/query_cache/query_cache_snippets.py
new file mode 100644
index 00000000000..19d3f5cdd63
--- /dev/null
+++ b/website/solutions/system_design/query_cache/query_cache_snippets.py
@@ -0,0 +1,90 @@
+# -*- coding: utf-8 -*-
+
+
+class QueryApi(object):
+
+    def __init__(self, memory_cache, reverse_index_cluster):
+        self.memory_cache = memory_cache
+        self.reverse_index_cluster = reverse_index_cluster
+
+    def parse_query(self, query):
+        """Remove markup, break text into terms, deal with typos,
+        normalize capitalization, convert to use boolean operations.
+        """
+        ...
+
+    def process_query(self, query):
+        query = self.parse_query(query)
+        results = self.memory_cache.get(query)
+        if results is None:
+            results = self.reverse_index_cluster.process_search(query)
+            self.memory_cache.set(query, results)
+        return results
+
+
+class Node(object):
+
+    def __init__(self, query, results):
+        self.query = query
+        self.results = results
+
+
+class LinkedList(object):
+
+    def __init__(self):
+        self.head = None
+        self.tail = None
+
+    def move_to_front(self, node):
+        ...
+
+    def append_to_front(self, node):
+        ...
+
+    def remove_from_tail(self):
+        ...
+
+
+class Cache(object):
+
+    def __init__(self, MAX_SIZE):
+        self.MAX_SIZE = MAX_SIZE
+        self.size = 0
+        self.lookup = {}
+        self.linked_list = LinkedList()
+
+    def get(self, query):
+        """Get the stored query result from the cache.
+
+        Accessing a node updates its position to the front of the LRU list.
+        """
+        node = self.lookup[query]
+        if node is None:
+            return None
+        self.linked_list.move_to_front(node)
+        return node.results
+
+    def set(self, results, query):
+        """Set the result for the given query key in the cache.
+
+        When updating an entry, updates its position to the front of the LRU list.
+        If the entry is new and the cache is at capacity, removes the oldest entry
+        before the new entry is added.
+        """
+        node = self.map[query]
+        if node is not None:
+            # Key exists in cache, update the value
+            node.results = results
+            self.linked_list.move_to_front(node)
+        else:
+            # Key does not exist in cache
+            if self.size == self.MAX_SIZE:
+                # Remove the oldest entry from the linked list and lookup
+                self.lookup.pop(self.linked_list.tail.query, None)
+                self.linked_list.remove_from_tail()
+            else:
+                self.size += 1
+            # Add the new key and value
+            new_node = Node(query, results)
+            self.linked_list.append_to_front(new_node)
+            self.lookup[query] = new_node
diff --git a/website/solutions/system_design/sales_rank/README-zh-Hans.md b/website/solutions/system_design/sales_rank/README-zh-Hans.md
new file mode 100644
index 00000000000..960f9258f23
--- /dev/null
+++ b/website/solutions/system_design/sales_rank/README-zh-Hans.md
@@ -0,0 +1,338 @@
+# 为 Amazon 设计分类售卖排行
+
+**注意：这个文档中的链接会直接指向[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)中的有关部分，以避免重复的内容。你可以参考链接的相关内容，来了解其总的要点、方案的权衡取舍以及可选的替代方案。**
+
+## 第一步：简述用例与约束条件
+
+> 搜集需求与问题的范围。
+> 提出问题来明确用例与约束条件。
+> 讨论假设。
+
+我们将在没有面试官明确说明问题的情况下，自己定义一些用例以及限制条件。
+
+### 用例
+
+#### 我们将把问题限定在仅处理以下用例的范围中
+
+* **服务**根据分类计算过去一周中最受欢迎的商品
+* **用户**通过分类浏览过去一周中最受欢迎的商品
+* **服务**有着高可用性
+
+#### 不在用例范围内的有
+
+* 一般的电商网站
+    * 只为售卖排行榜设计组件
+
+### 限制条件与假设
+
+#### 提出假设
+
+* 网络流量不是均匀分布的
+* 一个商品可能存在于多个分类中
+* 商品不能够更改分类
+* 不会存在如 `foo/bar/baz` 之类的子分类
+* 每小时更新一次结果
+    * 受欢迎的商品越多，就需要更频繁地更新
+* 1000 万个商品
+* 1000 个分类
+* 每个月 10 亿次交易
+* 每个月 1000 亿次读取请求
+* 100:1 的读写比例
+
+#### 计算用量
+
+**如果你需要进行粗略的用量计算，请向你的面试官说明。**
+
+* 每笔交易的用量：
+    * `created_at` - 5 字节
+    * `product_id` - 8 字节
+    * `category_id` - 4 字节
+    * `seller_id` - 8 字节
+    * `buyer_id` - 8 字节
+    * `quantity` - 4 字节
+    * `total_price` - 5 字节
+    * 总计：大约 40 字节
+* 每个月的交易内容会产生 40 GB 的记录
+    * 每次交易 40 字节 * 每个月 10 亿次交易
+    * 3年内产生了 1.44 TB 的新交易内容记录
+    * 假定大多数的交易都是新交易而不是更改以前进行完的交易
+* 平均每秒 400 次交易次数
+* 平均每秒 40,000 次读取请求
+
+便利换算指南：
+
+* 每个月有 250 万秒
+* 每秒一个请求 = 每个月 250 万次请求
+* 每秒 40 个请求 = 每个月 1 亿次请求
+* 每秒 400 个请求 = 每个月 10 亿次请求
+
+## 第二步：概要设计
+
+> 列出所有重要组件以规划概要设计。
+
+![Imgur](http://i.imgur.com/vwMa1Qu.png)
+
+## 第三步：设计核心组件
+
+> 深入每个核心组件的细节。
+
+### 用例：服务需要根据分类计算上周最受欢迎的商品
+
+我们可以在现成的**对象存储**系统（例如 Amazon S3 服务）中存储 **售卖 API** 服务产生的日志文本， 因此不需要我们自己搭建分布式文件系统了。
+
+**向你的面试官告知你准备写多少代码**。
+
+假设下面是一个用 tab 分割的简易的日志记录：
+
+```
+timestamp   product_id  category_id    qty     total_price   seller_id    buyer_id
+t1          product1    category1      2       20.00         1            1
+t2          product1    category2      2       20.00         2            2
+t2          product1    category2      1       10.00         2            3
+t3          product2    category1      3        7.00         3            4
+t4          product3    category2      7        2.00         4            5
+t5          product4    category1      1        5.00         5            6
+...
+```
+
+**售卖排行服务** 需要用到 **MapReduce**，并使用 **售卖 API** 服务进行日志记录，同时将结果写入 **SQL 数据库**中的总表 `sales_rank` 中。我们也可以讨论一下[究竟是用 SQL 还是用 NoSQL](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)。
+
+我们需要通过以下步骤使用 **MapReduce**：
+
+* **第 1 步** - 将数据转换为 `(category, product_id), sum(quantity)` 的形式
+* **第 2 步** - 执行分布式排序
+
+```python
+class SalesRanker(MRJob):
+
+    def within_past_week(self, timestamp):
+        """如果时间戳属于过去的一周则返回 True，
+        否则返回 False。"""
+        ...
+
+    def mapper(self, _ line):
+        """解析日志的每一行，提取并转换相关行，
+
+        将键值对设定为如下形式：
+
+        (category1, product1), 2
+        (category2, product1), 2
+        (category2, product1), 1
+        (category1, product2), 3
+        (category2, product3), 7
+        (category1, product4), 1
+        """
+        timestamp, product_id, category_id, quantity, total_price, seller_id, \
+            buyer_id = line.split('\t')
+        if self.within_past_week(timestamp):
+            yield (category_id, product_id), quantity
+
+    def reducer(self, key, value):
+        """将每个 key 的值加起来。
+
+        (category1, product1), 2
+        (category2, product1), 3
+        (category1, product2), 3
+        (category2, product3), 7
+        (category1, product4), 1
+        """
+        yield key, sum(values)
+
+    def mapper_sort(self, key, value):
+        """构造 key 以确保正确的排序。
+
+        将键值对转换成如下形式：
+
+        (category1, 2), product1
+        (category2, 3), product1
+        (category1, 3), product2
+        (category2, 7), product3
+        (category1, 1), product4
+
+        MapReduce 的随机排序步骤会将键
+        值的排序打乱，变成下面这样：
+
+        (category1, 1), product4
+        (category1, 2), product1
+        (category1, 3), product2
+        (category2, 3), product1
+        (category2, 7), product3
+        """
+        category_id, product_id = key
+        quantity = value
+        yield (category_id, quantity), product_id
+
+    def reducer_identity(self, key, value):
+        yield key, value
+
+    def steps(self):
+        """ 此处为 map reduce 步骤"""
+        return [
+            self.mr(mapper=self.mapper,
+                    reducer=self.reducer),
+            self.mr(mapper=self.mapper_sort,
+                    reducer=self.reducer_identity),
+        ]
+```
+
+得到的结果将会是如下的排序列，我们将其插入 `sales_rank` 表中：
+
+```
+(category1, 1), product4
+(category1, 2), product1
+(category1, 3), product2
+(category2, 3), product1
+(category2, 7), product3
+```
+
+`sales_rank` 表的数据结构如下：
+
+```
+id int NOT NULL AUTO_INCREMENT
+category_id int NOT NULL
+total_sold int NOT NULL
+product_id int NOT NULL
+PRIMARY KEY(id)
+FOREIGN KEY(category_id) REFERENCES Categories(id)
+FOREIGN KEY(product_id) REFERENCES Products(id)
+```
+
+我们会以 `id`、`category_id` 与 `product_id` 创建一个 [索引](https://github.com/donnemartin/system-design-primer#use-good-indices)以加快查询速度（只需要使用读取日志的时间，不再需要每次都扫描整个数据表）并让数据常驻内存。从内存读取 1 MB 连续数据大约要花 250 微秒，而从 SSD 读取同样大小的数据要花费 4 倍的时间，从机械硬盘读取需要花费 80 倍以上的时间。<sup><a href=https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数>1</a></sup>
+
+### 用例：用户需要根据分类浏览上周中最受欢迎的商品
+
+* **客户端**向运行[反向代理](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)的 **Web 服务器**发送一个请求
+* 这个 **Web 服务器**将请求转发给**查询 API** 服务
+* The **查询 API** 服务将从 **SQL 数据库**的 `sales_rank` 表中读取数据
+
+我们可以调用一个公共的 [REST API](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest)：
+
+```
+$ curl https://amazon.com/api/v1/popular?category_id=1234
+```
+
+返回：
+
+```
+{
+    "id": "100",
+    "category_id": "1234",
+    "total_sold": "100000",
+    "product_id": "50",
+},
+{
+    "id": "53",
+    "category_id": "1234",
+    "total_sold": "90000",
+    "product_id": "200",
+},
+{
+    "id": "75",
+    "category_id": "1234",
+    "total_sold": "80000",
+    "product_id": "3",
+},
+```
+
+而对于服务器内部的通信，我们可以使用 [RPC](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)。
+
+## 第四步：架构扩展
+
+> 根据限制条件，找到并解决瓶颈。
+
+![Imgur](http://i.imgur.com/MzExP06.png)
+
+**重要提示：不要从最初设计直接跳到最终设计中！**
+
+现在你要 1) **基准测试、负载测试**。2) **分析、描述**性能瓶颈。3) 在解决瓶颈问题的同时，评估替代方案、权衡利弊。4) 重复以上步骤。请阅读[「设计一个系统，并将其扩大到为数以百万计的 AWS 用户服务」](../scaling_aws/README.md) 来了解如何逐步扩大初始设计。
+
+讨论初始设计可能遇到的瓶颈及相关解决方案是很重要的。例如加上一个配置多台 **Web 服务器**的**负载均衡器**是否能够解决问题？**CDN**呢？**主从复制**呢？它们各自的替代方案和需要**权衡**的利弊又有什么呢？
+
+我们将会介绍一些组件来完成设计，并解决架构扩张问题。内置的负载均衡器将不做讨论以节省篇幅。
+
+**为了避免重复讨论**，请参考[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)相关部分来了解其要点、方案的权衡取舍以及可选的替代方案。
+
+* [DNS](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#域名系统)
+* [负载均衡器](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#负载均衡器)
+* [水平拓展](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#水平扩展)
+* [反向代理（web 服务器）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)
+* [API 服务（应用层）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用层)
+* [缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存)
+* [关系型数据库管理系统 (RDBMS)](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#关系型数据库管理系统rdbms)
+* [SQL 故障主从切换](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#故障切换)
+* [主从复制](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#主从复制)
+* [一致性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#一致性模式)
+* [可用性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#可用性模式)
+
+**分析数据库** 可以用现成的数据仓储系统，例如使用 Amazon Redshift 或者 Google BigQuery 的解决方案。
+
+当使用数据仓储技术或者**对象存储**系统时，我们只想在数据库中存储有限时间段的数据。Amazon S3 的**对象存储**系统可以很方便地设置每个月限制只允许新增 40 GB 的存储内容。
+
+平均每秒 40,000 次的读取请求（峰值将会更高）, 可以通过扩展 **内存缓存** 来处理热点内容的读取流量，这对于处理不均匀分布的流量和流量峰值也很有用。由于读取量非常大，**SQL Read 副本** 可能会遇到处理缓存未命中的问题，我们可能需要使用额外的 SQL 扩展模式。
+
+平均每秒 400 次写操作（峰值将会更高）可能对于单个 **SQL 写主-从** 模式来说比较很困难，因此同时还需要更多的扩展技术
+
+SQL 缩放模式包括：
+
+* [联合](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#联合)
+* [分片](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#分片)
+* [非规范化](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#非规范化)
+* [SQL 调优](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-调优)
+
+我们也可以考虑将一些数据移至 **NoSQL 数据库**。
+
+## 其它要点
+
+> 是否深入这些额外的主题，取决于你的问题范围和剩下的时间。
+
+#### NoSQL
+
+* [键-值存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#键-值存储)
+* [文档类型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#文档类型存储)
+* [列型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#列型存储)
+* [图数据库](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#图数据库)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)
+
+### 缓存
+
+* 在哪缓存
+    * [客户端缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#客户端缓存)
+    * [CDN 缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#cdn-缓存)
+    * [Web 服务器缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#web-服务器缓存)
+    * [数据库缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库缓存)
+    * [应用缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用缓存)
+* 什么需要缓存
+    * [数据库查询级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库查询级别的缓存)
+    * [对象级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#对象级别的缓存)
+* 何时更新缓存
+    * [缓存模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存模式)
+    * [直写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#直写模式)
+    * [回写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#回写模式)
+    * [刷新](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#刷新)
+
+### 异步与微服务
+
+* [消息队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#消息队列)
+* [任务队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#任务队列)
+* [背压](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#背压)
+* [微服务](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#微服务)
+
+### 通信
+
+* 可权衡选择的方案：
+    * 与客户端的外部通信 - [使用 REST 作为 HTTP API](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest)
+    * 服务器内部通信 - [RPC](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)
+* [服务发现](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#服务发现)
+
+### 安全性
+
+请参阅[「安全」](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#安全)一章。
+
+### 延迟数值
+
+请参阅[「每个程序员都应该知道的延迟数」](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数)。
+
+### 持续探讨
+
+* 持续进行基准测试并监控你的系统，以解决他们提出的瓶颈问题。
+* 架构拓展是一个迭代的过程。
diff --git a/website/solutions/system_design/sales_rank/README.md b/website/solutions/system_design/sales_rank/README.md
new file mode 100644
index 00000000000..71ad1c7d202
--- /dev/null
+++ b/website/solutions/system_design/sales_rank/README.md
@@ -0,0 +1,338 @@
+# Design Amazon's sales rank by category feature
+
+*Note: This document links directly to relevant areas found in the [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) to avoid duplication.  Refer to the linked content for general talking points, tradeoffs, and alternatives.*
+
+## Step 1: Outline use cases and constraints
+
+> Gather requirements and scope the problem.
+> Ask questions to clarify use cases and constraints.
+> Discuss assumptions.
+
+Without an interviewer to address clarifying questions, we'll define some use cases and constraints.
+
+### Use cases
+
+#### We'll scope the problem to handle only the following use case
+
+* **Service** calculates the past week's most popular products by category
+* **User** views the past week's most popular products by category
+* **Service** has high availability
+
+#### Out of scope
+
+* The general e-commerce site
+    * Design components only for calculating sales rank
+
+### Constraints and assumptions
+
+#### State assumptions
+
+* Traffic is not evenly distributed
+* Items can be in multiple categories
+* Items cannot change categories
+* There are no subcategories ie `foo/bar/baz`
+* Results must be updated hourly
+    * More popular products might need to be updated more frequently
+* 10 million products
+* 1000 categories
+* 1 billion transactions per month
+* 100 billion read requests per month
+* 100:1 read to write ratio
+
+#### Calculate usage
+
+**Clarify with your interviewer if you should run back-of-the-envelope usage calculations.**
+
+* Size per transaction:
+    * `created_at` - 5 bytes
+    * `product_id` - 8 bytes
+    * `category_id` - 4 bytes
+    * `seller_id` - 8 bytes
+    * `buyer_id` - 8 bytes
+    * `quantity` - 4 bytes
+    * `total_price` - 5 bytes
+    * Total: ~40 bytes
+* 40 GB of new transaction content per month
+    * 40 bytes per transaction * 1 billion transactions per month
+    * 1.44 TB of new transaction content in 3 years
+    * Assume most are new transactions instead of updates to existing ones
+* 400 transactions per second on average
+* 40,000 read requests per second on average
+
+Handy conversion guide:
+
+* 2.5 million seconds per month
+* 1 request per second = 2.5 million requests per month
+* 40 requests per second = 100 million requests per month
+* 400 requests per second = 1 billion requests per month
+
+## Step 2: Create a high level design
+
+> Outline a high level design with all important components.
+
+![Imgur](http://i.imgur.com/vwMa1Qu.png)
+
+## Step 3: Design core components
+
+> Dive into details for each core component.
+
+### Use case: Service calculates the past week's most popular products by category
+
+We could store the raw **Sales API** server log files on a managed **Object Store** such as Amazon S3, rather than managing our own distributed file system.
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+We'll assume this is a sample log entry, tab delimited:
+
+```
+timestamp   product_id  category_id    qty     total_price   seller_id    buyer_id
+t1          product1    category1      2       20.00         1            1
+t2          product1    category2      2       20.00         2            2
+t2          product1    category2      1       10.00         2            3
+t3          product2    category1      3        7.00         3            4
+t4          product3    category2      7        2.00         4            5
+t5          product4    category1      1        5.00         5            6
+...
+```
+
+The **Sales Rank Service** could use **MapReduce**, using the **Sales API** server log files as input and writing the results to an aggregate table `sales_rank` in a **SQL Database**.  We should discuss the [use cases and tradeoffs between choosing SQL or NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql).
+
+We'll use a multi-step **MapReduce**:
+
+* **Step 1** - Transform the data to `(category, product_id), sum(quantity)`
+* **Step 2** - Perform a distributed sort
+
+```python
+class SalesRanker(MRJob):
+
+    def within_past_week(self, timestamp):
+        """Return True if timestamp is within past week, False otherwise."""
+        ...
+
+    def mapper(self, _ line):
+        """Parse each log line, extract and transform relevant lines.
+
+        Emit key value pairs of the form:
+
+        (category1, product1), 2
+        (category2, product1), 2
+        (category2, product1), 1
+        (category1, product2), 3
+        (category2, product3), 7
+        (category1, product4), 1
+        """
+        timestamp, product_id, category_id, quantity, total_price, seller_id, \
+            buyer_id = line.split('\t')
+        if self.within_past_week(timestamp):
+            yield (category_id, product_id), quantity
+
+    def reducer(self, key, value):
+        """Sum values for each key.
+
+        (category1, product1), 2
+        (category2, product1), 3
+        (category1, product2), 3
+        (category2, product3), 7
+        (category1, product4), 1
+        """
+        yield key, sum(values)
+
+    def mapper_sort(self, key, value):
+        """Construct key to ensure proper sorting.
+
+        Transform key and value to the form:
+
+        (category1, 2), product1
+        (category2, 3), product1
+        (category1, 3), product2
+        (category2, 7), product3
+        (category1, 1), product4
+
+        The shuffle/sort step of MapReduce will then do a
+        distributed sort on the keys, resulting in:
+
+        (category1, 1), product4
+        (category1, 2), product1
+        (category1, 3), product2
+        (category2, 3), product1
+        (category2, 7), product3
+        """
+        category_id, product_id = key
+        quantity = value
+        yield (category_id, quantity), product_id
+
+    def reducer_identity(self, key, value):
+        yield key, value
+
+    def steps(self):
+        """Run the map and reduce steps."""
+        return [
+            self.mr(mapper=self.mapper,
+                    reducer=self.reducer),
+            self.mr(mapper=self.mapper_sort,
+                    reducer=self.reducer_identity),
+        ]
+```
+
+The result would be the following sorted list, which we could insert into the `sales_rank` table:
+
+```
+(category1, 1), product4
+(category1, 2), product1
+(category1, 3), product2
+(category2, 3), product1
+(category2, 7), product3
+```
+
+The `sales_rank` table could have the following structure:
+
+```
+id int NOT NULL AUTO_INCREMENT
+category_id int NOT NULL
+total_sold int NOT NULL
+product_id int NOT NULL
+PRIMARY KEY(id)
+FOREIGN KEY(category_id) REFERENCES Categories(id)
+FOREIGN KEY(product_id) REFERENCES Products(id)
+```
+
+We'll create an [index](https://github.com/donnemartin/system-design-primer#use-good-indices) on `id `, `category_id`, and `product_id` to speed up lookups (log-time instead of scanning the entire table) and to keep the data in memory.  Reading 1 MB sequentially from memory takes about 250 microseconds, while reading from SSD takes 4x and from disk takes 80x longer.<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+
+### Use case: User views the past week's most popular products by category
+
+* The **Client** sends a request to the **Web Server**, running as a [reverse proxy](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* The **Web Server** forwards the request to the **Read API** server
+* The **Read API** server reads from the **SQL Database** `sales_rank` table
+
+We'll use a public [**REST API**](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest):
+
+```
+$ curl https://amazon.com/api/v1/popular?category_id=1234
+```
+
+Response:
+
+```
+{
+    "id": "100",
+    "category_id": "1234",
+    "total_sold": "100000",
+    "product_id": "50",
+},
+{
+    "id": "53",
+    "category_id": "1234",
+    "total_sold": "90000",
+    "product_id": "200",
+},
+{
+    "id": "75",
+    "category_id": "1234",
+    "total_sold": "80000",
+    "product_id": "3",
+},
+```
+
+For internal communications, we could use [Remote Procedure Calls](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc).
+
+## Step 4: Scale the design
+
+> Identify and address bottlenecks, given the constraints.
+
+![Imgur](http://i.imgur.com/MzExP06.png)
+
+**Important: Do not simply jump right into the final design from the initial design!**
+
+State you would 1) **Benchmark/Load Test**, 2) **Profile** for bottlenecks 3) address bottlenecks while evaluating alternatives and trade-offs, and 4) repeat.  See [Design a system that scales to millions of users on AWS](../scaling_aws/README.md) as a sample on how to iteratively scale the initial design.
+
+It's important to discuss what bottlenecks you might encounter with the initial design and how you might address each of them.  For example, what issues are addressed by adding a **Load Balancer** with multiple **Web Servers**?  **CDN**?  **Master-Slave Replicas**?  What are the alternatives and **Trade-Offs** for each?
+
+We'll introduce some components to complete the design and to address scalability issues.  Internal load balancers are not shown to reduce clutter.
+
+*To avoid repeating discussions*, refer to the following [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) for main talking points, tradeoffs, and alternatives:
+
+* [DNS](https://github.com/donnemartin/system-design-primer#domain-name-system)
+* [CDN](https://github.com/donnemartin/system-design-primer#content-delivery-network)
+* [Load balancer](https://github.com/donnemartin/system-design-primer#load-balancer)
+* [Horizontal scaling](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+* [Web server (reverse proxy)](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* [API server (application layer)](https://github.com/donnemartin/system-design-primer#application-layer)
+* [Cache](https://github.com/donnemartin/system-design-primer#cache)
+* [Relational database management system (RDBMS)](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms)
+* [SQL write master-slave failover](https://github.com/donnemartin/system-design-primer#fail-over)
+* [Master-slave replication](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [Consistency patterns](https://github.com/donnemartin/system-design-primer#consistency-patterns)
+* [Availability patterns](https://github.com/donnemartin/system-design-primer#availability-patterns)
+
+The **Analytics Database** could use a data warehousing solution such as Amazon Redshift or Google BigQuery.
+
+We might only want to store a limited time period of data in the database, while storing the rest in a data warehouse or in an **Object Store**.  An **Object Store** such as Amazon S3 can comfortably handle the constraint of 40 GB of new content per month.
+
+To address the 40,000 *average* read requests per second (higher at peak), traffic for popular content (and their sales rank) should be handled by the **Memory Cache** instead of the database.  The **Memory Cache** is also useful for handling the unevenly distributed traffic and traffic spikes.  With the large volume of reads, the **SQL Read Replicas** might not be able to handle the cache misses.  We'll probably need to employ additional SQL scaling patterns.
+
+400 *average* writes per second (higher at peak) might be tough for a single **SQL Write Master-Slave**, also pointing to a need for additional scaling techniques.
+
+SQL scaling patterns include:
+
+* [Federation](https://github.com/donnemartin/system-design-primer#federation)
+* [Sharding](https://github.com/donnemartin/system-design-primer#sharding)
+* [Denormalization](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL Tuning](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+We should also consider moving some data to a **NoSQL Database**.
+
+## Additional talking points
+
+> Additional topics to dive into, depending on the problem scope and time remaining.
+
+#### NoSQL
+
+* [Key-value store](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [Document store](https://github.com/donnemartin/system-design-primer#document-store)
+* [Wide column store](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [Graph database](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### Caching
+
+* Where to cache
+    * [Client caching](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN caching](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web server caching](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [Database caching](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [Application caching](https://github.com/donnemartin/system-design-primer#application-caching)
+* What to cache
+    * [Caching at the database query level](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [Caching at the object level](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* When to update the cache
+    * [Cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [Write-through](https://github.com/donnemartin/system-design-primer#write-through)
+    * [Write-behind (write-back)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [Refresh ahead](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### Asynchronism and microservices
+
+* [Message queues](https://github.com/donnemartin/system-design-primer#message-queues)
+* [Task queues](https://github.com/donnemartin/system-design-primer#task-queues)
+* [Back pressure](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [Microservices](https://github.com/donnemartin/system-design-primer#microservices)
+
+### Communications
+
+* Discuss tradeoffs:
+    * External communication with clients - [HTTP APIs following REST](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * Internal communications - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [Service discovery](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### Security
+
+Refer to the [security section](https://github.com/donnemartin/system-design-primer#security).
+
+### Latency numbers
+
+See [Latency numbers every programmer should know](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know).
+
+### Ongoing
+
+* Continue benchmarking and monitoring your system to address bottlenecks as they come up
+* Scaling is an iterative process
diff --git a/website/solutions/system_design/sales_rank/__init__.py b/website/solutions/system_design/sales_rank/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/system_design/sales_rank/sales_rank.graffle b/website/solutions/system_design/sales_rank/sales_rank.graffle
new file mode 100644
index 00000000000..0a491db54f8
Binary files /dev/null and b/website/solutions/system_design/sales_rank/sales_rank.graffle differ
diff --git a/website/solutions/system_design/sales_rank/sales_rank.png b/website/solutions/system_design/sales_rank/sales_rank.png
new file mode 100644
index 00000000000..dd0af6193aa
Binary files /dev/null and b/website/solutions/system_design/sales_rank/sales_rank.png differ
diff --git a/website/solutions/system_design/sales_rank/sales_rank_basic.graffle b/website/solutions/system_design/sales_rank/sales_rank_basic.graffle
new file mode 100644
index 00000000000..19eb85ff4e3
Binary files /dev/null and b/website/solutions/system_design/sales_rank/sales_rank_basic.graffle differ
diff --git a/website/solutions/system_design/sales_rank/sales_rank_basic.png b/website/solutions/system_design/sales_rank/sales_rank_basic.png
new file mode 100644
index 00000000000..225bb9b19de
Binary files /dev/null and b/website/solutions/system_design/sales_rank/sales_rank_basic.png differ
diff --git a/website/solutions/system_design/sales_rank/sales_rank_mapreduce.py b/website/solutions/system_design/sales_rank/sales_rank_mapreduce.py
new file mode 100644
index 00000000000..6eeeb525035
--- /dev/null
+++ b/website/solutions/system_design/sales_rank/sales_rank_mapreduce.py
@@ -0,0 +1,77 @@
+# -*- coding: utf-8 -*-
+
+from mrjob.job import MRJob
+
+
+class SalesRanker(MRJob):
+
+    def within_past_week(self, timestamp):
+        """Return True if timestamp is within past week, False otherwise."""
+        ...
+
+    def mapper(self, _, line):
+        """Parse each log line, extract and transform relevant lines.
+
+        Emit key value pairs of the form:
+
+        (foo, p1), 2
+        (bar, p1), 2
+        (bar, p1), 1
+        (foo, p2), 3
+        (bar, p3), 10
+        (foo, p4), 1
+        """
+        timestamp, product_id, category, quantity = line.split('\t')
+        if self.within_past_week(timestamp):
+            yield (category, product_id), quantity
+
+    def reducer(self, key, values):
+        """Sum values for each key.
+
+        (foo, p1), 2
+        (bar, p1), 3
+        (foo, p2), 3
+        (bar, p3), 10
+        (foo, p4), 1
+        """
+        yield key, sum(values)
+
+    def mapper_sort(self, key, value):
+        """Construct key to ensure proper sorting.
+
+        Transform key and value to the form:
+
+        (foo, 2), p1
+        (bar, 3), p1
+        (foo, 3), p2
+        (bar, 10), p3
+        (foo, 1), p4
+
+        The shuffle/sort step of MapReduce will then do a
+        distributed sort on the keys, resulting in:
+
+        (category1, 1), product4
+        (category1, 2), product1
+        (category1, 3), product2
+        (category2, 3), product1
+        (category2, 7), product3
+        """
+        category, product_id = key
+        quantity = value
+        yield (category, quantity), product_id
+
+    def reducer_identity(self, key, value):
+        yield key, value
+
+    def steps(self):
+        """Run the map and reduce steps."""
+        return [
+            self.mr(mapper=self.mapper,
+                    reducer=self.reducer),
+            self.mr(mapper=self.mapper_sort,
+                    reducer=self.reducer_identity),
+        ]
+
+
+if __name__ == '__main__':
+    SalesRanker.run()
diff --git a/website/solutions/system_design/scaling_aws/README-zh-Hans.md b/website/solutions/system_design/scaling_aws/README-zh-Hans.md
new file mode 100644
index 00000000000..c071c70eb08
--- /dev/null
+++ b/website/solutions/system_design/scaling_aws/README-zh-Hans.md
@@ -0,0 +1,403 @@
+# 在 AWS 上设计支持百万级到千万级用户的系统
+
+**注释：为了避免重复，这篇文章的链接直接关联到 [系统设计主题](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) 的相关章节。为一讨论要点、折中方案和可选方案做参考。**
+
+## 第 1 步：用例和约束概要
+
+> 收集需求并调查问题。
+> 通过提问清晰用例和约束。
+> 讨论假设。
+
+如果没有面试官提出明确的问题，我们将自己定义一些用例和约束条件。
+
+### 用例
+
+解决这个问题是一个循序渐进的过程：1) **基准/负载 测试**， 2) 瓶颈 **概述**， 3) 当评估可选和折中方案时定位瓶颈，4) 重复，这是向可扩展的设计发展基础设计的好模式。
+
+除非你有 AWS 的背景或者正在申请需要 AWS 知识的相关职位，否则不要求了解 AWS 的相关细节。并且，这个练习中讨论的许多原则可以更广泛地应用于AWS生态系统之外。
+
+#### 我们就处理以下用例讨论这一问题
+
+* **用户** 进行读或写请求
+    * **服务** 进行处理，存储用户数据，然后返回结果
+* **服务** 需要从支持小规模用户开始到百万用户
+    * 在我们演化架构来处理大量的用户和请求时，讨论一般的扩展模式
+* **服务** 高可用
+
+### 约束和假设
+
+#### 状态假设
+
+* 流量不均匀分布
+* 需要关系数据
+* 从一个用户扩展到千万用户
+    * 表示用户量的增长
+        * 用户量+
+        * 用户量++
+        * 用户量+++
+        * ...
+    * 1000 万用户
+    * 每月 10 亿次写入
+    * 每月 1000 亿次读出
+    * 100:1 读写比率
+    * 每次写入 1 KB 内容
+
+#### 计算使用
+
+**向你的面试官厘清你是否应该做粗略的使用计算**
+
+* 1 TB 新内容 / 月
+    * 1 KB 每次写入 * 10 亿 写入 / 月
+    * 36 TB 新内容 / 3 年
+    * 假设大多数写入都是新内容而不是更新已有内容
+* 平均每秒 400 次写入
+* 平均每秒 40,000 次读取
+
+便捷的转换指南：
+
+* 250 万秒 / 月
+* 1 次请求 / 秒 = 250 万次请求 / 月
+* 40 次请求 / 秒 = 1 亿次请求 / 月
+* 400 次请求 / 秒 = 10 亿请求 / 月
+
+## 第 2 步：创建高级设计方案
+
+> 用所有重要组件概述高水平设计
+
+![Imgur](http://i.imgur.com/B8LDKD7.png)
+
+## 第 3 步：设计核心组件
+
+> 深入每个核心组件的细节。
+
+### 用例：用户进行读写请求
+
+#### 目标
+
+* 只有 1-2 个用户时，你只需要基础配置
+    * 为简单起见，只需要一台服务器
+    * 必要时进行纵向扩展
+    * 监控以确定瓶颈
+
+#### 以单台服务器开始
+
+* **Web 服务器** 在 EC2 上
+    * 存储用户数据
+    * [**MySQL 数据库**](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms)
+
+运用 **纵向扩展**：
+
+* 选择一台更大容量的服务器
+* 密切关注指标，确定如何扩大规模
+    * 使用基本监控来确定瓶颈:CPU、内存、IO、网络等
+    * CloudWatch, top, nagios, statsd, graphite等
+* 纵向扩展的代价将变得更昂贵
+* 无冗余/容错
+
+**折中方案, 可选方案, 和其他细节:**
+
+* **纵向扩展** 的可选方案是 [**横向扩展**](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+
+#### 自 SQL 开始，但认真考虑 NoSQL
+
+约束条件假设需要关系型数据。我们可以开始时在单台服务器上使用 **MySQL 数据库**。
+
+**折中方案, 可选方案, 和其他细节:**
+
+* 查阅 [关系型数据库管理系统 (RDBMS)](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms) 章节
+* 讨论使用 [SQL 或 NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql) 的原因
+
+#### 分配公共静态 IP
+
+* 弹性 IP 提供了一个公共端点，不会在重启时改变 IP。
+* 故障转移时只需要把域名指向新 IP。
+
+#### 使用 DNS 服务
+
+添加 **DNS** 服务，比如 Route 53（[Amazon Route 53](https://aws.amazon.com/cn/route53/) - 译者注），将域映射到实例的公共 IP 中。
+
+**折中方案, 可选方案, 和其他细节:**
+
+* 查阅 [域名系统](https://github.com/donnemartin/system-design-primer#domain-name-system) 章节
+
+#### 安全的 Web 服务器
+
+* 只开放必要的端口
+    * 允许 Web 服务器响应来自以下端口的请求
+        * HTTP 80
+        * HTTPS 443
+        * SSH IP 白名单 22
+    * 防止 Web 服务器启动外链
+
+**折中方案, 可选方案, 和其他细节:**
+
+* 查阅 [安全](https://github.com/donnemartin/system-design-primer#security) 章节
+
+## 第 4 步：扩展设计
+
+> 在给定约束条件下，定义和确认瓶颈。
+
+### 用户+
+
+![Imgur](http://i.imgur.com/rrfjMXB.png)
+
+#### 假设
+
+我们的用户数量开始上升，并且单台服务器的负载上升。**基准/负载测试** 和 **分析** 指出 **MySQL 数据库** 占用越来越多的内存和 CPU 资源，同时用户数据将填满硬盘空间。
+
+目前，我们尚能在纵向扩展时解决这些问题。不幸的是，解决这些问题的代价变得相当昂贵，并且原来的系统并不能允许在 **MySQL 数据库** 和 **Web 服务器** 的基础上进行独立扩展。
+
+#### 目标
+
+* 减轻单台服务器负载并且允许独立扩展
+    * 在 **对象存储** 中单独存储静态内容
+    * 将 **MySQL 数据库** 迁移到单独的服务器上
+* 缺点
+    * 这些变化会增加复杂性，并要求对 **Web服务器** 进行更改，以指向 **对象存储** 和 **MySQL 数据库**
+    * 必须采取额外的安全措施来确保新组件的安全
+    * AWS 的成本也会增加，但应该与自身管理类似系统的成本做比较
+
+#### 独立保存静态内容
+
+* 考虑使用像 S3 这样可管理的 **对象存储** 服务来存储静态内容
+    * 高扩展性和可靠性
+    * 服务器端加密
+* 迁移静态内容到 S3
+    * 用户文件
+    * JS
+    * CSS
+    * 图片
+    * 视频
+
+#### 迁移 MySQL 数据库到独立机器上
+
+* 考虑使用类似 RDS 的服务来管理 **MySQL 数据库**
+    * 简单的管理，扩展
+    * 多个可用区域
+    * 空闲时加密
+
+#### 系统安全
+
+* 在传输和空闲时对数据进行加密
+* 使用虚拟私有云
+    * 为单个 **Web 服务器** 创建一个公共子网，这样就可以发送和接收来自 internet 的流量
+    * 为其他内容创建一个私有子网，禁止外部访问
+    * 在每个组件上只为白名单 IP 打开端口
+* 这些相同的模式应当在新的组件的实现中实践
+
+**折中方案, 可选方案, 和其他细节:**
+
+* 查阅 [安全](https://github.com/donnemartin/system-design-primer#security) 章节
+
+### 用户+++
+
+![Imgur](http://i.imgur.com/raoFTXM.png)
+
+#### 假设
+
+我们的 **基准/负载测试** 和 **性能测试** 显示，在高峰时段，我们的单一 **Web服务器** 存在瓶颈，导致响应缓慢，在某些情况下还会宕机。随着服务的成熟，我们也希望朝着更高的可用性和冗余发展。
+
+#### 目标
+
+* 下面的目标试图用 **Web服务器** 解决扩展问题
+    * 基于 **基准/负载测试** 和 **分析**，你可能只需要实现其中的一两个技术
+* 使用 [**横向扩展**](https://github.com/donnemartin/system-design-primer#horizontal-scaling) 来处理增加的负载和单点故障
+    * 添加 [**负载均衡器**](https://github.com/donnemartin/system-design-primer#load-balancer) 例如 Amazon 的 ELB 或 HAProxy
+        * ELB 是高可用的
+        * 如果你正在配置自己的 **负载均衡器**, 在多个可用区域中设置多台服务器用于 [双活](https://github.com/donnemartin/system-design-primer#active-active) 或 [主被](https://github.com/donnemartin/system-design-primer#active-passive) 将提高可用性
+        * 终止在 **负载平衡器** 上的SSL，以减少后端服务器上的计算负载，并简化证书管理
+    * 在多个可用区域中使用多台 **Web服务器**
+    * 在多个可用区域的 [**主-从 故障转移**](https://github.com/donnemartin/system-design-primer#master-slave-replication) 模式中使用多个 **MySQL** 实例来改进冗余
+* 分离 **Web 服务器** 和 [**应用服务器**](https://github.com/donnemartin/system-design-primer#application-layer)
+    * 独立扩展和配置每一层
+    * **Web 服务器** 可以作为 [**反向代理**](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+    * 例如, 你可以添加 **应用服务器** 处理 **读 API** 而另外一些处理 **写 API**
+* 将静态（和一些动态）内容转移到 [**内容分发网络 (CDN)**](https://github.com/donnemartin/system-design-primer#content-delivery-network) 例如 CloudFront 以减少负载和延迟
+
+**折中方案, 可选方案, 和其他细节:**
+
+* 查阅以上链接获得更多细节
+
+### 用户+++
+
+![Imgur](http://i.imgur.com/OZCxJr0.png)
+
+**注意：** **内部负载均衡** 不显示以减少混乱
+
+#### 假设
+
+我们的 **性能/负载测试** 和 **性能测试** 显示我们读操作频繁（100:1 的读写比率），并且数据库在高读请求时表现很糟糕。
+
+#### 目标
+
+* 下面的目标试图解决 **MySQL数据库** 的伸缩性问题
+    * * 基于 **基准/负载测试** 和 **分析**，你可能只需要实现其中的一两个技术
+* 将下列数据移动到一个 [**内存缓存**](https://github.com/donnemartin/system-design-primer#cache)，例如弹性缓存，以减少负载和延迟：
+    * **MySQL** 中频繁访问的内容
+        * 首先, 尝试配置 **MySQL 数据库** 缓存以查看是否足以在实现 **内存缓存** 之前缓解瓶颈
+    * 来自 **Web 服务器** 的会话数据
+        * **Web 服务器** 变成无状态的, 允许 **自动伸缩**
+    * 从内存中读取 1 MB 内存需要大约 250 微秒，而从SSD中读取时间要长 4 倍，从磁盘读取的时间要长 80 倍。<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+* 添加 [**MySQL 读取副本**](https://github.com/donnemartin/system-design-primer#master-slave-replication) 来减少写主线程的负载
+* 添加更多 **Web 服务器** and **应用服务器** 来提高响应
+
+**折中方案, 可选方案, 和其他细节:**
+
+* 查阅以上链接获得更多细节
+
+#### 添加 MySQL 读取副本
+
+* 除了添加和扩展 **内存缓存**，**MySQL 读副本服务器** 也能够帮助缓解在 **MySQL 写主服务器** 的负载。
+* 添加逻辑到 **Web 服务器** 来区分读和写操作
+* 在 **MySQL 读副本服务器** 之上添加 **负载均衡器** （不是为了减少混乱）
+* 大多数服务都是读取负载大于写入负载
+
+**折中方案, 可选方案, 和其他细节:**
+
+* 查阅 [关系型数据库管理系统 (RDBMS)](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms) 章节
+
+### 用户++++
+
+![Imgur](http://i.imgur.com/3X8nmdL.png)
+
+#### 假设
+
+**基准/负载测试** 和 **分析** 显示，在美国，正常工作时间存在流量峰值，当用户离开办公室时，流量骤降。我们认为，可以通过真实负载自动转换服务器数量来降低成本。我们是一家小商店，所以我们希望 DevOps 尽量自动化地进行 **自动伸缩** 和通用操作。
+
+#### 目标
+
+* 根据需要添加 **自动扩展**
+    * 跟踪流量高峰
+    * 通过关闭未使用的实例来降低成本
+* 自动化 DevOps
+    * Chef, Puppet, Ansible 工具等
+* 继续监控指标以解决瓶颈
+    * **主机水平** - 检查一个 EC2 实例
+    * **总水平** - 检查负载均衡器统计数据
+    * **日志分析** - CloudWatch, CloudTrail, Loggly, Splunk, Sumo
+    * **外部站点的性能** - Pingdom or New Relic
+    * **处理通知和事件** - PagerDuty
+    * **错误报告** - Sentry
+
+#### 添加自动扩展
+
+* 考虑使用一个托管服务，比如AWS **自动扩展**
+    * 为每个 **Web 服务器** 创建一个组，并为每个 **应用服务器** 类型创建一个组，将每个组放置在多个可用区域中
+    * 设置最小和最大实例数
+    * 通过 CloudWatch 来扩展或收缩
+        * 可预测负载的简单时间度量
+        * 一段时间内的指标：
+            * CPU 负载
+            * 延迟
+            * 网络流量
+            * 自定义指标
+    * 缺点
+        * 自动扩展会引入复杂性
+        * 可能需要一段时间才能适当扩大规模，以满足增加的需求，或者在需求下降时缩减规模
+
+### 用户+++++
+
+![Imgur](http://i.imgur.com/jj3A5N8.png)
+
+**注释：** **自动伸缩** 组不显示以减少混乱
+
+#### 假设
+
+当服务继续向着限制条件概述的方向发展，我们反复地运行 **基准/负载测试** 和 **分析** 来进一步发现和定位新的瓶颈。
+
+#### 目标
+
+由于问题的约束，我们将继续提出扩展性的问题：
+
+* 如果我们的 **MySQL 数据库** 开始变得过于庞大, 我们可能只考虑把数据在数据库中存储一段有限的时间, 同时在例如 Redshift 这样的数据仓库中存储其余的数据
+    * 像 Redshift 这样的数据仓库能够轻松处理每月 1TB 的新内容
+* 平均每秒 40,000 次的读取请求, 可以通过扩展 **内存缓存** 来处理热点内容的读取流量，这对于处理不均匀分布的流量和流量峰值也很有用
+    * **SQL读取副本** 可能会遇到处理缓存未命中的问题, 我们可能需要使用额外的 SQL 扩展模式
+* 对于单个 **SQL 写主-从** 模式来说，平均每秒 400 次写操作（明显更高）可能会很困难，同时还需要更多的扩展技术
+
+SQL 扩展模型包括：
+
+* [集合](https://github.com/donnemartin/system-design-primer#federation)
+* [分片](https://github.com/donnemartin/system-design-primer#sharding)
+* [反范式](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL 调优](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+为了进一步处理高读和写请求，我们还应该考虑将适当的数据移动到一个 [**NoSQL数据库**](https://github.com/donnemartin/system-design-primer#nosql) ，例如 DynamoDB。
+
+我们可以进一步分离我们的 [**应用服务器**](https://github.com/donnemartin/system-design-primer#application-layer) 以允许独立扩展。不需要实时完成的批处理任务和计算可以通过 Queues 和 Workers 异步完成：
+
+* 以照片服务为例，照片上传和缩略图的创建可以分开进行
+    * **客户端** 上传图片
+    * **应用服务器** 推送一个任务到 **队列** 例如 SQS
+    * EC2 上的 **Worker 服务** 或者 Lambda 从 **队列** 拉取 work，然后：
+        * 创建缩略图
+        * 更新 **数据库**
+        * 在 **对象存储** 中存储缩略图
+
+**折中方案, 可选方案, 和其他细节:**
+
+* 查阅以上链接获得更多细节
+
+## 额外的话题
+
+> 根据问题的范围和剩余时间，还需要深入讨论其他问题。
+
+### SQL 扩展模式
+
+* [读取副本](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [集合](https://github.com/donnemartin/system-design-primer#federation)
+* [分区](https://github.com/donnemartin/system-design-primer#sharding)
+* [反规范化](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL 调优](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+#### NoSQL
+
+* [键值存储](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [文档存储](https://github.com/donnemartin/system-design-primer#document-store)
+* [宽表存储](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [图数据库](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### 缓存
+
+* 缓存到哪里
+    * [客户端缓存](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN 缓存](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web 服务缓存](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [数据库缓存](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [应用缓存](https://github.com/donnemartin/system-design-primer#application-caching)
+* 缓存什么
+    * [数据库请求层缓存](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [对象层缓存](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* 何时更新缓存
+    * [预留缓存](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [完全写入](https://github.com/donnemartin/system-design-primer#write-through)
+    * [延迟写 (写回)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [事先更新](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### 异步性和微服务
+
+* [消息队列](https://github.com/donnemartin/system-design-primer#message-queues)
+* [任务队列](https://github.com/donnemartin/system-design-primer#task-queues)
+* [回退压力](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [微服务](https://github.com/donnemartin/system-design-primer#microservices)
+
+### 沟通
+
+* 关于折中方案的讨论:
+    * 客户端的外部通讯 - [遵循 REST 的 HTTP APIs](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * 内部通讯 - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [服务探索](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### 安全性
+
+参考 [安全章节](https://github.com/donnemartin/system-design-primer#security)
+
+### 延迟数字指标
+
+查阅 [每个程序员必懂的延迟数字](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know)
+
+### 正在进行
+
+* 继续基准测试并监控你的系统以解决出现的瓶颈问题
+* 扩展是一个迭代的过程
diff --git a/website/solutions/system_design/scaling_aws/README.md b/website/solutions/system_design/scaling_aws/README.md
new file mode 100644
index 00000000000..99af0cfff8d
--- /dev/null
+++ b/website/solutions/system_design/scaling_aws/README.md
@@ -0,0 +1,403 @@
+# Design a system that scales to millions of users on AWS
+
+*Note: This document links directly to relevant areas found in the [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) to avoid duplication.  Refer to the linked content for general talking points, tradeoffs, and alternatives.*
+
+## Step 1: Outline use cases and constraints
+
+> Gather requirements and scope the problem.
+> Ask questions to clarify use cases and constraints.
+> Discuss assumptions.
+
+Without an interviewer to address clarifying questions, we'll define some use cases and constraints.
+
+### Use cases
+
+Solving this problem takes an iterative approach of: 1) **Benchmark/Load Test**, 2) **Profile** for bottlenecks 3) address bottlenecks while evaluating alternatives and trade-offs, and 4) repeat, which is good pattern for evolving basic designs to scalable designs.
+
+Unless you have a background in AWS or are applying for a position that requires AWS knowledge, AWS-specific details are not a requirement.  However, **much of the principles discussed in this exercise can apply more generally outside of the AWS ecosystem.**
+
+#### We'll scope the problem to handle only the following use cases
+
+* **User** makes a read or write request
+    * **Service** does processing, stores user data, then returns the results
+* **Service** needs to evolve from serving a small amount of users to millions of users
+    * Discuss general scaling patterns as we evolve an architecture to handle a large number of users and requests
+* **Service** has high availability
+
+### Constraints and assumptions
+
+#### State assumptions
+
+* Traffic is not evenly distributed
+* Need for relational data
+* Scale from 1 user to tens of millions of users
+    * Denote increase of users as:
+        * Users+
+        * Users++
+        * Users+++
+        * ...
+    * 10 million users
+    * 1 billion writes per month
+    * 100 billion reads per month
+    * 100:1 read to write ratio
+    * 1 KB content per write
+
+#### Calculate usage
+
+**Clarify with your interviewer if you should run back-of-the-envelope usage calculations.**
+
+* 1 TB of new content per month
+    * 1 KB per write * 1 billion writes per month
+    * 36 TB of new content in 3 years
+    * Assume most writes are from new content instead of updates to existing ones
+* 400 writes per second on average
+* 40,000 reads per second on average
+
+Handy conversion guide:
+
+* 2.5 million seconds per month
+* 1 request per second = 2.5 million requests per month
+* 40 requests per second = 100 million requests per month
+* 400 requests per second = 1 billion requests per month
+
+## Step 2: Create a high level design
+
+> Outline a high level design with all important components.
+
+![Imgur](http://i.imgur.com/B8LDKD7.png)
+
+## Step 3: Design core components
+
+> Dive into details for each core component.
+
+### Use case: User makes a read or write request
+
+#### Goals
+
+* With only 1-2 users, you only need a basic setup
+    * Single box for simplicity
+    * Vertical scaling when needed
+    * Monitor to determine bottlenecks
+
+#### Start with a single box
+
+* **Web server** on EC2
+    * Storage for user data
+    * [**MySQL Database**](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms)
+
+Use **Vertical Scaling**:
+
+* Simply choose a bigger box
+* Keep an eye on metrics to determine how to scale up
+    * Use basic monitoring to determine bottlenecks: CPU, memory, IO, network, etc
+    * CloudWatch, top, nagios, statsd, graphite, etc
+* Scaling vertically can get very expensive
+* No redundancy/failover
+
+*Trade-offs, alternatives, and additional details:*
+
+* The alternative to **Vertical Scaling** is [**Horizontal scaling**](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+
+#### Start with SQL, consider NoSQL
+
+The constraints assume there is a need for relational data.  We can start off using a **MySQL Database** on the single box.
+
+*Trade-offs, alternatives, and additional details:*
+
+* See the [Relational database management system (RDBMS)](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms) section
+* Discuss reasons to use [SQL or NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+#### Assign a public static IP
+
+* Elastic IPs provide a public endpoint whose IP doesn't change on reboot
+* Helps with failover, just point the domain to a new IP
+
+#### Use a DNS
+
+Add a **DNS** such as Route 53 to map the domain to the instance's public IP.
+
+*Trade-offs, alternatives, and additional details:*
+
+* See the [Domain name system](https://github.com/donnemartin/system-design-primer#domain-name-system) section
+
+#### Secure the web server
+
+* Open up only necessary ports
+    * Allow the web server to respond to incoming requests from:
+        * 80 for HTTP
+        * 443 for HTTPS
+        * 22 for SSH to only whitelisted IPs
+    * Prevent the web server from initiating outbound connections
+
+*Trade-offs, alternatives, and additional details:*
+
+* See the [Security](https://github.com/donnemartin/system-design-primer#security) section
+
+## Step 4: Scale the design
+
+> Identify and address bottlenecks, given the constraints.
+
+### Users+
+
+![Imgur](http://i.imgur.com/rrfjMXB.png)
+
+#### Assumptions
+
+Our user count is starting to pick up and the load is increasing on our single box.  Our **Benchmarks/Load Tests** and **Profiling** are pointing to the **MySQL Database** taking up more and more memory and CPU resources, while the user content is filling up disk space.
+
+We've been able to address these issues with **Vertical Scaling** so far.  Unfortunately, this has become quite expensive and it doesn't allow for independent scaling of the **MySQL Database** and **Web Server**.
+
+#### Goals
+
+* Lighten load on the single box and allow for independent scaling
+    * Store static content separately in an **Object Store**
+    * Move the **MySQL Database** to a separate box
+* Disadvantages
+    * These changes would increase complexity and would require changes to the **Web Server** to point to the **Object Store** and the **MySQL Database**
+    * Additional security measures must be taken to secure the new components
+    * AWS costs could also increase, but should be weighed with the costs of managing similar systems on your own
+
+#### Store static content separately
+
+* Consider using a managed **Object Store** like S3 to store static content
+    * Highly scalable and reliable
+    * Server side encryption
+* Move static content to S3
+    * User files
+    * JS
+    * CSS
+    * Images
+    * Videos
+
+#### Move the MySQL database to a separate box
+
+* Consider using a service like RDS to manage the **MySQL Database**
+    * Simple to administer, scale
+    * Multiple availability zones
+    * Encryption at rest
+
+#### Secure the system
+
+* Encrypt data in transit and at rest
+* Use a Virtual Private Cloud
+    * Create a public subnet for the single **Web Server** so it can send and receive traffic from the internet
+    * Create a private subnet for everything else, preventing outside access
+    * Only open ports from whitelisted IPs for each component
+* These same patterns should be implemented for new components in the remainder of the exercise
+
+*Trade-offs, alternatives, and additional details:*
+
+* See the [Security](https://github.com/donnemartin/system-design-primer#security) section
+
+### Users++
+
+![Imgur](http://i.imgur.com/raoFTXM.png)
+
+#### Assumptions
+
+Our **Benchmarks/Load Tests** and **Profiling** show that our single **Web Server** bottlenecks during peak hours, resulting in slow responses and in some cases, downtime.  As the service matures, we'd also like to move towards higher availability and redundancy.
+
+#### Goals
+
+* The following goals attempt to address the scaling issues with the **Web Server**
+    * Based on the **Benchmarks/Load Tests** and **Profiling**, you might only need to implement one or two of these techniques
+* Use [**Horizontal Scaling**](https://github.com/donnemartin/system-design-primer#horizontal-scaling) to handle increasing loads and to address single points of failure
+    * Add a [**Load Balancer**](https://github.com/donnemartin/system-design-primer#load-balancer) such as Amazon's ELB or HAProxy
+        * ELB is highly available
+        * If you are configuring your own **Load Balancer**, setting up multiple servers in [active-active](https://github.com/donnemartin/system-design-primer#active-active) or [active-passive](https://github.com/donnemartin/system-design-primer#active-passive) in multiple availability zones will improve availability
+        * Terminate SSL on the **Load Balancer** to reduce computational load on backend servers and to simplify certificate administration
+    * Use multiple **Web Servers** spread out over multiple availability zones
+    * Use multiple **MySQL** instances in [**Master-Slave Failover**](https://github.com/donnemartin/system-design-primer#master-slave-replication) mode across multiple availability zones to improve redundancy
+* Separate out the **Web Servers** from the [**Application Servers**](https://github.com/donnemartin/system-design-primer#application-layer)
+    * Scale and configure both layers independently
+    * **Web Servers** can run as a [**Reverse Proxy**](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+    * For example, you can add **Application Servers** handling **Read APIs** while others handle **Write APIs**
+* Move static (and some dynamic) content to a [**Content Delivery Network (CDN)**](https://github.com/donnemartin/system-design-primer#content-delivery-network) such as CloudFront to reduce load and latency
+
+*Trade-offs, alternatives, and additional details:*
+
+* See the linked content above for details
+
+### Users+++
+
+![Imgur](http://i.imgur.com/OZCxJr0.png)
+
+**Note:** **Internal Load Balancers** not shown to reduce clutter
+
+#### Assumptions
+
+Our **Benchmarks/Load Tests** and **Profiling** show that we are read-heavy (100:1 with writes) and our database is suffering from poor performance from the high read requests.
+
+#### Goals
+
+* The following goals attempt to address the scaling issues with the **MySQL Database**
+    * Based on the **Benchmarks/Load Tests** and **Profiling**, you might only need to implement one or two of these techniques
+* Move the following data to a [**Memory Cache**](https://github.com/donnemartin/system-design-primer#cache) such as Elasticache to reduce load and latency:
+    * Frequently accessed content from **MySQL**
+        * First, try to configure the **MySQL Database** cache to see if that is sufficient to relieve the bottleneck before implementing a **Memory Cache**
+    * Session data from the **Web Servers**
+        * The **Web Servers** become stateless, allowing for **Autoscaling**
+    * Reading 1 MB sequentially from memory takes about 250 microseconds, while reading from SSD takes 4x and from disk takes 80x longer.<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+* Add [**MySQL Read Replicas**](https://github.com/donnemartin/system-design-primer#master-slave-replication) to reduce load on the write master
+* Add more **Web Servers** and **Application Servers** to improve responsiveness
+
+*Trade-offs, alternatives, and additional details:*
+
+* See the linked content above for details
+
+#### Add MySQL read replicas
+
+* In addition to adding and scaling a **Memory Cache**, **MySQL Read Replicas** can also help relieve load on the **MySQL Write Master**
+* Add logic to **Web Server** to separate out writes and reads
+* Add **Load Balancers** in front of **MySQL Read Replicas** (not pictured to reduce clutter)
+* Most services are read-heavy vs write-heavy
+
+*Trade-offs, alternatives, and additional details:*
+
+* See the [Relational database management system (RDBMS)](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms) section
+
+### Users++++
+
+![Imgur](http://i.imgur.com/3X8nmdL.png)
+
+#### Assumptions
+
+Our **Benchmarks/Load Tests** and **Profiling** show that our traffic spikes during regular business hours in the U.S. and drop significantly when users leave the office.  We think we can cut costs by automatically spinning up and down servers based on actual load.  We're a small shop so we'd like to automate as much of the DevOps as possible for **Autoscaling** and for the general operations.
+
+#### Goals
+
+* Add **Autoscaling** to provision capacity as needed
+    * Keep up with traffic spikes
+    * Reduce costs by powering down unused instances
+* Automate DevOps
+    * Chef, Puppet, Ansible, etc
+* Continue monitoring metrics to address bottlenecks
+    * **Host level** - Review a single EC2 instance
+    * **Aggregate level** - Review load balancer stats
+    * **Log analysis** - CloudWatch, CloudTrail, Loggly, Splunk, Sumo
+    * **External site performance** - Pingdom or New Relic
+    * **Handle notifications and incidents** - PagerDuty
+    * **Error Reporting** - Sentry
+
+#### Add autoscaling
+
+* Consider a managed service such as AWS **Autoscaling**
+    * Create one group for each **Web Server** and one for each **Application Server** type, place each group in multiple availability zones
+    * Set a min and max number of instances
+    * Trigger to scale up and down through CloudWatch
+        * Simple time of day metric for predictable loads or
+        * Metrics over a time period:
+            * CPU load
+            * Latency
+            * Network traffic
+            * Custom metric
+    * Disadvantages
+        * Autoscaling can introduce complexity
+        * It could take some time before a system appropriately scales up to meet increased demand, or to scale down when demand drops
+
+### Users+++++
+
+![Imgur](http://i.imgur.com/jj3A5N8.png)
+
+**Note:** **Autoscaling** groups not shown to reduce clutter
+
+#### Assumptions
+
+As the service continues to grow towards the figures outlined in the constraints, we iteratively run **Benchmarks/Load Tests** and **Profiling** to uncover and address new bottlenecks.
+
+#### Goals
+
+We'll continue to address scaling issues due to the problem's constraints:
+
+* If our **MySQL Database** starts to grow too large, we might consider only storing a limited time period of data in the database, while storing the rest in a data warehouse such as Redshift
+    * A data warehouse such as Redshift can comfortably handle the constraint of 1 TB of new content per month
+* With 40,000 average read requests per second, read traffic for popular content can be addressed by scaling the **Memory Cache**, which is also useful for handling the unevenly distributed traffic and traffic spikes
+    * The **SQL Read Replicas** might have trouble handling the cache misses, we'll probably need to employ additional SQL scaling patterns
+* 400 average writes per second (with presumably significantly higher peaks) might be tough for a single **SQL Write Master-Slave**, also pointing to a need for additional scaling techniques
+
+SQL scaling patterns include:
+
+* [Federation](https://github.com/donnemartin/system-design-primer#federation)
+* [Sharding](https://github.com/donnemartin/system-design-primer#sharding)
+* [Denormalization](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL Tuning](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+To further address the high read and write requests, we should also consider moving appropriate data to a [**NoSQL Database**](https://github.com/donnemartin/system-design-primer#nosql) such as DynamoDB.
+
+We can further separate out our [**Application Servers**](https://github.com/donnemartin/system-design-primer#application-layer) to allow for independent scaling.  Batch processes or computations that do not need to be done in real-time can be done [**Asynchronously**](https://github.com/donnemartin/system-design-primer#asynchronism) with **Queues** and **Workers**:
+
+* For example, in a photo service, the photo upload and the thumbnail creation can be separated:
+    * **Client** uploads photo
+    * **Application Server** puts a job in a **Queue** such as SQS
+    * The **Worker Service** on EC2 or Lambda pulls work off the **Queue** then:
+        * Creates a thumbnail
+        * Updates a **Database**
+        * Stores the thumbnail in the **Object Store**
+
+*Trade-offs, alternatives, and additional details:*
+
+* See the linked content above for details
+
+## Additional talking points
+
+> Additional topics to dive into, depending on the problem scope and time remaining.
+
+### SQL scaling patterns
+
+* [Read replicas](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [Federation](https://github.com/donnemartin/system-design-primer#federation)
+* [Sharding](https://github.com/donnemartin/system-design-primer#sharding)
+* [Denormalization](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL Tuning](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+#### NoSQL
+
+* [Key-value store](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [Document store](https://github.com/donnemartin/system-design-primer#document-store)
+* [Wide column store](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [Graph database](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### Caching
+
+* Where to cache
+    * [Client caching](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN caching](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web server caching](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [Database caching](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [Application caching](https://github.com/donnemartin/system-design-primer#application-caching)
+* What to cache
+    * [Caching at the database query level](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [Caching at the object level](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* When to update the cache
+    * [Cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [Write-through](https://github.com/donnemartin/system-design-primer#write-through)
+    * [Write-behind (write-back)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [Refresh ahead](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### Asynchronism and microservices
+
+* [Message queues](https://github.com/donnemartin/system-design-primer#message-queues)
+* [Task queues](https://github.com/donnemartin/system-design-primer#task-queues)
+* [Back pressure](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [Microservices](https://github.com/donnemartin/system-design-primer#microservices)
+
+### Communications
+
+* Discuss tradeoffs:
+    * External communication with clients - [HTTP APIs following REST](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * Internal communications - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [Service discovery](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### Security
+
+Refer to the [security section](https://github.com/donnemartin/system-design-primer#security).
+
+### Latency numbers
+
+See [Latency numbers every programmer should know](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know).
+
+### Ongoing
+
+* Continue benchmarking and monitoring your system to address bottlenecks as they come up
+* Scaling is an iterative process
diff --git a/website/solutions/system_design/scaling_aws/scaling_aws.graffle b/website/solutions/system_design/scaling_aws/scaling_aws.graffle
new file mode 100644
index 00000000000..460d1debfc0
Binary files /dev/null and b/website/solutions/system_design/scaling_aws/scaling_aws.graffle differ
diff --git a/website/solutions/system_design/scaling_aws/scaling_aws.png b/website/solutions/system_design/scaling_aws/scaling_aws.png
new file mode 100644
index 00000000000..dee8994d99c
Binary files /dev/null and b/website/solutions/system_design/scaling_aws/scaling_aws.png differ
diff --git a/website/solutions/system_design/scaling_aws/scaling_aws_1.png b/website/solutions/system_design/scaling_aws/scaling_aws_1.png
new file mode 100644
index 00000000000..e4fae5d5928
Binary files /dev/null and b/website/solutions/system_design/scaling_aws/scaling_aws_1.png differ
diff --git a/website/solutions/system_design/scaling_aws/scaling_aws_2.png b/website/solutions/system_design/scaling_aws/scaling_aws_2.png
new file mode 100644
index 00000000000..34342b01358
Binary files /dev/null and b/website/solutions/system_design/scaling_aws/scaling_aws_2.png differ
diff --git a/website/solutions/system_design/scaling_aws/scaling_aws_3.png b/website/solutions/system_design/scaling_aws/scaling_aws_3.png
new file mode 100644
index 00000000000..766932d5c81
Binary files /dev/null and b/website/solutions/system_design/scaling_aws/scaling_aws_3.png differ
diff --git a/website/solutions/system_design/scaling_aws/scaling_aws_4.png b/website/solutions/system_design/scaling_aws/scaling_aws_4.png
new file mode 100644
index 00000000000..958a10e6a60
Binary files /dev/null and b/website/solutions/system_design/scaling_aws/scaling_aws_4.png differ
diff --git a/website/solutions/system_design/scaling_aws/scaling_aws_5.png b/website/solutions/system_design/scaling_aws/scaling_aws_5.png
new file mode 100644
index 00000000000..703d4137573
Binary files /dev/null and b/website/solutions/system_design/scaling_aws/scaling_aws_5.png differ
diff --git a/website/solutions/system_design/scaling_aws/scaling_aws_6.png b/website/solutions/system_design/scaling_aws/scaling_aws_6.png
new file mode 100644
index 00000000000..e663d950b1c
Binary files /dev/null and b/website/solutions/system_design/scaling_aws/scaling_aws_6.png differ
diff --git a/website/solutions/system_design/scaling_aws/scaling_aws_7.png b/website/solutions/system_design/scaling_aws/scaling_aws_7.png
new file mode 100644
index 00000000000..8498cb547d2
Binary files /dev/null and b/website/solutions/system_design/scaling_aws/scaling_aws_7.png differ
diff --git a/website/solutions/system_design/social_graph/README-zh-Hans.md b/website/solutions/system_design/social_graph/README-zh-Hans.md
new file mode 100644
index 00000000000..07b8e3e7886
--- /dev/null
+++ b/website/solutions/system_design/social_graph/README-zh-Hans.md
@@ -0,0 +1,348 @@
+# 为社交网络设计数据结构
+
+**注释：为了避免重复，这篇文章的链接直接关联到 [系统设计主题](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) 的相关章节。为一讨论要点、折中方案和可选方案做参考。**
+
+## 第 1 步：用例和约束概要
+
+> 收集需求并调查问题。
+> 通过提问清晰用例和约束。
+> 讨论假设。
+
+如果没有面试官提出明确的问题，我们将自己定义一些用例和约束条件。
+
+### 用例
+
+#### 我们就处理以下用例审视这一问题
+
+* **用户** 寻找某人并显示与被寻人之间的最短路径
+* **服务** 高可用
+
+### 约束和假设
+
+#### 状态假设
+
+* 流量分布不均
+    * 某些搜索比别的更热门，同时某些搜索仅执行一次
+* 图数据不适用单一机器
+* 图的边没有权重
+* 1 千万用户
+* 每个用户平均有 50 个朋友
+* 每月 10 亿次朋友搜索
+
+训练使用更传统的系统 - 别用图特有的解决方案例如 [GraphQL](http://graphql.org/) 或图数据库如 [Neo4j](https://neo4j.com/)。
+
+#### 计算使用
+
+**向你的面试官厘清你是否应该做粗略的使用计算**
+
+* 50 亿朋友关系
+    * 1 亿用户 * 平均每人 50 个朋友
+* 每秒 400 次搜索请求
+
+便捷的转换指南：
+
+* 每月 250 万秒
+* 每秒 1 个请求 = 每月 250 万次请求
+* 每秒 40 个请求 = 每月 1 亿次请求
+* 每秒 400 个请求 = 每月 10 亿次请求
+
+## 第 2 步：创建高级设计方案
+
+> 用所有重要组件概述高水平设计
+
+![Imgur](http://i.imgur.com/wxXyq2J.png)
+
+## 第 3 步：设计核心组件
+
+> 深入每个核心组件的细节。
+
+### 用例： 用户搜索某人并查看到被搜人的最短路径
+
+**和你的面试官说清你期望的代码量**
+
+没有百万用户（点）的和十亿朋友关系（边）的限制，我们能够用一般 BFS 方法解决无权重最短路径任务：
+
+```python
+class Graph(Graph):
+
+    def shortest_path(self, source, dest):
+        if source is None or dest is None:
+            return None
+        if source is dest:
+            return [source.key]
+        prev_node_keys = self._shortest_path(source, dest)
+        if prev_node_keys is None:
+            return None
+        else:
+            path_ids = [dest.key]
+            prev_node_key = prev_node_keys[dest.key]
+            while prev_node_key is not None:
+                path_ids.append(prev_node_key)
+                prev_node_key = prev_node_keys[prev_node_key]
+            return path_ids[::-1]
+
+    def _shortest_path(self, source, dest):
+        queue = deque()
+        queue.append(source)
+        prev_node_keys = {source.key: None}
+        source.visit_state = State.visited
+        while queue:
+            node = queue.popleft()
+            if node is dest:
+                return prev_node_keys
+            prev_node = node
+            for adj_node in node.adj_nodes.values():
+                if adj_node.visit_state == State.unvisited:
+                    queue.append(adj_node)
+                    prev_node_keys[adj_node.key] = prev_node.key
+                    adj_node.visit_state = State.visited
+        return None
+```
+
+我们不能在同一台机器上满足所有用户，我们需要通过 **人员服务器** [拆分](https://github.com/donnemartin/system-design-primer#sharding) 用户并且通过 **查询服务** 访问。
+
+* **客户端** 向 **服务器** 发送请求，**服务器** 作为 [反向代理](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* **搜索 API** 服务器向 **用户图服务** 转发请求
+* **用户图服务** 有以下功能：
+    * 使用 **查询服务** 找到当前用户信息存储的 **人员服务器**
+    * 找到适当的 **人员服务器** 检索当前用户的 `friend_ids` 列表
+    * 把当前用户作为 `source` 运行 BFS 搜索算法同时 当前用户的 `friend_ids` 作为每个 `adjacent_node` 的 ids
+    * 给定 id 获取 `adjacent_node`:
+        * **用户图服务** 将 **再次** 和 **查询服务** 通讯，最后判断出和给定 id 相匹配的存储 `adjacent_node` 的 **人员服务器**（有待优化）
+
+**和你的面试官说清你应该写的代码量**
+
+**注释**：简易版错误处理执行如下。询问你是否需要编写适当的错误处理方法。
+
+**查询服务** 实现：
+
+```python
+class LookupService(object):
+
+    def __init__(self):
+        self.lookup = self._init_lookup()  # key: person_id, value: person_server
+
+    def _init_lookup(self):
+        ...
+
+    def lookup_person_server(self, person_id):
+        return self.lookup[person_id]
+```
+
+**人员服务器** 实现：
+
+```python
+class PersonServer(object):
+
+    def __init__(self):
+        self.people = {}  # key: person_id, value: person
+
+    def add_person(self, person):
+        ...
+
+    def people(self, ids):
+        results = []
+        for id in ids:
+            if id in self.people:
+                results.append(self.people[id])
+        return results
+```
+
+**用户** 实现：
+
+```python
+class Person(object):
+
+    def __init__(self, id, name, friend_ids):
+        self.id = id
+        self.name = name
+        self.friend_ids = friend_ids
+```
+
+**用户图服务** 实现：
+
+```python
+class UserGraphService(object):
+
+    def __init__(self, lookup_service):
+        self.lookup_service = lookup_service
+
+    def person(self, person_id):
+        person_server = self.lookup_service.lookup_person_server(person_id)
+        return person_server.people([person_id])
+
+    def shortest_path(self, source_key, dest_key):
+        if source_key is None or dest_key is None:
+            return None
+        if source_key is dest_key:
+            return [source_key]
+        prev_node_keys = self._shortest_path(source_key, dest_key)
+        if prev_node_keys is None:
+            return None
+        else:
+            # Iterate through the path_ids backwards, starting at dest_key
+            path_ids = [dest_key]
+            prev_node_key = prev_node_keys[dest_key]
+            while prev_node_key is not None:
+                path_ids.append(prev_node_key)
+                prev_node_key = prev_node_keys[prev_node_key]
+            # Reverse the list since we iterated backwards
+            return path_ids[::-1]
+
+    def _shortest_path(self, source_key, dest_key, path):
+        # Use the id to get the Person
+        source = self.person(source_key)
+        # Update our bfs queue
+        queue = deque()
+        queue.append(source)
+        # prev_node_keys keeps track of each hop from
+        # the source_key to the dest_key
+        prev_node_keys = {source_key: None}
+        # We'll use visited_ids to keep track of which nodes we've
+        # visited, which can be different from a typical bfs where
+        # this can be stored in the node itself
+        visited_ids = set()
+        visited_ids.add(source.id)
+        while queue:
+            node = queue.popleft()
+            if node.key is dest_key:
+                return prev_node_keys
+            prev_node = node
+            for friend_id in node.friend_ids:
+                if friend_id not in visited_ids:
+                    friend_node = self.person(friend_id)
+                    queue.append(friend_node)
+                    prev_node_keys[friend_id] = prev_node.key
+                    visited_ids.add(friend_id)
+        return None
+```
+
+我们用的是公共的 [**REST API**](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)：
+
+```
+$ curl https://social.com/api/v1/friend_search?person_id=1234
+```
+
+响应：
+
+```
+{
+    "person_id": "100",
+    "name": "foo",
+    "link": "https://social.com/foo",
+},
+{
+    "person_id": "53",
+    "name": "bar",
+    "link": "https://social.com/bar",
+},
+{
+    "person_id": "1234",
+    "name": "baz",
+    "link": "https://social.com/baz",
+},
+```
+
+内部通信使用 [远端过程调用](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)。
+
+## 第 4 步：扩展设计
+
+> 在给定约束条件下，定义和确认瓶颈。
+
+![Imgur](http://i.imgur.com/cdCv5g7.png)
+
+**重要：别简化从最初设计到最终设计的过程！**
+
+你将要做的是：1) **基准/负载 测试**， 2) 瓶颈 **概述**， 3) 当评估可选和折中方案时定位瓶颈，4) 重复。以 [在 AWS 上设计支持百万级到千万级用户的系统](../scaling_aws/README.md) 为参考迭代地扩展最初设计。
+
+讨论最初设计可能遇到的瓶颈和处理方法十分重要。例如，什么问题可以通过添加多台 **Web 服务器** 作为 **负载均衡** 解决？**CDN**？**主从副本**？每个问题都有哪些替代和 **折中** 方案？
+
+我们即将介绍一些组件来完成设计和解决扩展性问题。内部负载均衡不显示以减少混乱。
+
+**避免重复讨论**，以下网址链接到 [系统设计主题](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) 相关的主流方案、折中方案和替代方案。
+
+* [DNS](https://github.com/donnemartin/system-design-primer#domain-name-system)
+* [负载均衡](https://github.com/donnemartin/system-design-primer#load-balancer)
+* [横向扩展](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+* [Web 服务器（反向代理）](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* [API 服务器（应用层）](https://github.com/donnemartin/system-design-primer#application-layer)
+* [缓存](https://github.com/donnemartin/system-design-primer#cache)
+* [一致性模式](https://github.com/donnemartin/system-design-primer#consistency-patterns)
+* [可用性模式](https://github.com/donnemartin/system-design-primer#availability-patterns)
+
+解决 **平均** 每秒 400 次请求的限制（峰值），人员数据可以存在例如 Redis 或 Memcached 这样的 **内存** 中以减少响应次数和下游流量通信服务。这尤其在用户执行多次连续查询和查询哪些广泛连接的人时十分有用。从内存中读取 1MB 数据大约要 250 微秒，从 SSD 中读取同样大小的数据时间要长 4 倍，从硬盘要长 80 倍。<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+
+以下是进一步优化方案：
+
+* 在 **内存** 中存储完整的或部分的BFS遍历加快后续查找
+* 在 **NoSQL 数据库** 中批量离线计算并存储完整的或部分的BFS遍历加快后续查找
+* 在同一台 **人员服务器** 上托管批处理同一批朋友查找减少机器跳转
+    * 通过地理位置 [拆分](https://github.com/donnemartin/system-design-primer#sharding) **人员服务器** 来进一步优化，因为朋友通常住得都比较近
+* 同时进行两个 BFS 查找，一个从 source 开始，一个从 destination 开始，然后合并两个路径
+* 从有庞大朋友圈的人开始找起，这样更有可能减小当前用户和搜索目标之间的 [离散度数](https://en.wikipedia.org/wiki/Six_degrees_of_separation)
+* 在询问用户是否继续查询之前设置基于时间或跳跃数阈值，当在某些案例中搜索耗费时间过长时。
+* 使用类似 [Neo4j](https://neo4j.com/) 的 **图数据库** 或图特定查询语法，例如 [GraphQL](http://graphql.org/)（如果没有禁止使用 **图数据库** 的限制的话）
+
+## 额外的话题
+
+> 根据问题的范围和剩余时间，还需要深入讨论其他问题。
+
+### SQL 扩展模式
+
+* [读取副本](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [集合](https://github.com/donnemartin/system-design-primer#federation)
+* [分区](https://github.com/donnemartin/system-design-primer#sharding)
+* [反规范化](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL 调优](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+#### NoSQL
+
+* [键值存储](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [文档存储](https://github.com/donnemartin/system-design-primer#document-store)
+* [宽表存储](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [图数据库](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### 缓存
+
+* 缓存到哪里
+    * [客户端缓存](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN 缓存](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web 服务缓存](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [数据库缓存](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [应用缓存](https://github.com/donnemartin/system-design-primer#application-caching)
+* 缓存什么
+    * [数据库请求层缓存](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [对象层缓存](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* 何时更新缓存
+    * [预留缓存](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [完全写入](https://github.com/donnemartin/system-design-primer#write-through)
+    * [延迟写 (写回)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [事先更新](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### 异步性和微服务
+
+* [消息队列](https://github.com/donnemartin/system-design-primer#message-queues)
+* [任务队列](https://github.com/donnemartin/system-design-primer#task-queues)
+* [回退压力](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [微服务](https://github.com/donnemartin/system-design-primer#microservices)
+
+### 沟通
+
+* 关于折中方案的讨论:
+    * 客户端的外部通讯 - [遵循 REST 的 HTTP APIs](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * 内部通讯 - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [服务探索](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### 安全性
+
+参考 [安全章节](https://github.com/donnemartin/system-design-primer#security)
+
+### 延迟数字指标
+
+查阅 [每个程序员必懂的延迟数字](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know)
+
+### 正在进行
+
+* 继续基准测试并监控你的系统以解决出现的瓶颈问题
+* 扩展是一个迭代的过程
diff --git a/website/solutions/system_design/social_graph/README.md b/website/solutions/system_design/social_graph/README.md
new file mode 100644
index 00000000000..f7dfd4efe8d
--- /dev/null
+++ b/website/solutions/system_design/social_graph/README.md
@@ -0,0 +1,349 @@
+# Design the data structures for a social network
+
+*Note: This document links directly to relevant areas found in the [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) to avoid duplication.  Refer to the linked content for general talking points, tradeoffs, and alternatives.*
+
+## Step 1: Outline use cases and constraints
+
+> Gather requirements and scope the problem.
+> Ask questions to clarify use cases and constraints.
+> Discuss assumptions.
+
+Without an interviewer to address clarifying questions, we'll define some use cases and constraints.
+
+### Use cases
+
+#### We'll scope the problem to handle only the following use cases
+
+* **User** searches for someone and sees the shortest path to the searched person
+* **Service** has high availability
+
+### Constraints and assumptions
+
+#### State assumptions
+
+* Traffic is not evenly distributed
+    * Some searches are more popular than others, while others are only executed once
+* Graph data won't fit on a single machine
+* Graph edges are unweighted
+* 100 million users
+* 50 friends per user average
+* 1 billion friend searches per month
+
+Exercise the use of more traditional systems - don't use graph-specific solutions such as [GraphQL](http://graphql.org/) or a graph database like [Neo4j](https://neo4j.com/)
+
+#### Calculate usage
+
+**Clarify with your interviewer if you should run back-of-the-envelope usage calculations.**
+
+* 5 billion friend relationships
+    * 100 million users * 50 friends per user average
+* 400 search requests per second
+
+Handy conversion guide:
+
+* 2.5 million seconds per month
+* 1 request per second = 2.5 million requests per month
+* 40 requests per second = 100 million requests per month
+* 400 requests per second = 1 billion requests per month
+
+## Step 2: Create a high level design
+
+> Outline a high level design with all important components.
+
+![Imgur](http://i.imgur.com/wxXyq2J.png)
+
+## Step 3: Design core components
+
+> Dive into details for each core component.
+
+### Use case: User searches for someone and sees the shortest path to the searched person
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+Without the constraint of millions of users (vertices) and billions of friend relationships (edges), we could solve this unweighted shortest path task with a general BFS approach:
+
+```python
+class Graph(Graph):
+
+    def shortest_path(self, source, dest):
+        if source is None or dest is None:
+            return None
+        if source is dest:
+            return [source.key]
+        prev_node_keys = self._shortest_path(source, dest)
+        if prev_node_keys is None:
+            return None
+        else:
+            path_ids = [dest.key]
+            prev_node_key = prev_node_keys[dest.key]
+            while prev_node_key is not None:
+                path_ids.append(prev_node_key)
+                prev_node_key = prev_node_keys[prev_node_key]
+            return path_ids[::-1]
+
+    def _shortest_path(self, source, dest):
+        queue = deque()
+        queue.append(source)
+        prev_node_keys = {source.key: None}
+        source.visit_state = State.visited
+        while queue:
+            node = queue.popleft()
+            if node is dest:
+                return prev_node_keys
+            prev_node = node
+            for adj_node in node.adj_nodes.values():
+                if adj_node.visit_state == State.unvisited:
+                    queue.append(adj_node)
+                    prev_node_keys[adj_node.key] = prev_node.key
+                    adj_node.visit_state = State.visited
+        return None
+```
+
+We won't be able to fit all users on the same machine, we'll need to [shard](https://github.com/donnemartin/system-design-primer#sharding) users across **Person Servers** and access them with a **Lookup Service**.
+
+* The **Client** sends a request to the **Web Server**, running as a [reverse proxy](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* The **Web Server** forwards the request to the **Search API** server
+* The **Search API** server forwards the request to the **User Graph Service**
+* The **User Graph Service** does the following:
+    * Uses the **Lookup Service** to find the **Person Server** where the current user's info is stored
+    * Finds the appropriate **Person Server** to retrieve the current user's list of `friend_ids`
+    * Runs a BFS search using the current user as the `source` and the current user's `friend_ids` as the ids for each `adjacent_node`
+    * To get the `adjacent_node` from a given id:
+        * The **User Graph Service** will *again* need to communicate with the **Lookup Service** to determine which **Person Server** stores the`adjacent_node` matching the given id (potential for optimization)
+
+**Clarify with your interviewer how much code you should be writing**.
+
+**Note**: Error handling is excluded below for simplicity.  Ask if you should code proper error handing.
+
+**Lookup Service** implementation:
+
+```python
+class LookupService(object):
+
+    def __init__(self):
+        self.lookup = self._init_lookup()  # key: person_id, value: person_server
+
+    def _init_lookup(self):
+        ...
+
+    def lookup_person_server(self, person_id):
+        return self.lookup[person_id]
+```
+
+**Person Server** implementation:
+
+```python
+class PersonServer(object):
+
+    def __init__(self):
+        self.people = {}  # key: person_id, value: person
+
+    def add_person(self, person):
+        ...
+
+    def people(self, ids):
+        results = []
+        for id in ids:
+            if id in self.people:
+                results.append(self.people[id])
+        return results
+```
+
+**Person** implementation:
+
+```python
+class Person(object):
+
+    def __init__(self, id, name, friend_ids):
+        self.id = id
+        self.name = name
+        self.friend_ids = friend_ids
+```
+
+**User Graph Service** implementation:
+
+```python
+class UserGraphService(object):
+
+    def __init__(self, lookup_service):
+        self.lookup_service = lookup_service
+
+    def person(self, person_id):
+        person_server = self.lookup_service.lookup_person_server(person_id)
+        return person_server.people([person_id])
+
+    def shortest_path(self, source_key, dest_key):
+        if source_key is None or dest_key is None:
+            return None
+        if source_key is dest_key:
+            return [source_key]
+        prev_node_keys = self._shortest_path(source_key, dest_key)
+        if prev_node_keys is None:
+            return None
+        else:
+            # Iterate through the path_ids backwards, starting at dest_key
+            path_ids = [dest_key]
+            prev_node_key = prev_node_keys[dest_key]
+            while prev_node_key is not None:
+                path_ids.append(prev_node_key)
+                prev_node_key = prev_node_keys[prev_node_key]
+            # Reverse the list since we iterated backwards
+            return path_ids[::-1]
+
+    def _shortest_path(self, source_key, dest_key, path):
+        # Use the id to get the Person
+        source = self.person(source_key)
+        # Update our bfs queue
+        queue = deque()
+        queue.append(source)
+        # prev_node_keys keeps track of each hop from
+        # the source_key to the dest_key
+        prev_node_keys = {source_key: None}
+        # We'll use visited_ids to keep track of which nodes we've
+        # visited, which can be different from a typical bfs where
+        # this can be stored in the node itself
+        visited_ids = set()
+        visited_ids.add(source.id)
+        while queue:
+            node = queue.popleft()
+            if node.key is dest_key:
+                return prev_node_keys
+            prev_node = node
+            for friend_id in node.friend_ids:
+                if friend_id not in visited_ids:
+                    friend_node = self.person(friend_id)
+                    queue.append(friend_node)
+                    prev_node_keys[friend_id] = prev_node.key
+                    visited_ids.add(friend_id)
+        return None
+```
+
+We'll use a public [**REST API**](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest):
+
+```
+$ curl https://social.com/api/v1/friend_search?person_id=1234
+```
+
+Response:
+
+```
+{
+    "person_id": "100",
+    "name": "foo",
+    "link": "https://social.com/foo",
+},
+{
+    "person_id": "53",
+    "name": "bar",
+    "link": "https://social.com/bar",
+},
+{
+    "person_id": "1234",
+    "name": "baz",
+    "link": "https://social.com/baz",
+},
+```
+
+For internal communications, we could use [Remote Procedure Calls](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc).
+
+## Step 4: Scale the design
+
+> Identify and address bottlenecks, given the constraints.
+
+![Imgur](http://i.imgur.com/cdCv5g7.png)
+
+**Important: Do not simply jump right into the final design from the initial design!**
+
+State you would 1) **Benchmark/Load Test**, 2) **Profile** for bottlenecks 3) address bottlenecks while evaluating alternatives and trade-offs, and 4) repeat.  See [Design a system that scales to millions of users on AWS](../scaling_aws/README.md) as a sample on how to iteratively scale the initial design.
+
+It's important to discuss what bottlenecks you might encounter with the initial design and how you might address each of them.  For example, what issues are addressed by adding a **Load Balancer** with multiple **Web Servers**?  **CDN**?  **Master-Slave Replicas**?  What are the alternatives and **Trade-Offs** for each?
+
+We'll introduce some components to complete the design and to address scalability issues.  Internal load balancers are not shown to reduce clutter.
+
+*To avoid repeating discussions*, refer to the following [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) for main talking points, tradeoffs, and alternatives:
+
+* [DNS](https://github.com/donnemartin/system-design-primer#domain-name-system)
+* [Load balancer](https://github.com/donnemartin/system-design-primer#load-balancer)
+* [Horizontal scaling](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+* [Web server (reverse proxy)](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* [API server (application layer)](https://github.com/donnemartin/system-design-primer#application-layer)
+* [Cache](https://github.com/donnemartin/system-design-primer#cache)
+* [Consistency patterns](https://github.com/donnemartin/system-design-primer#consistency-patterns)
+* [Availability patterns](https://github.com/donnemartin/system-design-primer#availability-patterns)
+
+To address the constraint of 400 *average* read requests per second (higher at peak), person data can be served from a **Memory Cache** such as Redis or Memcached to reduce response times and to reduce traffic to downstream services.  This could be especially useful for people who do multiple searches in succession and for people who are well-connected.  Reading 1 MB sequentially from memory takes about 250 microseconds, while reading from SSD takes 4x and from disk takes 80x longer.<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+
+Below are further optimizations:
+
+* Store complete or partial BFS traversals to speed up subsequent lookups in the **Memory Cache**
+* Batch compute offline then store complete or partial BFS traversals to speed up subsequent lookups in a **NoSQL Database**
+* Reduce machine jumps by batching together friend lookups hosted on the same **Person Server**
+    * [Shard](https://github.com/donnemartin/system-design-primer#sharding) **Person Servers** by location to further improve this, as friends generally live closer to each other
+* Do two BFS searches at the same time, one starting from the source, and one from the destination, then merge the two paths
+* Start the BFS search from people with large numbers of friends, as they are more likely to reduce the number of [degrees of separation](https://en.wikipedia.org/wiki/Six_degrees_of_separation) between the current user and the search target
+* Set a limit based on time or number of hops before asking the user if they want to continue searching, as searching could take a considerable amount of time in some cases
+* Use a **Graph Database** such as [Neo4j](https://neo4j.com/) or a graph-specific query language such as [GraphQL](http://graphql.org/) (if there were no constraint preventing the use of **Graph Databases**)
+
+## Additional talking points
+
+> Additional topics to dive into, depending on the problem scope and time remaining.
+
+### SQL scaling patterns
+
+* [Read replicas](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [Federation](https://github.com/donnemartin/system-design-primer#federation)
+* [Sharding](https://github.com/donnemartin/system-design-primer#sharding)
+* [Denormalization](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL Tuning](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+#### NoSQL
+
+* [Key-value store](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [Document store](https://github.com/donnemartin/system-design-primer#document-store)
+* [Wide column store](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [Graph database](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### Caching
+
+* Where to cache
+    * [Client caching](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN caching](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web server caching](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [Database caching](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [Application caching](https://github.com/donnemartin/system-design-primer#application-caching)
+* What to cache
+    * [Caching at the database query level](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [Caching at the object level](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* When to update the cache
+    * [Cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [Write-through](https://github.com/donnemartin/system-design-primer#write-through)
+    * [Write-behind (write-back)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [Refresh ahead](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### Asynchronism and microservices
+
+* [Message queues](https://github.com/donnemartin/system-design-primer#message-queues)
+* [Task queues](https://github.com/donnemartin/system-design-primer#task-queues)
+* [Back pressure](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [Microservices](https://github.com/donnemartin/system-design-primer#microservices)
+
+### Communications
+
+* Discuss tradeoffs:
+    * External communication with clients - [HTTP APIs following REST](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * Internal communications - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [Service discovery](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### Security
+
+Refer to the [security section](https://github.com/donnemartin/system-design-primer#security).
+
+### Latency numbers
+
+See [Latency numbers every programmer should know](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know).
+
+### Ongoing
+
+* Continue benchmarking and monitoring your system to address bottlenecks as they come up
+* Scaling is an iterative process
diff --git a/website/solutions/system_design/social_graph/__init__.py b/website/solutions/system_design/social_graph/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/system_design/social_graph/social_graph.graffle b/website/solutions/system_design/social_graph/social_graph.graffle
new file mode 100644
index 00000000000..a245d5a66c6
Binary files /dev/null and b/website/solutions/system_design/social_graph/social_graph.graffle differ
diff --git a/website/solutions/system_design/social_graph/social_graph.png b/website/solutions/system_design/social_graph/social_graph.png
new file mode 100644
index 00000000000..86b730bb1e3
Binary files /dev/null and b/website/solutions/system_design/social_graph/social_graph.png differ
diff --git a/website/solutions/system_design/social_graph/social_graph_basic.graffle b/website/solutions/system_design/social_graph/social_graph_basic.graffle
new file mode 100644
index 00000000000..a753b39c782
Binary files /dev/null and b/website/solutions/system_design/social_graph/social_graph_basic.graffle differ
diff --git a/website/solutions/system_design/social_graph/social_graph_basic.png b/website/solutions/system_design/social_graph/social_graph_basic.png
new file mode 100644
index 00000000000..d6f4255e840
Binary files /dev/null and b/website/solutions/system_design/social_graph/social_graph_basic.png differ
diff --git a/website/solutions/system_design/social_graph/social_graph_snippets.py b/website/solutions/system_design/social_graph/social_graph_snippets.py
new file mode 100644
index 00000000000..f0ea4c4b932
--- /dev/null
+++ b/website/solutions/system_design/social_graph/social_graph_snippets.py
@@ -0,0 +1,72 @@
+# -*- coding: utf-8 -*-
+from collections import deque
+from enum import Enum
+
+
+class State(Enum):
+    unvisited = 0
+    visited = 1
+
+
+class Graph(object):
+
+    def bfs(self, source, dest):
+        if source is None:
+            return False
+        queue = deque()
+        queue.append(source)
+        source.visit_state = State.visited
+        while queue:
+            node = queue.popleft()
+            print(node)
+            if dest is node:
+                return True
+            for adjacent_node in node.adj_nodes.values():
+                if adjacent_node.visit_state == State.unvisited:
+                    queue.append(adjacent_node)
+                    adjacent_node.visit_state = State.visited
+        return False
+
+
+class Person(object):
+
+    def __init__(self, id, name):
+        self.id = id
+        self.name = name
+        self.friend_ids = []
+
+
+class LookupService(object):
+
+    def __init__(self):
+        self.lookup = {}  # key: person_id, value: person_server
+
+    def get_person(self, person_id):
+        person_server = self.lookup[person_id]
+        return person_server.people[person_id]
+
+
+class PersonServer(object):
+
+    def __init__(self):
+        self.people = {}  # key: person_id, value: person
+
+    def get_people(self, ids):
+        results = []
+        for id in ids:
+            if id in self.people:
+                results.append(self.people[id])
+        return results
+
+
+class UserGraphService(object):
+
+    def __init__(self, person_ids, lookup):
+        self.lookup = lookup
+        self.person_ids = person_ids
+        self.visited_ids = set()
+
+    def bfs(self, source, dest):
+        # Use self.visited_ids to track visited nodes
+        # Use self.lookup to translate a person_id to a Person
+        pass
diff --git a/website/solutions/system_design/template/template.graffle b/website/solutions/system_design/template/template.graffle
new file mode 100644
index 00000000000..6908231eee3
Binary files /dev/null and b/website/solutions/system_design/template/template.graffle differ
diff --git a/website/solutions/system_design/twitter/README-zh-Hans.md b/website/solutions/system_design/twitter/README-zh-Hans.md
new file mode 100644
index 00000000000..1853444dbc8
--- /dev/null
+++ b/website/solutions/system_design/twitter/README-zh-Hans.md
@@ -0,0 +1,331 @@
+# 设计推特时间轴与搜索功能
+
+**注意：这个文档中的链接会直接指向[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)中的有关部分，以避免重复的内容。你可以参考链接的相关内容，来了解其总的要点、方案的权衡取舍以及可选的替代方案。**
+
+**设计 Facebook 的 feed** 与**设计 Facebook 搜索**与此为同一类型问题。
+
+## 第一步：简述用例与约束条件
+
+> 搜集需求与问题的范围。
+> 提出问题来明确用例与约束条件。
+> 讨论假设。
+
+我们将在没有面试官明确说明问题的情况下，自己定义一些用例以及限制条件。
+
+### 用例
+
+#### 我们将把问题限定在仅处理以下用例的范围中
+
+* **用户**发布了一篇推特
+    * **服务**将推特推送给关注者，给他们发送消息通知与邮件
+* **用户**浏览用户时间轴（用户最近的活动）
+* **用户**浏览主页时间轴（用户关注的人最近的活动）
+* **用户**搜索关键词
+* **服务**需要有高可用性
+
+#### 不在用例范围内的有
+
+* **服务**向 Firehose 与其它流数据接口推送推特
+* **服务**根据用户的”是否可见“选项排除推特
+    * 隐藏未关注者的 @回复
+    * 关心”隐藏转发“设置
+* 数据分析
+
+### 限制条件与假设
+
+#### 提出假设
+
+普遍情况
+
+* 网络流量不是均匀分布的
+* 发布推特的速度需要足够快速
+    * 除非有上百万的关注者，否则将推特推送给粉丝的速度要足够快
+* 1 亿个活跃用户
+* 每天新发布 5 亿条推特，每月新发布 150 亿条推特
+    * 平均每条推特需要推送给 5 个人
+    * 每天需要进行 50 亿次推送
+    * 每月需要进行 1500 亿次推送
+* 每月需要处理 2500 亿次读取请求
+* 每月需要处理 100 亿次搜索
+
+时间轴功能
+
+* 浏览时间轴需要足够快
+* 推特的读取负载要大于写入负载
+    * 需要为推特的快速读取进行优化
+* 存入推特是高写入负载功能
+
+搜索功能
+
+* 搜索速度需要足够快
+* 搜索是高负载读取功能
+
+#### 计算用量
+
+**如果你需要进行粗略的用量计算，请向你的面试官说明。**
+
+* 每条推特的大小：
+    * `tweet_id` - 8 字节
+    * `user_id` - 32 字节
+    * `text` - 140 字节
+    * `media` - 平均 10 KB
+    * 总计： 大约 10 KB
+* 每月产生新推特的内容为 150 TB
+    * 每条推特 10 KB  * 每天 5 亿条推特 * 每月 30 天
+    * 3 年产生新推特的内容为 5.4 PB
+* 每秒需要处理 10 万次读取请求
+    * 每个月需要处理 2500 亿次请求 * (每秒 400 次请求 / 每月 10 亿次请求)
+* 每秒发布 6000 条推特
+    * 每月发布 150 亿条推特 * (每秒 400 次请求 / 每月 10 次请求)
+* 每秒推送 6 万条推特
+    * 每月推送 1500 亿条推特 * (每秒 400 次请求 / 每月 10 亿次请求)
+* 每秒 4000 次搜索请求
+
+便利换算指南：
+
+* 每个月有 250 万秒
+* 每秒一个请求 = 每个月 250 万次请求
+* 每秒 40 个请求 = 每个月 1 亿次请求
+* 每秒 400 个请求 = 每个月 10 亿次请求
+
+## 第二步：概要设计
+
+> 列出所有重要组件以规划概要设计。
+
+![Imgur](http://i.imgur.com/48tEA2j.png)
+
+## 第三步：设计核心组件
+
+> 深入每个核心组件的细节。
+
+### 用例：用户发表了一篇推特
+
+我们可以将用户自己发表的推特存储在[关系数据库](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms)中。我们也可以讨论一下[究竟是用 SQL 还是用 NoSQL](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)。
+
+构建用户主页时间轴（查看关注用户的活动）以及推送推特是件麻烦事。将特推传播给所有关注者（每秒约递送 6 万条推特）这一操作有可能会使传统的[关系数据库](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms)超负载。因此，我们可以使用 **NoSQL 数据库**或**内存数据库**之类的更快的数据存储方式。从内存读取 1 MB 连续数据大约要花 250 微秒，而从 SSD 读取同样大小的数据要花费 4 倍的时间，从机械硬盘读取需要花费 80 倍以上的时间。<sup><a href=https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数>1</a></sup>
+
+我们可以将照片、视频之类的媒体存储于**对象存储**中。
+
+* **客户端**向应用[反向代理](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)的**Web 服务器**发送一条推特
+* **Web 服务器**将请求转发给**写 API**服务器
+* **写 API**服务器将推特使用 **SQL 数据库**存储于用户时间轴中
+* **写 API**调用**消息输出服务**，进行以下操作：
+    * 查询**用户 图 服务**找到存储于**内存缓存**中的此用户的粉丝
+    * 将推特存储于**内存缓存**中的**此用户的粉丝的主页时间轴**中
+        * O(n) 复杂度操作：  1000 名粉丝 = 1000 次查找与插入
+    * 将特推存储在**搜索索引服务**中，以加快搜索
+    * 将媒体存储于**对象存储**中
+    * 使用**通知服务**向粉丝发送推送：
+        * 使用**队列**异步推送通知
+
+**向你的面试官告知你准备写多少代码**。
+
+如果我们用 Redis 作为**内存缓存**，那可以用 Redis 原生的 list 作为其数据结构。结构如下：
+
+```
+           tweet n+2                   tweet n+1                   tweet n
+| 8 bytes   8 bytes  1 byte | 8 bytes   8 bytes  1 byte | 8 bytes   8 bytes  1 byte |
+| tweet_id  user_id  meta   | tweet_id  user_id  meta   | tweet_id  user_id  meta   |
+```
+
+新发布的推特将被存储在对应用户（关注且活跃的用户）的主页时间轴的**内存缓存**中。
+
+我们可以调用一个公共的 [REST API](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest)：
+
+```
+$ curl -X POST --data '{ "user_id": "123", "auth_token": "ABC123", \
+    "status": "hello world!", "media_ids": "ABC987" }' \
+    https://twitter.com/api/v1/tweet
+```
+
+返回：
+
+```
+{
+    "created_at": "Wed Sep 05 00:37:15 +0000 2012",
+    "status": "hello world!",
+    "tweet_id": "987",
+    "user_id": "123",
+    ...
+}
+```
+
+而对于服务器内部的通信，我们可以使用 [RPC](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)。
+
+### 用例：用户浏览主页时间轴
+
+* **客户端**向 **Web 服务器**发起一次读取主页时间轴的请求
+* **Web 服务器**将请求转发给**读取 API**服务器
+* **读取 API**服务器调用**时间轴服务**进行以下操作：
+    * 从**内存缓存**读取时间轴数据，其中包括推特 id 与用户 id - O(1)
+    * 通过 [multiget](http://redis.io/commands/mget) 向**推特信息服务**进行查询，以获取相关 id 推特的额外信息 - O(n)
+    * 通过 muiltiget 向**用户信息服务**进行查询，以获取相关 id 用户的额外信息 - O(n)
+
+REST API：
+
+```
+$ curl https://twitter.com/api/v1/home_timeline?user_id=123
+```
+
+返回：
+
+```
+{
+    "user_id": "456",
+    "tweet_id": "123",
+    "status": "foo"
+},
+{
+    "user_id": "789",
+    "tweet_id": "456",
+    "status": "bar"
+},
+{
+    "user_id": "789",
+    "tweet_id": "579",
+    "status": "baz"
+},
+```
+
+### 用例：用户浏览用户时间轴
+
+* **客户端**向**Web 服务器**发起获得用户时间线的请求
+* **Web 服务器**将请求转发给**读取 API**服务器
+* **读取 API**从 **SQL 数据库**中取出用户的时间轴
+
+REST API 与前面的主页时间轴类似，区别只在于取出的推特是由用户自己发送而不是关注人发送。
+
+### 用例：用户搜索关键词
+
+* **客户端**将搜索请求发给**Web 服务器**
+* **Web 服务器**将请求转发给**搜索 API**服务器
+* **搜索 API**调用**搜索服务**进行以下操作：
+    * 对输入进行转换与分词，弄明白需要搜索什么东西
+        * 移除标点等额外内容
+        * 将文本打散为词组
+        * 修正拼写错误
+        * 规范字母大小写
+        * 将查询转换为布尔操作
+    * 查询**搜索集群**（例如[Lucene](https://lucene.apache.org/)）检索结果：
+        * 对集群内的所有服务器进行查询，将有结果的查询进行[发散聚合（Scatter gathers）](https://github.com/donnemartin/system-design-primer#under-development)
+        * 合并取到的条目，进行评分与排序，最终返回结果
+
+REST API：
+
+```
+$ curl https://twitter.com/api/v1/search?query=hello+world
+```
+
+返回结果与前面的主页时间轴类似，只不过返回的是符合查询条件的推特。
+
+## 第四步：架构扩展
+
+> 根据限制条件，找到并解决瓶颈。
+
+![Imgur](http://i.imgur.com/MzExP06.png)
+
+**重要提示：不要从最初设计直接跳到最终设计中！**
+
+现在你要 1) **基准测试、负载测试**。2) **分析、描述**性能瓶颈。3) 在解决瓶颈问题的同时，评估替代方案、权衡利弊。4) 重复以上步骤。请阅读[「设计一个系统，并将其扩大到为数以百万计的 AWS 用户服务」](../scaling_aws/README.md) 来了解如何逐步扩大初始设计。
+
+讨论初始设计可能遇到的瓶颈及相关解决方案是很重要的。例如加上一个配置多台 **Web 服务器**的**负载均衡器**是否能够解决问题？**CDN**呢？**主从复制**呢？它们各自的替代方案和需要**权衡**的利弊又有什么呢？
+
+我们将会介绍一些组件来完成设计，并解决架构扩张问题。内置的负载均衡器将不做讨论以节省篇幅。
+
+**为了避免重复讨论**，请参考[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)相关部分来了解其要点、方案的权衡取舍以及可选的替代方案。
+
+* [DNS](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#域名系统)
+* [负载均衡器](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#负载均衡器)
+* [水平拓展](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#水平扩展)
+* [反向代理（web 服务器）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)
+* [API 服务（应用层）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用层)
+* [缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存)
+* [关系型数据库管理系统 (RDBMS)](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#关系型数据库管理系统rdbms)
+* [SQL 故障主从切换](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#故障切换)
+* [主从复制](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#主从复制)
+* [一致性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#一致性模式)
+* [可用性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#可用性模式)
+
+**消息输出服务**有可能成为性能瓶颈。那些有着百万数量关注着的用户可能发一条推特就需要好几分钟才能完成消息输出进程。这有可能使 @回复 这种推特时出现竞争条件，因此需要根据服务时间对此推特进行重排序来降低影响。
+
+我们还可以避免从高关注量的用户输出推特。相反，我们可以通过搜索来找到高关注量用户的推特，并将搜索结果与用户的主页时间轴合并，再根据时间对其进行排序。
+
+此外，还可以通过以下内容进行优化：
+
+* 仅为每个主页时间轴在**内存缓存**中存储数百条推特
+* 仅在**内存缓存**中存储活动用户的主页时间轴
+    * 如果某个用户在过去 30 天都没有产生活动，那我们可以使用 **SQL 数据库**重新构建他的时间轴
+        * 使用**用户 图 服务**来查询并确定用户关注的人
+        * 从 **SQL 数据库**中取出推特，并将它们存入**内存缓存**
+* 仅在**推特信息服务**中存储一个月的推特
+* 仅在**用户信息服务**中存储活动用户的信息
+* **搜索集群**需要将推特保留在内存中，以降低延迟
+
+我们还可以考虑优化 **SQL 数据库** 来解决一些瓶颈问题。
+
+**内存缓存**能减小一些数据库的负载，靠 **SQL Read 副本**已经足够处理缓存未命中情况。我们还可以考虑使用一些额外的 SQL 性能拓展技术。
+
+高容量的写入将淹没单个的 **SQL 写主从**模式，因此需要更多的拓展技术。
+
+* [联合](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#联合)
+* [分片](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#分片)
+* [非规范化](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#非规范化)
+* [SQL 调优](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-调优)
+
+我们也可以考虑将一些数据移至 **NoSQL 数据库**。
+
+## 其它要点
+
+> 是否深入这些额外的主题，取决于你的问题范围和剩下的时间。
+
+#### NoSQL
+
+* [键-值存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#键-值存储)
+* [文档类型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#文档类型存储)
+* [列型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#列型存储)
+* [图数据库](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#图数据库)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)
+
+### 缓存
+
+* 在哪缓存
+    * [客户端缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#客户端缓存)
+    * [CDN 缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#cdn-缓存)
+    * [Web 服务器缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#web-服务器缓存)
+    * [数据库缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库缓存)
+    * [应用缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用缓存)
+* 什么需要缓存
+    * [数据库查询级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库查询级别的缓存)
+    * [对象级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#对象级别的缓存)
+* 何时更新缓存
+    * [缓存模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存模式)
+    * [直写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#直写模式)
+    * [回写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#回写模式)
+    * [刷新](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#刷新)
+
+### 异步与微服务
+
+* [消息队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#消息队列)
+* [任务队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#任务队列)
+* [背压](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#背压)
+* [微服务](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#微服务)
+
+### 通信
+
+* 可权衡选择的方案：
+    * 与客户端的外部通信 - [使用 REST 作为 HTTP API](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest)
+    * 服务器内部通信 - [RPC](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)
+* [服务发现](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#服务发现)
+
+### 安全性
+
+请参阅[「安全」](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#安全)一章。
+
+### 延迟数值
+
+请参阅[「每个程序员都应该知道的延迟数」](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数)。
+
+### 持续探讨
+
+* 持续进行基准测试并监控你的系统，以解决他们提出的瓶颈问题。
+* 架构拓展是一个迭代的过程。
diff --git a/website/solutions/system_design/twitter/README.md b/website/solutions/system_design/twitter/README.md
new file mode 100644
index 00000000000..d14996f1526
--- /dev/null
+++ b/website/solutions/system_design/twitter/README.md
@@ -0,0 +1,333 @@
+# Design the Twitter timeline and search
+
+*Note: This document links directly to relevant areas found in the [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) to avoid duplication.  Refer to the linked content for general talking points, tradeoffs, and alternatives.*
+
+**Design the Facebook feed** and **Design Facebook search** are similar questions.
+
+## Step 1: Outline use cases and constraints
+
+> Gather requirements and scope the problem.
+> Ask questions to clarify use cases and constraints.
+> Discuss assumptions.
+
+Without an interviewer to address clarifying questions, we'll define some use cases and constraints.
+
+### Use cases
+
+#### We'll scope the problem to handle only the following use cases
+
+* **User** posts a tweet
+    * **Service** pushes tweets to followers, sending push notifications and emails
+* **User** views the user timeline (activity from the user)
+* **User** views the home timeline (activity from people the user is following)
+* **User** searches keywords
+* **Service** has high availability
+
+#### Out of scope
+
+* **Service** pushes tweets to the Twitter Firehose and other streams
+* **Service** strips out tweets based on users' visibility settings
+    * Hide @reply if the user is not also following the person being replied to
+    * Respect 'hide retweets' setting
+* Analytics
+
+### Constraints and assumptions
+
+#### State assumptions
+
+General
+
+* Traffic is not evenly distributed
+* Posting a tweet should be fast
+    * Fanning out a tweet to all of your followers should be fast, unless you have millions of followers
+* 100 million active users
+* 500 million tweets per day or 15 billion tweets per month
+    * Each tweet averages a fanout of 10 deliveries
+    * 5 billion total tweets delivered on fanout per day
+    * 150 billion tweets delivered on fanout per month
+* 250 billion read requests per month
+* 10 billion searches per month
+
+Timeline
+
+* Viewing the timeline should be fast
+* Twitter is more read heavy than write heavy
+    * Optimize for fast reads of tweets
+* Ingesting tweets is write heavy
+
+Search
+
+* Searching should be fast
+* Search is read-heavy
+
+#### Calculate usage
+
+**Clarify with your interviewer if you should run back-of-the-envelope usage calculations.**
+
+* Size per tweet:
+    * `tweet_id` - 8 bytes
+    * `user_id` - 32 bytes
+    * `text` - 140 bytes
+    * `media` - 10 KB average
+    * Total: ~10 KB
+* 150 TB of new tweet content per month
+    * 10 KB per tweet * 500 million tweets per day * 30 days per month
+    * 5.4 PB of new tweet content in 3 years
+* 100 thousand read requests per second
+    * 250 billion read requests per month * (400 requests per second / 1 billion requests per month)
+* 6,000 tweets per second
+    * 15 billion tweets per month * (400 requests per second / 1 billion requests per month)
+* 60 thousand tweets delivered on fanout per second
+    * 150 billion tweets delivered on fanout per month * (400 requests per second / 1 billion requests per month)
+* 4,000 search requests per second
+    * 10 billion searches per month * (400 requests per second / 1 billion requests per month)
+
+Handy conversion guide:
+
+* 2.5 million seconds per month
+* 1 request per second = 2.5 million requests per month
+* 40 requests per second = 100 million requests per month
+* 400 requests per second = 1 billion requests per month
+
+## Step 2: Create a high level design
+
+> Outline a high level design with all important components.
+
+![Imgur](http://i.imgur.com/48tEA2j.png)
+
+## Step 3: Design core components
+
+> Dive into details for each core component.
+
+### Use case: User posts a tweet
+
+We could store the user's own tweets to populate the user timeline (activity from the user) in a [relational database](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms).  We should discuss the [use cases and tradeoffs between choosing SQL or NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql).
+
+Delivering tweets and building the home timeline (activity from people the user is following) is trickier.  Fanning out tweets to all followers (60 thousand tweets delivered on fanout per second) will overload a traditional [relational database](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms).  We'll probably want to choose a data store with fast writes such as a **NoSQL database** or **Memory Cache**.  Reading 1 MB sequentially from memory takes about 250 microseconds, while reading from SSD takes 4x and from disk takes 80x longer.<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+
+We could store media such as photos or videos on an **Object Store**.
+
+* The **Client** posts a tweet to the **Web Server**, running as a [reverse proxy](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* The **Web Server** forwards the request to the **Write API** server
+* The **Write API** stores the tweet in the user's timeline on a **SQL database**
+* The **Write API** contacts the **Fan Out Service**, which does the following:
+    * Queries the **User Graph Service** to find the user's followers stored in the **Memory Cache**
+    * Stores the tweet in the *home timeline of the user's followers* in a **Memory Cache**
+        * O(n) operation:  1,000 followers = 1,000 lookups and inserts
+    * Stores the tweet in the **Search Index Service** to enable fast searching
+    * Stores media in the **Object Store**
+    * Uses the **Notification Service** to send out push notifications to followers:
+        * Uses a **Queue** (not pictured) to asynchronously send out notifications
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+If our **Memory Cache** is Redis, we could use a native Redis list with the following structure:
+
+```
+           tweet n+2                   tweet n+1                   tweet n
+| 8 bytes   8 bytes  1 byte | 8 bytes   8 bytes  1 byte | 8 bytes   8 bytes  1 byte |
+| tweet_id  user_id  meta   | tweet_id  user_id  meta   | tweet_id  user_id  meta   |
+```
+
+The new tweet would be placed in the **Memory Cache**, which populates the user's home timeline (activity from people the user is following).
+
+We'll use a public [**REST API**](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest):
+
+```
+$ curl -X POST --data '{ "user_id": "123", "auth_token": "ABC123", \
+    "status": "hello world!", "media_ids": "ABC987" }' \
+    https://twitter.com/api/v1/tweet
+```
+
+Response:
+
+```
+{
+    "created_at": "Wed Sep 05 00:37:15 +0000 2012",
+    "status": "hello world!",
+    "tweet_id": "987",
+    "user_id": "123",
+    ...
+}
+```
+
+For internal communications, we could use [Remote Procedure Calls](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc).
+
+### Use case: User views the home timeline
+
+* The **Client** posts a home timeline request to the **Web Server**
+* The **Web Server** forwards the request to the **Read API** server
+* The **Read API** server contacts the **Timeline Service**, which does the following:
+    * Gets the timeline data stored in the **Memory Cache**, containing tweet ids and user ids - O(1)
+    * Queries the **Tweet Info Service** with a [multiget](http://redis.io/commands/mget) to obtain additional info about the tweet ids - O(n)
+    * Queries the **User Info Service** with a multiget to obtain additional info about the user ids - O(n)
+
+REST API:
+
+```
+$ curl https://twitter.com/api/v1/home_timeline?user_id=123
+```
+
+Response:
+
+```
+{
+    "user_id": "456",
+    "tweet_id": "123",
+    "status": "foo"
+},
+{
+    "user_id": "789",
+    "tweet_id": "456",
+    "status": "bar"
+},
+{
+    "user_id": "789",
+    "tweet_id": "579",
+    "status": "baz"
+},
+```
+
+### Use case: User views the user timeline
+
+* The **Client** posts a user timeline request to the **Web Server**
+* The **Web Server** forwards the request to the **Read API** server
+* The **Read API** retrieves the user timeline from the **SQL Database**
+
+The REST API would be similar to the home timeline, except all tweets would come from the user as opposed to the people the user is following.
+
+### Use case: User searches keywords
+
+* The **Client** sends a search request to the **Web Server**
+* The **Web Server** forwards the request to the **Search API** server
+* The **Search API** contacts the **Search Service**, which does the following:
+    * Parses/tokenizes the input query, determining what needs to be searched
+        * Removes markup
+        * Breaks up the text into terms
+        * Fixes typos
+        * Normalizes capitalization
+        * Converts the query to use boolean operations
+    * Queries the **Search Cluster** (ie [Lucene](https://lucene.apache.org/)) for the results:
+        * [Scatter gathers](https://github.com/donnemartin/system-design-primer#under-development) each server in the cluster to determine if there are any results for the query
+        * Merges, ranks, sorts, and returns the results
+
+REST API:
+
+```
+$ curl https://twitter.com/api/v1/search?query=hello+world
+```
+
+The response would be similar to that of the home timeline, except for tweets matching the given query.
+
+## Step 4: Scale the design
+
+> Identify and address bottlenecks, given the constraints.
+
+![Imgur](http://i.imgur.com/jrUBAF7.png)
+
+**Important: Do not simply jump right into the final design from the initial design!**
+
+State you would 1) **Benchmark/Load Test**, 2) **Profile** for bottlenecks 3) address bottlenecks while evaluating alternatives and trade-offs, and 4) repeat.  See [Design a system that scales to millions of users on AWS](../scaling_aws/README.md) as a sample on how to iteratively scale the initial design.
+
+It's important to discuss what bottlenecks you might encounter with the initial design and how you might address each of them.  For example, what issues are addressed by adding a **Load Balancer** with multiple **Web Servers**?  **CDN**?  **Master-Slave Replicas**?  What are the alternatives and **Trade-Offs** for each?
+
+We'll introduce some components to complete the design and to address scalability issues.  Internal load balancers are not shown to reduce clutter.
+
+*To avoid repeating discussions*, refer to the following [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) for main talking points, tradeoffs, and alternatives:
+
+* [DNS](https://github.com/donnemartin/system-design-primer#domain-name-system)
+* [CDN](https://github.com/donnemartin/system-design-primer#content-delivery-network)
+* [Load balancer](https://github.com/donnemartin/system-design-primer#load-balancer)
+* [Horizontal scaling](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+* [Web server (reverse proxy)](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* [API server (application layer)](https://github.com/donnemartin/system-design-primer#application-layer)
+* [Cache](https://github.com/donnemartin/system-design-primer#cache)
+* [Relational database management system (RDBMS)](https://github.com/donnemartin/system-design-primer#relational-database-management-system-rdbms)
+* [SQL write master-slave failover](https://github.com/donnemartin/system-design-primer#fail-over)
+* [Master-slave replication](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [Consistency patterns](https://github.com/donnemartin/system-design-primer#consistency-patterns)
+* [Availability patterns](https://github.com/donnemartin/system-design-primer#availability-patterns)
+
+The **Fanout Service** is a potential bottleneck.  Twitter users with millions of followers could take several minutes to have their tweets go through the fanout process.  This could lead to race conditions with @replies to the tweet, which we could mitigate by re-ordering the tweets at serve time.
+
+We could also avoid fanning out tweets from highly-followed users.  Instead, we could search to find tweets for highly-followed users, merge the search results with the user's home timeline results, then re-order the tweets at serve time.
+
+Additional optimizations include:
+
+* Keep only several hundred tweets for each home timeline in the **Memory Cache**
+* Keep only active users' home timeline info in the **Memory Cache**
+    * If a user was not previously active in the past 30 days, we could rebuild the timeline from the **SQL Database**
+        * Query the **User Graph Service** to determine who the user is following
+        * Get the tweets from the **SQL Database** and add them to the **Memory Cache**
+* Store only a month of tweets in the **Tweet Info Service**
+* Store only active users in the **User Info Service**
+* The **Search Cluster** would likely need to keep the tweets in memory to keep latency low
+
+We'll also want to address the bottleneck with the **SQL Database**.
+
+Although the **Memory Cache** should reduce the load on the database, it is unlikely the **SQL Read Replicas** alone would be enough to handle the cache misses.  We'll probably need to employ additional SQL scaling patterns.
+
+The high volume of writes would overwhelm a single **SQL Write Master-Slave**, also pointing to a need for additional scaling techniques.
+
+* [Federation](https://github.com/donnemartin/system-design-primer#federation)
+* [Sharding](https://github.com/donnemartin/system-design-primer#sharding)
+* [Denormalization](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL Tuning](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+We should also consider moving some data to a **NoSQL Database**.
+
+## Additional talking points
+
+> Additional topics to dive into, depending on the problem scope and time remaining.
+
+#### NoSQL
+
+* [Key-value store](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [Document store](https://github.com/donnemartin/system-design-primer#document-store)
+* [Wide column store](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [Graph database](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### Caching
+
+* Where to cache
+    * [Client caching](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN caching](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web server caching](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [Database caching](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [Application caching](https://github.com/donnemartin/system-design-primer#application-caching)
+* What to cache
+    * [Caching at the database query level](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [Caching at the object level](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* When to update the cache
+    * [Cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [Write-through](https://github.com/donnemartin/system-design-primer#write-through)
+    * [Write-behind (write-back)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [Refresh ahead](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### Asynchronism and microservices
+
+* [Message queues](https://github.com/donnemartin/system-design-primer#message-queues)
+* [Task queues](https://github.com/donnemartin/system-design-primer#task-queues)
+* [Back pressure](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [Microservices](https://github.com/donnemartin/system-design-primer#microservices)
+
+### Communications
+
+* Discuss tradeoffs:
+    * External communication with clients - [HTTP APIs following REST](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * Internal communications - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [Service discovery](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### Security
+
+Refer to the [security section](https://github.com/donnemartin/system-design-primer#security).
+
+### Latency numbers
+
+See [Latency numbers every programmer should know](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know).
+
+### Ongoing
+
+* Continue benchmarking and monitoring your system to address bottlenecks as they come up
+* Scaling is an iterative process
diff --git a/website/solutions/system_design/twitter/twitter.graffle b/website/solutions/system_design/twitter/twitter.graffle
new file mode 100644
index 00000000000..f93f4eac7b4
Binary files /dev/null and b/website/solutions/system_design/twitter/twitter.graffle differ
diff --git a/website/solutions/system_design/twitter/twitter.png b/website/solutions/system_design/twitter/twitter.png
new file mode 100644
index 00000000000..e7de2883260
Binary files /dev/null and b/website/solutions/system_design/twitter/twitter.png differ
diff --git a/website/solutions/system_design/twitter/twitter_basic.graffle b/website/solutions/system_design/twitter/twitter_basic.graffle
new file mode 100644
index 00000000000..c754b9e8844
Binary files /dev/null and b/website/solutions/system_design/twitter/twitter_basic.graffle differ
diff --git a/website/solutions/system_design/twitter/twitter_basic.png b/website/solutions/system_design/twitter/twitter_basic.png
new file mode 100644
index 00000000000..7c67f7644f8
Binary files /dev/null and b/website/solutions/system_design/twitter/twitter_basic.png differ
diff --git a/website/solutions/system_design/web_crawler/README-zh-Hans.md b/website/solutions/system_design/web_crawler/README-zh-Hans.md
new file mode 100644
index 00000000000..2ad0938e5d9
--- /dev/null
+++ b/website/solutions/system_design/web_crawler/README-zh-Hans.md
@@ -0,0 +1,356 @@
+# 设计一个网页爬虫
+
+**注意：这个文档中的链接会直接指向[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)中的有关部分，以避免重复的内容。你可以参考链接的相关内容，来了解其总的要点、方案的权衡取舍以及可选的替代方案。**
+
+## 第一步：简述用例与约束条件
+
+> 把所有需要的东西聚集在一起，审视问题。不停的提问，以至于我们可以明确使用场景和约束。讨论假设。
+
+我们将在没有面试官明确说明问题的情况下，自己定义一些用例以及限制条件。
+
+### 用例
+
+#### 我们把问题限定在仅处理以下用例的范围中
+
+* **服务** 抓取一系列链接：
+    * 生成包含搜索词的网页倒排索引
+    * 生成页面的标题和摘要信息
+        * 页面标题和摘要都是静态的，它们不会根据搜索词改变
+* **用户** 输入搜索词后，可以看到相关的搜索结果列表，列表每一项都包含由网页爬虫生成的页面标题及摘要
+    * 只给该用例绘制出概要组件和交互说明，无需讨论细节
+* **服务** 具有高可用性
+
+#### 无需考虑
+
+* 搜索分析
+* 个性化搜索结果
+* 页面排名
+
+### 限制条件与假设
+
+#### 提出假设
+
+* 搜索流量分布不均
+    * 有些搜索词非常热门，有些则非常冷门
+* 只支持匿名用户
+* 用户很快就能看到搜索结果
+* 网页爬虫不应该陷入死循环
+    * 当爬虫路径包含环的时候，将会陷入死循环
+* 抓取 10 亿个链接
+    * 要定期重新抓取页面以确保新鲜度
+    * 平均每周重新抓取一次，网站越热门，那么重新抓取的频率越高
+        * 每月抓取 40 亿个链接
+    * 每个页面的平均存储大小：500 KB
+        * 简单起见，重新抓取的页面算作新页面
+* 每月搜索量 1000 亿次
+
+用更传统的系统来练习 —— 不要使用 [solr](http://lucene.apache.org/solr/) 、[nutch](http://nutch.apache.org/) 之类的现成系统。
+
+#### 计算用量
+
+**如果你需要进行粗略的用量计算，请向你的面试官说明。**
+
+* 每月存储 2 PB 页面
+    * 每月抓取 40 亿个页面，每个页面 500 KB
+    * 三年存储 72 PB 页面
+* 每秒 1600 次写请求
+* 每秒 40000 次搜索请求
+
+简便换算指南：
+
+* 一个月有 250 万秒
+* 每秒 1 个请求，即每月 250 万个请求
+* 每秒 40 个请求，即每月 1 亿个请求
+* 每秒 400 个请求，即每月 10 亿个请求
+
+## 第二步： 概要设计
+
+> 列出所有重要组件以规划概要设计。
+
+![Imgur](http://i.imgur.com/xjdAAUv.png)
+
+## 第三步：设计核心组件
+
+> 对每一个核心组件进行详细深入的分析。
+
+### 用例：爬虫服务抓取一系列网页
+
+假设我们有一个初始列表 `links_to_crawl`（待抓取链接），它最初基于网站整体的知名度来排序。当然如果这个假设不合理，我们可以使用 [Yahoo](https://www.yahoo.com/)、[DMOZ](http://www.dmoz.org/) 等知名门户网站作为种子链接来进行扩散 。
+
+我们将用表 `crawled_links` （已抓取链接 ）来记录已经处理过的链接以及相应的页面签名。
+
+我们可以将 `links_to_crawl` 和 `crawled_links` 记录在键-值型 **NoSQL 数据库**中。对于 `crawled_links` 中已排序的链接，我们可以使用 [Redis](https://redis.io/) 的有序集合来维护网页链接的排名。我们应当在 [选择 SQL 还是 NoSQL 的问题上，讨论有关使用场景以及利弊 ](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)。
+
+*  **爬虫服务**按照以下流程循环处理每一个页面链接：
+    * 选取排名最靠前的待抓取链接
+        * 在  **NoSQL 数据库**的 `crawled_links` 中，检查待抓取页面的签名是否与某个已抓取页面的签名相似
+            * 若存在，则降低该页面链接的优先级
+                * 这样做可以避免陷入死循环
+                * 继续（进入下一次循环）
+            * 若不存在，则抓取该链接
+                * 在**倒排索引服务**任务队列中，新增一个生成[倒排索引](https://en.wikipedia.org/wiki/Search_engine_indexing)任务。
+                * 在**文档服务**任务队列中，新增一个生成静态标题和摘要的任务。
+                * 生成页面签名
+                * 在 **NoSQL 数据库**的 `links_to_crawl` 中删除该链接
+                * 在 **NoSQL 数据库**的 `crawled_links` 中插入该链接以及页面签名
+
+**向面试官了解你需要写多少代码**。
+
+`PagesDataStore` 是**爬虫服务**中的一个抽象类，它使用 **NoSQL 数据库**进行存储。
+
+```python
+class PagesDataStore(object):
+
+    def __init__(self, db);
+        self.db = db
+        ...
+
+    def add_link_to_crawl(self, url):
+        """将指定链接加入 `links_to_crawl`。"""
+        ...
+
+    def remove_link_to_crawl(self, url):
+        """从 `links_to_crawl` 中删除指定链接。"""
+        ...
+
+    def reduce_priority_link_to_crawl(self, url)
+        """在 `links_to_crawl` 中降低一个链接的优先级以避免死循环。"""
+        ...
+
+    def extract_max_priority_page(self):
+        """返回 `links_to_crawl` 中优先级最高的链接。"""
+        ...
+
+    def insert_crawled_link(self, url, signature):
+        """将指定链接加入 `crawled_links`。"""
+        ...
+
+    def crawled_similar(self, signature):
+        """判断待抓取页面的签名是否与某个已抓取页面的签名相似。"""
+        ...
+```
+
+`Page` 是**爬虫服务**的一个抽象类，它封装了网页对象，由页面链接、页面内容、子链接和页面签名构成。
+
+```python
+class Page(object):
+
+    def __init__(self, url, contents, child_urls, signature):
+        self.url = url
+        self.contents = contents
+        self.child_urls = child_urls
+        self.signature = signature
+```
+
+`Crawler` 是**爬虫服务**的主类，由`Page` 和 `PagesDataStore` 组成。
+
+```python
+class Crawler(object):
+
+    def __init__(self, data_store, reverse_index_queue, doc_index_queue):
+        self.data_store = data_store
+        self.reverse_index_queue = reverse_index_queue
+        self.doc_index_queue = doc_index_queue
+
+    def create_signature(self, page):
+        """基于页面链接与内容生成签名。"""
+        ...
+
+    def crawl_page(self, page):
+        for url in page.child_urls:
+            self.data_store.add_link_to_crawl(url)
+        page.signature = self.create_signature(page)
+        self.data_store.remove_link_to_crawl(page.url)
+        self.data_store.insert_crawled_link(page.url, page.signature)
+
+    def crawl(self):
+        while True:
+            page = self.data_store.extract_max_priority_page()
+            if page is None:
+                break
+            if self.data_store.crawled_similar(page.signature):
+                self.data_store.reduce_priority_link_to_crawl(page.url)
+            else:
+                self.crawl_page(page)
+```
+
+### 处理重复内容
+
+我们要谨防网页爬虫陷入死循环，这通常会发生在爬虫路径中存在环的情况。
+
+**向面试官了解你需要写多少代码**.
+
+删除重复链接：
+
+* 假设数据量较小，我们可以用类似于 `sort | unique` 的方法。（译注： 先排序，后去重）
+* 假设有 10 亿条数据，我们应该使用 **MapReduce** 来输出只出现 1 次的记录。
+
+```python
+class RemoveDuplicateUrls(MRJob):
+
+    def mapper(self, _, line):
+        yield line, 1
+
+    def reducer(self, key, values):
+        total = sum(values)
+        if total == 1:
+            yield key, total
+```
+
+比起处理重复内容，检测重复内容更为复杂。我们可以基于网页内容生成签名，然后对比两者签名的相似度。可能会用到的算法有 [Jaccard index](https://en.wikipedia.org/wiki/Jaccard_index) 以及 [cosine similarity](https://en.wikipedia.org/wiki/Cosine_similarity)。
+
+### 抓取结果更新策略
+
+要定期重新抓取页面以确保新鲜度。抓取结果应该有个 `timestamp` 字段记录上一次页面抓取时间。每隔一段时间，比如说 1 周，所有页面都需要更新一次。对于热门网站或是内容频繁更新的网站，爬虫抓取间隔可以缩短。
+
+尽管我们不会深入网页数据分析的细节，我们仍然要做一些数据挖掘工作来确定一个页面的平均更新时间，并且根据相关的统计数据来决定爬虫的重新抓取频率。
+
+当然我们也应该根据站长提供的 `Robots.txt` 来控制爬虫的抓取频率。
+
+### 用例：用户输入搜索词后，可以看到相关的搜索结果列表，列表每一项都包含由网页爬虫生成的页面标题及摘要
+
+*  **客户端**向运行[反向代理](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)的 **Web 服务器**发送一个请求
+* **Web 服务器** 发送请求到 **Query API** 服务器
+* **查询 API** 服务将会做这些事情：
+    * 解析查询参数
+        * 删除 HTML 标记
+        * 将文本分割成词组 （译注： 分词处理）
+        * 修正错别字
+        * 规范化大小写
+        * 将搜索词转换为布尔运算
+    * 使用**倒排索引服务**来查找匹配查询的文档
+        * **倒排索引服务**对匹配到的结果进行排名，然后返回最符合的结果
+    * 使用**文档服务**返回文章标题与摘要
+
+我们使用  [**REST API**](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest) 与客户端通信：
+
+```
+$ curl https://search.com/api/v1/search?query=hello+world
+```
+
+响应内容:
+
+```
+{
+    "title": "foo's title",
+    "snippet": "foo's snippet",
+    "link": "https://foo.com",
+},
+{
+    "title": "bar's title",
+    "snippet": "bar's snippet",
+    "link": "https://bar.com",
+},
+{
+    "title": "baz's title",
+    "snippet": "baz's snippet",
+    "link": "https://baz.com",
+},
+```
+
+对于服务器内部通信，我们可以使用 [远程过程调用协议（RPC）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)
+
+
+## 第四步：架构扩展
+
+> 根据限制条件，找到并解决瓶颈。
+
+![Imgur](http://i.imgur.com/bWxPtQA.png)
+
+**重要提示：不要直接从最初设计跳到最终设计！**
+
+现在你要 1) **基准测试、负载测试**。2) **分析、描述**性能瓶颈。3) 在解决瓶颈问题的同时，评估替代方案、权衡利弊。4) 重复以上步骤。请阅读[设计一个系统，并将其扩大到为数以百万计的 AWS 用户服务](../scaling_aws/README.md) 来了解如何逐步扩大初始设计。
+
+讨论初始设计可能遇到的瓶颈及相关解决方案是很重要的。例如加上一套配备多台 **Web 服务器**的**负载均衡器**是否能够解决问题？**CDN**呢？**主从复制**呢？它们各自的替代方案和需要**权衡**的利弊又有哪些呢？
+
+我们将会介绍一些组件来完成设计，并解决架构规模扩张问题。内置的负载均衡器将不做讨论以节省篇幅。
+
+**为了避免重复讨论**，请参考[系统设计主题索引](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#系统设计主题的索引)相关部分来了解其要点、方案的权衡取舍以及替代方案。
+
+* [DNS](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#域名系统)
+* [负载均衡器](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#负载均衡器)
+* [水平扩展](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#水平扩展)
+* [Web 服务器（反向代理）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#反向代理web-服务器)
+* [API 服务器（应用层）](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用层)
+* [缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存)
+* [NoSQL](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#nosql)
+* [一致性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#一致性模式)
+* [可用性模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#可用性模式)
+
+有些搜索词非常热门，有些则非常冷门。热门的搜索词可以通过诸如 Redis 或者 Memcached 之类的**内存缓存**来缩短响应时间，避免**倒排索引服务**以及**文档服务**过载。**内存缓存**同样适用于流量分布不均匀以及流量短时高峰问题。从内存中读取 1 MB  连续数据大约需要 250 微秒，而从 SSD 读取同样大小的数据要花费 4 倍的时间，从机械硬盘读取需要花费 80 倍以上的时间。<sup><a href="https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数">1</a></sup>
+
+
+以下是优化**爬虫服务**的其他建议：
+
+* 为了处理数据大小问题以及网络请求负载，**倒排索引服务**和**文档服务**可能需要大量应用数据分片和数据复制。
+* DNS 查询可能会成为瓶颈，**爬虫服务**最好专门维护一套定期更新的 DNS 查询服务。
+* 借助于[连接池](https://en.wikipedia.org/wiki/Connection_pool)，即同时维持多个开放网络连接，可以提升**爬虫服务**的性能并减少内存使用量。
+    * 改用 [UDP](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#用户数据报协议udp) 协议同样可以提升性能
+* 网络爬虫受带宽影响较大，请确保带宽足够维持高吞吐量。
+
+## 其它要点
+
+> 是否深入这些额外的主题，取决于你的问题范围和剩下的时间。
+
+### SQL 扩展模式
+
+* [读取复制](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#主从复制)
+* [联合](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#联合)
+* [分片](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#分片)
+* [非规范化](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#非规范化)
+* [SQL 调优](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-调优)
+
+#### NoSQL
+
+* [键-值存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#键-值存储)
+* [文档类型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#文档类型存储)
+* [列型存储](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#列型存储)
+* [图数据库](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#图数据库)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#sql-还是-nosql)
+
+
+### 缓存
+
+* 在哪缓存
+    * [客户端缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#客户端缓存)
+    * [CDN 缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#cdn-缓存)
+    * [Web 服务器缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#web-服务器缓存)
+    * [数据库缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库缓存)
+    * [应用缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#应用缓存)
+* 什么需要缓存
+    * [数据库查询级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#数据库查询级别的缓存)
+    * [对象级别的缓存](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#对象级别的缓存)
+* 何时更新缓存
+    * [缓存模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#缓存模式)
+    * [直写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#直写模式)
+    * [回写模式](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#回写模式)
+    * [刷新](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#刷新)
+
+### 异步与微服务
+
+* [消息队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#消息队列)
+* [任务队列](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#任务队列)
+* [背压](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#背压)
+* [微服务](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#微服务)
+
+### 通信
+
+* 可权衡选择的方案：
+    * 与客户端的外部通信 - [使用 REST 作为 HTTP API](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#表述性状态转移rest)
+    * 内部通信 - [RPC](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#远程过程调用协议rpc)
+* [服务发现](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#服务发现)
+
+
+### 安全性
+
+请参阅[安全](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#安全)。
+
+
+### 延迟数值
+
+请参阅[每个程序员都应该知道的延迟数](https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md#每个程序员都应该知道的延迟数)。
+
+### 持续探讨
+
+* 持续进行基准测试并监控你的系统，以解决他们提出的瓶颈问题。
+* 架构扩展是一个迭代的过程。
diff --git a/website/solutions/system_design/web_crawler/README.md b/website/solutions/system_design/web_crawler/README.md
new file mode 100644
index 00000000000..e6e79ad2245
--- /dev/null
+++ b/website/solutions/system_design/web_crawler/README.md
@@ -0,0 +1,353 @@
+# Design a web crawler
+
+*Note: This document links directly to relevant areas found in the [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) to avoid duplication.  Refer to the linked content for general talking points, tradeoffs, and alternatives.*
+
+## Step 1: Outline use cases and constraints
+
+> Gather requirements and scope the problem.
+> Ask questions to clarify use cases and constraints.
+> Discuss assumptions.
+
+Without an interviewer to address clarifying questions, we'll define some use cases and constraints.
+
+### Use cases
+
+#### We'll scope the problem to handle only the following use cases
+
+* **Service** crawls a list of urls:
+    * Generates reverse index of words to pages containing the search terms
+    * Generates titles and snippets for pages
+        * Title and snippets are static, they do not change based on search query
+* **User** inputs a search term and sees a list of relevant pages with titles and snippets  the crawler generated
+    * Only sketch high level components and interactions for this use case, no need to go into depth
+* **Service** has high availability
+
+#### Out of scope
+
+* Search analytics
+* Personalized search results
+* Page rank
+
+### Constraints and assumptions
+
+#### State assumptions
+
+* Traffic is not evenly distributed
+    * Some searches are very popular, while others are only executed once
+* Support only anonymous users
+* Generating search results should be fast
+* The web crawler should not get stuck in an infinite loop
+    * We get stuck in an infinite loop if the graph contains a cycle
+* 1 billion links to crawl
+    * Pages need to be crawled regularly to ensure freshness
+    * Average refresh rate of about once per week, more frequent for popular sites
+        * 4 billion links crawled each month
+    * Average stored size per web page: 500 KB
+        * For simplicity, count changes the same as new pages
+* 100 billion searches per month
+
+Exercise the use of more traditional systems - don't use existing systems such as [solr](http://lucene.apache.org/solr/) or [nutch](http://nutch.apache.org/).
+
+#### Calculate usage
+
+**Clarify with your interviewer if you should run back-of-the-envelope usage calculations.**
+
+* 2 PB of stored page content per month
+    * 500 KB per page * 4 billion links crawled per month
+    * 72 PB of stored page content in 3 years
+* 1,600 write requests per second
+* 40,000 search requests per second
+
+Handy conversion guide:
+
+* 2.5 million seconds per month
+* 1 request per second = 2.5 million requests per month
+* 40 requests per second = 100 million requests per month
+* 400 requests per second = 1 billion requests per month
+
+## Step 2: Create a high level design
+
+> Outline a high level design with all important components.
+
+![Imgur](http://i.imgur.com/xjdAAUv.png)
+
+## Step 3: Design core components
+
+> Dive into details for each core component.
+
+### Use case: Service crawls a list of urls
+
+We'll assume we have an initial list of `links_to_crawl` ranked initially based on overall site popularity.  If this is not a reasonable assumption, we can seed the crawler with popular sites that link to outside content such as [Yahoo](https://www.yahoo.com/), [DMOZ](http://www.dmoz.org/), etc.
+
+We'll use a table `crawled_links` to store processed links and their page signatures.
+
+We could store `links_to_crawl` and `crawled_links` in a key-value **NoSQL Database**.  For the ranked links in `links_to_crawl`, we could use [Redis](https://redis.io/) with sorted sets to maintain a ranking of page links.  We should discuss the [use cases and tradeoffs between choosing SQL or NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql).
+
+* The **Crawler Service** processes each page link by doing the following in a loop:
+    * Takes the top ranked page link to crawl
+        * Checks `crawled_links` in the **NoSQL Database** for an entry with a similar page signature
+            * If we have a similar page, reduces the priority of the page link
+                * This prevents us from getting into a cycle
+                * Continue
+            * Else, crawls the link
+                * Adds a job to the **Reverse Index Service** queue to generate a [reverse index](https://en.wikipedia.org/wiki/Search_engine_indexing)
+                * Adds a job to the **Document Service** queue to generate a static title and snippet
+                * Generates the page signature
+                * Removes the link from `links_to_crawl` in the **NoSQL Database**
+                * Inserts the page link and signature to `crawled_links` in the **NoSQL Database**
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+`PagesDataStore` is an abstraction within the **Crawler Service** that uses the **NoSQL Database**:
+
+```python
+class PagesDataStore(object):
+
+    def __init__(self, db);
+        self.db = db
+        ...
+
+    def add_link_to_crawl(self, url):
+        """Add the given link to `links_to_crawl`."""
+        ...
+
+    def remove_link_to_crawl(self, url):
+        """Remove the given link from `links_to_crawl`."""
+        ...
+
+    def reduce_priority_link_to_crawl(self, url)
+        """Reduce the priority of a link in `links_to_crawl` to avoid cycles."""
+        ...
+
+    def extract_max_priority_page(self):
+        """Return the highest priority link in `links_to_crawl`."""
+        ...
+
+    def insert_crawled_link(self, url, signature):
+        """Add the given link to `crawled_links`."""
+        ...
+
+    def crawled_similar(self, signature):
+        """Determine if we've already crawled a page matching the given signature"""
+        ...
+```
+
+`Page` is an abstraction within the **Crawler Service** that encapsulates a page, its contents, child urls, and signature:
+
+```python
+class Page(object):
+
+    def __init__(self, url, contents, child_urls, signature):
+        self.url = url
+        self.contents = contents
+        self.child_urls = child_urls
+        self.signature = signature
+```
+
+`Crawler` is the main class within **Crawler Service**, composed of `Page` and `PagesDataStore`.
+
+```python
+class Crawler(object):
+
+    def __init__(self, data_store, reverse_index_queue, doc_index_queue):
+        self.data_store = data_store
+        self.reverse_index_queue = reverse_index_queue
+        self.doc_index_queue = doc_index_queue
+
+    def create_signature(self, page):
+        """Create signature based on url and contents."""
+        ...
+
+    def crawl_page(self, page):
+        for url in page.child_urls:
+            self.data_store.add_link_to_crawl(url)
+        page.signature = self.create_signature(page)
+        self.data_store.remove_link_to_crawl(page.url)
+        self.data_store.insert_crawled_link(page.url, page.signature)
+
+    def crawl(self):
+        while True:
+            page = self.data_store.extract_max_priority_page()
+            if page is None:
+                break
+            if self.data_store.crawled_similar(page.signature):
+                self.data_store.reduce_priority_link_to_crawl(page.url)
+            else:
+                self.crawl_page(page)
+```
+
+### Handling duplicates
+
+We need to be careful the web crawler doesn't get stuck in an infinite loop, which happens when the graph contains a cycle.
+
+**Clarify with your interviewer how much code you are expected to write**.
+
+We'll want to remove duplicate urls:
+
+* For smaller lists we could use something like `sort | unique`
+* With 1 billion links to crawl, we could use **MapReduce** to output only entries that have a frequency of 1
+
+```python
+class RemoveDuplicateUrls(MRJob):
+
+    def mapper(self, _, line):
+        yield line, 1
+
+    def reducer(self, key, values):
+        total = sum(values)
+        if total == 1:
+            yield key, total
+```
+
+Detecting duplicate content is more complex.  We could generate a signature based on the contents of the page and compare those two signatures for similarity.  Some potential algorithms are [Jaccard index](https://en.wikipedia.org/wiki/Jaccard_index) and [cosine similarity](https://en.wikipedia.org/wiki/Cosine_similarity).
+
+### Determining when to update the crawl results
+
+Pages need to be crawled regularly to ensure freshness.  Crawl results could have a `timestamp` field that indicates the last time a page was crawled.  After a default time period, say one week, all pages should be refreshed.  Frequently updated or more popular sites could be refreshed in shorter intervals.
+
+Although we won't dive into details on analytics, we could do some data mining to determine the mean time before a particular page is updated, and use that statistic to determine how often to re-crawl the page.
+
+We might also choose to support a `Robots.txt` file that gives webmasters control of crawl frequency.
+
+### Use case: User inputs a search term and sees a list of relevant pages with titles and snippets
+
+* The **Client** sends a request to the **Web Server**, running as a [reverse proxy](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* The **Web Server** forwards the request to the **Query API** server
+* The **Query API** server does the following:
+    * Parses the query
+        * Removes markup
+        * Breaks up the text into terms
+        * Fixes typos
+        * Normalizes capitalization
+        * Converts the query to use boolean operations
+    * Uses the **Reverse Index Service** to find documents matching the query
+        * The **Reverse Index Service** ranks the matching results and returns the top ones
+    * Uses the **Document Service** to return titles and snippets
+
+We'll use a public [**REST API**](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest):
+
+```
+$ curl https://search.com/api/v1/search?query=hello+world
+```
+
+Response:
+
+```
+{
+    "title": "foo's title",
+    "snippet": "foo's snippet",
+    "link": "https://foo.com",
+},
+{
+    "title": "bar's title",
+    "snippet": "bar's snippet",
+    "link": "https://bar.com",
+},
+{
+    "title": "baz's title",
+    "snippet": "baz's snippet",
+    "link": "https://baz.com",
+},
+```
+
+For internal communications, we could use [Remote Procedure Calls](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc).
+
+## Step 4: Scale the design
+
+> Identify and address bottlenecks, given the constraints.
+
+![Imgur](http://i.imgur.com/bWxPtQA.png)
+
+**Important: Do not simply jump right into the final design from the initial design!**
+
+State you would 1) **Benchmark/Load Test**, 2) **Profile** for bottlenecks 3) address bottlenecks while evaluating alternatives and trade-offs, and 4) repeat.  See [Design a system that scales to millions of users on AWS](../scaling_aws/README.md) as a sample on how to iteratively scale the initial design.
+
+It's important to discuss what bottlenecks you might encounter with the initial design and how you might address each of them.  For example, what issues are addressed by adding a **Load Balancer** with multiple **Web Servers**?  **CDN**?  **Master-Slave Replicas**?  What are the alternatives and **Trade-Offs** for each?
+
+We'll introduce some components to complete the design and to address scalability issues.  Internal load balancers are not shown to reduce clutter.
+
+*To avoid repeating discussions*, refer to the following [system design topics](https://github.com/donnemartin/system-design-primer#index-of-system-design-topics) for main talking points, tradeoffs, and alternatives:
+
+* [DNS](https://github.com/donnemartin/system-design-primer#domain-name-system)
+* [Load balancer](https://github.com/donnemartin/system-design-primer#load-balancer)
+* [Horizontal scaling](https://github.com/donnemartin/system-design-primer#horizontal-scaling)
+* [Web server (reverse proxy)](https://github.com/donnemartin/system-design-primer#reverse-proxy-web-server)
+* [API server (application layer)](https://github.com/donnemartin/system-design-primer#application-layer)
+* [Cache](https://github.com/donnemartin/system-design-primer#cache)
+* [NoSQL](https://github.com/donnemartin/system-design-primer#nosql)
+* [Consistency patterns](https://github.com/donnemartin/system-design-primer#consistency-patterns)
+* [Availability patterns](https://github.com/donnemartin/system-design-primer#availability-patterns)
+
+Some searches are very popular, while others are only executed once.  Popular queries can be served from a **Memory Cache** such as Redis or Memcached to reduce response times and to avoid overloading the **Reverse Index Service** and **Document Service**.  The **Memory Cache** is also useful for handling the unevenly distributed traffic and traffic spikes.  Reading 1 MB sequentially from memory takes about 250 microseconds, while reading from SSD takes 4x and from disk takes 80x longer.<sup><a href=https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know>1</a></sup>
+
+Below are a few other optimizations to the **Crawling Service**:
+
+* To handle the data size and request load, the **Reverse Index Service** and **Document Service** will likely need to make heavy use sharding and federation.
+* DNS lookup can be a bottleneck, the **Crawler Service** can keep its own DNS lookup that is refreshed periodically
+* The **Crawler Service** can improve performance and reduce memory usage by keeping many open connections at a time, referred to as [connection pooling](https://en.wikipedia.org/wiki/Connection_pool)
+    * Switching to [UDP](https://github.com/donnemartin/system-design-primer#user-datagram-protocol-udp) could also boost performance
+* Web crawling is bandwidth intensive, ensure there is enough bandwidth to sustain high throughput
+
+## Additional talking points
+
+> Additional topics to dive into, depending on the problem scope and time remaining.
+
+### SQL scaling patterns
+
+* [Read replicas](https://github.com/donnemartin/system-design-primer#master-slave-replication)
+* [Federation](https://github.com/donnemartin/system-design-primer#federation)
+* [Sharding](https://github.com/donnemartin/system-design-primer#sharding)
+* [Denormalization](https://github.com/donnemartin/system-design-primer#denormalization)
+* [SQL Tuning](https://github.com/donnemartin/system-design-primer#sql-tuning)
+
+#### NoSQL
+
+* [Key-value store](https://github.com/donnemartin/system-design-primer#key-value-store)
+* [Document store](https://github.com/donnemartin/system-design-primer#document-store)
+* [Wide column store](https://github.com/donnemartin/system-design-primer#wide-column-store)
+* [Graph database](https://github.com/donnemartin/system-design-primer#graph-database)
+* [SQL vs NoSQL](https://github.com/donnemartin/system-design-primer#sql-or-nosql)
+
+### Caching
+
+* Where to cache
+    * [Client caching](https://github.com/donnemartin/system-design-primer#client-caching)
+    * [CDN caching](https://github.com/donnemartin/system-design-primer#cdn-caching)
+    * [Web server caching](https://github.com/donnemartin/system-design-primer#web-server-caching)
+    * [Database caching](https://github.com/donnemartin/system-design-primer#database-caching)
+    * [Application caching](https://github.com/donnemartin/system-design-primer#application-caching)
+* What to cache
+    * [Caching at the database query level](https://github.com/donnemartin/system-design-primer#caching-at-the-database-query-level)
+    * [Caching at the object level](https://github.com/donnemartin/system-design-primer#caching-at-the-object-level)
+* When to update the cache
+    * [Cache-aside](https://github.com/donnemartin/system-design-primer#cache-aside)
+    * [Write-through](https://github.com/donnemartin/system-design-primer#write-through)
+    * [Write-behind (write-back)](https://github.com/donnemartin/system-design-primer#write-behind-write-back)
+    * [Refresh ahead](https://github.com/donnemartin/system-design-primer#refresh-ahead)
+
+### Asynchronism and microservices
+
+* [Message queues](https://github.com/donnemartin/system-design-primer#message-queues)
+* [Task queues](https://github.com/donnemartin/system-design-primer#task-queues)
+* [Back pressure](https://github.com/donnemartin/system-design-primer#back-pressure)
+* [Microservices](https://github.com/donnemartin/system-design-primer#microservices)
+
+### Communications
+
+* Discuss tradeoffs:
+    * External communication with clients - [HTTP APIs following REST](https://github.com/donnemartin/system-design-primer#representational-state-transfer-rest)
+    * Internal communications - [RPC](https://github.com/donnemartin/system-design-primer#remote-procedure-call-rpc)
+* [Service discovery](https://github.com/donnemartin/system-design-primer#service-discovery)
+
+### Security
+
+Refer to the [security section](https://github.com/donnemartin/system-design-primer#security).
+
+### Latency numbers
+
+See [Latency numbers every programmer should know](https://github.com/donnemartin/system-design-primer#latency-numbers-every-programmer-should-know).
+
+### Ongoing
+
+* Continue benchmarking and monitoring your system to address bottlenecks as they come up
+* Scaling is an iterative process
diff --git a/website/solutions/system_design/web_crawler/__init__.py b/website/solutions/system_design/web_crawler/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/website/solutions/system_design/web_crawler/web_crawler.graffle b/website/solutions/system_design/web_crawler/web_crawler.graffle
new file mode 100644
index 00000000000..831e02fd363
Binary files /dev/null and b/website/solutions/system_design/web_crawler/web_crawler.graffle differ
diff --git a/website/solutions/system_design/web_crawler/web_crawler.png b/website/solutions/system_design/web_crawler/web_crawler.png
new file mode 100644
index 00000000000..da55126125b
Binary files /dev/null and b/website/solutions/system_design/web_crawler/web_crawler.png differ
diff --git a/website/solutions/system_design/web_crawler/web_crawler_basic.graffle b/website/solutions/system_design/web_crawler/web_crawler_basic.graffle
new file mode 100644
index 00000000000..7d466eb227f
Binary files /dev/null and b/website/solutions/system_design/web_crawler/web_crawler_basic.graffle differ
diff --git a/website/solutions/system_design/web_crawler/web_crawler_basic.png b/website/solutions/system_design/web_crawler/web_crawler_basic.png
new file mode 100644
index 00000000000..6f2cb517130
Binary files /dev/null and b/website/solutions/system_design/web_crawler/web_crawler_basic.png differ
diff --git a/website/solutions/system_design/web_crawler/web_crawler_mapreduce.py b/website/solutions/system_design/web_crawler/web_crawler_mapreduce.py
new file mode 100644
index 00000000000..8a5f808779a
--- /dev/null
+++ b/website/solutions/system_design/web_crawler/web_crawler_mapreduce.py
@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+
+from mrjob.job import MRJob
+
+
+class RemoveDuplicateUrls(MRJob):
+
+    def mapper(self, _, line):
+        yield line, 1
+
+    def reducer(self, key, values):
+        total = sum(values)
+        if total == 1:
+            yield key, total
+
+    def steps(self):
+        """Run the map and reduce steps."""
+        return [
+            self.mr(mapper=self.mapper,
+                    reducer=self.reducer)
+        ]
+
+
+if __name__ == '__main__':
+    RemoveDuplicateUrls.run()
diff --git a/website/solutions/system_design/web_crawler/web_crawler_snippets.py b/website/solutions/system_design/web_crawler/web_crawler_snippets.py
new file mode 100644
index 00000000000..d84a25362ec
--- /dev/null
+++ b/website/solutions/system_design/web_crawler/web_crawler_snippets.py
@@ -0,0 +1,73 @@
+# -*- coding: utf-8 -*-
+
+
+class PagesDataStore(object):
+
+    def __init__(self, db):
+        self.db = db
+        pass
+
+    def add_link_to_crawl(self, url):
+        """Add the given link to `links_to_crawl`."""
+        pass
+
+    def remove_link_to_crawl(self, url):
+        """Remove the given link from `links_to_crawl`."""
+        pass
+
+    def reduce_priority_link_to_crawl(self, url):
+        """Reduce the priority of a link in `links_to_crawl` to avoid cycles."""
+        pass
+
+    def extract_max_priority_page(self):
+        """Return the highest priority link in `links_to_crawl`."""
+        pass
+
+    def insert_crawled_link(self, url, signature):
+        """Add the given link to `crawled_links`."""
+        pass
+
+    def crawled_similar(self, signature):
+        """Determine if we've already crawled a page matching the given signature"""
+        pass
+
+
+class Page(object):
+
+    def __init__(self, url, contents, child_urls):
+        self.url = url
+        self.contents = contents
+        self.child_urls = child_urls
+        self.signature = self.create_signature()
+
+    def create_signature(self):
+        # Create signature based on url and contents
+        pass
+
+
+class Crawler(object):
+
+    def __init__(self, pages, data_store, reverse_index_queue, doc_index_queue):
+        self.pages = pages
+        self.data_store = data_store
+        self.reverse_index_queue = reverse_index_queue
+        self.doc_index_queue = doc_index_queue
+
+    def crawl_page(self, page):
+        for url in page.child_urls:
+            self.data_store.add_link_to_crawl(url)
+        self.reverse_index_queue.generate(page)
+        self.doc_index_queue.generate(page)
+        self.data_store.remove_link_to_crawl(page.url)
+        self.data_store.insert_crawled_link(page.url, page.signature)
+
+    def crawl(self):
+        while True:
+            page = self.data_store.extract_max_priority_page()
+            if page is None:
+                break
+            if self.data_store.crawled_similar(page.signature):
+                self.data_store.reduce_priority_link_to_crawl(page.url)
+            else:
+                self.crawl_page(page)
+            page = self.data_store.extract_max_priority_page()
diff --git a/website/solutions/viewer.html b/website/solutions/viewer.html
new file mode 100644
index 00000000000..7d254dc3fa4
--- /dev/null
+++ b/website/solutions/viewer.html
@@ -0,0 +1,1043 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Notebook Viewer — System Design Primer</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- CodeMirror -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material-darker.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script>
+    <!-- Pyodide -->
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.js"></script>
+    <style>
+        /* --- Theme Variables --- */
+        :root {
+            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+            --radius-sm: 6px;
+            --radius-md: 10px;
+            --radius-lg: 16px;
+            --transition-fast: 150ms ease;
+            --transition-normal: 250ms ease;
+        }
+        [data-theme="dark"] {
+            --bg-primary: #0d1117;
+            --bg-secondary: #161b22;
+            --bg-tertiary: #1c2129;
+            --bg-elevated: #21262d;
+            --bg-hover: #292e36;
+            --border-primary: #30363d;
+            --border-secondary: #21262d;
+            --border-accent: #1f6feb;
+            --text-primary: #e6edf3;
+            --text-secondary: #8b949e;
+            --text-tertiary: #6e7681;
+            --text-link: #58a6ff;
+            --text-on-accent: #ffffff;
+            --accent: #1f6feb;
+            --accent-hover: #388bfd;
+            --accent-subtle: #1f6feb22;
+            --success: #3fb950;
+            --success-subtle: #3fb95022;
+            --warning: #d29922;
+            --warning-subtle: #d2992222;
+            --danger: #f85149;
+            --danger-subtle: #f8514922;
+            --code-bg: #161b22;
+            --code-border: #30363d;
+            --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+            --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+            --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
+        }
+        [data-theme="light"] {
+            --bg-primary: #ffffff;
+            --bg-secondary: #f6f8fa;
+            --bg-tertiary: #f0f2f5;
+            --bg-elevated: #ffffff;
+            --bg-hover: #eaeef2;
+            --border-primary: #d0d7de;
+            --border-secondary: #e8ebef;
+            --border-accent: #0969da;
+            --text-primary: #1f2328;
+            --text-secondary: #656d76;
+            --text-tertiary: #8c959f;
+            --text-link: #0969da;
+            --text-on-accent: #ffffff;
+            --accent: #0969da;
+            --accent-hover: #0550ae;
+            --accent-subtle: #0969da15;
+            --success: #1a7f37;
+            --success-subtle: #1a7f3715;
+            --warning: #9a6700;
+            --warning-subtle: #9a670015;
+            --danger: #cf222e;
+            --danger-subtle: #cf222e15;
+            --code-bg: #f6f8fa;
+            --code-border: #d0d7de;
+            --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
+            --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+            --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
+        }
+
+        /* --- Reset & Base --- */
+        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+        html { font-size: 16px; scroll-behavior: smooth; }
+        body {
+            font-family: var(--font-sans);
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.7;
+            min-height: 100vh;
+        }
+
+        /* --- Top Bar --- */
+        .topbar {
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 56px;
+            padding: 0 24px;
+            background: var(--bg-secondary);
+            border-bottom: 1px solid var(--border-primary);
+            backdrop-filter: blur(12px);
+        }
+        .topbar-left {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            min-width: 0;
+        }
+        .topbar-left a {
+            color: var(--text-link);
+            text-decoration: none;
+            font-weight: 500;
+            font-size: 0.9rem;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: color var(--transition-fast);
+            white-space: nowrap;
+        }
+        .topbar-left a:hover { color: var(--accent-hover); }
+        .topbar-left .separator { color: var(--text-tertiary); }
+        .notebook-title {
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .topbar-right {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .topbar-btn {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 14px;
+            border-radius: var(--radius-sm);
+            border: 1px solid var(--border-primary);
+            background: var(--bg-elevated);
+            color: var(--text-secondary);
+            font-size: 0.82rem;
+            font-family: var(--font-sans);
+            font-weight: 500;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+        }
+        .topbar-btn:hover {
+            background: var(--bg-hover);
+            color: var(--text-primary);
+            border-color: var(--border-accent);
+        }
+        .topbar-btn.active {
+            background: var(--accent-subtle);
+            color: var(--accent);
+            border-color: var(--accent);
+        }
+        .topbar-btn.run-all-btn {
+            background: var(--success-subtle);
+            color: var(--success);
+            border-color: var(--success);
+        }
+        .topbar-btn.run-all-btn:hover {
+            background: var(--success);
+            color: var(--text-on-accent);
+        }
+        .topbar-btn.run-all-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        /* --- Pyodide Status Banner --- */
+        .pyodide-banner {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            padding: 10px 20px;
+            background: var(--accent-subtle);
+            border-bottom: 1px solid var(--border-primary);
+            font-size: 0.85rem;
+            color: var(--accent);
+            font-weight: 500;
+            transition: all 0.4s ease;
+        }
+        .pyodide-banner.ready {
+            background: var(--success-subtle);
+            color: var(--success);
+        }
+        .pyodide-banner.error {
+            background: var(--danger-subtle);
+            color: var(--danger);
+        }
+        .pyodide-banner .mini-spinner {
+            width: 14px;
+            height: 14px;
+            border: 2px solid var(--border-primary);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin 0.7s linear infinite;
+        }
+        .pyodide-banner.ready .mini-spinner { display: none; }
+        .pyodide-banner.error .mini-spinner { display: none; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .pyodide-banner.hidden {
+            max-height: 0;
+            padding: 0 20px;
+            opacity: 0;
+            overflow: hidden;
+            border: none;
+        }
+
+        /* --- Notebook Container --- */
+        .notebook-container {
+            max-width: 960px;
+            margin: 0 auto;
+            padding: 32px 24px 80px;
+        }
+
+        /* --- Cell Base --- */
+        .cell {
+            margin-bottom: 8px;
+            border-radius: var(--radius-md);
+            border: 1px solid var(--border-primary);
+            background: var(--bg-secondary);
+            overflow: hidden;
+            transition: border-color var(--transition-fast);
+        }
+        .cell:hover {
+            border-color: var(--border-accent);
+        }
+        .cell.running {
+            border-color: var(--warning);
+            box-shadow: 0 0 0 1px var(--warning-subtle);
+        }
+        .cell.success {
+            border-color: var(--success);
+        }
+        .cell.error {
+            border-color: var(--danger);
+        }
+        .cell-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 6px 14px;
+            background: var(--bg-tertiary);
+            border-bottom: 1px solid var(--border-secondary);
+            font-size: 0.75rem;
+            color: var(--text-tertiary);
+            font-family: var(--font-mono);
+        }
+        .cell-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 8px;
+            border-radius: 999px;
+            font-size: 0.7rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+        }
+        .cell-badge.code { background: var(--accent-subtle); color: var(--accent); }
+        .cell-badge.markdown { background: var(--success-subtle); color: var(--success); }
+        .cell-number {
+            font-size: 0.72rem;
+            color: var(--text-tertiary);
+            min-width: 44px;
+            text-align: right;
+        }
+        .cell-number.running-num { color: var(--warning); }
+        .cell-actions {
+            display: flex;
+            gap: 4px;
+            align-items: center;
+        }
+        .cell-action-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+            border-radius: var(--radius-sm);
+            border: none;
+            background: transparent;
+            color: var(--text-tertiary);
+            cursor: pointer;
+            font-size: 0.82rem;
+            transition: all var(--transition-fast);
+        }
+        .cell-action-btn:hover {
+            background: var(--bg-hover);
+            color: var(--text-primary);
+        }
+        .cell-action-btn.copied { color: var(--success); }
+
+        /* --- Run Button --- */
+        .run-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            padding: 3px 12px;
+            border-radius: var(--radius-sm);
+            border: 1px solid var(--success);
+            background: var(--success-subtle);
+            color: var(--success);
+            font-size: 0.75rem;
+            font-family: var(--font-sans);
+            font-weight: 600;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            white-space: nowrap;
+        }
+        .run-btn:hover {
+            background: var(--success);
+            color: var(--text-on-accent);
+        }
+        .run-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .run-btn .run-icon { font-size: 0.7rem; }
+        .run-btn.running-btn {
+            border-color: var(--warning);
+            background: var(--warning-subtle);
+            color: var(--warning);
+            cursor: wait;
+        }
+
+        /* --- Code Cell --- */
+        .cell-code .CodeMirror {
+            font-family: var(--font-mono);
+            font-size: 0.88rem;
+            line-height: 1.6;
+            height: auto;
+            padding: 4px 0;
+            background: var(--bg-secondary);
+        }
+        .cell-code .CodeMirror-gutters {
+            background: var(--bg-secondary);
+            border-right: 1px solid var(--border-secondary);
+        }
+        .cell-code .CodeMirror-linenumber {
+            color: var(--text-tertiary);
+            font-size: 0.78rem;
+        }
+        .cell-code .CodeMirror-focused {
+            outline: none;
+        }
+
+        /* --- Cell Output --- */
+        .cell-output-area {
+            border-top: 1px solid var(--border-secondary);
+            background: var(--bg-primary);
+        }
+        .cell-output-area:empty { display: none; }
+        .cell-output-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 6px 14px;
+            border-bottom: 1px solid var(--border-secondary);
+        }
+        .cell-output-label {
+            font-size: 0.7rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-tertiary);
+        }
+        .clear-output-btn {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 8px;
+            border-radius: var(--radius-sm);
+            border: none;
+            background: transparent;
+            color: var(--text-tertiary);
+            font-size: 0.7rem;
+            font-family: var(--font-sans);
+            cursor: pointer;
+            transition: all var(--transition-fast);
+        }
+        .clear-output-btn:hover {
+            background: var(--bg-hover);
+            color: var(--text-primary);
+        }
+        .cell-output-content {
+            padding: 10px 16px;
+            max-height: 400px;
+            overflow: auto;
+        }
+        .cell-output-content pre {
+            font-family: var(--font-mono);
+            font-size: 0.85rem;
+            line-height: 1.55;
+            color: var(--text-secondary);
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            margin: 0;
+        }
+        .cell-output-content pre.error-output {
+            color: var(--danger);
+        }
+        .cell-output-content pre.result-output {
+            color: var(--success);
+        }
+        .execution-time {
+            font-size: 0.7rem;
+            color: var(--text-tertiary);
+            font-family: var(--font-mono);
+            padding: 4px 16px 8px;
+        }
+
+        /* --- Markdown Cell --- */
+        .cell-markdown { padding: 16px 20px; }
+        .cell-markdown h1 {
+            font-size: 1.8rem; font-weight: 700; margin-bottom: 12px;
+            padding-bottom: 8px; border-bottom: 2px solid var(--border-primary);
+        }
+        .cell-markdown h2 { font-size: 1.35rem; font-weight: 600; margin-top: 8px; margin-bottom: 10px; }
+        .cell-markdown h3 { font-size: 1.1rem; font-weight: 600; margin-top: 6px; margin-bottom: 8px; }
+        .cell-markdown p { margin-bottom: 10px; }
+        .cell-markdown ul, .cell-markdown ol { margin: 8px 0 12px 20px; }
+        .cell-markdown li { margin-bottom: 4px; }
+        .cell-markdown li ul { margin-top: 4px; margin-bottom: 4px; }
+        .cell-markdown code {
+            font-family: var(--font-mono); font-size: 0.88em;
+            background: var(--code-bg); border: 1px solid var(--code-border);
+            border-radius: 4px; padding: 2px 6px;
+        }
+        .cell-markdown pre {
+            background: var(--code-bg); border: 1px solid var(--code-border);
+            border-radius: var(--radius-sm); padding: 12px 16px; margin: 8px 0; overflow-x: auto;
+        }
+        .cell-markdown pre code { background: none; border: none; padding: 0; }
+        .cell-markdown a { color: var(--text-link); text-decoration: none; }
+        .cell-markdown a:hover { text-decoration: underline; }
+        .cell-markdown strong { font-weight: 600; }
+
+        /* --- Loading / Error States --- */
+        .loading-state, .error-state {
+            display: flex; flex-direction: column; align-items: center;
+            justify-content: center; min-height: 60vh; gap: 16px; text-align: center;
+        }
+        .loading-spinner {
+            width: 40px; height: 40px;
+            border: 3px solid var(--border-primary); border-top-color: var(--accent);
+            border-radius: 50%; animation: spin 0.8s linear infinite;
+        }
+        .loading-text { font-size: 0.95rem; color: var(--text-secondary); }
+        .error-icon { font-size: 3rem; margin-bottom: 8px; }
+        .error-title { font-size: 1.3rem; font-weight: 600; }
+        .error-message { font-size: 0.95rem; color: var(--text-secondary); max-width: 500px; }
+        .error-back-btn {
+            margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
+            padding: 8px 20px; border-radius: var(--radius-sm);
+            border: 1px solid var(--border-primary); background: var(--bg-elevated);
+            color: var(--text-primary); font-size: 0.9rem; font-family: var(--font-sans);
+            font-weight: 500; cursor: pointer; text-decoration: none;
+            transition: all var(--transition-fast);
+        }
+        .error-back-btn:hover { background: var(--bg-hover); border-color: var(--border-accent); }
+
+        /* --- Notebook Info Bar --- */
+        .notebook-info {
+            display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
+            padding: 16px 20px; margin-bottom: 24px;
+            background: var(--bg-secondary); border: 1px solid var(--border-primary);
+            border-radius: var(--radius-md);
+        }
+        .notebook-info-item {
+            display: flex; align-items: center; gap: 6px;
+            font-size: 0.82rem; color: var(--text-secondary);
+        }
+        .notebook-info-item strong { color: var(--text-primary); font-weight: 600; }
+        .info-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-tertiary); }
+
+        /* --- Keyboard Hint --- */
+        .keyboard-hint {
+            display: flex; align-items: center; gap: 6px;
+            font-size: 0.75rem; color: var(--text-tertiary);
+            padding: 8px 0;
+            margin-bottom: 16px;
+        }
+        .kbd {
+            display: inline-flex; align-items: center; padding: 2px 6px;
+            background: var(--bg-tertiary); border: 1px solid var(--border-primary);
+            border-radius: 4px; font-family: var(--font-mono); font-size: 0.72rem;
+            color: var(--text-secondary); line-height: 1.4;
+        }
+
+        /* --- Toast --- */
+        .copy-toast {
+            position: fixed; bottom: 24px; right: 24px; padding: 10px 20px;
+            background: var(--bg-elevated); border: 1px solid var(--success);
+            border-radius: var(--radius-sm); color: var(--success);
+            font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg);
+            transform: translateY(80px); opacity: 0;
+            transition: all 0.3s ease; z-index: 200;
+        }
+        .copy-toast.show { transform: translateY(0); opacity: 1; }
+
+        /* --- Responsive --- */
+        @media (max-width: 640px) {
+            .topbar { padding: 0 12px; gap: 6px; }
+            .notebook-title { display: none; }
+            .notebook-container { padding: 16px 12px 60px; }
+            .cell-markdown { padding: 12px 14px; }
+            .cell-markdown h1 { font-size: 1.4rem; }
+            .notebook-info { flex-direction: column; align-items: flex-start; gap: 6px; }
+            .info-dot { display: none; }
+            .topbar-btn span.btn-label { display: none; }
+            .keyboard-hint { display: none; }
+        }
+        @media print {
+            .topbar, .pyodide-banner { display: none; }
+            .cell { border: 1px solid #ddd; break-inside: avoid; }
+        }
+    </style>
+</head>
+<body>
+    <!-- Top Bar -->
+    <header class="topbar">
+        <div class="topbar-left">
+            <a href="/docs/" title="Back to course">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h8.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"/></svg>
+                Back to Course
+            </a>
+            <span class="separator">›</span>
+            <span class="notebook-title" id="notebookTitle">Loading…</span>
+        </div>
+        <div class="topbar-right">
+            <button class="topbar-btn run-all-btn" id="runAllBtn" disabled title="Run all cells (Ctrl+Shift+Enter)">
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"/></svg>
+                <span class="btn-label">Run All</span>
+            </button>
+            <button class="topbar-btn" id="resetKernel" title="Reset Python runtime">
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 4a4 4 0 00-3.8 2.75.75.75 0 11-1.4-.5A5.5 5.5 0 0113.5 8a.75.75 0 01-1.5 0A4 4 0 008 4zm-5.5 4a.75.75 0 011.5 0A4 4 0 0011.8 10.75a.75.75 0 111.4.5A5.5 5.5 0 012.5 8z"/></svg>
+                <span class="btn-label">Reset</span>
+            </button>
+            <button class="topbar-btn" id="toggleLineNumbers" title="Toggle line numbers">
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M2 3.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zm4 0a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4 4a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zm4 0a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4 4a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zm4 0a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5z"/></svg>
+                <span class="btn-label">Lines</span>
+            </button>
+            <button class="topbar-btn" id="themeToggle" title="Toggle theme">
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 13V2a6 6 0 110 12z"/></svg>
+                <span class="btn-label">Theme</span>
+            </button>
+        </div>
+    </header>
+
+    <!-- Pyodide Status Banner -->
+    <div class="pyodide-banner" id="pyodideBanner">
+        <div class="mini-spinner"></div>
+        <span id="pyodideStatus">Loading Python runtime (Pyodide)… This may take a few seconds on first load.</span>
+    </div>
+
+    <!-- Notebook Content -->
+    <main class="notebook-container" id="notebookContent">
+        <div class="loading-state" id="loadingState">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Loading notebook…</div>
+        </div>
+    </main>
+
+    <!-- Toast -->
+    <div class="copy-toast" id="copyToast">✓ Copied to clipboard</div>
+
+    <script>
+    (function() {
+        'use strict';
+
+        // ===================== STATE =====================
+        let editors = [];           // CodeMirror instances
+        let cellData = [];          // {editor, index, execCount, outputEl}
+        let pyodide = null;         // Pyodide runtime
+        let pyodideReady = false;
+        let executionCounter = 0;
+        let isRunning = false;
+        let showLineNumbers = true;
+        let wordWrap = false;
+        let currentTheme = localStorage.getItem('sdp_theme') || 'dark';
+
+        // ===================== THEME =====================
+        function applyTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+            currentTheme = theme;
+            localStorage.setItem('sdp_theme', theme);
+            const cmTheme = theme === 'dark' ? 'material-darker' : 'default';
+            editors.forEach(ed => ed.setOption('theme', cmTheme));
+        }
+
+        // ===================== PYODIDE =====================
+        async function initPyodide() {
+            const banner = document.getElementById('pyodideBanner');
+            const status = document.getElementById('pyodideStatus');
+            try {
+                pyodide = await loadPyodide({
+                    indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.25.1/full/'
+                });
+
+                // Set up stdout/stderr capture
+                pyodide.runPython(`
+import sys
+from io import StringIO
+`);
+                pyodideReady = true;
+                status.textContent = '✓ Python runtime ready — edit and run code cells interactively';
+                banner.classList.add('ready');
+                document.getElementById('runAllBtn').disabled = false;
+
+                // Auto-hide banner after 3s
+                setTimeout(() => banner.classList.add('hidden'), 3000);
+            } catch (err) {
+                status.textContent = '✗ Failed to load Python runtime: ' + err.message;
+                banner.classList.add('error');
+                console.error('Pyodide init error:', err);
+            }
+        }
+
+        // Run a single code cell
+        async function runCell(cellInfo) {
+            if (!pyodideReady || isRunning) return;
+
+            const code = cellInfo.editor.getValue();
+            if (!code.trim()) return;
+
+            isRunning = true;
+            executionCounter++;
+            const execNum = executionCounter;
+
+            // UI: mark running
+            const cellEl = cellInfo.editor.getWrapperElement().closest('.cell');
+            cellEl.classList.remove('success', 'error');
+            cellEl.classList.add('running');
+            const numEl = cellEl.querySelector('.cell-number');
+            numEl.textContent = `In [*]`;
+            numEl.classList.add('running-num');
+            cellInfo.runBtn.classList.add('running-btn');
+            cellInfo.runBtn.disabled = true;
+            cellInfo.runBtn.querySelector('.run-icon').textContent = '⏳';
+
+            // Prepare output area
+            let outputArea = cellEl.querySelector('.cell-output-area');
+            if (!outputArea) {
+                outputArea = document.createElement('div');
+                outputArea.className = 'cell-output-area';
+                cellEl.appendChild(outputArea);
+            }
+            outputArea.innerHTML = '';
+
+            const startTime = performance.now();
+
+            try {
+                // Strip Jupyter magics like %%writefile
+                let cleanCode = code;
+                const lines = code.split('\n');
+                if (lines[0].trim().startsWith('%%')) {
+                    cleanCode = lines.slice(1).join('\n');
+                }
+
+                // Capture stdout/stderr
+                pyodide.runPython(`
+_sdp_stdout = StringIO()
+_sdp_stderr = StringIO()
+sys.stdout = _sdp_stdout
+sys.stderr = _sdp_stderr
+`);
+
+                // Execute code
+                let result;
+                try {
+                    result = await pyodide.runPythonAsync(cleanCode);
+                } finally {
+                    // Restore stdout/stderr
+                    pyodide.runPython(`
+sys.stdout = sys.__stdout__
+sys.stderr = sys.__stderr__
+`);
+                }
+
+                const stdout = pyodide.runPython('_sdp_stdout.getvalue()');
+                const stderr = pyodide.runPython('_sdp_stderr.getvalue()');
+                const elapsed = ((performance.now() - startTime) / 1000).toFixed(2);
+
+                // Build output
+                let outputHtml = `
+                    <div class="cell-output-header">
+                        <span class="cell-output-label">Output</span>
+                        <button class="clear-output-btn" onclick="this.closest('.cell-output-area').innerHTML=''">Clear</button>
+                    </div>`;
+                let hasOutput = false;
+
+                if (stdout) {
+                    hasOutput = true;
+                    outputHtml += `<div class="cell-output-content"><pre>${escapeHtml(stdout)}</pre></div>`;
+                }
+                if (stderr) {
+                    hasOutput = true;
+                    outputHtml += `<div class="cell-output-content"><pre class="error-output">${escapeHtml(stderr)}</pre></div>`;
+                }
+                if (result !== undefined && result !== null && result.toString() !== 'undefined') {
+                    hasOutput = true;
+                    const resultStr = typeof result === 'object' && result.toString ? result.toString() : String(result);
+                    if (resultStr && resultStr !== 'undefined' && resultStr !== 'None') {
+                        outputHtml += `<div class="cell-output-content"><pre class="result-output">${escapeHtml(resultStr)}</pre></div>`;
+                    }
+                }
+
+                if (hasOutput) {
+                    outputHtml += `<div class="execution-time">Executed in ${elapsed}s</div>`;
+                    outputArea.innerHTML = outputHtml;
+                } else {
+                    outputArea.innerHTML = `
+                        <div class="cell-output-header">
+                            <span class="cell-output-label">Output</span>
+                            <button class="clear-output-btn" onclick="this.closest('.cell-output-area').innerHTML=''">Clear</button>
+                        </div>
+                        <div class="cell-output-content"><pre style="color:var(--text-tertiary);font-style:italic;">Cell executed successfully (no output)</pre></div>
+                        <div class="execution-time">Executed in ${elapsed}s</div>`;
+                }
+
+                // UI: success
+                cellEl.classList.remove('running');
+                cellEl.classList.add('success');
+                numEl.textContent = `In [${execNum}]`;
+                numEl.classList.remove('running-num');
+
+            } catch (err) {
+                const elapsed = ((performance.now() - startTime) / 1000).toFixed(2);
+                // Restore stdout anyway
+                try { pyodide.runPython('sys.stdout = sys.__stdout__\nsys.stderr = sys.__stderr__'); } catch(e) {}
+
+                const stdout = pyodide.runPython('_sdp_stdout.getvalue()');
+
+                let outputHtml = `
+                    <div class="cell-output-header">
+                        <span class="cell-output-label">Output</span>
+                        <button class="clear-output-btn" onclick="this.closest('.cell-output-area').innerHTML=''">Clear</button>
+                    </div>`;
+                if (stdout) {
+                    outputHtml += `<div class="cell-output-content"><pre>${escapeHtml(stdout)}</pre></div>`;
+                }
+                outputHtml += `<div class="cell-output-content"><pre class="error-output">${escapeHtml(err.message)}</pre></div>`;
+                outputHtml += `<div class="execution-time">Failed after ${elapsed}s</div>`;
+                outputArea.innerHTML = outputHtml;
+
+                // UI: error
+                cellEl.classList.remove('running');
+                cellEl.classList.add('error');
+                numEl.textContent = `In [${execNum}]`;
+                numEl.classList.remove('running-num');
+            }
+
+            // Reset run button
+            cellInfo.runBtn.classList.remove('running-btn');
+            cellInfo.runBtn.disabled = false;
+            cellInfo.runBtn.querySelector('.run-icon').textContent = '▶';
+            isRunning = false;
+        }
+
+        // Run all cells sequentially
+        async function runAllCells() {
+            if (!pyodideReady || isRunning) return;
+            for (const ci of cellData) {
+                await runCell(ci);
+            }
+        }
+
+        // Reset Python runtime
+        async function resetKernel() {
+            if (!pyodide) return;
+            executionCounter = 0;
+            // Reset namespace 
+            pyodide.runPython(`
+import sys
+from io import StringIO
+# Clear user variables
+_keep = set(dir()) | {'_keep'}
+`);
+            // Reset all cell numbers and outputs
+            cellData.forEach(ci => {
+                const cellEl = ci.editor.getWrapperElement().closest('.cell');
+                cellEl.classList.remove('success', 'error', 'running');
+                const numEl = cellEl.querySelector('.cell-number');
+                numEl.textContent = `In [ ]`;
+                numEl.classList.remove('running-num');
+                const outputArea = cellEl.querySelector('.cell-output-area');
+                if (outputArea) outputArea.innerHTML = '';
+            });
+
+            showToast('Python runtime reset');
+        }
+
+        // ===================== UTILITY =====================
+        function escapeHtml(str) {
+            const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+            return str.replace(/[&<>"']/g, c => map[c]);
+        }
+
+        function getNotebookPath() {
+            return new URLSearchParams(window.location.search).get('notebook');
+        }
+
+        function formatTitle(nbPath) {
+            return nbPath.split('/').pop().replace('.ipynb', '')
+                .replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        }
+
+        function showError(title, message) {
+            document.getElementById('notebookContent').innerHTML = `
+                <div class="error-state">
+                    <div class="error-icon">📓</div>
+                    <div class="error-title">${title}</div>
+                    <div class="error-message">${message}</div>
+                    <a href="/docs/" class="error-back-btn">← Back to Course</a>
+                </div>`;
+        }
+
+        function showToast(msg) {
+            const toast = document.getElementById('copyToast');
+            toast.textContent = '✓ ' + msg;
+            toast.classList.add('show');
+            setTimeout(() => toast.classList.remove('show'), 2000);
+        }
+
+        function copyToClipboard(text) {
+            navigator.clipboard.writeText(text).then(() => showToast('Copied to clipboard'));
+        }
+
+        // ===================== RENDER =====================
+        function renderMarkdownCell(cell, index) {
+            const html = marked.parse(cell.source.join(''));
+            return `
+                <div class="cell cell-markdown-wrapper">
+                    <div class="cell-header">
+                        <span class="cell-badge markdown">Markdown</span>
+                        <span class="cell-number">[${index}]</span>
+                    </div>
+                    <div class="cell-markdown">${html}</div>
+                </div>`;
+        }
+
+        function renderCodeCell(cell, index) {
+            // Show original outputs from the .ipynb
+            let origOutput = '';
+            if (cell.outputs && cell.outputs.length > 0) {
+                origOutput = '<div class="cell-output-area">';
+                origOutput += '<div class="cell-output-header"><span class="cell-output-label">Saved Output</span>';
+                origOutput += '<button class="clear-output-btn" onclick="this.closest(\'.cell-output-area\').innerHTML=\'\'">Clear</button></div>';
+                cell.outputs.forEach(out => {
+                    if (out.output_type === 'stream') {
+                        origOutput += `<div class="cell-output-content"><pre>${escapeHtml(out.text.join(''))}</pre></div>`;
+                    } else if (out.output_type === 'execute_result') {
+                        const text = (out.data['text/plain'] || []).join('');
+                        origOutput += `<div class="cell-output-content"><pre class="result-output">${escapeHtml(text)}</pre></div>`;
+                    } else if (out.output_type === 'error') {
+                        const tb = out.traceback.map(l => l.replace(/\x1b\[[0-9;]*m/g, '')).join('\n');
+                        origOutput += `<div class="cell-output-content"><pre class="error-output">${escapeHtml(tb)}</pre></div>`;
+                    }
+                });
+                origOutput += '</div>';
+            }
+
+            return `
+                <div class="cell cell-code" data-cell-index="${index}">
+                    <div class="cell-header">
+                        <div style="display:flex;align-items:center;gap:8px;">
+                            <span class="cell-badge code">Python</span>
+                            <span class="cell-number">In [ ]</span>
+                        </div>
+                        <div class="cell-actions">
+                            <button class="run-btn" data-cell-index="${index}" title="Run cell (Shift+Enter)">
+                                <span class="run-icon">▶</span> Run
+                            </button>
+                            <button class="cell-action-btn copy-btn" data-cell-index="${index}" title="Copy code">
+                                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/></svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="cell-editor" id="editor-${index}"></div>
+                    ${origOutput}
+                </div>`;
+        }
+
+        function initEditors(notebook) {
+            const cmTheme = currentTheme === 'dark' ? 'material-darker' : 'default';
+            editors = [];
+            cellData = [];
+
+            notebook.cells.forEach((cell, i) => {
+                if (cell.cell_type !== 'code') return;
+                const source = cell.source.join('');
+                const container = document.getElementById('editor-' + i);
+                if (!container) return;
+
+                const editor = CodeMirror(container, {
+                    value: source,
+                    mode: 'python',
+                    theme: cmTheme,
+                    lineNumbers: showLineNumbers,
+                    lineWrapping: wordWrap,
+                    readOnly: false,
+                    tabSize: 4,
+                    indentUnit: 4,
+                    viewportMargin: Infinity,
+                    scrollbarStyle: 'native',
+                    extraKeys: {
+                        'Shift-Enter': function(cm) {
+                            const ci = cellData.find(c => c.editor === cm);
+                            if (ci) runCell(ci);
+                        }
+                    }
+                });
+                editor._cellIndex = i;
+                editors.push(editor);
+
+                const runBtn = document.querySelector(`.run-btn[data-cell-index="${i}"]`);
+                cellData.push({ editor, index: i, runBtn });
+            });
+        }
+
+        async function loadNotebook() {
+            const nbPath = getNotebookPath();
+            if (!nbPath) {
+                showError('No Notebook Specified', 'Please navigate to a notebook from the course documentation.');
+                return;
+            }
+
+            document.getElementById('notebookTitle').textContent = formatTitle(nbPath);
+            document.title = formatTitle(nbPath) + ' — System Design Primer';
+
+            try {
+                const response = await fetch(nbPath);
+                if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                const notebook = await response.json();
+                renderNotebook(notebook, nbPath);
+            } catch (err) {
+                showError('Failed to Load Notebook', `Could not load <strong>${escapeHtml(nbPath)}</strong>.<br>${escapeHtml(err.message)}`);
+            }
+        }
+
+        function renderNotebook(notebook, nbPath) {
+            const content = document.getElementById('notebookContent');
+            const kernel = notebook.metadata?.kernelspec?.display_name || 'Python';
+            const codeCells = notebook.cells.filter(c => c.cell_type === 'code').length;
+            const mdCells = notebook.cells.filter(c => c.cell_type === 'markdown').length;
+
+            let html = `
+                <div class="notebook-info">
+                    <div class="notebook-info-item"><strong>🐍 ${kernel}</strong></div>
+                    <div class="info-dot"></div>
+                    <div class="notebook-info-item"><strong>${notebook.cells.length}</strong> cells</div>
+                    <div class="info-dot"></div>
+                    <div class="notebook-info-item"><strong>${codeCells}</strong> code · <strong>${mdCells}</strong> markdown</div>
+                    <div class="info-dot"></div>
+                    <div class="notebook-info-item" style="opacity:0.7;">${nbPath.split('/').pop()}</div>
+                </div>
+                <div class="keyboard-hint">
+                    <span class="kbd">Shift</span> + <span class="kbd">Enter</span> Run cell
+                    &nbsp;·&nbsp;
+                    <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">Enter</span> Run all
+                </div>`;
+
+            notebook.cells.forEach((cell, i) => {
+                if (cell.cell_type === 'markdown') {
+                    html += renderMarkdownCell(cell, i);
+                } else if (cell.cell_type === 'code') {
+                    html += renderCodeCell(cell, i);
+                }
+            });
+
+            content.innerHTML = html;
+            initEditors(notebook);
+
+            // Bind run buttons
+            content.querySelectorAll('.run-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const ci = cellData.find(c => c.index === parseInt(btn.dataset.cellIndex));
+                    if (ci) runCell(ci);
+                });
+            });
+
+            // Bind copy buttons
+            content.querySelectorAll('.copy-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const idx = parseInt(btn.dataset.cellIndex);
+                    const editor = editors.find(e => e._cellIndex === idx);
+                    if (editor) {
+                        copyToClipboard(editor.getValue());
+                        btn.classList.add('copied');
+                        setTimeout(() => btn.classList.remove('copied'), 2000);
+                    }
+                });
+            });
+        }
+
+        // ===================== EVENT BINDINGS =====================
+        document.getElementById('runAllBtn').addEventListener('click', runAllCells);
+        document.getElementById('resetKernel').addEventListener('click', resetKernel);
+
+        document.getElementById('toggleLineNumbers').addEventListener('click', function() {
+            showLineNumbers = !showLineNumbers;
+            this.classList.toggle('active', showLineNumbers);
+            editors.forEach(ed => ed.setOption('lineNumbers', showLineNumbers));
+        });
+
+        document.getElementById('themeToggle').addEventListener('click', function() {
+            applyTheme(currentTheme === 'dark' ? 'light' : 'dark');
+        });
+
+        // Global keyboard shortcut: Ctrl+Shift+Enter = Run All
+        document.addEventListener('keydown', function(e) {
+            if (e.ctrlKey && e.shiftKey && e.key === 'Enter') {
+                e.preventDefault();
+                runAllCells();
+            }
+        });
+
+        // ===================== INIT =====================
+        applyTheme(currentTheme);
+        document.getElementById('toggleLineNumbers').classList.add('active');
+        loadNotebook();
+        initPyodide(); // Start loading Pyodide in parallel
+    })();
+    </script>
+</body>
+</html>