---
title: "Real-Time Metrics Dashboard"
date: 2024-11
status: "live"
tags: ["React", "WebSockets", "D3.js", "Go", "dashboard", "metrics"]
repo: ""
demo: "https://example.com"
---

# Real-Time Metrics Dashboard

Platform metrics dashboard streamed over WebSockets with server-side aggregations.

## Description

An internal dashboard for monitoring KPIs of a SaaS platform in real time: active users, hourly revenue, 5xx errors, p95 latency. The frontend is React with D3 charts; the backend is Go opening a WebSocket stream to all connected dashboards.

## Tech stack

- **Frontend:** React, D3.js (custom charts, not Recharts)
- **Backend:** Go with gorilla-style WebSockets
- **Transport:** Server-Sent Events style streaming with 5s aggregations
- **Charts:** D3 for transitions between time windows (1h, 24h, 7d)

## Main features

1. Real-time KPI tiles (active users, hourly revenue, error rate, p95 latency)
2. Streaming updates via WebSocket with 5s server-side aggregation
3. Backpressure: when the browser tab is backgrounded, server reduces frequency to 1/min
4. Custom D3 charts with smooth transitions between time windows

## Learnings

Avoiding memory leaks when switching time windows was tricky. Implemented a ring buffer per series and explicit disposal of Resize observers on unmount. The backpressure mechanism was the most impactful change in production — it stopped a flood of needless work when users had many tabs open.