omarezzine01 / cityaq

Angular PWA to compare simple air quality data for different cities, using the OpenAQ API

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.