GitHunt
IN

Inna-B10/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!

Project name: ๐Ÿƒ Memory (card game)

Project 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 schema

๐Ÿงฉ Tech Stack

React
Vite
react-dom
react-router-dom
zustand
framer-motion
react-helmet-async
clsx

๐Ÿ—ƒ Dependencies

@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:

  • ? project structure

โœ… Done

  • Capital letter on Rating Page for level's name
  • icons: emoji+cup
  • bug with messages at the end of game + new score
  • reset Rating + localStorage
  • fetch errors
  • fix levels order on RatingPage
  • loader
  • convert images
  • meta description
  • fonts
Inna-B10/Memory-game | GitHunt