Memory Game

A Pokemon-themed memory card game built with React. The goal is simple: click each card only once. Every successful click increases your score and reshuffles the board, making it harder to remember which cards you have already selected.

This project was built as part of The Odin Project React Course Curriculum.

Overview

The app fetches Pokemon data from the PokéAPI and displays a grid of cards using official artwork. Players earn points by selecting unique cards. Clicking a card that has already been chosen ends the round, shows a game-over modal, and resets the current score while preserving the best score achieved so far.

Features

• Fetches Pokemon data dynamically from PokéAPI.
• Displays 10 Pokemon cards with official artwork.
• Shuffles card positions after every valid selection.
• Tracks the current score in real time.
• Stores and updates the best score during the session.
• Shows a game-over modal when the same card is clicked twice.
• Built with reusable React components for the scoreboard, game board, and cards.

Tech Stack

• React
• Vite
• JavaScript (ES Modules)
• CSS
• ESLint
• PokéAPI for external data

Project Initialization

This project uses Vite as the development and build tool. To initialize it locally:

npm install

After installing dependencies, start the development server:

npm run dev

Vite will print a local development URL in the terminal, usually http://localhost:5173.

How To Play

1. Click any Pokemon card to earn a point.
2. After each successful click, the cards are shuffled.
3. Avoid clicking the same Pokemon twice in the same round.
4. If you repeat a card, the round ends and your current score resets.
5. Try to beat your best score.

Project Structure

memory-game/
├── src/
│   ├── components/
│   │   ├── api/
│   │   │    ├── api.js
│   │   ├── card.jsx
│   │   ├── gameboard.jsx
│   │   └── score.jsx
│   ├── styles/
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js
└── eslint.config.js

Implementation Notes

• The game state is managed with React hooks.
• Pokemon data is loaded on mount and stored in component state.
• Card reshuffling happens after every valid click to increase difficulty.
• Best score is tracked for the current browser session while the app remains open.