Skip to content
πŸ” A click based memory game built with React! Try to click all the colors without clicking any color twice:
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Memory Color Clicker

This is a simple memory game I built for my full-stack coding bootcamp. It was built with React, which it uses it to serve up front-end content and manipulate the DOM. The game is built primarily around one stateful app component that keeps track of user clicks, user score and high score, and the position of content on the page which needs to be re-rendered every time the user clicks.

Demo Gif

πŸ”‘ How to Use the App:

Simple as this memory game is, it isn't quite so easy as it seems. Try to click on each of the colors exactly 1 time, for a maximum high score of 12 points. The problem is, each time you click a color, the positions of each color will be mixed up, so you'll really have to remember which colors you've clicked on. Some of the colors are pretty similar too, so hopefully you have a good memory πŸ˜‰

πŸ“ Deployment Instructions

Deployed version of the app can be found here. To run this app on your machine, follow these instructions.

  1. Clone this repository down to your machine.

  2. You will need to have Node.js installed in order to continue.

  3. Enter npm install in your command line after navigating into the root directory, which will install the dependencies listed in the package.json.

  4. Enter npm start, which will start the app on http://localhost:3000. For more options on running the app on your own machine or setting up builds for deployment, check out the Create-React-App docs linked below.

  5. Navigate to http://localhost:3000 in your browser, or ctrl-click the link that will be logged to your console. Enjoy!

This project was bootstrapped with Create React App.

πŸ”§ Technologies Used

  • HTML5 and CSS3 for page content and styling.

  • Bootstrap as a CSS framework for styles and components.

  • React.js as the main UI library.

  • Javascript for the app's logic.

  • Node.js for the app's runtime environment.

  • NPM for installation of the packages required by the app, listed as dependencies in the package.json.

🌌 Author

Thor Nolanβ€”

You can’t perform that action at this time.