Back to Projects
In ProgressLLM Project

System Design Simulator

Run request traffic through a distributed network model. Adjust replication lag, trigger rate limit blocks, and analyze CDN hit rates.

Target Learning Outcome

Deconstruct request pathing, load balancing configurations, rate limiters bucket states, and replica routing patterns.

Active Lab TerminalIN PROGRESS
System Design LabDistributed flow

System Design Simulator

Visualize real-world system designs step by step.

👤
User
LB
Web-1
Web-2
DB Cluster
Ready to simulate network requests
Topology: Round Robin LB
01. Problem it solves

Visualizing Network Topologies

Distributed systems are complex and hard to visualize. Reading about load balancers, rate limiting, and database lag in books is helpful, but developers struggle to diagnose bottlenecks, eventual consistency bugs, or caching policies in production environments.

This simulator makes network configurations visual. Developers can run streams of requests, watch packets travel across routes, and inspect cache hit ratios or write replication lag anomalies in real time.

02. Concept it teaches

Proxy Routing & Scalability Rules

This module focuses on packet pathing and data synchronization concepts:

  • Load balancing strategies (Round Robin vs Least Connections)
  • Rate limiting thresholds (Token Bucket & Leaky Bucket)
  • CDN edge caching layers & TTL cache eviction
  • Read/Write replica splitting & database partitions
  • Replication lag & eventual consistency anomalies
03. What I built

Network Topology Workspace

A canvas-based interactive simulation workspace including:

  • Dynamic client request generator buttons triggering packet streams.
  • Animated packet pathways demonstrating proxy routing behaviors.
  • CDN node indicators flashing hit/miss states during lookups.
  • Token Bucket rate limiter dropping packet overflows visually.
  • Replication delay sliders adjusting write syncing lag times.
04. Architecture

System Topology

SYSTEM TOPOLOGYInteractive Diagram
User inputs prompt & sections
Frontend Diagnostics Dashboard
Payload Builder & Assembly
Token Estimation Engine
Context Budget Calculator
Usage BreakdownVisualization UI
Overflow WarningThreshold Alert
Optimization TipsPayload Trimming
05. Tech Stack

Built With

TypeScriptReactCanvas APITailwind CSSGitHub
06 & 07. Links

Source & Deploy

GitHub Repository:devJam2026
08. Interview Explanation

Defending the Design

Interview Defense Strategy

I designed this simulator to visualize request flows in a distributed topology. Request packets are generated and routed to the load balancer, which paths them to servers. Cache lookups trigger hits or misses, and writes are routed to databases. This project helped me grasp CDN caching strategies, load balancing policies, and replication anomalies.
09. Future Improvements

Roadmap Extensions

  • Add consistent hashing ring topology visualizers.
  • Implement automated circuit breaker failure simulations.
  • Add network latency sliders to simulate global packet loss.
  • Export system load throughput statistics charts.