Air Quality Measure

Inspiration

I was inspired to build this app after I noticed that each time I travelled out of Lagos once I get in, my eyes begin to water. I realized that while we often talk about outdoor air quality, most people don't have a simple, instant way to check the air right where they are. I wanted to create a tool that was fast, easy to understand, and could help people make immediate, healthy decisions for themselves and their families.

What it does

Air Quality Monitor is a progressive web app that gives people instant, real-time air quality data for their specific location. It is fast, easy to understand, and could help people make immediate, healthy decisions for themselves and their families.

How we built it

This is a modern, responsive, and installable Progressive Web App (PWA) designed to provide real-time air quality information. Here's a breakdown of the technology and architecture: Language: TypeScript The application is written in TypeScript, a superset of JavaScript that adds static typing. This helps catch errors early during development and makes the code more robust and easier to maintain, especially when dealing with structured data from an API. UI Framework: React The user interface is built using React. It follows a component-based architecture, breaking the UI into smaller, reusable pieces like Header, AQIDisplay, and DetailsCard. This makes the code organized and scalable. We use React Hooks (useState, useCallback) for managing the application's state, such as loading status, errors, and the air quality data itself. Styling: Tailwind CSS The app is styled using Tailwind CSS, a utility-first CSS framework. Instead of writing custom CSS files, we apply pre-existing classes directly in the HTML markup. This allows for rapid UI development and ensures a consistent design system. The dark, modern aesthetic is achieved with Tailwind's color palette and layout utilities. Key Technologies & APIs AI Engine: Google Gemini API This is the core of the application's functionality. The geminiService.ts file communicates with the Google Gemini API (gemini-2.5-flash model). When you request the air quality, the app: Gets your geographic coordinates. Sends a detailed prompt to the Gemini API, asking it to analyze the air quality for that location. Crucially, it provides a specific JSON schema in the request. This instructs Gemini to return the data in a predictable, structured format, which the app can then easily parse and display. Location Services: Geolocation API To get location-specific data, the app uses the browser's built-in navigator.geolocation API. This prompts you for permission to access your location, which is then used in the query to the Gemini API. Progressive Web App (PWA) Features The application is designed to be a PWA, offering a more native-app-like experience. Offline Capability: Service Worker A Service Worker (sw.js) is used to cache the main application assets (like the HTML, icons, and CSS framework). This means that after your first visit, the app will load much faster and can even be opened when you're offline. It uses a "cache, falling back to network" strategy to ensure you get the latest content when available but still have a usable app without an internet connection. Installable: Web App Manifest The manifest.json file provides metadata about the application. On supported browsers, this allows you to "Install" or "Add to Home Screen," making it function like a standalone app on your phone or desktop. In summary, it's a lightweight but powerful web application that combines the modern frontend tooling of React and TypeScript with the intelligence of the Google Gemini API and the reliability of PWA features to deliver a seamless and useful experience.

Challenges we ran into

I couldnt locate the package json to locate keystore because the app was not built with one as a result wasted time looking but prompted AI studio and cloud code assist which helped out.I also had difficulty in identifying my local host which i resolved by running npx serve on my terminal.I also had a issue with restricting the API which when I did my app throws out an I think I was restricting the wrong url

Accomplishments that we're proud of

We could produce something simple and useful to use for all ages that can keep our families safe.

What we learned

We learnt the power of AI studio, Gemini the ease it helps to accomplish complex things and create solutions in few minutes

What's next for Air Quality Measure

It will be deployed into Andriod Studio so I can build an android app and get on Google play store.

Built With

• app
• css
• geolocationapi
• googlegeminiapi
• progressive
• webb