Memory Card Game

💻 Technologies

Live Preview

Demo:

Screen views

Desktop View:

Tablet View:

Mobile View:

🌐 Origin

The Odin Project

📝 Description

Builds a memory card game.

Features

• Loads to display status - Initializing page, after loss, and win.
• Displays info on hover.
• Updates scores in real-time.
• 3d interaction effect on cards.

🎯 Relevance

To solidify concepts of State and Effects in React.

👥 Intended Audience

Developers, users, and non-developers.

Note

Users can install all dependencies using package.json file via:

npm install

📂 Files

Invert

File	Description
src/*	Source files that are bundled into the output directory dist/.
src/main.jsx	The main JavaScript entry point that bundling begins.
src/App.jsx	Main component where overall structure and other layout components of the app are contained.
src/assets/*	All assets(imgs, icons, vids) used in website.
src/components/Boilerplate.jsx	All components in body assembles here.
src/components/Card.jsx	Creates each card.
src/components/FetchImgs.jsx	Fetches all image urls.
src/components/ids.js	Generates ids with uuid.
src/components/Info.jsx	Displays info section.
src/components/Loading.jsx	Creates a loading display with two props: gif and text.
src/components/Score.jsx	Displays Score section.
src/styles/App.css	Main stylesheet for entire site.
src/styles/reset.css	Sets style to default for consistency across different devices and browsers.
dist/*	Output files from bundling of files in directory src/.
dist/main.js	Main JavaScript output file that contains the bundled JavaScript code. Code is minified and optimized for deployment (Due to mode set to production in webpack config).
package*	Contains details of project and dependencies versions.
readme-assets/*	Live demo and different screen views used in README.md.

©️ Credit

Invert

File	Description
src/assets/banana.png	Photo created by Meesgroothuis on Pixabay.
src/assets/bg.jpg	Photo created by Alexas Fotos on Pixabay.
Fetched Images	Photos created by Alexas Fotos on Pixabay API.
src/assets/*.gif	Photo from Giphy.

🔄 Improvements

Invert

• Fix load resource error in console.
• Add sound.
• Use an svg favicon.
• Make flip appear 3d.
• Display remaining moves at bottom (n/8).
• Make sure images fully appear before Loading ends.
• Add difficulty level.

👤 Curator

1. Abraham Da Costa Silvanus

🞁 Top