SystemGrid is a visual system design simulator: diagram infrastructure on a flow canvas, tune traffic, run a lightweight simulation, and explore scenarios—useful for thinking through architectures and interview prep.
- Flow canvas built on React Flow (
@xyflow/react): drag predefined blocks, connect services, and annotate with notes. - Simulation with configurable request rates, animated edges, tick-based behavior, and an in-app log stream.
- Scenarios for loading example topologies from the catalog.
- Dark / light theme (including a keyboard shortcut where supported).
| Area | Choices |
|---|---|
| Framework | Next.js 16 (App Router), React 19 |
| Language | TypeScript |
| Styling | Tailwind CSS 4 |
| UI | shadcn/ui patterns, Base UI, CVA |
| Canvas | React Flow (@xyflow/react) |
| State | Zustand |
| Forms / validation | React Hook Form, Zod |
| Lists | react-virtuoso (large catalogs) |
| Icons | Hugeicons, Simple Icons |
| Tooling | ESLint (eslint-config-next), Prettier (+ Tailwind plugin) |
- Node.js 20+ (LTS recommended; Next.js 16 expects a current runtime)
git clone https://github.com/vaishnavme/systemgrid.git
cd systemgrid
npm installCreate a .env.local if you need canonical URLs for metadata (optional locally):
# Optional: used for SEO / Open Graph base URL when not on Vercel
NEXT_PUBLIC_SITE_URL=https://your-domain.exampleRun the dev server (Turbopack):
npm run devOpen http://localhost:3000.
| Command | Description |
|---|---|
npm run dev |
Start dev server with Turbopack |
npm run build |
Production build |
npm run start |
Run production server (after build) |
npm run lint |
ESLint |
npm run typecheck |
tsc --noEmit |
npm run format |
Prettier write for *.ts / *.tsx |
Contributions are welcome. A simple workflow:
- Fork the repo and create a branch for your change (
fix/…,feat/…, or similar). - Develop against
npm run dev; keep changes focused on one concern per PR when possible. - Check quality before opening a PR:
npm run lintnpm run typechecknpm run format(or ensure Prettier-clean diffs)
- Open a PR with a short description of what changed and why; link any related issue if applicable.
If you are unsure about scope or API shape, open an issue first to align on the approach.
- Site: vaishnavs.xyz
- Repository: github.com/vaishnavme/systemgrid