Frontend Load Balancer Simulator
A TypeScript-based system that simulates load distribution, failover handling, and real-time observability in distributed frontend architectures.
Role
Full-Stack Developer
Stack
React, TypeScript, Node.js, Express, Tailwind
Focus
System Design, Resilience, Observability
01 The Problem
Modern applications rely on distributing traffic across multiple services to maintain performance and reliability. However, understanding how load balancers behave under different conditions is often abstract and difficult to visualize.
The core challenge was simulating real-world traffic distribution, handling service failures gracefully, and maintaining system stability under dynamic load conditions.
02 The Solution
I built a frontend-driven load balancer simulation that models how requests are distributed across multiple services. The system dynamically routes traffic, detects service failures, and redistributes load in real time while exposing system metrics through an observability layer.
03 Implementation
Dynamic Load Distribution Engine
Designed a request distribution engine that assigns incoming traffic to services based on load balancing strategies. Each service maintains a dynamic load state, allowing the system to make informed routing decisions and simulate real-world balancing behavior.
Load Distribution Strategies
Implemented traffic routing strategies such as round-robin and adaptive distribution based on current service load.
Failover Handling
Built logic to detect service downtime and automatically reroute traffic to healthy instances without disrupting the system.
Real-Time Observability
Developed a monitoring layer to visualize request flow, service health, and load distribution in real time.
Traffic Simulation Engine
Simulated varying traffic patterns, including spikes, to test system resilience under stress conditions.
04 Challenges
Ensuring consistent state updates while multiple services receive traffic simultaneously
FIX: Centralized load state management and controlled update cycles to prevent race conditions and inconsistent routing decisions
Handling service failures without breaking the flow of requests
FIX: Implemented failover logic that dynamically excludes unhealthy services and redistributes traffic in real time
Visualizing system behavior without impacting performance
FIX: Optimized rendering by decoupling simulation logic from UI updates and minimizing unnecessary re-renders
Results & Impact
This project demonstrates a practical understanding of how distributed systems manage traffic, maintain availability, and recover from failure. It provides a visual and interactive way to explore core system design concepts such as load balancing, resilience, and observability.
What I'd Improve
- → Introduce weighted load balancing for more realistic traffic distribution
- → Implement advanced strategies like least connections or IP hashing
- → Add latency simulation between services
- → Scale simulation to support a larger number of services
- → Persist metrics for historical analysis and replay