🌍 CoviTrack - Real-Time COVID-19 Data Explorer

A modern, interactive web application for exploring real-time COVID-19 statistics from over 200 countries worldwide. Built with React, Express, and styled with premium glassmorphism UI components.

🔗 Live Features:

Real-time COVID-19 data fetching from global sources
Search and explore data by country
Interactive, modern UI with smooth animations
Responsive design for all devices
Professional loading states and animations

✨ Features

Core Features

⚡ Real-Time Data — Live COVID-19 statistics updated continuously
🌏 Global Coverage — Data for 200+ countries and regions
🔍 Country Search — Search any country and view detailed statistics
📊 Interactive Dashboard — Beautiful data visualization with charts and cards
🎨 Modern UI — Glassmorphism design with smooth animations
📱 Responsive Design — Works seamlessly on desktop, tablet, and mobile
⚙️ Loading States — Beautiful animated loading screen with blurred hero background
🎯 Interactive Elements — Hover effects, animations, and smooth transitions

Data Points

Total Cases
Active Cases
Recovered Cases
Deaths

🛠️ Tech Stack

Frontend

React ^19.2.0 — UI library
Vite ^7.2.4 — Build tool and dev server
CSS3 — Custom styling with glassmorphism, gradients, and animations

Backend

Node.js — Runtime environment
Express ^5.2.1 — Web framework
Axios ^1.13.4 — HTTP client for API calls
CORS ^2.8.6 — Cross-origin request handling
dotenv ^17.2.3 — Environment variable management

External APIs

COVID-193 RapidAPI — Real-time COVID-19 statistics

📁 Project Structure

covitrack/
├── backend/
│   └── server.js              # Express server & API routes
├── src/
│   ├── components/
│   │   ├── Hero.jsx           # Hero section with animations
│   │   ├── CountrySection.jsx # Country data search & display
│   │   ├── CountryCard.jsx    # COVID stats card component
│   │   ├── InsightsSection.jsx # Global insights & info
│   │   ├── Footer.jsx         # Site footer with credits
│   │   └── LoadingScreen.jsx  # Animated loading overlay
│   ├── styles/
│   │   ├── hero-earth.css     # Hero section styles
│   │   ├── country-section.css # Search section styles
│   │   ├── country-card.css   # Stats card styles
│   │   ├── insights-section.css # Insights section styles
│   │   ├── footer.css         # Footer styles
│   │   └── loading.css        # Loading screen styles
│   ├── App.jsx                # Main app component
│   ├── index.css              # Global styles & scrollbar
│   └── main.jsx               # React entry point
├── public/                    # Static assets
├── package.json              # Project dependencies
├── vite.config.js           # Vite configuration
└── README.md                # This file

🚀 Installation & Setup

Prerequisites

Node.js (v16 or higher)
npm or yarn package manager
RapidAPI account with COVID-193 API access

Step 1: Clone the Repository

git clone https://github.com/yourusername/covitrack.git
cd covitrack

Step 2: Install Dependencies

# Install all dependencies
npm install

Step 3: Set Up Environment Variables

Create a .env file in the root directory:

RAPID_API_KEY=your_rapidapi_key_here

To get your RapidAPI key:

Sign up at RapidAPI
Subscribe to the COVID-193 API
Copy your API key and paste it in the .env file

Step 4: Verify Setup

# Check if all dependencies are installed
npm list

🎯 Running the Application

Development Mode

Terminal 1 - Start Backend Server:

cd backend
npm install express axios cors dotenv
node server.js

Backend will run on http://localhost:5000

Terminal 2 - Start Frontend Dev Server:

npm run dev

Frontend will run on http://localhost:5173 (or similar)

Build for Production

Frontend:

npm run build

Creates optimized build in dist/ directory

Backend:

node backend/server.js

📦 Deployment

Frontend (Vercel): Deployed on Vercel. Add your Vercel project URL here (e.g. https://your-project.vercel.app). Ensure the Vercel project has the VITE_API_URL environment variable set to your backend URL.
Backend (Render): Deployed on Render — https://covitrack.onrender.com.

Note: The frontend reads the backend base URL from the VITE_API_URL environment variable. In production, set VITE_API_URL in your Vercel project to https://covitrack.onrender.com (or your Render service URL).

📡 API Documentation

Backend Endpoints

1. Health Check

GET /

Description: Verify backend is running
Response:
```
Backend is running ✅
```

2. COVID-19 Statistics

GET /covid?country=CountryName

Parameters:

country (query, optional) — Country name (default: "India")
- Example: ?country=United States, ?country=Japan

Response Success (200):

{
  "country": "India",
  "totalCases": 44543210,
  "activeCases": 1234567,
  "recovered": 42000000,
  "deaths": 524200
}

Response Error (404):

{
  "error": "Country not found"
}

Response Error (500):

{
  "error": "Failed to fetch COVID data"
}

Example Requests:

# Get India stats (default)
curl http://localhost:5000/covid

# Get specific country
curl http://localhost:5000/covid?country=Japan

# Get US stats
curl http://localhost:5000/covid?country=United%20States

🎨 Website Components

1. Hero Section

Animated background with gradient effects
Eye-catching title: "CoviTrack"
Subtitle: "Explore real-time COVID-19 data from anywhere on Earth"
Interactive "Explore Now" button with smooth scroll
Scroll indicator animation

2. Loading Screen

Full-screen overlay with fixed positioning
Blurred hero background image
Dark semi-transparent overlay for contrast
Animated loading circles with bouncing animation
Subtle pulsing title and status dots
Responsive on all screen sizes

3. Country Section

Beautiful dark gradient background with Unsplash image
Interactive search bar with glassmorphism effect
Input field for country name search
Search button with gradient and hover effects
Country data card displaying:
- Country name with "Live" badge
- 4-column stats grid (responsive)
- Total Cases, Active, Recovered, Deaths
- Color-coded stat cards with side accent bars
- Animated borders on top
- Real-time update indicator

4. Insights Section

Dark purple gradient background with floating gradient orbs
Animated grid pattern overlay for depth
Three insight cards with:
- Global Coverage info (200+ countries)
- Real-Time Updates info
- Data Interpretation info
Interactive cards with hover effects and glow
Floating animated icons in each card
Responsive grid layout

5. Footer

Premium dark aesthetic with glassmorphism
Three-column layout:
- Left: CoviTrack branding
- Center: Three feature cards with floating icons
  - ⚡ Real-time data
  - 🌍 200+ countries
  - 🔄 Live updates
- Right: Made with ♥ by Angela Bera credit
Interactive hover effects on feature cards
Animated heartbeat effect
Gradient accent line at bottom
Copyright notice
Responsive stacked layout on mobile

🌟 UI Highlights

Design Features

Glassmorphism — Frosted glass effect with backdrop blur
Smooth Animations — All transitions are buttery smooth
Gradient Backgrounds — Modern multi-layer gradients
Glow Effects — Subtle shadows and glows for depth
Color Palette:
- Primary: Cyan (#38bdf8), Purple (#8b5cf6)
- Accent: Green (Scrollbar), Red (Heart)
- Dark theme: Navy/Dark Blue backgrounds

Interactive Elements

Animated Scrollbar — Sea-green glowing scrollbar with hover effects
Search Bar — Glassmorphic input with focus states
Buttons — Gradient backgrounds with transform hover effects
Cards — Lift animation on hover with glow
Loading Animation — Bouncing circles with pulsing effects
Hero Title — Clickable with animation trigger

Responsive Design

Mobile-first approach
Breakpoints: 768px, 900px, 1100px
Flexible grid layouts
Touch-friendly interactive elements
Optimized typography sizes

🔧 Customization

Change API Source

Edit backend/server.js:

const response = await axios.get(
  "https://covid-193.p.rapidapi.com/statistics", // Change this URL
  {
    headers: {
      "X-RapidAPI-Key": process.env.RAPID_API_KEY,
      "X-RapidAPI-Host": "covid-193.p.rapidapi.com",
    },
  }
);

Modify Colors

Edit color values in CSS files:

Primary gradient: #38bdf8 to #8b5cf6
Scrollbar: #20c997 to #10b981
Backgrounds: Adjust gradient stops

Update Backgrounds

Country Section: Edit URL in src/styles/country-section.css
Insights Section: Edit URL in src/styles/insights-section.css

📸 Features Showcase

Real-Time Data

Live COVID-19 statistics for any country
Automatically refreshes data on app load
Case-insensitive country search

Beautiful UI/UX

Smooth page transitions
Animated loading states
Interactive hover effects
Professional color scheme
Optimized typography

Performance

Fast API responses (with caching potential)
Optimized React components
Vite's lightning-fast HMR (Hot Module Replacement)
Minimal bundle size

🐛 Troubleshooting

Backend won't start

# Check Node.js version
node --version

# Make sure dependencies are installed
cd backend
npm install

# Check if port 5000 is in use
# Change PORT in server.js if needed

API Key error

Verify .env file exists in root directory
Check API key is correctly copied
Ensure API key is valid and has access to COVID-193 endpoint

CORS errors

Backend has CORS enabled by default
If issues persist, check cors() in server.js

Frontend not connecting to backend

Ensure backend is running on http://localhost:5000
Check browser console for network errors
Verify no firewall blocking requests

📚 Resources

React Documentation
Express.js Guide
Vite Documentation
COVID-193 API Docs
CSS Tricks — For glassmorphism and animations

👤 Author

Made with ❤️ by Angela Bera

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
backend		backend
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

angelabera/CoviTrack

Folders and files

Latest commit

History

Repository files navigation