The goal of this assignment is to give you an idea of how it would be to work in the DatHuis stack and us an idea of the quality of code we can expect from you working at DatHuis. For the assignment we would like you to build a search as you type dropdown component. The user story is defined as follows:
The user story we want to support can be summarized as follows:
Once the user mouses over the input we want to give visual feedback that the user can interact with it.
Once the user clicks on the input we move the placeholder label (‘Contact’ in the example) to the top to remind the user what this field is filling in. The dropdown already opens so the user can make a selection. Use the list of names in the provided JSON to be your list of names.
Make sure that the dropdown is always visible (so if there is not enough space below the input it should be moved so that it is still in place without the page changing size).
The placeholder should react as follows:
Note: The scrollbar was styled in the sketches, but you can ignore that. No special scrollbar styling.
Once the user starts typing the list in the dropdown will be filtered.
Once a selection is made it is shown in the dropdown.
- The component will be a part of multiple pages with multiple components. So make sure that it can be used by many components. That will mean that the component should accept a list of names and the currently selected name as a prop. Tip: place 2 underneath each other and see how that works.
- The dropdown should always be visible, so you will have to reposition it if the default position goes outside of the window. The page should not get bigger because of the dropdown.
If you have built this all and still want to do more then you can get bonus points for implementing any of the following features:
- Keyboard handling
- 100% test code coverage
- Fancy animations
To start the server you can run:
npm run dev
To run the tests:
npm run test
For our css we use styled-components. We would like you to use this as well. It is already set up!
Once you have read through the assignment, think about how you are going to solve this problem and let us know when you can deliver. This does not have to be ASAP as we expect you have other things to do too. Just make sure that we know when you will be delivering the code. To deliver the code either give us a link to a github repository or a zip file that we can run locally. We will review it and then set up a meeting to go through it.
When we review we will look to see if this is Production ready code. That means:
- code that we are happy to push to our customers
- code that has the use case tested (so at least all 5 steps should be tested in jest)
- code that is easy to understand for other developers
Good luck! And as always, we are available for questions (same as if you would work here) so don’t hesitate to reach out if something is not clear or if you are stuck. We are here to help.