Pokémon Memory Game

A modern, interactive memory card game built with React and TypeScript, featuring Pokémon from various regions. Players select their favorite Pokémon regions and test their memory skills by choosing a previously not selected card every round in this engaging web application.

🎮 Project Overview

This project is a memory card game that combines classic gameplay mechanics with the beloved Pokémon universe. The game integrates with the PokéAPI to dynamically fetch Pokémon data, sprites, and sound effects, creating an immersive and personalized gaming experience.

Key Features (Planned/In Development)

• Region Selection: Choose from multiple Pokémon regions (Kanto, Johto, Hoenn, Sinnoh, Unova, Kalos, Alola, Galar, Hisui, and Paldea)
• Dynamic Content Loading: Fetches Pokémon data, sprites, and audio from the PokéAPI
• Memory Game Mechanics: Classic card matching gameplay with Pokémon-themed cards
• Responsive Design: Modern UI with smooth animations and transitions
• Audio Integration: Plays Pokémon cry sounds for enhanced gameplay experience
• Smart Data Fetching: Efficiently handles API requests with fallback mechanisms for missing sprites

🛠️ Tech Stack

• React 19 - Modern React with hooks for state management
• TypeScript - Type-safe development
• Vite - Fast build tool and development server
• CSS3 - Custom styling with animations
• PokéAPI - RESTful API for Pokémon data
• ESLint - Code quality and consistency

🏗️ Architecture

The application follows a component-based architecture with clear separation of concerns:

• Start Screen: Initial landing page with game introduction
• Region Screen: Interactive region selection interface
• Game Screen: Main gameplay area with card grid and game logic
• API Integration: Robust data fetching with error handling and fallbacks
• Utility Functions: Reusable helpers for data processing and audio playback

🎯 Learning Objectives

This project demonstrates:

• React Hooks (useState, useEffect) for state management
• API integration and async data handling
• TypeScript for type safety
• Component composition and reusability
• Modern CSS animations and transitions
• Error handling and fallback strategies
• Performance optimization through efficient data fetching

🙏 Credits

• Pokémon Data: PokéAPI
• Pokémon Icons: Flaticon - amoghdesign
• Game Background: Reddit Community
• Background Music Khinsider