Project: Memory Card

Introduction

And here we go again with a new project! Let’s make sure you understood the concepts so far. The main goal of this project should be 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 here to find out for yourself. You are not required to use celebrities, you can use anything you like.

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. So now that you 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.
Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord