LivePerformance

Real-Time Analytics Dashboard

Built a real-time analytics dashboard handling 2M+ daily events with WebSocket streaming, virtual scrolling for 100k+ row tables, and sub-second query response times.

CompanyFreshworks

RoleLead Frontend Engineer

Year2022

Tech Stack

Vue 3PiniaChart.jsWebSocketNode.jsPostgreSQLRedis

Impact

events2M+ daily events

latency<500ms

users5,000+ daily active

The Problem

The existing analytics dashboard could only display data from 24 hours ago and crashed the browser when viewing more than 1,000 rows of data.

The Solution

Implemented WebSocket-based real-time data streaming, virtual scrolling for tables with 100k+ rows, time-based data windowing, and intelligent client-side caching.

Architecture

Vue 3 frontend with WebSocket connection to a Node.js streaming server, backed by TimescaleDB for time-series data and Redis for caching.

Key Challenges

Rendering 100k+ rows without freezing the browser
Handling WebSocket reconnection gracefully
Aggregating streaming data on the client side

Results & Impact

Real-time data with <500ms latency

Handles 100k+ rows with no performance degradation

2M+ events processed daily

5,000+ daily active users