Skip to content
Gallery
Engineering Interviews
Engineering Interviews
More
Share
Explore
Front-End Questions

<AddressForm /> component

Question Prompt

On
https://www.google.com/maps
⁠
we have an input field in which users enter their address and we display a list of suggestion from an external source.

⁠
Screenshot 2024-01-24 at 12.41.27 PM.png
⁠
⁠
This UI fulfills the following user stories:
As a user I can type on the input field and get a list of address suggestions. Clicking on an address should update the value in the input field.
As a user I can submit an address after filling in the input field and clicking “Quote in 60 seconds” button.
As a user I can see an error below the input field when I introduce an invalid address and click on “Quote in 60 seconds” button. (The criteria for an invalid address can be made up).

​Things we are looking for

The candidate should be able to build a form with semantic markup (input, button, form). Using elements like <div /> or <span /> to recreate a button should be a red flag for this exercise.
The candidate should be able to describe to describe how to avoid overloading the server with requests with solutions like debounce. There is no need to implement a debounce function.
The candidate should be able to break down the UI into separate manageable components according to the boundaries that they find reasonable. When breaking down the UI we expect the candidate describe their thought process regarding when to break down a UI into multiple small pieces and when not to do it.
The candidate can assume that there is an existing server that will provide the suggestions but it is up to them to define the structure of the respond that they expect.
The candidate is expected to write the basic CSS to get the UI close to what we see in the image provided. We don’t expect the implementation to match exactly but we want to know how comfortable the candidate is handling problems like layout, how they think about specificity in css, etc. It is possible to expand the question and ask them about the initial transition but it is not a requirement to implement, it is enough for them to know that it can be done through css.
The candidate should be able to identify a problem with out of order responses from the server and propose a solution.

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.