https://github.com/Inna-B10/React-Memory-game
"Memory" is a fun and interactive card game built with React + Vite. Players can create profiles, choose avatars, and compete across multiple difficulty levels. The game tracks moves and time to rank top scores, storing progress in localStorage. No authentication required — just play, improve, and challenge yourself!
https://github.com/Inna-B10/React-Memory-game
clsx framer-motion project prop-types react react-helmet-async react-router-dom vite zustand
Last synced: 7 months ago
JSON representation
"Memory" is a fun and interactive card game built with React + Vite. Players can create profiles, choose avatars, and compete across multiple difficulty levels. The game tracks moves and time to rank top scores, storing progress in localStorage. No authentication required — just play, improve, and challenge yourself!
- Host: GitHub
- URL: https://github.com/Inna-B10/React-Memory-game
- Owner: Inna-B10
- Created: 2025-01-16T12:28:03.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-02-07T13:27:44.000Z (8 months ago)
- Last Synced: 2025-03-12T12:43:30.621Z (7 months ago)
- Topics: clsx, framer-motion, project, prop-types, react, react-helmet-async, react-router-dom, vite, zustand
- Language: JavaScript
- Homepage: https://memory-game-innab10.netlify.app/
- Size: 1.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project name: 🃏🎮 Memory Card Game
### Goal:
Create an accessible, interactive memory game using React.
## Features:
🔹 Developed using **React + Vite**.
🔹 The game supports multiple difficulty levels with different grid sizes.
**User Profiles:**
🔹 Players can create a profile by entering a name and selecting an avatar.
🔹 No authentication (passwords) is required.
🔹 User data is stored in localStorage, allowing results to be saved.
**Score and Ranking System:**
🔹 A timer and moves counter are used to track performance.
🔹 The game tracks the best results first based on number of moves and then on time used to finish
game.
🔹 A ranking system displays the highest score for each level.
**[Program flow .excalidraw file](https://excalidraw.com/#json=PkRrgr1gOpsz-5kqRSaV-,zhjlJ0M2SoKqgAYytcwtLQ)**
### used: React + Vite
```
@trivago/prettier-plugin-sort-imports prettier
npm install react-router-dom
npm i clsx
npm install framer-motion
npm install prop-types
npm i zustand
npm install react-helmet-async
```
### ToDo:
- [x] Capital letter on Rating Page for level's name
- [x] icons: emoji+cup
- [x] bug with messages at the end of game + new score
- [x] reset Rating + localStorage
- [x] fetch errors
- [x] fix levels order on RatingPage
- [x] loader
- [x] convert images
- [x] meta description
- [x] fonts
- [ ] ? project structure