Vue 3 PWA to poll the 2021 qualification results endpoint from AG.ch to fetch the latest result status using composition API and Vuestic UI.

The AG.ch website provided by the canton Aargau does not poll the endpoint and provides poor UX for entering user data. To boot, it requires data that most people do not keep in their password manager or close to their person, and refreshing the results is a tedious process.

QV Checker abstracts this by polling the results on its own and updating them in realtime in the UI. This means no more reloading and the app can simply run in the background until results have been submitted.

This application fetches the payload from the endpoint used behind the scenes over a proxy endpoint deployed to Netlify functions. It also uses masks with Cleave.js to ensure the inputs match the expected format and leverages the Vue 3 composition API to manage the compartmentalized features.

All the logical composition functions can be found in the Vue CLI source under vue-cli/src/hooks and the checker component is implemented as its own isolated SFC found in vue-cli/src/components/Checker.vue. Vue CLI was finally used for this project as the Vite build still has some issues with Vuestic UI, which was used to implement the component structure.

The Netlify functions and configuration files can be found at the root level, which also leverage Typescript and a custom build script found in the package.json.

© 2021, RaviAnand M.