← Coinbase Interview Insights

Coinbase·Frontend Engineer·Take-home Assignment·Intermediate

IntermediatePrefer not to say
May 2026Remote

Summary

Take-home OA for a frontend role at Coinbase. The task was to build a reorderable list component with up/down controls, accessibility requirements, and proper state/event handling. Pretty scoped but there were enough edge cases to trip you up if you weren't careful.

Questions Asked (1)

Q1

Build a reorderable list UI component in a frontend framework of your choice. Each item should have up/down controls that swap it with its neighbor, with the boundary items' controls disabled. The component should handle empty state, emit change events to the parent, use stable keys for item identity, and meet accessibility standards including keyboard support and focus management.

Technical Trade-offsSystem DesignAPI & Integrations
Author's notes

The swap logic itself is trivial, like three lines.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by clarifying requirements and choosing a framework (e.g., React) that aligns with Coinbase's stack. Then walk through the component design: state management, stable keys, event emission, accessibility, and edge cases like empty state. Finally, discuss trade-offs and testing strategy.

Pro tip: Emphasize accessibility from the start—mention ARIA roles, keyboard navigation, and focus management as non-negotiable, not an afterthought. This shows you understand production-quality UI components.

1. Clarify requirements and choose framework

Ask clarifying questions about expected behavior, framework preferences, and integration points. Choose a framework (e.g., React) and justify briefly.

2. Design component API and state

Define props (items, onChange) and internal state. Explain how you'll use stable keys (e.g., item.id) and handle empty state gracefully.

3. Implement reordering logic and controls

Describe the swap logic for up/down buttons, disabling at boundaries. Mention emitting change events with the new order to the parent.

4. Address accessibility and keyboard support

Detail ARIA roles (list, listitem), keyboard interactions (arrow keys, tab), and focus management after reordering to maintain context.

5. Discuss trade-offs and testing

Talk about performance (e.g., memoization), controlled vs uncontrolled components, and how you'd test (unit, integration, accessibility).

Key Points to Mention

  • Stable keys using unique IDs to prevent re-render issues
  • Controlled component pattern with onChange callback for parent communication
  • Accessibility: ARIA roles, keyboard navigation (arrow keys, tab), and focus management after reorder
  • Boundary handling: disabling up/down buttons at first/last positions
  • Empty state rendering with a placeholder message
  • Trade-offs: controlled vs uncontrolled, performance optimizations (React.memo, useCallback)

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