{"id":27234515,"url":"https://github.com/ckhatton/cheq-up","last_synced_at":"2026-04-11T05:35:11.779Z","repository":{"id":287096308,"uuid":"958907997","full_name":"ckhatton/cheq-up","owner":"ckhatton","description":"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.","archived":false,"fork":false,"pushed_at":"2025-04-09T23:11:55.000Z","size":122,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-08T14:52:29.568Z","etag":null,"topics":["aria","bun","bunjs","jest","typescript","vite","vitejs","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://chequp.ckhatton.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ckhatton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-02T00:47:22.000Z","updated_at":"2025-04-09T23:17:26.000Z","dependencies_parsed_at":"2025-04-10T00:23:18.943Z","dependency_job_id":"e3a2ee37-d232-45d3-8c46-1fa7216a3122","html_url":"https://github.com/ckhatton/cheq-up","commit_stats":null,"previous_names":["ckhatton/cheq-up"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ckhatton/cheq-up","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckhatton%2Fcheq-up","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckhatton%2Fcheq-up/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckhatton%2Fcheq-up/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckhatton%2Fcheq-up/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ckhatton","download_url":"https://codeload.github.com/ckhatton/cheq-up/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckhatton%2Fcheq-up/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31670317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aria","bun","bunjs","jest","typescript","vite","vitejs","vue","vue3","vuejs"],"created_at":"2025-04-10T15:56:43.445Z","updated_at":"2026-04-11T05:35:11.754Z","avatar_url":"https://github.com/ckhatton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CheqUp Order Confirmation Steps\n\nThis is a Vue.js build of the CheqUp order confirmation page, from my [Figma design](#figma-design) of the steps needed to fully complete the order.\n\nYou can toggle the props in `/src/App.vue` to view the DOM changes.\n\nUses:\n\n- [Bun 🍞](https://bun.sh)\n  - For JavaScript runtime speed.\n- [Vite](https://vite.dev)\n  - For a speedy server.\n- [Vue](https://vuejs.org)\n  - Nuxt was not added, as server-side are not required for the build.\n  - 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.\n- [Jest](https://jestjs.io)\n  - As Vitest does not work with Bun at the time of writing.\n- ARIA labels to assist screen readers.\n  - Activate your screen reader (such as VoiceOver) and traverse the DOM.\n\n## To Install\n\n1. [Clone the Repository](#clone-the-repository)\n2. [Install NVM for NPM](#install-nvm-for-npm)\n3. [Install Bun and the Project](#install-bun-and-the-project)\n\n### Clone the Repository\n\nIn 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\".\n\n### Install NVM for NPM\n\nInstall NVM (Node Version Manager) by following their [documentation](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating).\n\nThen install a node version.\n\n```bash\nnvm install 20\n```\n\n\u003e **Note:**\n\u003e\n\u003e If the `nvm` command does not work, try a new terminal window. If that still does not fix it, please refer to their [documentation](https://github.com/nvm-sh/nvm#troubleshooting-on-linux) on how to add it to your shell profile.\n\n### Install Bun and the Project\n\n\u003e **Note:**\n\u003e\n\u003e If these instructions do not work for your OS, please head to the [Bun](https://bun.sh/docs/installation) website for install instructions and then follow it with `bun install`.\n\nRun this command below to install Bun and the project packages.\n\n```bash\nnpm install -g bun \u0026\u0026 bun install\n```\n\n## To Run\n\n```bash\nbun run --bun dev\n```\n\n## To Test\n\n```bash\nbun run test\n```\n\n### To Create a Coverage Report\n\n```bash\nbun run test --coverage\n```\n\n## To Preview\n\n```bash\nbun run --bun preview\n```\n\n## To Build and Serve\n\n```bash\nbun run vts \u0026\u0026 bun run --bun build\nnpm install --global http-server\nhttp-server ./dist -p 80\n```\n\n## Figma Design\n\n- It was important to make the page match the brand.\n- 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.\n- 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.\n- As each section is completed, it reflects as such on the page.\n- Additional design I would include are validation errors; for example, if the ID verification failed or the chosen image file type was incorrect.\n\n[Design File](https://www.figma.com/design/TdrBtC7GwNgtESLrwqLGr8/CheqUp) | [Desktop Prototype](https://www.figma.com/proto/TdrBtC7GwNgtESLrwqLGr8/CheqUp?node-id=4-3\u0026starting-point-node-id=4%3A3\u0026scaling=contain\u0026content-scaling=fixed) | [Mobile Prototype](https://www.figma.com/proto/TdrBtC7GwNgtESLrwqLGr8/CheqUp?page-id=4%3A23\u0026node-id=7-350)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckhatton%2Fcheq-up","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fckhatton%2Fcheq-up","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckhatton%2Fcheq-up/lists"}