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

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