> For the complete documentation index, see [llms.txt](https://howtocode.trek.io/topics/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://howtocode.trek.io/topics/deep-dives/react/project-memory-card.md).

# Project: Memory card

## 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](https://www.golangprograms.com/react-js-projects-for-beginners.html). It's a great resource for project ideas.

## How the game works

Go play around [with a solution](https://heldersrvio.github.io/Memory-Card-Game/) 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://howtocode.trek.io/topics/deep-dives/react/project-memory-card.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.