REAL-TIME AQI BOARD APP

Content

This project is to build an AQI information display board and provide the function of searching AQI information all around the world.

The tasks are:

Consume an API from the community and retrieve the AQI data for local and cities being searched.
Get the nearest station close to the user location, based on the IP adress information. Display the local monitoring station, measurement time infomration, real-time AQI and webpage associated to the the monitoring station.
Get the real-time AQI for the searched station, diplay the name of the city, time and AQI.
Diplay all names and AQI of monitoring stations associated to the the searched city.

This application is deployed to Heroku, here is the link

Consume 3 API for retrieving data for city feed, gelocalized feed(ip based) and all stations.
Getting data from third-party API service and updating application automatically.
Using React to create reusable components.
Responsive UI using Material-UI, mobile friendly.
Spinner solution used when data loading.
Alert solution used when improper searching.
Setup Continuous Deployment using Github and Heroku, having continuously improvement to the application.
Using cors-anywhere solution to enable cross-origin requests.

Issue: I got CORS (Cross-Origin Resource Sharing) “issues” when I deployed the application on Heroku.
First solution: I used cors-anywhere service(https://cors-anywhere.herokuapp.com/) but found there is limited visit and the response speed is very slow.
Improved solution: I improved it creating back-end proxy service to avoid CORS issues.

NPM - Install NPM for all dependencies.

Install dependencies: npm install

Run the client & server with concurrently:

npm run dev

Run the Express server only:

npm run server

Run the React client only:

npm run client

Go to config.js and uncomment the second API_URL and comment the first API_URL. It can get local AQI information.