Build a Memory Game in React Tutorial

Create an accessible, interactive memory game using React. This course takes you through building a polished project while exploring how to fetch data, manage state, and implement best practices for inclusivity and functionality.

✏️ Study this course interactively on Scrimba:

Code is available on the Scrimba course page for each lesson.

Discover how to build a fully interactive memory game in React, designed to enhance your development skills and with a focus on accessibility.
This course guides you through each step, from fetching and managing API data to designing reusable components and implementing user interactions.
You’ll work on challenges such as randomizing game elements, detecting matches, and handling errors. Along the way, you'll gain practical experience in solving common development problems.
Accessibility is a key focus of the project, with detailed guidance on ARIA attributes, semantic HTML, and designing for inclusivity.
This course is ideal for anyone looking to deepen their React knowledge while working on a meaningful, real-world project. By the end, you’ll have an accessible, polished memory game that demonstrates your skills and commitment to building user-friendly applications.

Timestamps:
Building the Foundation
0:00:00 - Intro
0:06:00 - Boilerplate code
0:11:53 - Fetch data from API
0:17:18 - Store API data in state
0:21:19 - Aside: HTML entities
0:26:08 - Render memory cards with API data
0:30:45 - Issue with emojisData
0:33:29 - Get random emojis pt. 1
0:43:32 - Get random emojis pt. 2
0:49:32 - Duplicate and shuffle emojis

Core Game Functionality
0:55:10 - Side note: Address future discrepancies
0:58:59 - Select a memory card pt. 1
1:05:22 - Select a memory card pt. 2
1:10:37 - Select a memory card pt. 3
1:20:16 - Detect matching cards
1:28:50 - Are all memory cards matched?
1:34:11 - Create EmojiButton component
1:42:58 - Identify selected & matched cards in MemoryCard
1:48:38 - Conditional memory card content
1:54:44 - Conditional memory card styling

Accessibility Enhancements
2:04:33 - Disabled attribute & conditional event handler
2:12:01 - Aside: aria-label & aria-live
2:21:50 - Add aria-label to EmojiButton
2:31:00 - Side note: Renamed state variable
2:32:32 - Create AssistiveTechInfo component
2:41:29 - Aside: aria-atomic
2:47:52 - Make AssistiveTechInfo component accessible
2:50:46 - Create GameOver component
2:54:05 - Add button to GameOver component
3:02:07 - Accessibility issue in GameOver component
3:03:45 - Aside: Focus as an accessibility tool
3:14:14 - Make GameOver component accessible

Advanced Features
3:18:11 - Identify error handling issue
3:21:10 - Handle errors with useState
3:26:52 - Create and render ErrorCard component
3:34:24 - Refactor App to use formData
3:42:18 - Create form elements
4:00:19 - Save form selections in state
3:57:44 - Refactor form pt. 1
4:05:15 - Refactor form pt. 2
4:12:13 - Improve accessibility of Form component
4:20:50 - Outro

[progosling]

This video taught me React ⚛ now I’m officially React-ing to everything!

[Mooshine]

Wow, first time when i see course uploaded minute ago!

[AK-Star]

A video needed, where tell us about future requirements, where to start and what to learn

[khalidelgazzar]

Thanks. That's on my list. Love Scrimba's courses.

[sun_tzuu]

This should be an easy one. Lets hope I can finish this tutorial XD

[aryankhandelwal]

1:04:06 too much onClick might overwhelm browser i think you could have used event delegation technique to solve this problem. and you can also put all the static function(not depend on state) outside component this way it wont re-render again and again and contribute to the improved performance ty

[insane]

You should scroll up the screen where you are writing code.. don't just start writing at the bottom of the screen... and should share the links you use in the description....also should have shared the CSS file.. explaination method was good

[JDGonzal]

Hello, how can I get the JSON from API, because the API site is down, please.

[SusanooYoutube]

the fetch api is down and doesn't work. bad example. I was excited to do it .

[anaximenses]

Been waiting for this. First to view. First to comment

[MartinezzJT]

You mean I'm one of the top ten commenters today? Kiss this comment late comers 😅

[Breezymewithdeep]

Please give the minigames project in nxtwave solution

[robert.baindourov]

Is there a link to the code so I can read the completed project?

[luciana]

Horrible explanation of the game - very dissapointed

[aryankhandelwal]

in useEffect of selectedCard depedency put this code

else if (
selectedCards.length === 2 &&
selectedCards[0].name != selectedCards[1].name
) {
setTimeout(() => {
setSelectedCards([]);
}, 500);
}

index.css
.btn--emoji__front {
transition: all 0.5s ease;
}


this auto flip cards when the 2nd card is not matched. 😊 change timeout as per ur need
and put this css it will perserve the flip when cards are not matched. maam actually not handling this ty