Memory Game

A memory card game where you flip cards to find matching pairs, built with React.

What I learned

• Managing complex game state with multiple useState hooks
• CSS 3D transforms and flip animations with Tailwind CSS
• Handling asynchronous game logic with setTimeout and cleanup via useRef
• Building responsive grid layouts that adapt between mobile and desktop
• Fisher-Yates shuffle algorithm for fair card randomization

Technical details

The game features 12 cards (6 pairs) arranged in a responsive grid that switches between 3 columns on mobile and 4 on desktop. Cards use CSS 3D transforms (perspective, rotateY, backface-visibility) for a realistic flip animation. The game tracks moves and detects when all pairs are found. A timeout ref ensures proper cleanup when the component unmounts during an active mismatch delay.