Dashboard Analytics - Compound Component Architecture

A modern, responsive analytics dashboard, built using React, TypeScript, and Tailwind CSS. This project was submitted as a part of a job application.

✨ Key Features

• 📊 Interactive Data Visualizations - Bar charts, pie charts, and trend analysis using Recharts
• 📱 Fully Responsive Design - Optimized layouts for desktop and mobile devices
• 🎨 Compound Component Pattern - Modular, composable dashboard architecture
• ⚡ Real-time Interactivity - Hover effects, trend comparisons, and dynamic data switching
• 🎯 TypeScript First - Full type safety
• ♿ Accessibility Focused - ARIA labels, keyboard navigation, and screen reader support

🏗️ Architecture Highlights

Compound Component Pattern

The dashboard is built using a compound component pattern that provides:

<CompoundDashboard.Provider baseColor="TEAL" initialCurrency="EUR" data={data}>
  <CompoundDashboard.Header />
  <CompoundDashboard.WeeklyRevenue />
  <CompoundDashboard.ContactStreaks />
  <CompoundDashboard.ContactsAnalysis />
  <CompoundDashboard.SourcesDistribution />
</CompoundDashboard.Provider>

Benefits of This Approach:

• 🔗 Shared Context - Centralized state management across all dashboard components
• 🧩 Composability - Mix and match widgets as needed
• 🎛️ Consistent API - Uniform interface across all dashboard components
• 📦 Encapsulation - Each widget manages its own specific logic
• 🔄 Reusability - Easy to extend with new widget types

Component Structure

app/components/compoundDashboard/
├── contexts/           # Shared state management
│   ├── dashboardContext.tsx
│   └── userContext.tsx
├── hooks/             # Custom data processing hooks
│   └── useData.ts
├── widgets/           # Individual dashboard widgets
│   ├── header/
│   ├── weeklyRevenue/
│   ├── contactStreaks/
│   ├── contactsAnalysis/
│   ├── sourcesDistribution/
│   └── widgetLayout/
└── index.ts          # Compound component exports

🛠️ Tech Stack

• React Router 7 - Modern React framework with file-based routing
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Recharts - Powerful charting library
• Radix UI - Accessible component primitives
• React Aria - Accessibility utilities

📊 Dashboard Widgets

1. Revenue Tracking

• Weekly revenue comparison with percentage growth
• Interactive trend switching between time periods
• Currency conversion support

2. Contact Analytics

• Daily contact growth visualization
• Historical trend analysis
• Growth rate calculations

3. Contact Streaks

• Contact engagement patterns
• Streak counting and analysis
• Performance indicators

4. Source Distribution

• Pie chart showing contact source breakdown
• Interactive hover effects
• Mobile-optimized layouts

🎨 Visualization Strategy & Interactive Features

Chart Selection Logic

The dashboard employs a strategic approach to data visualization based on data types:

• 📈 Temporal Data → Line and Bar Charts

  • Weekly revenue trends
  • Daily contact growth patterns
  • Historical performance analysis

• 🥧 Distribution Data → Pie Charts

  • Contact source breakdown
  • Proportional data representation
  • Category-based metrics

Advanced Interactivity

Dynamic Chart Controls

• Chart Type Toggle - Switch between area and bar chart visualizations
• Metrics Display - Toggle between total values and growth percentages
• Average Lines - Show/hide average trend indicators
• Range Highlighting - Visual emphasis on data ranges and outliers

Interactive Navigation

• Date Range Zoom - Navigate through time periods by nudging graphs left/right
• Granular Control - Zoom in/out on specific date ranges for detailed analysis
• Real-time Updates - Smooth transitions between different data views

Dynamic Theming System

• Color Gradient Calculation - Algorithmic color generation based on base theme
• Contextual Palettes - Automatic color harmony across all widgets
• Theme Customization - Real-time color scheme switching
• Accessibility Compliance - Maintains contrast ratios across all theme variations

🎨 Design Principles

• Mobile-First - Responsive grid layouts that adapt seamlessly
• Accessibility - WCAG compliant with proper ARIA attributes
• Performance - Optimized rendering with proper React patterns
• Consistency - Unified design system across all components
• Interactivity - Smooth animations and user feedback

💡 Technical Decisions

Why Compound Components?

I chose the compound component pattern because it provides the perfect balance between flexibility and structure for dashboard development. It allows:

• Easy customization of widget layouts
• Shared state without prop drilling
• Individual widget isolation
• Scalable architecture for adding new widgets

State Management Strategy

The dashboard uses React Context for sharing:

• Theme/color preferences
• Currency settings
• Screen size information
• Processed data calculations

Responsive Design Approach

Custom hooks manage breakpoints and screen sizes, ensuring widgets adapt their visualization strategies for optimal mobile experiences.