Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 19 hours ago
JSON representation

A memory game for those who truly want a challenge: the card pairs aren't visual duplicates!

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]



(back to top)



### 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)



(back to top)



## 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.



(back to top)



## 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]




(back to top)



## Acknowledgements



- [Img Shields](https://shields.io/)

- [Appwrite docs](https://appwrite.io/docs)



(back to top)



[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