CheqUp Order Confirmation Steps

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.

To Install

1. Clone the Repository
2. Install NVM for NPM
3. Install Bun and the Project

Clone the Repository

In a terminal, change directory to where you would like to clone the repository to, then run [email protected]:ckhatton/cheq-up.git to clone the repository, and then run cd cheq-up to change directory into "cheq-up".

Install NVM for NPM

Install NVM (Node Version Manager) by following their documentation.

Then install a node version.

nvm install 20

Note:

If the nvm command 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.

Install Bun and the Project

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 install

To Run

bun run --bun dev

To Test

bun run test

To Create a Coverage Report

bun run test --coverage

To Preview

bun run --bun preview

To Build and Serve

bun run vts && bun run --bun build
npm install --global http-server
http-server ./dist -p 80

Figma Design

• 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.

Design File | Desktop Prototype | Mobile Prototype