Memory Game
Problem statement
A Memory Game (concentration) is a classic card-matching puzzle where cards are laid face-down and the player flips two at a time, trying to find matching pairs. If the two cards match, they stay face-up. If they don't, they briefly show and then flip back. The game ends when all pairs are found.
Your task is to build this game in React. The state management is more complex than it appears: you need to handle the "locked" period between flipping two non-matching cards and flipping them back, prevent a third card from being flipped during that window, track matched pairs separately from flipped state, and shuffle the deck on each new game. Getting the flip-back timing, the lock mechanism, and the win condition right without race conditions is the core challenge.
Requirements & constraints
- Render a 4x4 grid of 16 cards (8 symbol pairs, shuffled randomly)
- Clicking a face-down card flips it face-up
- After two cards are flipped: if they match, they stay face-up and are marked matched
- If they don't match, both flip back after a 1-second delay
- No third card can be flipped while the 1-second delay is running (board is locked)
- Track and display the number of moves (each pair of flips = 1 move)
- Show a win state when all pairs are found, with a restart button
How to approach Memory Game
The strategy an interviewer expects you to reach for.
Problem Understanding Memory Game has a timing challenge at its core: after two non-matching cards are flipped, you need to show them briefly (1 second) before flipping them back. During that window, the board must be locked — no more card clicks. Getting this right without race conditions or stale closure bugs is the real test.
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.