System Design

System Design Code is an interactive learning platform that teaches scalable system architecture, distributed systems, and cloud design through concise tutorials and hands-on examples built with modern React + Vite tooling.

Quick links

• Live demo: GitHub Pages via the deploy script
• Run locally: npm run dev

Features

• Interactive tutorials and visual aids
• Focused lessons on scalability, reliability, and real-world trade-offs
• Localized (i18n) content and accessibility-minded UI
• Tests and visual regression tooling included

Getting Started

Prerequisites: Node 18+ and npm

Install dependencies:

npm install

Run the dev server:

npm run dev

Note: During local development the app uses browser history URLs (e.g. http://localhost:3030/system-design-code/networking). In production (GitHub Pages) the app uses hash-based routing by default; use http://<host>/<base>/#/networking for bookmarked routes.

If you'd like to use clean browser history URLs during local development, set the environment variable as follows:

VITE_USE_BROWSER_ROUTER=true npm run dev

Otherwise the default is hash-based routing which avoids 404s for direct URLs on static hosts.

Build for production:

npm run build

Preview the production build locally:

npm run preview

Run tests:

npm run test

Lint and format:

npm run lint
npm run format

Contributing

We welcome contributions of all kinds: bug reports, improvements, new tutorials and example scenarios.

• Read the contributing guide: CONTRIBUTING.md
• Fork the repo, create a topic branch, and open a PR against main.
• Write clear, small PRs with a descriptive title and tests where applicable.

See CONTRIBUTING.md for more details on local development, branch naming, and PR checklists.

License

This project is licensed under the MIT License — see the LICENSE file for details.

---

This repo was bootstrapped with Vite and opinionated tooling configured for building interactive learning content.