BreatheEasy is an open-source project that helps you monitor air quality in your area, understand pollutant levels, and take informed actions for better health. It lets you search and explore real-time air quality data from any city around the world. Featuring a live AQI dashboard, interactive maps, and detailed pollutant breakdowns, it offers tailored health guidance and community-level improvement suggestions. With dark/light mode support and a mobile-friendly UI, BreatheEasy makes understanding air quality simple, informative, and accessible.
Before contributing, please follow these guidelines:
- Fork this repository and clone it to your machine.
- Create a new branch for your feature/fix.
- Describe the issue properly in your PR and reference the issue number.
- Follow the existing code style and test your changes.
- Update documentation if you add new features.
- One feature per PR and be respectful to other contributors.
- Live AQI Dashboard: See the current Air Quality Index for your location.
- Explore AQI Page: Search for any city and view its AQI, primary pollutant, last updated time, and detailed pollutant concentrations (PM2.5, PM10, O₃, NO₂, SO₂, CO).
- Interactive Map: Visualize AQI data on a map centered on the searched location (requires Stadia Maps API key).
- Dark/Light Mode Toggle: Easily switch between dark and light themes from the navbar.
- Health Suggestions: Get tailored health advice and precautions based on AQI.
- Improvement Measures: Learn how you and your community can help improve air quality.
- 7-Day Forecast: Visualize upcoming air quality trends with interactive charts.
- Responsive UI: Built with React, Tailwind CSS, and Chart.js for a modern, mobile-friendly experience.
| Avatar | Username | Commits | Additions | Deletions | GitHub |
|---|---|---|---|---|---|
 |
NirvikD | 10 | 772 | 183 | @NirvikD |
 |
gaurav123-4 | 3 | 723 | 43 | @gaurav123-4 |
 |
Mohamed-Fiyaz | 3 | 472 | 179 | @Mohamed-Fiyaz |
 |
deepanshu-prajapati01 | 5 | 312 | 151 | @deepanshu-prajapati01 |
 |
Kashish23092004 | 4 | 295 | 256 | @Kashish23092004 |
 |
PROJITAKAR | 1 | 236 | 19 | @PROJITAKAR |
 |
RAGHU1242 | 2 | 181 | 108 | @RAGHU1242 |
 |
shubhranshu-sahu | 1 | 130 | 0 | @shubhranshu-sahu |
 |
ShubhamDidharia | 1 | 47 | 1 | @ShubhamDidharia |
 |
harsimrankaur15 | 3 | 42 | 1 | @harsimrankaur15 |
 |
Tanyasharma71 | 1 | 21 | 0 | @Tanyasharma71 |
 |
riya751885 | 1 | 3 | 0 | @riya751885 |
 |
vinitjain2005 | 1 | 1 | 1 | @vinitjain2005 |
 |
modi-meet | 1 | 2 | 0 | @modi-meet |
| Avatar | Username | Commits | Lines Added | Lines Deleted | GitHub |
|---|---|---|---|---|---|
 |
prasoonk1204 | 9 | 2,202 | 1,121 | @prasoonk1204 |
.
├── client/ # React frontend
├── server/ # Node.js + Express backend
├── README.md
└── ...
git clone https://github.com/prasoonk1204/BreatheEasy.git
cd BreatheEasycd client
npm install
# or
yarn installCopy .example.env to .env:
cp .example.env .envEdit .env and add your API keys:
VITE_WAQI_API_KEY=your_waqi_api_key_here
VITE_STADIAMAPS_API_KEY=your_stadiamaps_api_key_here
- WAQI API Key: Get your key here.
- Stadia Maps API Key:
- Go to Stadia Maps.
- Sign up for a free account (no credit card required for the free tier).
- In your dashboard, go to "Manage Properties" → "Authentication Configuration" to generate/view your API key.
- Copy and paste it as
VITE_STADIAMAPS_API_KEYin your.envfile.
npm run dev
# or
yarn devOpen http://localhost:5173 in your browser.
cd ../server
npm install
# or
yarn installStart the backend server:
npm start
# or
yarn startThe backend will run on http://localhost:3000 by default.
- React + Vite (Frontend)
- Tailwind CSS (Frontend)
- Chart.js (Frontend)
- Node.js + Express (Backend)
- WAQI API (AQI Data)
- Stadia Maps (Map tiles)
- Questions? Open an issue with the
questionlabel - Bug Reports: Use the
buglabel when creating issues - Feature Requests: Use the
featurelabel
This project is open-source and available under the MIT License.
Happy Contributing! 🎉