Gallery
Share
Explore

icon picker
Keyboard powered search box

⁠
Demo
⁠
Use React
⁠
Use Vue
⁠
⁠

⁠
The requirement for this task is to build a simple search box for countries. The search box must be usable mainly through the keyboard. Functionally, the component should:
Fetch data from the API (details provided below)
When typing into the search box, fetch new data from the API by using the search query parameter.
Using the keyboard arrows, while the input is still in focus, navigate results up/down:
⁠
⁠
select the previous result, or the last result when nothing is selected yet
⁠
⁠
select the next result, or the first result when nothing is selected yet
⁠
Enter
⁠
select the highlighted result (as a result of navigating to it)
Selected results should be stored, so the user is also able to de-select previously selected records.
Consider the task as some kind of pair programming, we can discuss the solution you want to implement, find trade-offs or better solutions.

Country Search API
Copy URL
⁠
⁠

URL: https://6hmo3fjskhafsaexkok7abvfny0xoaoc.lambda-url.eu-west-1.on.aws/
Query parameters:
search - a string to search a country by name
limit - default: 10, limits the number of countries returned
skip - default: 0, the number of items to skip in the result

Rules

Please think out loud. We want to understand how you think the process through.
You can use any online resource, search on Google, documentation, etc. We don’t care about memorizing every little detail.
You can use any external library. TailwindCSS is already installed.

Bonus points

We greatly appreciate any bonus things you implement, even if not mentioned in the requirements.

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.