A game for memory training, created with React.js.

🔗 Live preview

Table of Contents

• About the Project
  • Features
  • Technologies
  • Tools
  • Third Party Code
• Build Process
• Usage
• Outcome
• Attribution
• Authors

About the Project

Memory game project, created with React library and styled with Tailwind CSS framework. The project is from The Odin Project curriculum.

Features

• Toggle between fantasy and ordinary themes of the game
• Shuffle the deck at the start of a new game and after each card click
• Track curent points
• Track best score
• Enjoy responsive design

Technologies

• React
• Tailwind CSS

Tools

• Visual Studio Code
• Git and GitHub
• Create React App
• ESLint + Airbnb JavaScript style guide
• Prettier code formatter
• Linux terminal

Third Party Code

• uniqid package
• Google Fonts

 

⬆️ Back to top

Build Process

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

1. Clone this repository:

$ git clone https://github.com/mooniiDev/memory-game.git

2. Go to the cloned repository:

$ cd memory-game

3. Install dependencies:

$ npm install

4. Build an application:

$ npm run build

5. Deploy an application to gh-pages

$ npm run deploy

Usage

1. To try an app use GitHub Pages or start a local server

$ npm start

⬆️ Back to top

Outcome

• Learned how to use functional components and React hooks
• Learned how to style with Tailwind CSS framework
• Cross tested on Firefox and Chromium browsers

Attributions

• Images of plants created by pch.vector
• Border of a card created by rawpixel.com

Authors

mooniiDev | LinkedIn | mooniidev@proton.me