A simple yet polished memory game built with React, TypeScript, react-router, Tailwind CSS and DaisyUI — originally created as a 4-hour coding challenge, now grown into a fun personal project to practice front-end skills.
👉 Play the game on GitHub Pages
- ✅ Multiple levels with increasing board sizes
- ⭐ Unlockable stars and score tracking
- 🔓 Levels unlock based on stars earned
- 🎨 Unlockable emoji icon themes and card colors (coming soon!)
- 🎉 Win screen with confetti, sounds and animated stars
- 🧩 Clean component structure with React Context and custom hooks
- 🗂️ Modern styling with Tailwind CSS and DaisyUI
- 🔊 Sound effects and vibration feedback
- ⚡ Optimized rendering for smooth gameplay
- React with functional components and hooks
- TypeScript for type safety and better DX
- react-router for page navigation
- Tailwind CSS + DaisyUI for UI and themes
- Local storage for saving scores and settings
This started as a small test to build a game in under 4 hours — but evolved into weeks of tweaking animations, state management, performance optimizations and experimenting with modern front-end patterns.
Through this project, I practiced:
- Managing global state with custom contexts and reducers
- Animating UI feedback for score and stars
- Designing an accessible and responsive UI
- Keeping gameplay snappy with memoization and efficient re-renders
# Clone the repo
git clone https://github.com/high-rolls/memory-game.git
# Install dependencies
npm install
# Run in dev mode
npm run dev
# Build for production
npm run build