Covid-19 India tracker
A comprehensive React-based dashboard to track current and historical COVID-19 data for India and its states and union territories with interactive visualizations.
Project Overview
Covid-19 India tracker is a comprehensive web application that provides real-time and historical COVID-19 statistics for India. Built with React and featuring an interactive map, the application allows users to hover over any state or union territory to view detailed statistics. The platform includes dark mode support, sortable data tables, and rich data visualizations using Chart.js. With customizable time spans and state-wise data filtering, it became an essential tool for tracking the pandemic's progress across India.
Key Metrics & Achievements
Technology Stack
Technologies and tools used to bring this project to life
Frontend
React
JavaScript
Material-UI
Chart.js
D3.js
React Simple Maps
Backend
Axios
Node.js
Cloud & Hosting
Vercel
Key Features
Interactive Map Visualization
Hover over any state or union territory to view real-time COVID-19 statistics with visual representation across Indian states
Dark Mode Support
Toggle between light and dark themes for better user experience and reduced eye strain
Historical Data Visualization
Interactive charts displaying daily or cumulative data with customizable time spans (1 month, 3 months, or all data)
Sortable Data Table
Comprehensive table view with sortable columns for easy comparison between different states and union territories
Challenges & Solutions
Challenges
Handling large datasets efficiently while maintaining smooth user interactions
Creating responsive visualizations that work across different screen sizes and devices
Implementing real-time data updates without overwhelming the COVID-19 India API
Designing intuitive map interactions for both desktop and mobile users
Optimizing chart rendering performance for historical data visualization
Solutions
Implemented data caching and pagination strategies to manage large datasets efficiently
Used responsive design principles with Material-UI components and CSS Grid for optimal mobile experience
Built intelligent API polling system with rate limiting and error handling for reliable data updates
Created touch-friendly map interactions with hover states and click handlers for mobile devices
Optimized Chart.js configuration with lazy loading and data sampling for smooth chart animations