The Memory Game is a simple card-matching game built with React. The objective of the game is to select each card only once. This project demonstrates the use of useState and useEffect.
- Fetches 12 random card data from the Pokémon TCG API on each game start.
- Shuffles the cards randomly for every point.
- Tracks the player's score.
- Creates a new game when a card is clicked twice.
- Clone the repository:
git clone https://github.com/bienlim/memory-game.git
- Navigate to the project directory:
cd memory-game - Install the dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and navigate to
http://localhost:5173/.
Game.jsx: The main component that handles the game logic, including fetching card data, shuffling cards, and managing the game state.
useState: Used to manage the score, high score, selected cards, and the deck of cards.useEffect: Used to fetch card data from the Pokémon TCG API when the component mounts and update the Displayed High score.
- TailwindCSS: Used for styling the application with utility-first CSS classes.
- Vite: Used as the build tool for faster and leaner development experience.
This project uses the Pokémon TCG API to fetch card data.
- The Odin Project for the game mechanics.
- Pokémon TCG API for providing the card data.
- React for the powerful UI library.