Frontend Mentor - Memory game solution
This is a solution to the Memory game challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Table of contents
Overview
The challenge
Users should be able to:
- View the optimal layout for the game depending on their device's screen size
- See hover states for all interactive elements on the page
- Play the Memory game either solo or multiplayer (up to 4 players)
- Set the theme to use numbers or icons within the tiles
- Choose to play on either a 6x6 or 4x4 grid
Expected behaviour
- You can choose to make the default screen either the Start Game screen or the solo player 4x4 grid. Note that we're using the solo player 4x4 grid for the design screenshot, so if you choose the Start Game screen, it won't match up in the design comparison slider. This isn't a big deal, but is something worth considering.
- In a solo game, track the time elapsed since first clicking on a tile and the total number of moves made. A move counts as two tiles being selected as a potential match. Once all pairs have been found, stop the timer and show the end of game modal with the stats.
- In a multiplayer game, track the total number of pairs each player has found. If a player finds a pair, increment their score by one. The current turn switches to the next player after the current player has made a move to find a potential match.
- Clicking "Restart" will restart the game with the current settings.
- Clicking "New Game" will go to the Start Game screen where the player can choose their settings.
- The icons in the design are from Font Awesome. Please choose whatever icons you prefer. You could even use a different icon library, if you like.
This solution opens on the Start Game screen. A player who finds a pair plays again and a miss passes the turn, as in the classic Concentration rules. The mobile menu also pauses the game, which the brief doesn't ask for: paused time is not counted.
Screenshots
Links
My process
Built with
- Semantic HTML
- Mobile-first layout with Tailwind CSS 4 utilities, CSS Grid and Flexbox, and design tokens in
@theme
- React 19 with TypeScript (strict), Context +
useReducer and the React Compiler
- Vite - build tool and dev server
- React Router
- Base UI components through local shadcn wrappers - buttons, toggle groups and dialogs
- Motion - tile flips, board entrance, dialogs and the current-turn highlight
- Font Awesome - tile icons
- class-variance-authority - typed style variants for Tailwind classes
This is the beginning of the README. Read the rest at the original. Read the full README ↗
