SysDes

System design interviews and real-world architecture reviews still rely heavily on static whiteboards and slide decks. Engineers can draw boxes and arrows, but they cannot easily answer critical questions: Will this load balancer choke at 50K QPS? Where is the first bottleneck if the cache layer fails? Does adding a message queue actually help, or just add latency? Existing tools are either too academic (textbook diagrams) or too operational (monitoring dashboards after something is already built).

Most interview prep stays passive — articles and YouTube walkthroughs. There is a gap for an **interactive flight simulator**: drag 36 real infrastructure components onto a canvas, wire dependencies with protocol labels, propagate load from 1K–500K req/s, score across five rubric categories, and get a Gemini assistant that reads your live diagram and can apply structured canvas edits — all before writing deployment code.

Solo Full-Stack Engineer & Product Owner — I designed and built SysDes end-to-end.

**Product & marketing:** Landing page at / — hero with live architecture preview, feature bento, score showcase, 35-problem library teaser, pricing, FAQ. Neutral dark theme with cyan accents; **Open Studio** CTA into the canvas.

**Studio (/studio):** React Flow v12 canvas with 36 infrastructure components (DNS, CDN, LB, API Gateway, SQL/NoSQL, Redis, Kafka, Vector DB, Service Mesh, Circuit Breaker, etc.), edge protocol labels (HTTP, gRPC, WebSocket, pub/sub), pen overlay for annotations, canvas tabs (My Design + read-only reference solutions), persisted state via Zustand + localStorage, save/load/export PNG, keyboard shortcuts panel (?).

**Simulation engine:** Kahn's topological sort for DAG-ordered QPS propagation; smart fan-out (LBs split evenly); per-node metrics (QPS, utilization %, latency, health); bottleneck + cascade visualization; cycle detection warnings; load dial ~1K → 500K req/s.

**Scoring:** 100-point rubric across Scalability, Availability, Latency, Cost efficiency, Trade-offs — verdict bands from Needs Work to Architect (86+). Interview Mode with 6 timed phases (~45 min): Requirements → Estimation → API → Data model → HLD → Deep dive.

**AI:** Gemini-powered chat panel — canvas-aware summaries, coaching, trade-off Q&A, and structured operations (add node, connect edge, add note, clear canvas) applied to the diagram with toast feedback.

**Content:** 35 curated design problems (URL shortener → Netflix/WhatsApp/Kafka), concept library per component, 14 trade-off decision cards, learning path tiers (Foundations → Expert).

SysDes is a **client-heavy Next.js 16** application — simulation, scoring, and most UX run in the browser; Gemini calls hit a Next.js API route when GEMINI_API_KEY is set.

1$              Browser · Next.js 16 (Vercel)
2$ ┌──────────────────────────────────────────────────┐
3$ │  React Flow canvas  ──▶  Zustand store           │
4$ │         │                (persisted to           │
5$ │         │                 localStorage)          │
6$ │         ▼                                        │
7$ │  simulation engine   Kahn topo-sort              │
8$ │         │            QPS propagation 1K–500K/s   │
9$ │         ▼                                        │
10$ │  scoring rubric      100 points · 5 categories   │
11$ └───────────────────────┬──────────────────────────┘
12$                         │ canvas JSON
13$                         ▼
14$                 /api/gemini  (Next route)
15$                         │
16$                         ▼
17$                    Gemini API

**Stack:** Next.js 16 App Router · React 19 · TypeScript · Tailwind CSS v4 · shadcn/ui · Framer Motion · @xyflow/react (React Flow v12) · Zustand v5 (persisted canvas/sim/pen state) · @google/generative-ai · html-to-image for PNG export · Lucide icons.

**Folder layout:** - src/app/ — / landing, /studio workspace - src/components/canvas/ — React Flow shell, tabs, pen overlay - src/components/ai/ — Gemini chat + canvas operation applier - src/components/panel/ — Run (simulate), Score, Capacity, Trade-offs - src/components/interview/ — Timed interview mode UI - src/components/sidebar/ — Component palette, problem picker, learning path - src/engine/simulator.ts — Kahn topo sort + QPS propagation + bottleneck detection - src/scoring/ — Rubric rules + category weights - src/data/ — 36 component specs (benchmark-backed max QPS/latency), 35 problems, concept copy

**Simulation flow:** 1. User places nodes + directed edges on canvas 2. User sets global load (1K–500K req/s) and clicks Run 3. Engine topologically sorts DAG → propagates QPS through fan-in/fan-out rules 4. Each node compares incoming QPS vs maxQps spec → utilization %, latency estimate, health status 5. Bottlenecks and cascade failures highlighted on canvas

**Scoring flow:** Current topology serialized → rule engine checks for LB, cache-before-DB, async queues, monitoring, SPOFs, etc. → 5 category scores → total /100 + verdict band + actionable misses.

**AI flow:** Canvas JSON (nodes, edges, labels) injected into Gemini system context → user asks question or requests edit → model returns text and/or structured ops → valid ops mutate Zustand canvas store.

**Persistence:** Designs, tabs, sidebar prefs in localStorage via Zustand persist — no backend DB required for core simulator.

SysDes sits at the intersection of **ed-tech and developer tools** — primary users are engineers preparing for FAANG-style system design rounds and tech leads running lightweight design reviews. Positioning: *flight simulator for system design* — active practice, not passive reading.

**Product-led hook:** Open Studio → drop components → hit Run → see bottleneck light up in red → Evaluate → get rubric score → ask Gemini *what am I missing?* — the aha moment drives Discord study groups and interview prep communities.

**Go-to-market:** live at system-dec.vercel.app → GitHub → r/ExperiencedDevs, system design YouTube creators, college placement cells.

**Monetization paths (not shipped):** premium problem packs, team collaboration rooms with cursor presence, export to Terraform/Pulumi templates, institution licenses for bootcamps.

Live at system-dec.vercel.app with source at github.com/subhm2004/SysDes.

**Shipped (product):** marketing landing · /studio canvas · **36 infrastructure components** · edge protocol labels · traffic simulation 1K–500K req/s · bottleneck + cascade viz · **100-point scoring** across 5 categories · **35 design problems** (Easy → Expert) · learning path with completion checkboxes · Interview Mode (6 phases, ~45 min timer) · concept library per component · 14 trade-off cards · pen overlay · canvas tabs + reference solutions · save/load/export PNG · keyboard shortcuts (?) · dark cyan theme.

**Shipped (AI):** Gemini chat grounded in live canvas · coaching + trade-off Q&A · structured canvas edit operations (add/connect/note/clear) · graceful disable when GEMINI_API_KEY missing.

**Shipped (platform):** Kahn topo-sort engine · Zustand persisted state · React Flow v12 · Next.js 16 + React 19 · fully client-side sim (no DB for core features).

Add stochastic load profiles and failure injection (chaos-style) — real systems have burst traffic and retry storms, not steady-state QPS. Collaborative multi-user rooms with cursor presence would turn solo practice into team whiteboard reviews. Export validated topologies to IaC (Terraform/Pulumi) would close design-to-deploy loop. SFU/WebRTC problem templates could pair with NexusRTC portfolio narrative. Streaming Gemini tokens would make long architecture critiques feel conversational.