ab510d8b31
Adds the §4.5 Auto-compaction section to architecture.md and architecture.es.md describing the trigger, fallback, persistence and the new SSE 'compaction' event so consumers know how to react. Includes the three placeholder projects used while exercising the feature end to end (bot-onboarding, dashboard-metricas, tienda-ropa) so /api/reindex picks them up without further setup.
1.4 KiB
1.4 KiB
| title | date | status | tags | repo | demo | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Real-Time Metrics Dashboard | 2024-11 | live |
|
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
- Real-time KPI tiles (active users, hourly revenue, error rate, p95 latency)
- Streaming updates via WebSocket with 5s server-side aggregation
- Backpressure: when the browser tab is backgrounded, server reduces frequency to 1/min
- 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.