This is a Vue.js build of the CheqUp order confirmation page, from my Figma design of the steps needed to fully complete the order.
You can toggle the props in /src/App.vue to view the DOM changes.
Uses:
- Bun 🍞
- For JavaScript runtime speed.
- Vite
- For a speedy server.
- Vue
- Nuxt was not added, as server-side are not required for the build.
- Composition API was used, just to prove I can use it. Options API is preferred, as I argue that scripts should not be so large and complex to have to use Composition API - instead they should be broken down into smaller files.
- Jest
- As Vitest does not work with Bun at the time of writing.
- ARIA labels to assist screen readers.
- Activate your screen reader (such as VoiceOver) and traverse the DOM.
In a terminal, change directory to where you would like to clone the repository to, then run git@github.com:ckhatton/cheq-up.git to clone the repository, and then run cd cheq-up to change directory into "cheq-up".
Install NVM (Node Version Manager) by following their documentation.
Then install a node version.
nvm install 20Note:
If the
nvmcommand does not work, try a new terminal window. If that still does not fix it, please refer to their documentation on how to add it to your shell profile.
Note:
If these instructions do not work for your OS, please head to the Bun website for install instructions and then follow it with
bun install.
Run this command below to install Bun and the project packages.
npm install -g bun && bun installbun run --bun devbun run testbun run test --coveragebun run --bun previewbun run vts && bun run --bun build
npm install --global http-server
http-server ./dist -p 80- It was important to make the page match the brand.
- Utilising the brand colours, I wanted to make it simple but clear there are two steps to carry out still and to keep the purchase message minimal. A simple structure helps when building the page for accessibility tools, such as a screen reader.
- A warning notification uses a colour out of brand, but it also makes it stand out at first glance. The customer can then see there are two further steps to complete.
- As each section is completed, it reflects as such on the page.
- Additional design I would include are validation errors; for example, if the ID verification failed or the chosen image file type was incorrect.