- Introduction
- Live Demo
- Details
- Prerequisites
- Quick Start
- Running locally
- One highlight when running locally
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.
-
run npm run dev first and keep the program running
-
npm run test to lauch the test
-
run npm run dev first and keep the program running
-
npm run test-e2e to lauch the test
- 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
Server runs on http://localhost:5000 and client on http://localhost:3000
Go to config.js and uncomment the second API_URL and comment the first API_URL. It can get local AQI information.