memory-game Tailwind Templates

Memory Game

A memory game created with React.js and styled with Tailwind CSS.

Memory Game logo

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

šŸ”— Live preview

Table of Contents

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

Homepage InterfaceGame Interface

ā¬†ļø 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
  1. Go to the cloned repository:
$ cd memory-game
  1. Install dependencies:
$ npm install
  1. Build an application:
$ npm run build
  1. 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

Authors

mooniiDev | LinkedIn | mooniidev@proton.me

Top categories

Loading Svelte Themes