Global Disease Tracker 🌍

A modern, interactive dashboard for tracking multiple global diseases including COVID-19, Influenza, Mpox, Malaria, and Dengue. Built with React 19, TypeScript, and real-time data integration.

🚀 Live Demo

Production URL: https://global-disease-tracker-ws0794eak-pranoybasus-projects.vercel.app

View the live application deployed on Vercel with automatic HTTPS, CDN distribution, and global edge network.

✨ Features

Multi-Disease Support

• COVID-19: Real-time data from disease.sh API
• Influenza: Mock data with realistic patterns
• Mpox: Simulated outbreak tracking
• Malaria: Endemic disease monitoring
• Dengue: Seasonal outbreak data

Interactive Visualizations

• 🗺️ Interactive Leaflet Map with disease-specific markers
• 📊 Real-time Statistics with animated stat cards
• 🎨 Disease-Specific Color Schemes for visual clarity
• 🔄 Smooth Animations using Framer Motion
• 📱 Responsive Design for mobile, tablet, and desktop

Advanced Features

• Momentum Tracking: 24-hour, 3-day, and 7-day case trends
• Population Normalization: Per-million population metrics
• Projected Cases: AI-powered case projections
• Multiple Map Styles: Light, color, and dark themes
• Logarithmic/Linear Scaling: Flexible data visualization
• Collapsible Control Panel: Clean, organized interface
• Detailed Statistics Pages: In-depth analysis with charts and tables
• Multi-Format Export: Export data as PDF, PNG, CSV, or JSON
• Advanced Filtering: Search, sort, and filter country data
• Interactive Charts: Bar, line, and area charts with Recharts
• Shareable URLs: Copy links to specific disease metrics

🏗️ Architecture

Technology Stack

Category	Technology	Version	Purpose
Framework	React	19	UI library with concurrent features
Language	TypeScript	5.9	Type-safe development
Build Tool	Vite	7.1	Fast HMR and optimized builds
Styling	Tailwind CSS	v4	Utility-first CSS with custom theme
UI Components	Shadcn/ui	Latest	Accessible Radix UI components
State Management	Zustand	5.0	Client state with localStorage
Server State	TanStack Query	5.90	Data fetching and caching
Animations	Framer Motion	12.23	Declarative animations
Maps	Leaflet + React-Leaflet	1.9.4 / 5.0.0	Interactive mapping
HTTP Client	Axios	1.13	API requests with retry logic
Routing	React Router	7.9	Client-side routing
Charts	Recharts	2.15	Composable charting library
PDF Export	jsPDF	2.5	PDF document generation
Image Export	html2canvas	1.4	DOM to canvas conversion
Notifications	Sonner	1.7	Toast notifications
Testing	Vitest	4.0.6	Unit testing framework
Icons	Lucide React	0.552.0	Beautiful icon library

Project Structure

global-disease-tracker/
├── src/
│   ├── components/           # React components
│   │   ├── ui/              # Shadcn UI components
│   │   │   ├── card.tsx
│   │   │   ├── select.tsx
│   │   │   ├── toggle.tsx
│   │   │   ├── slider.tsx
│   │   │   ├── skeleton.tsx
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   ├── table.tsx
│   │   │   ├── dialog.tsx
│   │   │   └── tabs.tsx
│   │   ├── DiseaseMap.tsx                # Interactive Leaflet map
│   │   ├── DiseaseStatsCard.tsx          # Animated statistics cards
│   │   ├── DiseaseSelector.tsx           # Disease selection dropdown
│   │   ├── CollapsibleControlPanel.tsx   # Collapsible sidebar
│   │   ├── CountryDataTable.tsx          # Sortable data table
│   │   ├── CountryComparisonChart.tsx    # Bar/Line/Area charts
│   │   ├── MetricDistributionChart.tsx   # Pie/Donut charts
│   │   ├── ExportModal.tsx               # Multi-format export dialog
│   │   └── ErrorBoundary.tsx             # Error handling component
│   │
│   ├── pages/               # Route pages
│   │   └── DetailedStatsPage.tsx   # Detailed statistics view
│   │
│   ├── config/              # Configuration files
│   │   ├── diseases.ts      # Disease metadata and color schemes
│   │   └── routes.tsx       # React Router configuration
│   │
│   ├── services/            # Business logic and APIs
│   │   ├── api/
│   │   │   ├── diseaseApi.ts      # Unified disease API (Adapter Pattern)
│   │   │   ├── covidApi.ts        # COVID-19 API integration
│   │   │   ├── apiClient.ts       # Axios client with retry logic
│   │   │   └── queryClient.ts     # TanStack Query configuration
│   │   │
│   │   ├── algorithms/
│   │   │   ├── momentumCalculations.ts   # Trend calculations
│   │   │   ├── containmentScore.ts       # Disease metrics
│   │   │   └── __tests__/                # Algorithm tests
│   │   │
│   │   └── mockData/
│   │       ├── influenzaMockData.ts
│   │       ├── mpoxMockData.ts
│   │       ├── malariaMockData.ts
│   │       └── dengueMockData.ts
│   │
│   ├── store/               # State management
│   │   └── appStore.ts      # Zustand store with persistence
│   │
│   ├── types/               # TypeScript definitions
│   │   └── index.ts         # Shared type definitions
│   │
│   ├── test/                # Test utilities
│   │   └── setup.ts         # Vitest configuration
│   │
│   ├── App.tsx              # Main application component
│   ├── main.tsx             # Application entry point
│   └── index.css            # Global styles and Tailwind imports
│
├── public/                  # Static assets
├── docs/                    # Documentation
│   ├── API_INTEGRATION.md   # API integration guide
│   └── DISEASE_DATA_SOURCES.md  # Data source documentation
│
├── package.json
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite configuration
├── tailwind.config.js       # Tailwind CSS configuration
├── postcss.config.js        # PostCSS configuration
└── vitest.config.ts         # Vitest test configuration

Key Design Patterns

1. Adapter Pattern (Core Architecture)

The application uses an adapter pattern to abstract data sources, allowing seamless switching between real APIs and mock data:

// Unified API interface
export function useDiseaseData(disease: Disease) {
  return useQuery({
    queryKey: ['disease', disease],
    queryFn: async () => {
      // Adapter selects appropriate data source
      if (disease === 'covid19') {
        return await fetchCovidData(); // Real API
      } else {
        return generateMockData(disease); // Mock data
      }
    }
  });
}

Benefits:

• Easy to add new diseases
• Simple migration from mock to real data
• Consistent data structure across all diseases
• Testable with mock data

2. Component Composition

Reusable, composable components for maintainability:

<DiseaseStatsCard
  title="Total Cases"
  value={globalStats?.cases || 0}
  icon={Activity}
  disease={selectedDisease}
/>

3. Type-Safe Configuration

Disease configurations use const assertions for type safety:

export const diseaseConfigs = {
  covid19: {
    name: 'COVID-19',
    colors: { primary: 'rgb(239, 68, 68)', ... },
    icon: Activity,
    // ...
  }
} as const;

export type Disease = keyof typeof diseaseConfigs;

4. State Management Strategy

• Zustand: Client state (disease selection, preferences) with localStorage persistence
• TanStack Query: Server state (API data) with automatic caching and revalidation
• React State: Component-local UI state (form controls, toggles)

5. Error Boundaries

Graceful error handling at multiple levels:

• Top-level boundary in main.tsx
• Component-level boundaries around critical sections (map, charts)
• Custom fallback UIs that maintain layout integrity

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm/yarn
• Modern browser with ES2022 support

Installation

# Clone the repository
git clone https://github.com/yourusername/global-disease-tracker.git
cd global-disease-tracker

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:5173

Building for Production

# Create optimized production build
npm run build

# Preview production build
npm run preview

📖 Usage Guide

Navigation

Main Dashboard

The homepage (/) displays:

• Interactive world map with disease markers
• Global statistics cards (Total Cases, Deaths, Recovered, Active)
• Top 10 affected countries
• Disease selector and control panel

Detailed Statistics Pages

Click any statistic card to navigate to detailed analysis:

• Route pattern: /stats/:disease/:metric
• Example: /stats/covid19/total-cases
• Features: Charts, tables, filters, and export options

Switching Diseases

Use the disease selector dropdown in the collapsible control panel to switch between different diseases. The entire UI updates with disease-specific colors and data.

Map Controls

• Display Mode: Choose between cumulative cases or momentum (24h, 3-day, 7-day trends)
• Map Style: Switch between light, color, and dark map themes
• Population Normalized: View cases per million population
• Marker Size: Adjust the size of disease markers on the map

Detailed Statistics Features

Interactive Charts

• Country Comparison Chart:

  • View top 10 countries by metric
  • Switch between Bar, Line, and Area chart types
  • Responsive sizing for all devices
  • Hover tooltips with detailed data

• Metric Distribution Chart:

  • Continental breakdown with Pie or Donut charts
  • Percentage and absolute values
  • Color-coded by continent

Data Table

• Search: Filter countries by name
• Sort: Click column headers to sort ascending/descending
• Filter by Continent: Dropdown to filter specific regions
• Pagination: Navigate through large datasets (10/25/50/100 rows per page)
• Responsive: Optimized for mobile and desktop viewing

Export & Sharing

Export Formats

Click the "Export" button on any detailed stats page to access export options:

1. PDF Export 📄

   • Professional document with charts and tables
   • Includes metadata (disease, metric, timestamp)
   • Automatically formatted and sized
   • Use case: Reports, presentations, documentation

2. PNG Export 🖼️

   • High-resolution image (2x scale)
   • Captures entire page including charts
   • Perfect for social media or quick sharing
   • Use case: Screenshots, visual sharing

3. CSV Export 📊

   • Spreadsheet-compatible format
   • Headers: Country, Continent, Value
   • Easy import into Excel, Google Sheets
   • Use case: Data analysis, further processing

4. JSON Export 💾

   • Structured data format
   • Includes metadata and full dataset
   • Programmatic access and integration
   • Use case: APIs, data pipelines, custom analysis

5. Share Link 🔗

   • Copies current page URL to clipboard
   • Shareable with colleagues and teams
   • Preserves disease and metric selection
   • Use case: Collaboration, bookmarking

Export File Naming

Files are automatically named with the pattern:

{disease}-{metric}-{timestamp}.{extension}

Example: covid19-total-cases-2025-01-04.pdf

Interpreting Data

• Markers on Map: Size proportional to case count (or normalized rate)
• Stat Cards: Show total cases, deaths, recoveries, and active cases with 7-day trends
• Top 10 Countries: Ranked by active cases (descending order)
• Chart Colors: Disease-specific theming for visual consistency

🧪 Testing

# Run unit tests
npm run test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

Current test coverage includes:

• Algorithm correctness (momentum, containment scores)
• Component rendering
• API integration logic

📚 Documentation

• API Integration Guide - How to add real disease APIs
• Disease Data Sources - Available data sources for each disease

🎨 Customization

Adding a New Disease

1. Update Type Definition in src/types/index.ts
2. Add Configuration in src/config/diseases.ts
3. Create Mock Data Generator in src/services/mockData/
4. Update API Adapter in src/services/api/diseaseApi.ts
5. Add Tailwind Colors in tailwind.config.js

See API_INTEGRATION.md for detailed instructions.

Customizing Colors

Disease-specific colors are defined in src/config/diseases.ts:

colors: {
  primary: 'rgb(239, 68, 68)',    // Main theme color
  secondary: 'rgb(254, 202, 202)', // Accent color
  bg: 'bg-red-50',                 // Background class
  text: 'text-red-700',            // Text color class
  border: 'border-red-200'         // Border color class
}

🔧 Configuration

Environment Variables

Create a .env file for API configuration:

VITE_COVID_API_URL=https://disease.sh/v3/covid-19
VITE_ENABLE_MOCK_DATA=false
VITE_API_RETRY_ATTEMPTS=3

TypeScript Configuration

The project uses strict TypeScript settings:

• strict: true
• verbatimModuleSyntax: true
• erasableSyntaxOnly: true

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Code Style

• Use TypeScript for all new code
• Follow ESLint rules (run npm run lint)
• Write tests for new features
• Use meaningful commit messages

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• disease.sh - COVID-19 data API
• Shadcn/ui - Beautiful UI components
• Leaflet - Interactive mapping library
• Tailwind CSS - Utility-first CSS framework
• TanStack Query - Powerful data synchronization

📧 Contact

For questions or support, please open an issue on GitHub.

---

Built with ❤️ using React, TypeScript, and modern web technologies