Design a Debounced Product Search Box

Implement the client behavior for a product search box that requests and displays the ten most relevant products for the current keyword. Start from a hardcoded prototype, then explain how the design changes when results come from an API and requests are debounced. ### Constraints & Assumptions - Users may type quickly, erase the query, and submit a new query before an old response returns. - Only ten results are visible. - Loading, empty, error, and keyboard-selection states must be explicit. - Relevance is supplied by the backend unless the interviewer asks for client-side ranking. ### Clarifying Questions to Ask - What minimum query length and debounce delay should the product use? - Should pressing Enter navigate to the highlighted result or to a full search page? - May prior successful results remain visible while a new request is loading? ### What a Strong Answer Covers - Controlled query, highlighted index, result, and request state. - A debounce that delays network work without delaying local input rendering. - Cancellation plus a request-sequence guard for stale responses. - Keyboard, focus, screen-reader, and escape behavior. - Caching, URL encoding, rate limits, failure handling, and interaction tests. ### Follow-up Questions - How would you add prefix-result caching without returning stale catalog data forever? - What changes when the backend streams partial results? - How would you measure whether the debounce interval is too long?