City Search I

Prompt

The goal of this exercise is to create a performant and user-friendly search feature that allows users to easily find and select the desired city.

Requirements

The search feature will be a user interface component that includes a search input field.
As the user types into the search input field, the component will dynamically suggest and display a list of relevant options based on the user's input.
The user will then have the option to select an option from the dropdown menu or continue typing to further refine the search.
Selecting an option from the dropdown will populate that into the search input and close the dropdown.
API https://frontprep.com/api/cities?query=newyork

You do not need to worry about handling key events. You can focus on implementing the search functionality and displaying the search results

Example

Playground (Prompt 1)

Hint 1

Let's start with the basic structure. What states do we need?

searchTerm for input value
isOpen for dropdown visibility
results for city list

Hint 2

How would you structure the API call?

function fetchCities(query) {
  return fetch(
    `https://frontprep.com/api/cities?query=${query}`
  )
    .then((res) => res.json())
    .then((result) => result);
}

Solution (Prompt 1)

My Attempt (Prompt 1)

Interviewer Criteria

HTML/CSS

Employ semantic HTML for accessibility and SEO.
Avoid unnecessary CSS nesting and specificity.
Use descriptive and consistent CSS class names.
Ensure the layout aligns with the provided image.
Style the UI efficiently, within 10 minutes.

JavaScript

Proficiency with functional components.
Capable of fetching and utilizing API data.
Efficiently use ES6 features like let, const, arrow functions, promises, and destructuring.
Cleanly handle conditionals
Trim input before API calls to prevent unnecessary requests.
Cache API results for repeated queries.
Swiftly implement debouncing logic.

React

Comfortable using React hooks.
Properly colocate state.
Effectively use the key prop.
Create a custom useDebounce hook.
Implement clean data-fetching logic on keystrokes.

Component Architecture

Create separate SearchInput and SearchResults components.
Name classes, functions, handlers, and components clearly and understandably.
Organize components and hooks into separate folders.

Performance

Cache API results for repeated queries.
Efficiently implement debouncing logic.

Time Checkpoints

10:00 AM
Interview starts 👥
10:03 AM
Interviewer introduces the prompt
10:05 AM
Candidate reviews the prompt, seeks clarification as needed, and initiates coding
10:10 AM
Search input rendered and bound to the query state
10:20 AM
Data fetched from the API and stored in the cities state
10:25 AM
List of results rendered using API data stored in cities state
10:35 AM
Styling completed for typeahead
10:40 AM
Efficient caching mechanisms implemented
10:50 AM
Debouncing implemented using useDebounce custom hook
10:55 AM
Discussion on advanced questions with the interviewer
11:00 AM
Interview ends ✅