A modern, real-time COVID-19 statistics tracker built with React 18, Vite, and Material-UI (MUI) v5.
- Real-time COVID-19 data from Disease.sh API
- Interactive dashboard with statistics cards
- Country-wise data table with sorting
- Dynamic charts showing case trends over time
- Responsive design for all devices
- Modern UI/UX with Material-UI components
- Fast development with Vite hot reload
- React 18 - Latest React with concurrent features
- Vite - Ultra-fast build tool and dev server
- Material-UI (MUI) v5 - Modern React component library
- Emotion - CSS-in-JS styling
- Chart.js v4 - Beautiful interactive charts
- Numeral.js - Number formatting
- Vitest - Fast unit testing
- TypeScript support - Type definitions included
- ES Modules - Modern JavaScript module system
-
Clone the repository
git clone https://github.com/your-username/covid19-tracker.git cd covid19-tracker -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:3000
| Script | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build production-ready app |
npm run preview |
Preview production build locally |
npm run test |
Run unit tests with Vitest |
npm run test:ui |
Run tests with UI interface |
This app uses the Disease.sh API which provides:
- Real-time global COVID-19 statistics
- Country-wise data breakdown
- Historical data for trend analysis
- Reliable and frequently updated dataset
covid19-tracker/
├── src/
│ ├── components/
│ │ ├── App.jsx # Main application component
│ │ ├── InfoBox.jsx # Statistics display cards
│ │ ├── LineGraph.jsx # Chart component
│ │ ├── Table.jsx # Country data table
│ │ ├── Map.jsx # Map placeholder
│ │ └── utils.js # Utility functions
│ ├── styles/
│ │ ├── App.css # Main application styles
│ │ ├── Table.css # Table-specific styles
│ │ └── index.css # Global styles
│ └── main.jsx # Application entry point
├── public/ # Static assets
├── vite.config.js # Vite configuration
└── package.json # Dependencies and scripts
- Real-time statistics cards showing cases, recoveries, and deaths
- Hover effects and smooth animations
- Color-coded indicators for different data types
- Line chart showing daily new cases trend
- Interactive tooltips with formatted numbers
- Responsive chart sizing for all devices
- Sortable table with all country statistics
- Scrollable interface for large datasets
- Search and filter capabilities (coming soon)
- Mobile-first approach
- Optimized for tablets and desktops
- Touch-friendly interface elements
Make sure you have Node.js 16+ installed:
node --version # Should be 16+
npm --version # Should be 8+- Use JSX file extensions for React components
- Follow ES6+ modern JavaScript syntax
- Implement proper error handling
- Add comments for complex logic
Run tests to ensure code quality:
npm run test # Run all tests
npm run test:ui # Interactive test UInpm run buildThis creates a dist folder with optimized production files.
- Vercel: Perfect for React apps with automatic deployments
- Netlify: Static site hosting with continuous deployment
- GitHub Pages: Free hosting for public repositories
- AWS S3: Scalable cloud hosting solution
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Disease.sh for providing the COVID-19 data API
- Material-UI for the beautiful component library
- Chart.js for the charting capabilities
- Vite for the amazing development experience
If you have any questions or need help with setup, please open an issue on GitHub.
Stay Safe! 😷 Keep tracking, keep healthy!