This PWA application, written in Vue.js is meant to be used in a self-service kiosk at a fast food restaurant. Users can choose which items they like and submit to the kitchen for preperation. Requires a touch-capable device with minimum display resolution of 1024*768 in lanscape orientation. Keyboard is required for store clerk to login to the device (only at the start of the day maybe).
Site is hosted here: https://mcarthurs-kiosk.web.app/
Login credentials:
- email: user1@mcarthurs.com
- password: mcarthur1
Home Page
Category Selection
Item Quantity Selection
Order Details
Order Confirmation
Tech stack used:
- Vuex
- Vite
- PWA
- Typescript
- SCSS
- Fontawesome icons
- Lazy loading routes
- Husky
- Composition API
- vee-validate for form validation
- Authentication
- Apollo client
- Axios interceptors
Backend integration with:
- STRAPI
- SANITY
- GRAPHCMS
The same dataset is present in all 3 backends. 3 different backends have been used for demo purposes only. The type of BE used can be changed via the env variable VITE_BE_SERVER.
The Sanity and GraphCMS servers are interfaced via a NodeJS middleware, which is used to hide the sensitive API keys for Sanity and GraphCMS.
Strapi and Sanity use axios while GraphCMS uses Apollo client to communicate with backend.
Here is the architectural overview:
-
Logout functionality hasn't been provided in the app, as we don't expect the Kiosk users to be able to logout by themselves. Instead, there is a 30 min timeout and store clerk can manually clear the browser cache if needed to logout.
-
Strapi doesn't have refresh token functionality as of the date of writing the app. Also, it is hosted on Heroku free tier, which auto-cycles the dyno after 30 mins' non-usage. Therefore, 30min has been chosen as the JWT expiration window.
npm install
npm run serve
npm run build
npm run lint