You will have an hour to work on your own. Feel free to ask any questions or clarifications you might have.
The goal for this practical is to implement a search bar with suggestion functionality. Don't worry too much about completing it -- an hour isn't that much time! -- we are more interested in progress and understanding where you are.
The view will do two things:
- display a vehicle inventory list
- let's you search inventory for a vehicle with suggestions
A few notes:
- An API will be provided for you to consume. Here's a basic wireframe mockup: https://whimsical.com/NFvMnk75Zg5q1p5a6NYNab
- Pretend this is an actual working session. Feel free to use any 3rd party libraries, your IDE, and to look things up.
- I'll be there with you to answer questions or clarify and to be an extra brain as needed. Feel free to use me.
- pressing enter in the search bar on a search term should populate a paginated list of vehicles which can show name, VIN, make, and model
- selecting an item should update the search parameters and populate the page as in step 1
Bonus points:
- use modern react functional components, hooks, etc.
- refreshing the page should not clear the query string and should only re-query the search results
- when a user has paused for a moment populate 20 items in the dropdown (it should be scrollable)
- recently searched terms should show in the suggestion box italicized
- unit tests
You should query this API to fetch the vehicles:
base url:
https://61fd98fca58a4e00173c95f7.mockapi.io/api/vehicles/
GET /vehicles/:id
GET /vehicles?search=xyz
GET /vehicles?make=toyota (you can query on any field)
GET /vehicles?page=1&limit=5