A feature-rich, real-time analytics dashboard built with React, React Query, and Recharts — covering multi-tenant auth, live data streaming, and a white-label theming system.
Reduced the client's internal reporting cycle from 2 days to real-time, improving team decision velocity significantly.
The hero image is loaded from the MDX coverImage field. Replace the demo URL with your own gameplay capture, PixiJS canvas screenshot, or rendered artwork.
< 2 seconds
Data refresh rate
22 types
Chart widgets
97
Lighthouse score
The Problem
The client had a fragmented reporting workflow — pulling data from multiple internal tools into manual spreadsheets every two days. They needed a single, unified dashboard that surfaced live KPIs, allowed drill-down analysis, and could be white-labeled for their own enterprise clients.
Architecture Decisions
State Management Split
Not all state is equal in a dashboard. I used a layered approach:
Server state: React Query for all API data — with stale-while-revalidate caching, automatic background refetching, and optimistic updates for write operations.
UI state: Zustand for panel layouts, filter selections, and sidebar toggles.
URL state: nuqs for persisting filter parameters in the URL so dashboards can be shared and bookmarked.
Real-Time Data
Live KPI cards and time-series charts use WebSocket subscriptions managed through a custom useRealtimeMetric hook. The hook handles connection lifecycle, exponential backoff on failure, and graceful degradation to polling when WebSockets are unavailable.
Component Architecture
The widget system is built around a <DashboardWidget> compound component pattern. Each widget declares its own data requirements via a dataConfig prop, making the layout engine generic and the individual widgets self-contained.
The entire design system is driven by CSS custom properties resolved from a per-tenant theme JSON. Tenants can configure primary colors, logo, and font family. The theme is injected at the root level, requiring zero component-level changes for brand switching.
Performance
All chart data is windowed — only the visible time range is rendered, keeping DOM size flat regardless of dataset length.
Heavy chart components use React.lazy with skeleton placeholders.
A virtual scroll layer handles tables with 10,000+ rows without degradation.
Result
Delivered a production-ready SaaS dashboard with a Lighthouse performance score of 97. The client onboarded their first 3 enterprise tenants within the first month.
Doodle concept visual
