cityAQ

Background

Angular PWA to compare simple air quality data for different cities, using the OpenAQ API. A quick, mobile-first reference for current air quality information around the world, with native-like ease of use & offline availability.

• Strongly typed OpenAQ API implementation using TypeScript
• Service Workers for moderate offline usage & adherence to PWA guidelines (users prompted to install web app on Android browsers)
• Angular Material for UI components
• Google Static Maps API for location images
• Modularized Sass for styling

Check out the introduction video created for OpenAQ workshops in Accra & Nairobi. A more tech-focused presentation was given at MilwaukeeJS.

Running Locally

Install

• Node.js & npm (link)

Run

npm install -g @angular/cli
git clone https://github.com/jackkoppa/cityaq.git
cd cityaq
npm install
ng serve

Livereloading dev server now available at http://localhost:4200/

Run w/ Service Worker

Since the Angular ServiceWorkerModule cannot be tested using the normal Webpack dev server, run the steps above, but instead of ng serve, run npm run sw-serve

Server now available at http://localhost:8080/, without livereload

Contributors

Big thanks to RobertImbrie & hegotgame for their help in getting the project started @ Rokkincat's Hack & Tell on Oct. 21, 2017.