I built a real-time Air Quality Index monitor from scratch — AtmoPulse 🌍

Ayush Kunkulol — Sun, 14 Jun 2026 22:03:09 +0000

Hey everyone!

I'm a fullstack development learner and I just finished building one of my most ambitious projects entirely from scratch — no templates, no copied code. I'm really proud of how it turned out and would love to share it with the dev community!

It's called AtmoPulse — a real-time Air Quality Index (AQI) monitor for cities worldwide, built with a modern dark UI and interactive map.

🔗 Live Link : https://atmopulse.web.app
🔗 GitHub : https://github.com/itsAyush5/Project-9-AtmoPulse

What is AtmoPulse ?

Air quality is something most of us ignore until it becomes a problem. I wanted to build something actually useful — an app where anyone can search any city and instantly see how clean or polluted the air is, along with a detailed breakdown of what's in it.

✨ Features :

🗺️ Interactive dark map with glow-effect AQI markers (Leaflet.js)
🔍 City search with live autocomplete suggestions
📊 Detailed pollutant panel — PM2.5, PM10, O₃, NO₂, CO, SO₂ and more
🌤️ Live weather data — Temperature, Humidity, Wind, Pressure
📈 Session AQI trend chart with sparkline visualization
🔔 Custom AQI alerts with push notification support
🕘 Search history with quick re-search
👤 Google Sign-In + Email/Password authentication (Firebase)
🏭 Multi-source data — WAQI + OpenAQ APIs combined
📱 Fully responsive — works on mobile and desktop
⚡ Real-time refresh with cooldown timer

🛠️ Tech Stack

Technology Purpose
React 18 Frontend framework
Vite Build tool
Leaflet.js Interactive map
Firebase Hosting
WAQI + OpenAQ APIs Live AQI data
Google OAuth Authentication

😤 Challenges I Faced :

This is the part nobody talks about but honestly the most valuable part of building a project.

Combining two different APIs
WAQI and OpenAQ both return AQI data but in completely different formats. Getting them to work together and display consistently on the same map took a lot of trial and error. I had to write a normalization layer to map both responses into a single data structure.
Leaflet.js + React
Leaflet was originally built for vanilla JS, so integrating it cleanly into a React component lifecycle was tricky. Managing map instance references with useRef and avoiding duplicate map initialization took me a while to figure out.
Firebase Authentication
Setting up both Google Sign-In and Email/Password auth together, and then protecting certain features (like API key management) behind auth state was more complex than I expected. Learning how Firebase's onAuthStateChanged works and persisting auth state across refreshes was a big lesson.
TypeScript learning curve
Coming from JavaScript, TypeScript felt frustrating at first — especially typing API responses where the shape wasn't always predictable. But it saved me from so many bugs that I would have spent hours debugging otherwise.

💡 What I Learned :

How to work with multiple external APIs and normalize their data
Managing complex state in React with TypeScript
Firebase authentication flows and security rules
Integrating map libraries into React properly
Building a fully responsive dark UI from scratch

What's Next ?

I'm planning to add historical AQI data charts and possibly city comparison features. Would love to hear what features you'd find most useful!

Feedback Welcome!

This is one of my biggest projects so far and I'd genuinely appreciate any feedback — whether it's about the code structure, TypeScript usage, UI/UX, or anything else. Don't hold back! 🙏

🔗 Live Link : https://atmopulse.web.app
🔗 GitHub : https://github.com/itsAyush5/Project-9-AtmoPulse

DEV Community: Ayush Kunkulol

I built a real-time Air Quality Index monitor from scratch — AtmoPulse 🌍