Learn system design end-to-end — for free, in your browser. Interactive lessons, quizzes, calculators, and a diagramming sandbox covering classic distributed systems, modern GenAI systems, and ML systems engineering.
SystemDesigner is a free, open-source platform that turns "I should probably learn system design" into a guided, hands-on journey. Instead of a wall of text, you get 425 structured content entries, interactive quizzes across the curriculum, hands-on calculators for back-of-the-envelope math, and a tldraw diagramming sandbox to sketch architectures as you go. Learning paths track your progress and stitch lessons into prerequisite-aware sequences — so you always know what to learn next.
It covers the full spectrum: classic distributed-systems design (caching, sharding, queues, consistency), modern GenAI systems (RAG, agents, evals, token economics), and ML systems engineering (feature stores, serving, monitoring). Every concept follows one editorial rule — "Explain before you dive deep" — so each topic opens with a plain-language "What is [Concept]?" intro you can grasp in 15–30 seconds, then progressively unfolds into the trade-offs.
The app runs fully anonymously with zero configuration. Sign-in is optional and only used to sync progress across devices and save your diagrams.
Maintainers: this demo lives at
public/screenshots/desktop-demo.gif— swap it for a fresh capture when the UI changes.
- 300+ lessons across 8 sections — fundamentals, GenAI, ML systems, technology deep-dives, case studies, reference, and tools.
- Learning paths & progress tracking — prerequisite-aware sequences that always tell you what to study next.
- "Explain before you dive deep" — every concept opens with a beginner-friendly intro before the trade-offs.
- Dark mode throughout.
- Interactive quizzes throughout the curriculum — co-located lesson quizzes and the shared quiz bank test understanding on every topic.
- Practice problems — structured, interview-style walkthroughs (clarify → estimate → architect → deep-dive → operate) for system design, ML systems, and GenAI systems.
- Interactive calculators — latency, throughput, cost, and capacity estimates with live sliders.
- tldraw diagramming sandbox — sketch architectures right in the browser; sign in to save and sync them.
| Section | What it covers | Entries |
|---|---|---|
| Technology | Deep-dives into specific tools & frameworks (databases, queues, caches, infra) | 136 |
| GenAI | LLMs, RAG, agents, evals, prompt engineering, token economics | 76 |
| ML Systems | Feature stores, training/serving pipelines, monitoring, ML infra | 61 |
| Fundamentals | Core distributed-systems concepts (CAP, sharding, consistency, caching) | 50 |
| Practice | Interview-style design exercises with structured walkthroughs | 29 |
| Reference | Quick references, formulas, and back-of-the-envelope cheat sheets | 27 |
| Tools | Interactive calculators and hands-on utilities | 26 |
| Case Studies | Real-world system breakdowns end-to-end | 20 |
| Total | 425 |
Prerequisites: Node.js 20+ and pnpm 10.4.1.
# 1. Clone
git clone https://github.com/alibad/systemdesigner.git
cd systemdesigner
# 2. Use the pinned pnpm version
corepack enable
corepack prepare pnpm@10.4.1 --activate
# 3. Install dependencies
pnpm install
# 4. Run the dev server
pnpm devOpen http://localhost:3000 — that's it. The app runs with zero config and works fully anonymously, no environment variables required. Sign-in (Firebase) is optional and only needed for cross-device progress sync and saving diagrams.
No. New contributors should not set up secrets just to run the app, fix content, add quizzes, edit calculators, or open a PR.
Only set up environment variables when you are working on a feature that actually needs them:
| Feature area | Setup needed |
|---|---|
| Auth, cross-device progress, cloud-saved diagrams | Firebase web config (NEXT_PUBLIC_FIREBASE_*) |
| Admin screens on your own fork | NEXT_PUBLIC_ADMIN_EMAILS |
| Feedback widget creating GitHub issues | GitHub App credentials |
| AI helpers or maintainer content-generation tooling | OPENAI_API_KEY |
| Production SEO verification | GOOGLE_SITE_VERIFICATION |
NEXT_PUBLIC_* values are public browser config, not server secrets. Real secrets, like OpenAI keys and GitHub App private keys, belong only in .env.local or your hosting provider's secret manager.
Deploying your own fork? See docs/DEVELOPMENT.md for the full list of (all optional) environment variables.
You don't need to write code to improve a lesson. SystemDesigner is built to make contributions easy, whether you spotted a typo or want to author a whole new topic.
- ✏️ Edit this page on GitHub — every lesson page has a deep link that opens the exact source file in GitHub's editor. Fix it, propose a change, done.
- 💡 Suggest an improvement — every lesson also links to a prefilled GitHub issue (the content-improvement form), so you can flag a problem in seconds.
- 🧩 Propose new content — structured Issue Forms let you propose a new lesson, quiz, or calculator.
- 🐛 Report bugs & request features — dedicated Issue Forms, plus GitHub Discussions for questions and ideas.
- 🌱 Good first issues are labeled
good first issue.
Pull requests follow the PR template; CI scans for obvious secrets, validates content, runs tests, lints, and builds.
👉 Start with CONTRIBUTING.md, and for authoring lessons read the Content Guide.
systemdesigner/
├── app/ # Next.js App Router and shared section [slug] routes
├── content/entries/ # Canonical registry-driven content bodies
│ └── [section]/[slug]/
│ ├── index.mdoc # The lesson body (path must match the registry)
│ ├── code/ # Co-located code examples, served via /api/content/[...]
│ ├── quiz/ # Canonical lesson quiz JSON
│ └── data/ # Other structured lesson data
├── lib/
│ ├── content-registry.ts # ⭐ Single source of truth — every content entry's metadata
│ └── quiz-bank/
│ └── all-quizzes.json # Shared/legacy quiz bank for entries that reference quizId
├── components/ # Shared UI — CodeBlock, InteractiveQuiz, LessonHeader, calculators/
├── docs/ # CONTENT_GUIDE, ARCHITECTURE, DEVELOPMENT
├── scripts/ # validate-content-registry.cjs, generate-quiz-bank.cjs
└── public/ # Static assets (screenshots/demo, icons, generated imagery)
The content registry (lib/content-registry.ts) is the heart of the system — navigation, learning paths, sitemaps, and SEO are all generated from it. Validate it anytime with:
pnpm validate:registry # the content registry gate CI runs
pnpm check # full local pre-PR check- Next.js 14 (App Router), React 18, TypeScript, Tailwind CSS
- Firebase (Auth, Firestore, Storage) — accounts, progress sync, saved diagrams (all optional; the app works anonymously)
- tldraw — the in-browser diagramming sandbox
- MDX (
next-mdx-remote) — for some reference content - OpenAI API — optional, maintainer-side content-generation tooling only; never required to run the app
- pnpm (10.4.1) · Node 20+
| Doc | What's inside |
|---|---|
| CONTRIBUTING.md | How to contribute — fixes, new content, PRs |
| docs/CONTENT_GUIDE.md | Authoring lessons, quizzes & calculators (the content system) |
| docs/ARCHITECTURE.md | How the app & content registry fit together |
| docs/DEVELOPMENT.md | Local setup, env vars, scripts, deployment |
| docs/OPEN_SOURCE_AUDIT.md | Maintainer checklist before publishing the repo |
| docs/MAINTAINER_RELEASE.md | How maintainers create a sanitized public release |
| ROADMAP.md | Where the project is headed & where to help |
| GOVERNANCE.md | How decisions are made & how to become a maintainer |
| CODE_OF_CONDUCT.md | Community standards |
| SECURITY.md | Reporting security issues |
| SUPPORT.md | Where to get help |
Deeper authoring standards live in AGENTS.md. Need help? See SUPPORT.md or email the community list at system-designer@googlegroups.com.
SystemDesigner uses a dual license:
- Code — MIT. Use it, fork it, build on it.
- Content (lessons, quizzes, written docs, illustrations) — Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).
When reusing content, please attribute "SystemDesigner (systemdesigner.net)" and link back to the source.
SystemDesigner is a community effort to make world-class system design education free and open to everyone. Huge thanks to every contributor who fixes a lesson, files an issue, or authors a new topic.
If this project helps you learn, please ⭐ star the repo — it genuinely helps others discover it.
Questions or ideas? Open a Discussion, join system-designer@googlegroups.com, or reach the maintainer at alibadereddin@gmail.com.