Card Deck II
Problem statement
Card Deck II builds on the flip mechanic to create a full deck of flashcards with navigation. Users can swipe or click through cards one at a time, flip any card to see its answer, and track their progress through the deck. This is the complete flashcard study UI.
Build a component that renders one card at a time from a deck array with Previous / Next navigation. The current card flips independently. Navigating to a new card resets the flip state so the front always shows first on a fresh card.
The key challenge is resetting the flip state when the card index changes — using a key prop on the FlipCard component is the cleanest React idiom to force a full remount and reset all child state.
Requirements & constraints
- Show one card at a time with Previous/Next navigation
- Current card index shown as progress (e.g., 2/5)
- Flip state resets to front when navigating
- Keyboard: Left/Right arrows navigate, Space flips
- Smooth slide transition between cards
- Circular navigation: Next on last goes to first
How to approach Card Deck II
The strategy an interviewer expects you to reach for.
Why This Question Exists Card Deck II tests a specific React idiom: using the key prop as an intentional reset mechanism. Most candidates know that keys help React identify list items, but far fewer know that deliberately changing a component's key forces React to unmount it and mount a fresh instance — resetting all its internal state. This is the cleanest way to reset a child without lifting its state to the parent.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.