Project: Memory card

Learn how to build a memory card game.

Introduction

Here we go again with a new project! Let's make sure you understand the concepts so far. The main goal of this project is to use hooks or lifecycle methods as well as a lot of state. The idea for this project comes from this site. It's a great resource for project ideas.

How the game works

Go play around with a solution to find out for yourself how the Memory game works. Although this example uses cartoon characters, you can use anything you like for your game.

Assignment

1. Create a new project using create-react-app.

2. Take a little bit of time to think about how you want to implement your application, the features you want to implement, which components you need, and how to structure your application. Your application should include a scoreboard, which counts the current score, and a "Best Score", which shows the best score you achieved thus far. You also need a couple of cards that display images and possibly informational text. There should be a function that displays the cards in a random order anytime a user clicks one. Be sure to invoke that function when the component mounts.

3. Now that you've thought about the structure of your application, set up the folder structure and start creating the components. We suggest you use functional components and therefore hooks in this project.

4. Style your application so you can show it off!

5. As always, push the project to GitHub.