Analytics Dashboard - Frontend

A modern, responsive React dashboard for visualizing business metrics, revenue trends, user behavior, and marketing performance.

🎨 Features

• Revenue Trends - Interactive line charts showing revenue over time
• Conversion Funnel - Visual funnel chart tracking user journey
• Feature Usage Heatmap - Color-coded grid showing feature popularity
• Usage Metrics - Login frequency and feature adoption by tier
• Campaign Performance - Top marketing campaigns with ROI
• Acquisition Channels - Pie chart of user acquisition sources
• Cohort Analysis - Retention rates by signup cohort
• Interactive Filters - Filter by date range and subscription tier
• Responsive Design - Works on desktop, tablet, and mobile
• Loading States - Smooth loading indicators
• Error Handling - User-friendly error messages

📋 Prerequisites

• Node.js (v14 or higher)
• npm (comes with Node.js)
• Backend API running (see analytics-dashboard-api README)

🛠️ Installation

1. Clone the repository

   git clone <your-repo-url>
   cd analytics-dashboard

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   REACT_APP_API_URL=http://localhost:3001/api

4. Start the development server

   npm start

The app will open at http://localhost:3000

🎯 Available Scripts

• npm start - Start the development server
• npm run build - Create production build
• npm test - Run tests
• npm run eject - Eject from Create React App (one-way operation)

🏗️ Project Structure

src/
├── components/
│   ├── charts/
│   │   ├── RevenueTrends.js          # Revenue line chart
│   │   ├── FunnelChart.js            # Conversion funnel
│   │   ├── ChurnTable.js             # Cohort analysis table
│   │   ├── FeatureHeatmap.js         # Feature usage heatmap
│   │   ├── UsageMetrics.js           # Usage statistics
│   │   ├── CampaignPerformance.js    # Campaign table
│   │   └── AcquisitionChannels.js    # Channel pie chart
│   ├── filters/
│   │   └── DashboardFilters.js       # Date and tier filters
│   ├── layout/
│   │   ├── Header.js                 # App header
│   │   └── MetricCard.js             # Summary metric card
│   └── Loading.js                     # Loading spinner
├── services/
│   └── api.js                         # API service layer
├── App.js                             # Main app component
├── App.css                            # App styles
└── index.css                          # Global styles

📊 Dashboard Sections

Summary Metrics

Four key metrics displayed at the top:

• Total Revenue
• Total Users
• Engagement Rate
• Features Tracked

Revenue Trends

Line chart showing monthly revenue over time with filtering support.

Conversion Funnel

Horizontal bar chart showing the conversion rates through:

• Visits → Signup → Trial → Purchase → Upgrade

Feature Usage Heatmap

Color-coded grid showing feature popularity:

• 🔵 Blue = Low usage
• 🟡 Orange = Medium usage
• 🔴 Red = High usage

Usage Metrics

• Login frequency by subscription tier
• Top 5 most-used features

Campaign Performance

Table showing top 10 campaigns by revenue with ROI calculations.

Acquisition Channels

Pie chart and table breaking down users by acquisition channel.

Cohort Analysis

Table showing retention rates by signup month and subscription tier.

🎨 Customization

Colors

Primary colors are defined in component styles:

• Blue: #3b82f6
• Purple: #8b5cf6
• Pink: #ec4899
• Orange: #f59e0b
• Green: #10b981

API URL

Change the backend API URL in .env:

REACT_APP_API_URL=https://your-api-url.com/api

📱 Responsive Design

The dashboard is fully responsive with breakpoints:

• Desktop: 1400px max-width
• Tablet: Grid layouts adapt with auto-fit
• Mobile: Single column layouts on small screens

🔧 Configuration

Chart Library

Uses Recharts for all visualizations. Change chart types and configurations in individual chart components.

Date Formatting

Uses date-fns for date operations.

🐛 Troubleshooting

API Connection Issues

Verify:

1. Backend is running on port 3001
2. .env file has correct REACT_APP_API_URL
3. CORS is enabled on backend

Charts Not Displaying

Check:

1. Data is loading from API (open browser dev tools)
2. No console errors
3. Components are receiving correct props

Filters Not Working

Ensure:

1. Date format is YYYY-MM-DD
2. Backend API supports date filtering
3. Filter state is updating correctly

🚀 Deployment

Build for Production

npm run build

This creates an optimized production build in the build/ folder.

Deploy to Vercel

1. Push code to GitHub
2. Import project in Vercel
3. Set environment variable: REACT_APP_API_URL
4. Deploy!

Deploy to Netlify

1. Push code to GitHub
2. Connect repository in Netlify
3. Build command: npm run build
4. Publish directory: build
5. Add environment variable: REACT_APP_API_URL

📦 Dependencies

• react - UI library
• recharts - Charting library
• axios - HTTP client
• date-fns - Date utilities

🎓 Learning Resources

• React Documentation
• Recharts Documentation
• Create React App

📄 License

This project is for educational/portfolio purposes.