How do I approach System Design interview questions?

System Design questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master system design interviews.

What difficulty level is this interview question?

This is a medium difficulty System Design question, commonly asked during Technical Screen rounds at Coinbase.

What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Coinbase during technical interviews.

Implement debounced autocomplete component | Coinbase Interview Question

Quick Overview

This question evaluates front-end engineering competencies such as UI component design, asynchronous programming (debouncing and race-condition avoidance), keyboard accessibility and interaction, and client-side state management for autocomplete behavior within the System Design / web UI domain.

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

Debounced input handling to limit network calls (e.g., 300 ms wait after the last keystroke).
Asynchronous fetch of suggestions using the provided fetchSuggestions.
Render a suggestion list below the input.
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.
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.

Quick Overview

Context

Assume a function is available:

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

Requirements

Debounced input handling to limit network calls (e.g., 300 ms wait after the last keystroke).

Asynchronous fetch of suggestions using the provided fetchSuggestions.

Render a suggestion list below the input.

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.

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).

Implement debounced autocomplete component

Quick Overview

Implement an Autocomplete Input Component

Context

Requirements

Deliverable

Solution

Comments (0)

Implement debounced autocomplete component

Quick Overview

Implement an Autocomplete Input Component

Context

Requirements

Deliverable

Solution

Comments (0)