• For Individuals
  • For Businesses
  • For Universities
  • For Governments
Coursera
Log In
Join for Free
Coursera
Scrimba
Build a Memory Game in React
  • About
  • Modules
  • Recommendations
  • Testimonials
  1. Browse
  2. Computer Science
  3. Mobile and Web Development
Scrimba

Build a Memory Game in React

Ajo Borgvold

Instructor: Ajo Borgvold

Included with Coursera Plus

•Learn more
4 modules
Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

Recommended experience

Intermediate level

You need a solid understanding of basic React to complete this course. Try Scrimba's Learn React course here on Coursera.

5 hours to complete
3 weeks at 1 hour a week
Flexible schedule
Learn at your own pace

4 modules
Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

Recommended experience

Intermediate level

You need a solid understanding of basic React to complete this course. Try Scrimba's Learn React course here on Coursera.

5 hours to complete
3 weeks at 1 hour a week
Flexible schedule
Learn at your own pace
  • About
  • Modules
  • Recommendations
  • Testimonials

What you'll learn

  • Building the architecture for a memory game, basic state setup, and API integration.

  • Core game functionality and interaction handling.

  • Accessibility enhancements and GameOver handling.

Skills you'll gain

  • Web Development Tools
  • Front-End Web Development
  • Web Content Accessibility Guidelines
  • Game Design
  • Web Applications
  • Web Development
  • Web Frameworks
  • Interaction Design
  • React.js
  • Usability
  • UI Components
  • Debugging
  • Application Programming Interface (API)
  • JavaScript Frameworks

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

4 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business
 logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

There are 4 modules in this course

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.

This module focuses on the project outline and essential functionalities. You will lay the groundwork with API integration, basic state setup, and card rendering.

What's included

1 assignment11 plugins

1 assignment•Total 15 minutes
  • Building the Foundation Quiz•15 minutes
11 plugins•Total 57 minutes
  • Intro•6 minutes
  • Welcome to interactive lessons!•1 minute
  • Boilerplate code•6 minutes
  • Fetch data from API•5 minutes
  • Store API data in state•4 minutes
  • Aside: HTML entities•5 minutes
  • Render memory cards with API data•5 minutes
  • Issue with emojisData•3 minutes
  • Get random emojis pt. 1•10 minutes
  • Get random emojis pt. 2•6 minutes
  • Duplicate and shuffle emojis•6 minutes

Next up, it's time to build the core game logic and interaction handling.

What's included

1 assignment10 plugins

1 assignment•Total 15 minutes
  • Module 2 Quiz•15 minutes
10 plugins•Total 68 minutes
  • Side note: Address future discrepancies•3 minutes
  • Select a memory card pt. 1•6 minutes
  • Select a memory card pt. 2•5 minutes
  • Select a memory card pt. 3•10 minutes
  • Detect matching cards•9 minutes
  • Are all memory cards matched?•5 minutes
  • Create EmojiButton component•8 minutes
  • Identify selected & matched cards in MemoryCard•6 minutes
  • Conditional memory card content•6 minutes
  • Conditional memory card styling•10 minutes

In this module, you'll explore accessibility improvements and implement GameOver handling.

What's included

1 assignment12 plugins

1 assignment•Total 15 minutes
  • Module 3 Quiz•15 minutes
12 plugins•Total 72 minutes
  • Disabled attribute & conditional event handler•7 minutes
  • Aside: aria-label & aria-live•10 minutes
  • Add aria-label to EmojiButton•9 minutes
  • Side note: Renamed state variable•1 minute
  • Create AssistiveTechInfo component•9 minutes
  • Aside: aria-atomic•6 minutes
  • Make AssistiveTechInfo component accessible•3 minutes
  • Create GameOver component•3 minutes
  • Add button to GameOver component•8 minutes
  • Accessibility issue in GameOver component•2 minutes
  • Aside: Focus as an accessibility tool•10 minutes
  • Make GameOver component accessible•4 minutes

This modules covers error handling, form integration, and wrapping up the project!

What's included

1 assignment10 plugins

1 assignment•Total 15 minutes
  • Module 4 Quiz•15 minutes
10 plugins•Total 66 minutes
  • Identify error handling issue•3 minutes
  • Handle errors with useState•6 minutes
  • Create and render ErrorCard component•7 minutes
  • Refactor App to use formData•8 minutes
  • Create form elements•9 minutes
  • Save form selections in state•6 minutes
  • Refactor form pt. 1•7 minutes
  • Refactor form pt. 2•6 minutes
  • Improve accessibility of Form component•9 minutes
  • Outro•5 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Ajo Borgvold
Ajo Borgvold
Scrimba
2 Courses•172 learners

Offered by

Scrimba

Offered by

Scrimba

Scrimba is an interactive code-learning platform with over a million users from all over the world. They feature highly interactive and engaging courses about programming and web development.

Explore more from Mobile and Web Development

  • Status: Free Trial
    Free Trial
    S

    Scrimba

    React Beginner Project: Build a Movie Search App

    Course

  • Status: Free Trial
    Free Trial
    B

    Board Infinity

    React Fundamentals

    Course

  • Status: Free Trial
    Free Trial
    S

    Scrimba

    Learn React

    Course

  • P

    Packt

    ReactJS - The Beginner Masterclass

    Course

Why people choose Coursera for their career

Felipe M.
Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
Jennifer J.
Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
Larry W.
Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
Chaitanya A.
"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."
Coursera Plus

Open new doors with Coursera Plus

Unlimited access to 10,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Learn more

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Explore degrees

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Learn more

Frequently asked questions

Access to lectures and assignments depends on your type of enrollment. If you take a course in audit mode, you will be able to see most course materials for free. To access graded assignments and to earn a Certificate, you will need to purchase the Certificate experience, during or after your audit. If you don't see the audit option:

  • The course may not offer an audit option. You can try a Free Trial instead, or apply for Financial Aid.

  • The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you purchase a Certificate you get access to all course materials, including graded assignments. Upon completing the course, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile. If you only want to read and view the course content, you can audit the course for free.

You will be eligible for a full refund until two weeks after your payment date, or (for courses that have just launched) until two weeks after the first session of the course begins, whichever is later. You cannot receive a refund once you’ve earned a Course Certificate, even if you complete the course within the two-week refund period. See our full refund policyOpens in a new tab.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

More questions

Visit the learner help center

Financial aid available,

Coursera Footer

Technical Skills

  • ChatGPT
  • Coding
  • Computer Science
  • Cybersecurity
  • DevOps
  • Ethical Hacking
  • Generative AI
  • Java Programming
  • Python
  • Web Development

Analytical Skills

  • Artificial Intelligence
  • Big Data
  • Business Analysis
  • Data Analytics
  • Data Science
  • Financial Modeling
  • Machine Learning
  • Microsoft Excel
  • Microsoft Power BI
  • SQL

Business Skills

  • Accounting
  • Digital Marketing
  • E-commerce
  • Finance
  • Google
  • Graphic Design
  • IBM
  • Marketing
  • Project Management
  • Social Media Marketing

Career Resources

  • Essential IT Certifications
  • High-Income Skills to Learn
  • How to Get a PMP Certification
  • How to Learn Artificial Intelligence
  • Popular Cybersecurity Certifications
  • Popular Data Analytics Certifications
  • What Does a Data Analyst Do?
  • Career Development Resources
  • Career Aptitude Test
  • Share your Coursera Learning Story

Coursera

  • About
  • What We Offer
  • Leadership
  • Careers
  • Catalog
  • Coursera Plus
  • Professional Certificates
  • MasterTrack® Certificates
  • Degrees
  • For Enterprise
  • For Government
  • For Campus
  • Become a Partner
  • Social Impact
  • Free Courses
  • ECTS Credit Recommendations

Community

  • Learners
  • Partners
  • Beta Testers
  • Blog
  • The Coursera Podcast
  • Tech Blog

More

  • Press
  • Investors
  • Terms
  • Privacy
  • Help
  • Accessibility
  • Contact
  • Articles
  • Directory
  • Affiliates
  • Modern Slavery Statement
  • Manage Cookie Preferences
Learn Anywhere
Download on the App Store
Get it on Google Play
Logo of Certified B Corporation
© 2025 Coursera Inc. All rights reserved.
  • Coursera Facebook
  • Coursera Linkedin
  • Coursera Twitter
  • Coursera YouTube
  • Coursera Instagram
  • Coursera TikTok
Coursera

Welcome back

​
Your password is hidden
​

or

New to Coursera?


Having trouble logging in? Learner help center

This site is protected by reCAPTCHA Enterprise and the Google Privacy Policy and Terms of Service apply.