StrataAnalytics

Problem Statement

Enterprise teams were drowning in data but starving for insights. Raw MySQL exports and static Excel reports couldn't keep up with the velocity of business decisions. Stakeholders needed a single dashboard that combined revenue tracking, user cohort analysis, and operational metrics — all updated in near-real-time.

Existing tools were either too expensive (Tableau, PowerBI licenses), too slow (custom Django admin panels), or too rigid (Google Sheets dashboards that broke at scale). The team needed a custom solution that was fast, responsive, and maintainable — built with technologies already in the stack.

System Architecture & Research

Before writing any UI code, I mapped the full data pipeline: from raw MySQL tables through Python aggregation endpoints to React chart components. This systems-thinking approach ensured the frontend wasn't just pretty — it was architecturally sound.

Architecture Overview

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│   MySQL DB   │────▶│  Python API  │────▶│  React.js    │
│  (Optimized  │     │  (Flask/     │     │  Dashboard   │
│   Schemas)   │     │   FastAPI)   │     │  (Vite)      │
└──────────────┘     └──────────────┘     └──────────────┘
       │                    │                    │
  Indexed queries    Aggregated metrics    Interactive charts
  Partitioned data   Caching layer         Real-time filtering
  Stored procedures  Error handling        Responsive layout

Research & Technical Decisions

Dashboard UI Design

The dashboard follows a card-based layout with a fixed sidebar for navigation and a responsive grid that adapts from 4-column desktop to single-column mobile. Each metric card is a self-contained component with its own data fetch, loading state, and error boundary.

Key Design Decisions

• Progressive loading: Skeleton screens appear instantly; data fades in as it arrives — no blocking spinners
• Interactive filtering: Click any chart element to filter all other charts (cross-filtering)
• Micro-interactions: Hover states reveal data details; transitions use cubic-bezier easing for natural feel
• Responsive grid: CSS Grid with auto-fit and minmax — works from 320px mobile to 4K displays
• Dark mode default: Reduces eye strain for data-heavy work sessions; light mode available

Component Hierarchy

<DashboardLayout>
  ├── <Sidebar />
  ├── <Header search={true} />
  ├── <MetricsGrid>
  │   ├── <MetricCard type="revenue" />
  │   ├── <MetricCard type="users" />
  │   ├── <MetricCard type="conversion" />
  │   └── <MetricCard type="retention" />
  ├── <ChartSection>
  │   ├── <RevenueChart />
  │   ├── <CohortAnalysis />
  │   └── <UserFlowSankey />
  └── <DataTable pagination={true} />
</DashboardLayout>

Code Implementation

A highlight of the implementation is the custom hook for data fetching with caching, debounced filtering, and automatic re-fetch on dependency change. This pattern was extracted into a reusable utility across all dashboard components.

import { useState, useEffect, useCallback } from 'react';

export function useDashboardData(endpoint, filters = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams(filters);
      const res = await fetch(`${endpoint}?${params}`);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const json = await res.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, [endpoint, JSON.stringify(filters)]);

  useEffect(() => { fetchData(); }, [fetchData]);

  return { data, loading, error, refetch: fetchData };
}

-- Materialized view for dashboard revenue metrics
CREATE VIEW v_monthly_revenue AS
SELECT
  DATE_FORMAT(transaction_date, '%Y-%m') AS month,
  SUM(amount) AS total_revenue,
  COUNT(DISTINCT user_id) AS active_users,
  ROUND(SUM(amount) / COUNT(DISTINCT user_id), 2) AS arpu
FROM transactions
WHERE status = 'completed'
GROUP BY DATE_FORMAT(transaction_date, '%Y-%m')
ORDER BY month DESC;

Responsive Design & Accessibility

The dashboard was designed mobile-first, with a collapsible sidebar and stacked card layout on smaller screens. Charts resize gracefully using SVG viewBox, and touch interactions replace hover states on mobile.

Outcome & Impact

StrataAnalytics replaced the previous workflow of exporting CSV files and building manual charts in Excel. Stakeholders now have a self-service analytics platform with real-time data, interactive filtering, and shareable dashboard links. The Python data pipeline runs nightly aggregations and caches results, ensuring sub-second load times even for historical data spanning 3+ years.

The component architecture was designed for extensibility — new chart types and data sources can be added by creating a single component file and registering it in the dashboard config. This pattern has been adopted by two subsequent teams at Cognizant.

Key Takeaways

• Architecture before aesthetics: Mapping the full data pipeline before designing the UI ensured the frontend was technically sound, not just visually appealing.
• Performance is a feature: Materialized views + React useMemo = sub-second loads on 100K+ rows. Users notice speed.
• Accessibility in data UIs: Charts need ARIA labels, tables need proper th/td structure, and color alone can't convey meaning.
• Component reuse compounds: The 12 reusable dashboard components were adopted by two subsequent teams, multiplying the initial investment.