Have built this SPA using Vue3 and Vue-Cli. The demo project has been hosted on Github Pages https://shauryadhadwal.github.io/aqi-app/

• Home Page with updates of most recent AQI levels per city.
• Live Chart Page with history of up to 20 records per city (configurable); Max, Min AQI levels since the time Live Chart Page was opened; Pause/Resume functionality to analyse chart.
• Comparison Page with feature to compare date of up to 5(configurable) cities simultaneously.
• Animations on route transitions and value updates.

Since Github Pages doesn't support SPA, refreshing the browser on any other path than the one mentioned above will result in a 404 error.

All decisions have been made considering that data of no more than 12 Cities' can be received, and no more than 1 websocket event per second. To enhance the application for high load, other decisions would have to me made.

Application is responsive but designed using Desktop-First approach. Would recommend to use latest version of Chrome Browser for best experience.

Wasted time on websockets and graphing library.

Clone the repo and run the following command:

npm install

Check the .env_example file and set up the websocket connection

Websocket messages are expected to be of the following form for the application to work correctly:

[{city: "Mumbai", aqi: "150.23145"}, {city: "Delhi", aqi: "308.67312"}]

npm run serve

npm run build

Add your username to command in deploy.sh

git push -f [email protected]:<git-hub-username>/aqi-app.git

Make sure to add your ssh key in github's ssh settings page

npm run deploy