SysDesign Simulator
An interactive learning platform where engineers master distributed systems and system design through hands-on simulations, chaos engineering, quizzes, and AI-powered architecture reviews.
SysDesign Simulator is a gamified, interactive platform built for senior engineers preparing for system design interviews or looking to deepen their understanding of distributed systems. Instead of reading static articles, users learn by breaking things — spinning up infrastructure components on a live grid, injecting chaos (DDoS attacks, retry storms, cascading failures), and watching how their architecture holds up under pressure.
The platform follows a freemium model: all interactive concept simulators (load balancers, CDNs, database scaling, rate limiters, CAP theorem, etc.) are freely accessible without login. Signing in with Google unlocks progress tracking, quizzes with XP rewards, AI-powered architecture reviews, and mock interview prep. A full-screen "Infra Game" mode lets users build and defend infrastructure in real-time survival or sandbox scenarios with 5 progressive difficulty levels.
My Contributions
🧩 Interactive Concept Visualizers
- Built 9 hands-on simulators covering core distributed systems topics: Load Balancer, CDN, Database Scaling, Event-Driven Architecture, Lambda/Serverless, Rate Limiter, CAP Theorem, Microservices, and "What Breaks" failure scenarios.
- Each visualizer features real-time parameter adjustment, chaos injection (server crashes, network failures), and live metrics (latency, error rate, throughput).
- Concepts are fetched from a backend content API and rendered with animated Framer Motion transitions.
🎮 Infra Game (Real-Time Infrastructure Simulator)
- Designed and implemented a full-screen, real-time infrastructure defense game rendered with Three.js.
- Players drag-and-drop 10 service types (Firewall, CDN, API Gateway, Load Balancer, Queue, Compute, Cache, SQL DB, NoSQL DB, Storage) onto a grid, connect them, and defend against escalating traffic waves.
- Implemented a 5-level progression system: Basic Flow → Scaling → Resilience → Architecture Enforcement → Chaos Engineering.
- Built advanced mechanics including retry storm amplification, compound chaos events (DDoS + retry + cache flush), cascading failure chains, backpressure simulation, gateway topology validation, and cache placement penalties.
- Includes survival and sandbox modes, real-time metrics dashboard, replay snapshots, financial tracking, and an event log system.
🔐 Authentication & Freemium Access Control
- Integrated Supabase with Google OAuth for seamless sign-in.
- Built a soft-login modal that prompts users only when they attempt gated actions (quizzes, AI features), keeping the core learning experience friction-free.
- Implemented feature access stores with usage limits for AI reviews and mock interviews.
📝 Quiz & Progress System
- Built a quiz engine with multiple-choice questions, instant feedback with explanations, and XP rewards for passing scores (80%+).
- Implemented a Zustand-based progress store with localStorage persistence tracking total XP, per-concept mastery (0-100%), completed quizzes, and XP history.
- Dashboard displays skill scores, mastery rings, interview readiness levels (Junior → Staff), skill breakdowns (Scalability, Reliability, Cost Awareness, Performance), and elite achievement badges.
⚙️ Backend API
- Built a Node.js/Express backend with MongoDB (Mongoose) for persistent data.
- Implemented controllers for concepts, content, quizzes, progress tracking, and reading progress.
- Added Supabase auth middleware, rate limiting, and error handling middleware.
- Created a content system with JSON-based concept definitions and quiz question banks.
🤖 AI Integration
- Integrated Google Gemini AI for architecture diagram reviews and mock interview sessions.
- Built a chat drawer component for conversational AI interactions within the platform.
⚡ Key Technical Highlights
- Real-time game loop with Three.js rendering, requestAnimationFrame-based tick system, and sub-100ms state sync to React UI.
- Drag-and-drop service placement with grid snapping, ghost previews, and budget validation.
- 5-level chaos engineering progression with compound events, retry storm amplification, and cascading failure simulation.
- Freemium architecture: all simulators free, auth-gated features use soft login prompts with zero friction for guests.
- Zustand state management with persist middleware across auth, progress, UI, onboarding, and feature access stores.
- Lazy-loaded routes with React.lazy() and Suspense for optimized bundle splitting.
- Backend content API serving 9 concept definitions and quiz banks from structured JSON files.