hannahkim313 / memory-card

A memory card game using a Nintendo Amiibo API to display Animal Crossing character cards.

Memory Card Game: Animal Crossing Edition

https://memory-card-ehz.pages.dev/

Project Summary

This project exercise, created by The Odin Project, is a simple memory card game to practice working with hooks to manage state and side effects while fetching and using data from an API.

Features Overview

Demo:

How to Play

The Rules

This is a simple memory card game that tests your ability to remember and select different cards each round. To play, click on a card that has not been selected yet. If your memory serves you right, the cards will shuffle and you get to play again until all 8 cards are selected. If you select a previously selected card, the game ends!

What Happens When You Win

Congratulations! To start a new game, choose any of the two options:

1. Refresh the page.
2. Click on any card.

Both methods will reset the round and scoreboard as well as display new cards.

What Happens When You Lose

When you click on a card that has already been selected, the cards will shuffle and both the round number and current score will reset to their default value. The cards remain the same until you select all 8 cards! To continue playing, click on any card and try and beat your best score.

Reflection

After completing this project, I found myself getting the hang of working in a React environment and using state and effect hooks. This is only my second time working with APIs, so I learned more about using try/catch blocks and the process of retrieving data that may or may not contain null/undefined values. It's important to consider that some data is sparse. Although this is my second time working with APIs, it is my first project working with APIs in React. I implemented the AbortController Web API to handle React's strict mode from producing multiple API calls. My research at the time led me to believe this was an effective solution, but I may find another solution as I progress through the React curriculum. Moving forward, I definitely plan to look into creating my own custom hooks and components to create cleaner code. This was not a major objective for this project since I am still getting used to working with React and the React workflow.

Credits

• Favicon icon by Vitaly Gorbachev on Freepik
• Animal Crossing background image by jotaauvei on DeviantArt
• Amiibo API by Nevin Vu