Implement debounced autocomplete component

Quick Overview

This interview question evaluates requirements, scale assumptions, API/data design, architecture, trade-offs, failure modes, and rollout in a realistic interview setting. A strong answer for Implement debounced autocomplete component states assumptions, handles edge cases, explains trade-offs, and shows how to validate the result clearly.

Implement debounced autocomplete component

Company: Coinbase

Role: Software Engineer

Category: System Design

Difficulty: medium

Interview Round: Technical Screen

##### Question Implement an input autocomplete component that supports: debounced user input handling, asynchronous fetch of suggestions, rendering results, keyboard navigation (↑/↓ to move selection), highlighting the active suggestion, and submission on Enter.

Quick Answer: This interview question evaluates requirements, scale assumptions, API/data design, architecture, trade-offs, failure modes, and rollout in a realistic interview setting. A strong answer for Implement debounced autocomplete component states assumptions, handles edge cases, explains trade-offs, and shows how to validate the result clearly.

|Home/System Design/Coinbase
Coinbase logo
Coinbase
Aug 4, 2025, 10:55 AM
mediumSoftware EngineerTechnical ScreenSystem Design
10
0

Implement debounced autocomplete component

Implement an Autocomplete Input Component

Context

Build a reusable web UI component that provides typeahead autocomplete for user input. Assume a modern browser environment. You may implement with React + TypeScript (preferred) or plain JavaScript; an asynchronous function to fetch suggestions will be provided.

Assume a function is available:

  • fetchSuggestions(query: string, signal?: AbortSignal): Promise<string[]>

Requirements

  1. Debounced input handling to limit network calls (e.g., 300 ms wait after the last keystroke).
  2. Asynchronous fetch of suggestions using the provided fetchSuggestions.
  3. Render a suggestion list below the input.
  4. Keyboard navigation:
    • Arrow Down/Up to move the active selection through suggestions (wrap around permitted).
    • Highlight the active suggestion.
    • Enter submits the active suggestion if one is highlighted; otherwise, submit the current input value.
  5. Reasonable edge handling:
    • Avoid race conditions from overlapping async requests.
    • Handle empty/no results gracefully.
    • Do not fetch when the query is too short (e.g., 0–1 chars).

Deliverable

  • A working component implementation with brief notes on how it satisfies the above.
  • Include any minimal CSS or class hooks to show highlighting.
  • Provide a short usage example with a mock fetchSuggestions.

Clarifying Questions to Ask Guidance

  • Clarify users, core use cases, read/write patterns, scale, latency, availability, and data retention.
  • State explicit assumptions before making sizing or architecture decisions.
  • Prioritize the functional path first, then address reliability, security, observability, and rollout.

What a Strong Answer Covers Guidance

  • A scoped requirements summary with concrete non-goals and success metrics.
  • API, data model, architecture, consistency, capacity, and operations.
  • Reasoned trade-offs among simple and scalable designs, including bottlenecks and failure modes.
  • A validation, monitoring, migration, and launch plan appropriate for the risk level.

Follow-up Questions Guidance

  • What breaks first at 10x traffic or data volume?
  • How would you degrade gracefully during dependency failures?
  • What metrics and alerts would prove the design is healthy after launch?

Submit Your Answer to Earn 20XP

Sign in to leave a comment

Loading comments...

Browse More Questions

More System Design•More Coinbase•More Software Engineer•Coinbase Software Engineer•Coinbase System Design•Software Engineer System Design