A React-based memory card game featuring Pokemon from the PokeAPI. Test your memory by clicking each Pokemon only once - click the same card twice and you lose! Built with modern React hooks, comprehensive test coverage, and TDD methodology as part of The Odin Project curriculum.
- Dynamic Pokemon Cards - Fetches 12 random Pokemon from the PokeAPI on each game load
- Score Tracking - Tracks both current score and best score across game sessions
- Card Shuffling - Cards randomize position after every click to increase difficulty
- Duplicate Detection - Click the same Pokemon twice and the game resets
- Responsive Design - Fully responsive layout optimized for mobile and desktop
- Modern UI - Glass-morphism effects, smooth animations, and gradient backgrounds
- Error Handling - Graceful error messages if Pokemon API is unavailable
- Comprehensive Tests - 100% test coverage with Vitest and React Testing Library
- Loading States - Smooth loading experience while fetching Pokemon data
- The game starts by fetching 12 random Pokemon from the PokeAPI
- Click on any Pokemon card to earn a point
- After each click, all cards shuffle to new positions
- Goal: Click each Pokemon exactly once without repeating
- Win: Successfully click all 12 unique Pokemon
- Lose: Click the same Pokemon twice - score resets to 0
- Your best score is saved and displayed throughout the game
- Node.js (v18 or higher)
- npm or yarn package manager
- Clone the repository
git clone https://github.com/top-submissions/fullstackjs-memory-card.git
cd fullstackjs-memory-card- Install dependencies
npm installStart the development server:
npm run devThe game will open at http://localhost:5173
Run the test suite:
npm testnpm run build
npm run previewIf I were to continue working on this project, here's what I'd add:
- Difficulty levels (6, 12, or 18 cards)
- Sound effects for clicks and game events
- Pokemon type filtering (water, fire, grass, etc.)
- Leaderboard with localStorage persistence
- Dark mode toggle
- Accessibility improvements (keyboard navigation)
- More elaborate win/loss animations
- Option to choose specific Pokemon generations
- Test-Driven Development - Built the entire game using TDD methodology, writing tests before implementation
- React Hooks - Mastered useState, useEffect for state management and side effects
- External API Integration - Fetching and transforming data from the Pokemon API
- Error Handling - Implementing robust error states for network failures
- CSS Modules - Component-scoped styling with CSS modules
- Fisher-Yates Shuffle - Implementing an unbiased array shuffling algorithm
- Async Testing - Testing asynchronous operations with waitFor and mocked fetch
- Component Composition - Breaking down UI into reusable, testable components
- React 19 - UI library with modern hooks
- Vite - Fast build tool and dev server
- Vitest - Unit testing framework
- React Testing Library - Component testing utilities
- CSS Modules - Scoped component styling
- PokeAPI - Pokemon data and sprites
- React Router - Client-side routing
- ESLint - Code linting and quality
- Prettier - Code formatting
- The Odin Project - For providing an amazing free curriculum and project requirements
- The TOP Community - For being supportive and helpful throughout the learning journey
- PokeAPI - For providing free Pokemon data and sprites
- React Team - For creating an amazing library and comprehensive documentation
Special thanks to everyone who maintains open-source projects that made this possible!
Built with ๐ก and โ as part of my journey through The Odin Project
Live Demo โข Report Bug โข Request Feature