Skip to content

README.md

Latest commit

 

History

History
238 lines (181 loc) · 6.69 KB

README.md

File metadata and controls

238 lines (181 loc) · 6.69 KB
Raw

🛠️ System Design Simulator

Visualize. Simulate. Validate. Scale.

A complete interactive platform to design high-level system architectures and instantly simulate real-world performance metrics like latency, RPS, bottlenecks, and capacity requirements.

Overview

System Design Simulator is an interactive tool for engineers, students, and architects to visually build distributed systems and validate whether the architecture meets SLA/SLO requirements.

Why This Project?

  • Bridge Theory → Practice: Turn system design interviews into working simulations
  • Instant Validation: Know if your architecture can handle 10K RPS before building it
  • Learn by Doing: Experiment with load balancers, caches, queues without infrastructure costs

✨ Key Features

Drag-and-Drop (by click) HLD Builder

Built with React Flow for intuitive visual design:

  • Client / Web Browser
  • Load Balancer
  • API Gateway
  • Microservices
  • Databases (SQL/NoSQL)
  • Caches (Redis, Memcached)
  • Message Queues (Kafka, RabbitMQ)
  • CDN (CloudFront, Akamai)
  • And more...

Real-Time Simulation Engine

After designing your architecture, enter:

  • ✅ SLA latency target (e.g., 200ms)
  • ✅ Expected RPS (e.g., 5000 requests/sec)

The simulator instantly shows:

  • 🔍 End-to-end latency for each request path
  • 📊 RPS distribution across nodes
  • ⚠️ Bottleneck detection (overloaded components)
  • ⚡ Scaling recommendations (e.g., "Add 3 more API servers")
  • 🔄 Capacity analysis per component

Secure Authentication

Multiple login options:

  • 🟢 Google OAuth 2.0 (Passport.js)
  • 📧 Email/Password (JWT-based)
  • 🔒 Bcrypt password encryption
  • 🔑 JWT token management (access + refresh tokens)

💾 Save & Load Designs

  • Store architectures in MongoDB
  • Revisit and modify previous designs
  • Run simulations anytime

How the Simulator Works

1️⃣ Latency Model

Each component has predefined latency values based on industry standards:

Component Latency
Load Balancer ~2ms
Network Hop ~10-20ms
API Gateway ~3-5ms
Database (Read) ~30-50ms
Database (Write) ~50-80ms
Cache (Redis) ~1-2ms
Message Queue ~5-10ms
and many more...

Total Latency Calculation:

total_latency = Σ (latency_of_each_node_in_path)

2️⃣ Capacity Model

Each service calculates capacity as:

capacity = Minumum Capacity

Bottleneck Detection:

IF required_rps > capacity
  → Mark node as bottleneck
  → Suggest: "Add X more instances"

3️⃣ RPS Propagation

Traffic distribution across:

  • Load balancers (round-robin/weighted)
  • Microservices (parallel processing)
  • Database replicas (read/write splits)

Tech Stack

Frontend

  • ⚛️ React.js (UI components)
  • 🔄 React Flow (visual graph builder)
  • 🎨 Tailwind CSS (styling)

Backend

  • 🟢 Node.js + Express.js (REST APIs)
  • 🍃 MongoDB + Mongoose (data storage)
  • 🔐 JWT (authentication)
  • 🔑 OAuth 2.0 (Google integration)
  • 🔒 Bcrypt (password hashing)

System Architecture

┌─────────────────────────────────────────────────┐
│         Frontend (React + React Flow)           │
│  - Visual HLD Builder                           │
│  - Simulation Dashboard                         │
│  - Auth Pages (Login/Register)                  │
└────────────┬────────────────────────────────────┘
             │
             │ REST API Calls (JWT Auth)
             │
┌────────────▼────────────────────────────────────┐
│       Backend (Node.js + Express)               │
│  - Auth APIs (OAuth + JWT)                      │
│  - Design APIs (Save/Load)                      │
│  - Simulation Engine                            │
└────────────┬────────────────────────────────────┘
             │
             │ Mongoose ODM
             │
┌────────────▼────────────────────────────────────┐
│          MongoDB (Database)                     │
│  - Users Collection                             │
│  - Designs Collection                           │
└─────────────────────────────────────────────────┘

Getting Started

Installation

  1. Clone the repository
git clone https://github.com/Mansi07Sharma/System-Design-Simulator.git
cd System-Design-Simulator
  1. Install dependencies
npm install
  1. Environment Variables

Create .env in backend/:

MONGO_URI=mongodb://localhost:27017/system_design_simulator
JWT_SECRET=your_super_secret_key_here
JWT_REFRESH_SECRET=your_refresh_secret_key

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:5000/auth/google/callback
  1. Run the application
# Terminal 1 - Frontend
npm run dev

# Terminal 2 - Backend
nodemon handler.js
  1. Open browser
http://localhost:5173

Use Cases

  1. Interview Preparation - Practice system design scenarios with instant feedback
  2. Capacity Planning - Validate if your architecture meets SLA requirements
  3. Learning Tool - Understand how components interact under load
  4. Team Collaboration - Share and discuss architecture designs
  5. Cost Estimation - Plan infrastructure before deployment

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Author

Mansi Sharma
B.Tech CSE | Full-Stack Developer | Distributed Systems Enthusiast

Support

If you find this project helpful, please ⭐ star the repository to show your support!

Acknowledgments

  • React Flow for the amazing graph visualization library
  • MongoDB for reliable data storage
  • The open-source community for inspiration
Made with by Mansi Sharma