🧙‍♂️ Magic Match

A fun and interactive memory card matching game built with React.js. Flip cards, find matching pairs, and complete the game in as few turns as possible!

---

🎮 Demo

https://magic-memory-sigma.vercel.app

---

✨ Features

• 🃏 Memory card matching gameplay
• 🔀 Randomized card shuffle every game
• 🎯 Turn counter
• ✅ Matched cards remain visible
• 🚫 Prevents multiple card selections while checking matches
• 🎉 Elegant completion popup after finishing the game
• 🔄 Automatically starts a new game after completion
• 📱 Responsive and clean UI

---

🛠️ Built With

• React.js
• JavaScript
• HTML
• CSS
• React Hooks
  • useState
  • useEffect

---

📂 Project Structure

magic-match/
│
├── public/
│   ├── img/
│   ├── favicon.ico
│   └── index.html
│
├── src/
│   ├── components/
│   │   ├── SingleCard.js
│   │   └── SingleCard.css
│   │
│   ├── styles/
│   │   ├── App.css
│   │   └── index.css
│   │
│   ├── App.js
│   └── index.js
│
├── package.json
└── README.md

---

🚀 Getting Started

Clone the repository

git clone https://github.com/your-username/magic-match.git

Navigate to the project

cd magic-match

Install dependencies

npm install

Run the development server

npm start

The application will open at:

http://localhost:3000

---

🎯 How to Play

1. Click on a card to reveal it.
2. Select another card.
3. If both cards match, they remain face up.
4. If they don't match, they flip back after a short delay.
5. Match all pairs to complete the game.
6. Once all cards are matched, a congratulatory popup appears and a new game starts automatically.

---

🌱 Future Improvements

• Multiple difficulty levels
• Timer mode
• High score leaderboard
• Sound effects and background music
• Card flip animations
• Theme selection
• Mobile-friendly enhancements

---

📚 What I Learned

Through this project, I gained hands-on experience with:

• React functional components
• State management using React Hooks
• Event handling
• Conditional rendering
• Array manipulation
• Component-based architecture
• Managing game logic in React

---

👩‍💻 Author

Avani Parab

GitHub: https://github.com/avaniparab

LinkedIn: https://linkedin.com/in/avaniparab