Analytics Dashboard - React

A modern, responsive analytics dashboard built with React, TypeScript, and Chart.js. Features real-time data visualization, interactive charts, and a clean, professional UI.

Features

• Interactive data visualizations with Chart.js
• Real-time data updates
• Responsive design for all devices
• Multiple chart types (Line, Bar, Pie, Doughnut)
• Advanced filtering and date range selection
• Export data to CSV/PDF
• Dark mode support
• TypeScript for type safety
• REST API integration
• Performance optimized with React hooks

Tech Stack

• Framework: React 18 with TypeScript
• Charts: Chart.js & React-Chartjs-2
• Styling: Tailwind CSS
• State Management: React Context API
• HTTP Client: Axios
• Date Handling: date-fns
• Icons: React Icons
• Build Tool: Vite

Prerequisites

• Node.js >= 16.x
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/simonbrizuela/analytics-dashboard-react.git
cd analytics-dashboard-react

# Install dependencies
npm install

# Start development server
npm run dev

Environment Variables

Create a .env file in the root directory:

VITE_API_URL=http://localhost:3000/api
VITE_APP_TITLE=Analytics Dashboard
VITE_ENABLE_MOCK_DATA=true

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
npm run type-check   # TypeScript type checking

Project Structure

analytics-dashboard-react/
├── src/
│   ├── components/
│   │   ├── charts/
│   │   │   ├── LineChart.tsx
│   │   │   ├── BarChart.tsx
│   │   │   ├── PieChart.tsx
│   │   │   └── DoughnutChart.tsx
│   │   ├── dashboard/
│   │   │   ├── Dashboard.tsx
│   │   │   ├── StatCard.tsx
│   │   │   └── DateRangePicker.tsx
│   │   ├── layout/
│   │   │   ├── Header.tsx
│   │   │   ├── Sidebar.tsx
│   │   │   └── Footer.tsx
│   │   └── common/
│   │       ├── Button.tsx
│   │       ├── Card.tsx
│   │       └── Loading.tsx
│   ├── context/
│   │   ├── ThemeContext.tsx
│   │   └── DataContext.tsx
│   ├── services/
│   │   ├── api.ts
│   │   └── mockData.ts
│   ├── types/
│   │   └── index.ts
│   ├── utils/
│   │   ├── formatters.ts
│   │   ├── exportData.ts
│   │   └── constants.ts
│   ├── hooks/
│   │   ├── useAnalytics.ts
│   │   └── useTheme.ts
│   ├── App.tsx
│   └── main.tsx
├── public/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js

Features Overview

Dashboard Metrics

• Total Revenue
• Active Users
• Conversion Rate
• Average Order Value
• Sales trends over time
• User growth analytics
• Geographic distribution

Charts Available

1. Line Chart - Revenue and sales trends
2. Bar Chart - Monthly comparisons
3. Pie Chart - Category distribution
4. Doughnut Chart - User segments

Filters

• Date range selection (Last 7 days, 30 days, 90 days, Custom)
• Category filtering
• Status filtering
• Search functionality

API Integration

The dashboard connects to a REST API for data:

// Example API endpoints
GET /api/analytics/overview
GET /api/analytics/revenue?startDate=2024-01-01&endDate=2024-12-31
GET /api/analytics/users
GET /api/analytics/conversions

Usage Example

import { Dashboard } from './components/dashboard/Dashboard';
import { ThemeProvider } from './context/ThemeContext';

function App() {
  return (
    <ThemeProvider>
      <Dashboard />
    </ThemeProvider>
  );
}

Customization

Theme Colors

Edit tailwind.config.js to customize colors:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#8b5cf6',
        success: '#10b981',
        warning: '#f59e0b',
        danger: '#ef4444'
      }
    }
  }
}

Chart Configuration

Customize chart options in src/utils/constants.ts:

export const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'top'
    }
  }
};

Performance Optimization

• Code splitting with React.lazy
• Memoization with useMemo and useCallback
• Virtualization for large datasets
• Debounced search and filters
• Optimized re-renders

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Screenshots

The dashboard includes:

• Clean, professional interface
• Responsive grid layout
• Interactive hover effects
• Smooth animations
• Accessible color schemes

License

MIT License

Author

Simon Brizuela

• GitHub: @simonbrizuela
• Email: simonbrizuela08@gmail.com

Contributing

Pull requests are welcome. For major changes, please open an issue first.