Analytics Dashboard

A real-time analytics dashboard built with React and Node.js, featuring live data updates, interactive charts, and comprehensive analytics visualizations.

Features

• Real-time Updates: Dashboard automatically refreshes every 5 seconds with live data
• Data Visualization: Interactive charts using Chart.js
  • Line charts for trends (Users, Sessions, Conversion Rate)
  • Doughnut charts for segmentation (User Segments, Device Breakdown)
• Key Metrics Display:
  • Total Users
  • Active Sessions
  • Conversion Rate
  • Revenue
• Interactive Filters:
  • Date Range (Last 7, 30, or 90 days)
  • User Segments (Free, Premium, Enterprise)
• CSV Export: Export historical data to CSV format
• Responsive Design: Fully optimized for mobile and desktop devices
• Sample Data: Automatically generated realistic sample data for demonstration

Tech Stack

Frontend

• React 18.2
• Chart.js 4.4 with react-chartjs-2
• Axios for API calls
• CSS3 with responsive design

Backend

• Node.js with Express
• CORS enabled for cross-origin requests
• RESTful API architecture

Project Structure

analytics-dashboard/
├── client/                 # React frontend
│   ├── public/
│   │   └── index.html
│   └── src/
│       ├── components/     # React components
│       │   ├── Dashboard.js
│       │   ├── Header.js
│       │   ├── Filters.js
│       │   ├── MetricCard.js
│       │   └── ChartCard.js
│       ├── services/       # API services
│       │   └── api.js
│       ├── utils/          # Utility functions
│       │   ├── csvExport.js
│       │   └── formatters.js
│       ├── App.js
│       └── index.js
├── server/                 # Node.js backend
│   ├── data/
│   │   └── sampleData.js  # Sample data generator
│   ├── server.js          # Express server
│   └── package.json
└── package.json           # Root package.json

Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Setup

1. Clone the repository:

git clone <repository-url>
cd analytics-dashboard

2. Install dependencies for all packages:

npm run install:all

This will install dependencies for the root, client, and server directories.

Alternatively, install manually:

# Install root dependencies
npm install

# Install client dependencies
cd client
npm install

# Install server dependencies
cd ../server
npm install

Running the Application

Development Mode (Recommended)

Run both client and server concurrently:

npm run dev

This will start:

• Backend server on http://localhost:5000
• Frontend development server on http://localhost:3000

The dashboard will automatically open in your browser at http://localhost:3000.

Running Separately

Backend only:

npm run server

Frontend only:

npm run client

API Endpoints

Base URL

http://localhost:5000/api

Available Endpoints

Endpoint	Method	Description
/health	GET	Health check
/metrics/current	GET	Current real-time metrics
/metrics/historical	GET	Historical data with optional date filters
/metrics/segments	GET	User segment breakdown
/metrics/hourly	GET	Hourly data for today
/metrics/devices	GET	Device breakdown
/metrics/top-pages	GET	Top pages by traffic
/dashboard	GET	All dashboard data in one request

Query Parameters

Historical Data:

• days: Number of days (7, 30, 90)
• startDate: Start date (YYYY-MM-DD)
• endDate: End date (YYYY-MM-DD)

Segments:

• segment: Filter by segment (Free, Premium, Enterprise)

Features in Detail

Real-time Updates

The dashboard automatically fetches new data every 5 seconds, providing live insights into your analytics.

Interactive Filters

• Date Range Filter: View data for the last 7, 30, or 90 days
• Segment Filter: Filter analytics by user segment (All, Free, Premium, Enterprise)

Data Visualization

• Users & Sessions Trend: Line chart showing total users and active sessions over time
• Conversion Rate Trend: Line chart displaying conversion rate changes
• Users by Segment: Doughnut chart breaking down users by subscription tier
• Users by Device: Doughnut chart showing device distribution

CSV Export

Click the "Export to CSV" button in the header to download current filtered data as a CSV file.

Responsive Design

The dashboard is fully responsive and works seamlessly on:

• Desktop (1400px+)
• Tablet (768px - 1024px)
• Mobile (< 768px)

Sample Data

The application includes a robust sample data generator that creates realistic analytics data:

• Total Users: 8,500 - 9,500
• Active Sessions: 200 - 600
• Conversion Rate: 4.5% - 7.5%
• Revenue: $15,000 - $25,000
• Historical trends over 30 days
• User segments (Free, Premium, Enterprise)
• Device breakdown (Desktop, Mobile, Tablet)

Customization

Changing Update Interval

Edit client/src/components/Dashboard.js:

// Change 5000 (5 seconds) to your desired interval in milliseconds
setInterval(() => {
  fetchDashboardData();
}, 5000);

Modifying Sample Data

Edit server/data/sampleData.js to adjust data generation parameters.

Adding New Metrics

1. Add metric to sampleData.js
2. Create API endpoint in server.js
3. Add MetricCard in Dashboard.js

Building for Production

Build the React frontend:

npm run build

This creates an optimized production build in client/build/.

Troubleshooting

Port already in use:

• Frontend: Change port in client/package.json (default: 3000)
• Backend: Set PORT environment variable or edit server/server.js (default: 5000)

CORS errors:

• Ensure backend server is running
• Check proxy setting in client/package.json

Charts not displaying:

• Verify Chart.js is properly installed
• Check browser console for errors

License

MIT

Author

Built with React and Node.js