A memo test game developed using NextJS, React and Tailwind CSS.

This game will be composed of a few pages:

Simple list of memo tests with a button ‘Start’ to start a new session for that memo test or ‘Continue’ to continue an already created and unfinished session stored in some front-end storage

• The list of memo tests should display the highest score that was reached in some of the sessions for that game

A page containing a list of images (2 copies per image) hidden with a number sorted in random order

• In the beginning, you will see a covered card with a number. The user will be able to click on any card to uncover the image (it should have some animation) and will be able to uncover two at a time
• If they are the same image, they should remain uncovered for the rest of the session
• If they are different, they both should flip again to the black card with the number
• Each time a pair of cards is selected the retries in the session should be updated

Once all pairs have been uncovered the session should end and show a score calculated like this: score = (numberOfPairs / retries) * 100 and a button to return to the Home

The information of an ongoing session or the highest scores per game should persist if there is a browser refresh.

1. Install dependencies

npm install

2. Create an .env.local file in project root using .env.example

cp .env.example .env.local

3. Run server

npm run dev

1. Run storybook

npm run storybook

2. Go to

http://localhost:6006/

Feel free to reach me out - [email protected]