React Memory Matching Game

Project Overview

Memory Echo is a modern, animated memory card matching game built using React. The game challenges players to match emoji pairs within a limited time across multiple difficulty levels. It features smooth flip animations, dynamic difficulty scaling, a live countdown timer with an animated progress arc, peek ability with cooldown, a score calculation system, and persistent personal best tracking using localStorage. The design follows a clean dark UI with a responsive layout and premium micro-interactions.

Screenshots

Key Features

Core Gameplay
- Flip-and-match emoji card system
- Multiple difficulty levels (Easy → Expert)
- Increasing grid complexity
- Move counter tracking
- Time-based challenge
Smart Timer System
- Circular animated countdown arc
- Dynamic color change based on remaining time
- Game over trigger when time reaches zero
Peek Ability
- Reveal all unmatched cards briefly
- Cooldown timer after usage
- Disabled during cooldown
Personal Best System
Saves best moves per level
- Stored using localStorage
- Displays “New Personal Best” indicator
Animations & Effects
- 3D flip card animation
- Match pop effect
- Wrong match shake animation
- Smooth screen transitions
- Progress bar and pair indicators
Responsive Design
- Dynamic card sizing
- Grid auto-adjusts per level
- Works smoothly on different screen sizes

Functionality

User selects a difficulty level.
Game generates shuffled emoji card pairs dynamically.
Player flips two cards:
- If matched → cards stay revealed.
- If not matched → cards flip back with shake animation.
Move counter increments per attempt.
Timer counts down in real-time.
Player can use “Peek All Cards” once per cooldown period.
When:
- All pairs are matched → Win screen appears.
- Timer reaches zero → Game over screen appears.
Score is calculated based on:
- Matched pairs
- Remaining time
- Extra moves penalty
Best score per level is saved locally.
Player can replay, return home, or advance to next level.

Technology Used

React.js
JavaScript (ES6+)
HTML5
CSS (Custom Animations + Keyframes)
React Hooks
localStorage API
Responsive Layout Techniques

Why This Project Is Useful

Demonstrates advanced use of React Hooks
Shows proper state management with:
- useState
- useEffect
- useRef
- useCallback
Implements game logic with controlled side effects
Demonstrates interval handling and cleanup
Shows derived calculations (score logic)
Demonstrates persistent storage handling
Displays UI/UX design understanding
Portfolio-ready project for:
- Frontend Developer roles
- React internships
- UI-focused positions
This project reflects strong understanding of interactive application development using React.