Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alleycaaat/memory-card-game
A memory game for those who truly want a challenge: the card pairs aren't visual duplicates!
https://github.com/alleycaaat/memory-card-game
appwrite jamstack netlify react scss vitejs-react web-dev web-game
Last synced: about 1 month ago
JSON representation
A memory game for those who truly want a challenge: the card pairs aren't visual duplicates!
- Host: GitHub
- URL: https://github.com/alleycaaat/memory-card-game
- Owner: alleycaaat
- Created: 2023-11-13T17:29:59.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-25T19:52:39.000Z (8 months ago)
- Last Synced: 2024-09-29T14:01:32.844Z (3 months ago)
- Topics: appwrite, jamstack, netlify, react, scss, vitejs-react, web-dev, web-game
- Language: JavaScript
- Homepage: https://ach-memory-card-game.vercel.app/
- Size: 248 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
![Vercel][Vercel]
![last commit][last-commit]
![issues open][issues-open]
![github stars][stars]Memory Game
Memory Game is a Jamstack web-app developed using [React](react-url) and [SCSS](sass-url) to create a responsive, optimized interface. Users can choose from three different card decks, two different difficulty levels, and from three card amounts. The user clicks on any two cards and they flip over to show what their face is, if they match they stay visible, otherwise they'll flip back over. A timer lets the user know how much time has passed, and a counter shows how many incorrect guesses they've made.
Table of Contents
## About The Project
![A web app titled Memory Game with options to select a card type, amount and difficulty level](./src/assets/screenshot.png)
![repo size][repo-size]
![language count][language-count]
![main language][main-language]
### Current Features
- Users can pick a normal or difficult game
- Animation shows card flip
- Checks prevent game from starting without deck, category and card count selections
### Updates from V1
- Switched database host from fauna to appwrite
- Create new card faces for improved contrast
- Added utilities and constants
- Created more components for cleaner code
### Built With
[![React][react.js]][react-url]
[![Sass][sass]][sass-url]
### Tested On
[![Chrome][chrome]][chrome-url]
[![Opera][opera]][opera-url]
### Dependencies
***
- [react](https://www.npmjs.com/package/react)
- [react-dom](https://www.npmjs.com/package/react-dom)
- [vite](https://www.npmjs.com/package/vite)
- [sass](https://www.npmjs.com/package/sass)
- [appwrite](https://www.npmjs.com/package/appwrite)
## Feedback
As my cats and dog aren't too keen on providing input on my projects, feel free to [send me a message](https://www.achulslander.com/#contact) if you have some constructive comments, or [file an issue](https://github.com/alleycaaat/memory-card-game/issues/new) if I really buggered something up.
## Contact
AC Hulslander - [Send me a message](https://www.achulslander.com/#contact)
[![GitHub][github]](https://github.com/alleycaaat/)
[![hashnode][hashnode]][hashnode-url]
[![linkedin][linkedin]][linkedin-url]
[![discord][discord]][discord-url]
[![codepen][codepen]][codepen-url]
[![twitter][twitter]][twitter-url]
## Acknowledgements
- [Img Shields](https://shields.io/)
- [Appwrite docs](https://appwrite.io/docs)
[Vercel]: https://vercelbadge.vercel.app/api/alleycaaat/memory-card-game
[issues-open]: https://img.shields.io/github/issues/alleycaaat/memory-card-game?color=blue&logo=github
[repo-size]: https://img.shields.io/github/repo-size/alleycaaat/memory-card-game?color=red&logo=github
[language-count]: https://img.shields.io/github/languages/count/alleycaaat/memory-card-game?color=orange&logo=github
[main-language]: https://img.shields.io/github/languages/top/alleycaaat/memory-card-game?color=yellow&logo=github
[last-commit]: https://img.shields.io/github/last-commit/alleycaaat/memory-card-game?logo=github
[stars]: https://img.shields.io/github/stars/alleycaaat/memory-card-game?color=purple&logo=github
[linkedin]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/achulslander
[react.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[react-url]: https://reactjs.org/
[sass]: https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white
[sass-url]: https://sass-lang.com/
[chrome]: https://img.shields.io/badge/Google_chrome-4285F4?style=for-the-badge&logo=Google-chrome&logoColor=white
[chrome-url]: https://www.google.com/chrome/
[opera]: https://img.shields.io/badge/Opera-FF1B2D?style=for-the-badge&logo=Opera&logoColor=white
[opera-url]: https://www.opera.com/download
[github]: https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white
[codepen]: https://img.shields.io/badge/Codepen-000000?style=for-the-badge&logo=codepen&logoColor=white
[codepen-url]: https://codepen.io/alleycaaat
[twitter]: https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white
[twitter-url]: https://twitter.com/achulslander
[hashnode]: https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white
[hashnode-url]: https://hashnode.com/@alleycaaat
[discord]:https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white
[discord-url]: https://discord.com/users/427569685366833174