Memory Game V2

The second iteration of memory game two built from the ground up using react and firebase, features a secure google authentication system that is managed by firebase that allows users to login and submit their highscores to a real time leaderboard that ranks players based on score and time respectively, the game also includes a dynamic gridsize that lets players choose their grid size.

Purpose and Direction

Memory Game V2 was actually a passion project that was based off the first rendition, Memory Game was built as an interactive game for all my friends to enjoy and also since building regular websites was getting pretty tiresome, hence designing MG2 was vastly different from most of my projects since it was an all original design. It features a competitive leaderboard that compares against time and level and also a customizable grid/playing field that is dynamic

Stack Explanation

The first Memory game was built using javascript which worked but has a lot of issues including performance, since the game was constantly making changes to the DOM it made the game lag several times while playing, hence react was chosen since it allows for quick and non intensive changes to the UI using the virtual DOM. As well as this a promised leaderboard was planned to be a big feature of the game, hence a lightweight database was needed as well as user authentication, thus firebase was chosen for its easy authentication system and non relational DB that was fast and efficient

Issues and Lessons Learnt

One of the biggest issues with this project was working with state and rendering, especially when there a multiple instances of state that you have to account for, since at the time i had not learnt redux yet, dealing with multiple instances of state did get overwhelming at times so to get around this i created a complete diagram of all my child components and state using my whiteboard and so planning it that way allowed me to see which states affected which components. but ultimately the project deepened my understanding of react by a good amount, teaching me about how to manipulate the life cycle if components to change state. Overall it was a challenging but rewarding project and any future renditions will most likely have redux incorporated