Project executed to show my skills as a Frontend engineer at ProjectMark process.
This project was made in one night and addresses all of the points requested in the chalenge:
- ✅ Must be the same as the design on the screen
- ✅ We will be looking for cleanliness of code and good design patterns
- ✅ The checkboxes should be actionable. When you click one of them, the columns should change. You can change whatever way you want whether it is to show less or more.
- ✅ Only one checkbox can be selected at a time.
- ✅ Selected checkbox should have the blue outline
- ✅ Top step buttons dont have to be actionable.
- ✅ Add it to github or bitbucket and provide a link to the repo
- ✅ Provide setup instructions on how to set it up and view
Even tho I had little time to do it (1 night because somehow Programathor didn't send me notifications 🤔). I've included some extras like:
- 404 page
- gh-actions configuration to deploy on gh-pages
- dark mode with a toggle
- linter configurations
- favicon and icons
This project is deployed at Github Pages and you can check it here:
https://micheldpcarlos.github.io/projectmark-onboarding
This project was built using node 20.5, please make sure you're using the correct version.
npm installnpm run dev
4a4e5ff2843160582346eb90db62e2b9.mp4
I had a great time working on it, and I only wish I had more time to do even more.
Making some tough decisions to meet today's deadline was necessary, but overall,
coding it was a fun experience, and I'm thrilled with the results! 🧑🏽💻
Time Spent: around 9 hours from start to docs
Tech Stack: Vue.js 3 with composition API, Typescript, SCSS