Coinbase·Frontend Engineer·Technical Phone Screen·Senior

Senior

Apr 2026

Summary

Frontend interview at Coinbase where the whole session was basically one big component design exercise. They wanted a dropdown built live, with accessibility and controlled/uncontrolled patterns, and then a conversation about how you'd harden it for production. Pretty involved for a single question.

Questions Asked (1)

Build a reusable dropdown component in React that supports controlled and uncontrolled usage, keyboard navigation, outside-click dismissal, and proper accessibility attributes. Then walk through what you'd add to make it production-ready.

System DesignTechnical Trade-offsAPI & Integrations

Author's notes

This one is way more surface area than it sounds.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by clarifying the requirements and constraints, then outline the component's API and architecture before diving into implementation details. Focus on the controlled/uncontrolled pattern, accessibility, and keyboard interactions, and finally discuss production considerations like testing, performance, and internationalization.

Pro tip: Emphasize accessibility from the start—mention ARIA roles and keyboard support early to show you prioritize inclusive design, which is critical for a fintech company like Coinbase where compliance and user trust matter.

1. Clarify Requirements and Constraints

Ask clarifying questions about expected features, browser support, and integration with existing design systems. Confirm whether the component needs to support single or multi-select, search, or grouping.

2. Design the Component API

Define props for controlled (value, onChange) and uncontrolled (defaultValue) usage, and outline how to handle internal state. Consider using a custom hook (e.g., useDropdown) to encapsulate logic for reusability.

3. Implement Core Functionality

Build the dropdown with keyboard navigation (arrow keys, Enter, Escape, Tab), outside-click dismissal using a custom hook or library, and proper ARIA attributes (role, aria-expanded, aria-activedescendant).

4. Enhance for Production

Discuss adding TypeScript types, unit and integration tests, performance optimizations (memoization, virtualization for long lists), and internationalization support.

5. Review and Iterate

Summarize trade-offs made (e.g., using a library vs. building from scratch) and suggest next steps like documentation, Storybook examples, and accessibility audits.

Key Points to Mention

Controlled vs. uncontrolled component pattern and how to support both seamlessly
Keyboard navigation: arrow keys, Home/End, Enter, Escape, and focus management
Accessibility: ARIA roles (listbox, option), aria-expanded, aria-activedescendant, and screen reader support
Outside-click dismissal using a custom hook (e.g., useClickOutside) or event listeners
Production considerations: TypeScript, testing (unit, integration, a11y), performance (virtualization, memoization), and internationalization
Trade-offs: building from scratch vs. using a library (e.g., Downshift, React-Select) and when to choose each

AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.