case studyMarch 29, 2026 · TanStack Start · React 19 · TypeScript

System Visualizer

A live distributed-systems visualizer with real infrastructure in the loop, built for learning and demos.

Overview

System Visualizer is a learning-focused product that makes backend infrastructure behavior visible instead of abstract.

Rather than mocking traces, it runs scenarios through a real backend and streams live events so learners can watch how Redis, BullMQ, RabbitMQ, Kafka, and PostgreSQL interact during each step.

Highlights

  • Visualizes scenario execution with animated flows, metrics, replay controls, and event logs.
  • Uses a TanStack Start web app for the frontend and an Elysia service on Bun for orchestration.
  • Ships with a production-ready container stack for the app and supporting infrastructure.
  • Currently an active working project focused on educational quality and system clarity.

Architecture

The repository is organized as a monorepo with separate web, server, and shared packages so the visualization layer and runtime simulation layer stay loosely coupled.

Repository: github.com/bipulhf/system-visualizer.