Build a Memory Game in React Tutorial
807Create 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:https://scrimba.com/memory-game-in-react-c0a3odsk39?utm_source=youtube..
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.
Scrimba on YouTube
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