Analytics Dashboard — Real-Time

Real-time analytics dashboard processing 2M+ events/day with live WebSocket updates, interactive charts, and KPI tracking. Built from production patterns used in platforms serving 120+ concurrent users.

The Problem

Analytics platforms often rely on periodic polling or batch processing, introducing latency between event collection and visualization. For fast-moving products, decisions need real-time data.

This dashboard solves it with:

• WebSocket streaming: events appear in the feed as they happen
• Batched updates: events are grouped (5/batch) to avoid render thrashing
• Snapshot refresh: full KPI recalculation every 30s without page reload

Architecture

flowchart LR
    Sources[Event Sources] -->|Emit| Server[Socket.io Server]
    Server -->|Batch events 5/2s| Client[Next.js Dashboard]
    Server -->|Full snapshot /30s| Client

    subgraph Dashboard
        Client --> KPIs[KPI Cards]
        Client --> Charts[Recharts Visualizations]
        Client --> Feed[Live Event Feed]
    end

    subgraph Data Flow
        Server -->|~23 events/sec| Throughput[≈ 2M events/day]
    end

Loading

Stack

Technology	Purpose
Next.js 15	App Router + Server/Client Components
React 19	UI rendering
TypeScript	Type safety
MUI v6	Component library
Recharts	Line, Bar, and Pie charts
Socket.io	Real-time bidirectional communication
Docker	Containerized deployment

Quick Start

# Clone and install
git clone https://github.com/hooperits/analytics-dashboard-realtime.git
cd analytics-dashboard-realtime
npm install

# Run both the dashboard and mock event server
npm run dev:all

Dashboard: http://localhost:3000 | Socket server: http://localhost:4000

Features

• 4 KPI Cards — Total events, active users, revenue, error rate with trend indicators
• Time Series Chart — 24h event volume with trend line
• Category Breakdown — Bar chart of event types (page_view, click, purchase, signup, error)
• Traffic Sources — Donut chart showing origin distribution
• Live Event Feed — Real-time scrolling feed with color-coded event types
• Responsive Layout — Collapsible sidebar, mobile-friendly

Project Structure

src/
├── app/
│   ├── layout.tsx              # Root layout (MUI + theme)
│   └── dashboard/
│       ├── layout.tsx          # Dashboard shell (sidebar + header)
│       └── page.tsx            # Main dashboard view
├── components/
│   ├── charts/                 # TimeSeriesChart, CategoryChart, SourcesPieChart
│   ├── layout/                 # DashboardLayout, Sidebar, Header
│   └── widgets/                # KpiCard, EventFeed
├── hooks/
│   └── useSocket.ts            # Socket.io connection + state management
├── lib/
│   └── theme.ts                # MUI theme configuration
└── types/
    └── analytics.ts            # Shared TypeScript interfaces

server/
├── index.ts                    # Socket.io server entry point
└── mock-generator.ts           # Realistic event + snapshot generator

Performance Notes

• Events are batched (5 per emission, every 2s) to prevent excessive React re-renders
• Event feed is capped at 50 items to control memory usage
• WebSocket transport preferred over polling for lower latency
• Full snapshot refresh every 30s ensures data consistency

License

MIT