[PS]
All work
Consumer / Environmental Tech

Rainmatter Air

Know the air you're breathing.

Manifest V3Vanilla JavaScriptChrome Extension APIsOpenAQ APIOAQ API

Project brief

The product bet, stated plainly.

Moved live air-quality context into the browser toolbar and current page without accounts, analytics, or remote key storage.

Hiring signal

Senior ownership across product framing, execution scope, and shipped interface quality.

Engineering read

Focus on constraints, architecture bets, external systems, and data-flow decisions.

Role
Chrome extension architecture, privacy model, AQI calculation, popup UI, and browser smoke testing
Scope
Popup dashboard, settings, background refresh, API normalization, CPCB AQI categories, and page overlay
Core constraint
The extension needed useful live data while keeping credentials local and working gracefully offline.
Technical bet
A small Manifest V3 extension could make AQI awareness more habitual than another standalone dashboard.
Drag to scrub
Rainmatter Air popup showing AQI gauge and pollutant readings
Compact AQI overlay badge on a webpage
Page overlay
Settings page for configuring API endpoint, provider, and location
Settings page
Rainmatter Air popup showing AQI gauge and pollutant readings
Compact AQI overlay badge on a webpage
Page overlay
Settings page for configuring API endpoint, provider, and location
Settings page
Rainmatter Air popup showing AQI gauge and pollutant readings
Compact AQI overlay badge on a webpage
Page overlay
Settings page for configuring API endpoint, provider, and location
Settings page

Overview

A free, open-source Chrome extension that keeps live air quality data one click away, built for Indian cities on top of OpenAQ and Rainmatter's own OAQ platform.

Problem

Air quality data that matters for day-to-day decisions — should I run outside today — is scattered across dashboards nobody checks. It needed to live somewhere people already look: the browser toolbar.

Approach

I built it privacy-first from the frontend up: the API key never leaves the user's device, there's no tracking or analytics, and the extension still shows the last good reading when offline instead of failing silently.

Project method

Detailed process

Requirements

The extension had to keep air-quality data close to where people already spend time: the browser toolbar and current page. Requirements included a popup dashboard, settings page, background refresh, optional overlay, CPCB AQI categories for India, configurable providers, and a privacy model where API keys stay on-device.

Stack choices

A Manifest V3 Chrome extension with vanilla JavaScript was chosen to avoid a runtime build dependency and keep the package self-contained. The background service worker handles scheduled fetch and cache, the popup reads the latest snapshot, the options page validates API configuration, and the content script displays the overlay.

Design system

The design system was deliberately compact and utility-focused: a small popup, direct pollutant breakdown, clear AQI category language, masked settings values, and minimal overlay chrome. That suited a browser extension better than a heavier app-style interface.

MVP definition

The MVP was the full private loop: save settings locally, fetch OpenAQ or OAQ data, normalize measurements, derive indicative AQI when needed, cache the last good snapshot, and render the result in both popup and overlay. Analytics, accounts, and remote sync were intentionally excluded.

Progression

Development started with the air-quality normalization library and CPCB breakpoint tests, then expanded into settings validation, background alarms, popup rendering, and overlay behavior. Browser smoke tests were added to verify the MV3 service worker, local-only credential storage, masked settings, and packaged extension output.

Conclusion

Solution

A toolbar popup with a live AQI gauge and pollutant breakdown (PM2.5, PM10, NO₂, SO₂, CO, O₃), CPCB AQI categories for Indian cities, dual API support so it works with OpenAQ or OAQ, and an optional on-page overlay badge for at-a-glance readings anywhere on the web.

Proof list

Highlights

04 signals
  • 01CPCB AQI breakpoints for accurate India-specific readings
  • 02Dual data-source support (OpenAQ v3 and OAQ) switchable in settings
  • 03On-page overlay badge — AQI visible without opening the popup
  • 04Fully private: API key stored on-device only, zero analytics

Product screenshots

Open channel

Need a sharper frontend path?

Architecture, AI workflows, design systems, and interfaces that need to hold up after launch.