This project is part of The Odin Project's curriculum
It is a simple memory game where the goal is to select all cards without selecting the same card twice.
I decided to make it Harry Potter-themed, as it is a series of books and movies I've thoroughly enjoyed.
The API used was PotterAPI
The main goal of this project was to practice fetching from a public API using the useEffect hook. Despite already having used said hook prior to this project, I now feel more comfortable with it.
This project also allowed me to get more comfortable with Vite, TailwindCSS and TypeScript.
Originally intending to use a different API, I learned by reading its documentation that in order to use that API I had to create a proxy server. So, consequentially, I delved into understanding CORS mechanisms, the function of Proxy servers, scenarios where their usage proves beneficial, and different types of APIs. While much of this information was not entirely new to me, revisiting these concepts served as a valuable refresher.
In the end, I decided not to use the aforementioned API, but I plan to come back in the near future and use it in a new implementation of this project, that's what the videogames-version branch is for.
hp-memory-game-demo.1.mp4
Loading screen
Menu screen
Game screen
Outcome screen
