marlatte / memory-card

A React-built game that tests your memory. Click each card only once! Get them all without doubling and you win!!

Hi there 👋

I'm a front-end developer educated through The Odin Project who also enjoys:

• Making music 🎸 🥁 🎤
• Designing logos and layouts 🖼️ 🖍️
• Tearing my hair out over soccer ⚽️ 🛡️

Skilled with

memory-card's Issues

Fix end game screen

Let user know if they won or not.

Collect gif IDs for characters

Search character gifs on GIPHY, using last part of url as ID.

Check that ID is valid with their API Explorer.

Implement useEffect()

Currently the program fetches its data on initial render, then cuts it down however many I set for the sample characters. Next I need it to:

• Set the number of characters displayed by the difficulty level
• Fetch the data asynchronously

Plan app

General Steps and Questions

Thinking in React

Starting from a mockup...

1. Break the UI into a component hierarchy
2. Build a static version in React
3. Find the minimal but complete representation of UI state
4. Identify where your state should live
5. Add inverse data flow

This Project's goals

• What features do you want?
• What components does that necessitate?
• How to structure? Where does state live?
• How to get images/names from API?

Design

Does the app fetch everything on load or re-fetch random characters on every turn? Seems unnecessary to do it so many times. Might ask the Discord.

Good Place or Ted Lasso?

Add start and end modals

• Allow game reset if a card is clicked twice
• Start modal sets mode
• Mode decides how many cards to display

Create React Project

• npm create vite@latest <repo-name> -- --template react
• git init then add and commit
• gh repo create
• Rm template files
• Set up file structure
• Add basic README and descriptions
• Add prettier & airbnb configs: npm i -D eslint-config-prettier eslint-config-airbnb
• Add them to eslint 'extends' (airbnb first, prettier last)