Note from author :D
I spend about 29 hours and a half to complete this challenge. I will not try to hide, I went crazy on it, if you read the requirements you will see I kinda did a lot more than needed, but I just couldn't help myself. I took the opportunity of the test to practice those new things I was learning about design systems and I think I did the best I could in there.
That said, after the 24th hour I got a little tired of doing this test so I kinda rushed into doing the tests requirements, but I think in the end I managed to keep the quality of the code high enough it would survive a code review session :D. Hope you like my code and maybe draw some inspiration from it.
Things I understande as worth mentioning:
- For this project I made a
UIfolder that contains a rough design system I designed based on my experience.- If wanna know how much I care to commit messages, you can see this repo or my personal dotfiles.
- I'm happy with the coverage I got (print at the end of the file).
Requirements and design mocks are available here. But a here is a summary:
Your challenge is to build an application with the following designs:
- Company Name field must be validated by the presence of its value.
- Company Spend field accepts only positive numbers and formats the provided number into currency when blurred out of.
- Company Spend Ability accepts two inputs, the first one is the Minimum spend and the second is Maximum spend. It validates based on the relation between the two inputs, minimum spend shouldn’t be larger than maximum spend.
- Additional Notes should show a modal with textarea input when the user clicks on the Additional Notes textarea input. Text entered in the modal should appear in the Additional Notes section.
- No additional requirements here!
- You must use Vue.js :)
- The styling has to be custom made, no CSS libraries allowed.
- Build on top of this boilerplate.
- Usage of other CSS accents is allowed. SCSS is preferred and provided as a default, but feel free to use whichever suits you best. Tune the build system as needed to allow for it.
- Your project should be versioned with Git and published in a public repository.
- Utilize Vuex for data management.
- Please build the UI using the design without detailed technical specs.
- We value your time, so you don’t need to spend more than 4 hours on this assignment - we just want to have an idea of how you do things. You can replace the unfinished components with placeholders (for example a block with just a background).
- The minimum requirements for the assignment are:
- It has all components created, even if they are just empty placeholder blocks.
- It has the page layout in place with those empty components with background colors.
- We can switch pages with the main left-hand menu.
- Company Spend and Company Spend Ability must be validated.
- The Additional Notes modal must be implemented.
- You should have at least one component automated unit test, and another for a Vuex data store.
- For the UI, try to focus on the page body, the navbar and footer can be replaced with an empty block.
All commands described in this document should be executed from the project's root directory.
Clone the repo, install all project's dependencies with npm install, and run npm start. When it's done building, the app is accessible from localhost:8080.
