CatchTheLiz

• 

  Landing Page

• 

  Just give a player name

• 

  Game starts

• 

  Score updates

• 

  Leaderboard

Inspiration

Catch the Liz came from a desire to create something fun that would help people improve their reflexes and observation skills. I always had challenges with focusing and noticing details either it be at school or outside. I just wanted to create something that would serve as a playful exercise as well as improve concentration and attention to detail.

What it does

Although Catch the Liz does not looks fancy or solve worldly problems, it is a basic interactive web-based game where the players are presented with a grid of tiles, each tile displays an image either be a cat, dog or a lizard (Liz). The goal is for the player to quickly identify and find the Liz. Also, the game has the time limit to help motivate players achieve the highest score within the time limit and get on the top of the leaderboard.

How we built it

I built it using combination of frontend technologies and firebase as a backend service. The tech stack used are: React (Next.js), ChakraUI, TypeScript and Firebase Realtime Database. I also optimized the game by preloading images in the background to ensure smooth gameplay.

Challenges we ran into

One of the main challenges I ran into was fine-tuning and finding the right balance between making it enjoyable and as well as challenging. Majority of my time went on figuring out the randomize tile placement which required careful planning.

Accomplishments that we're proud of

During building this project in a short period of time (less than a day), it created the sense of urgency and it lead me to spend time about planning, and managing different states for the game.

What we learned

This was my first time hands-on work with firebase as a backend service, so it was very exciting to figure things out as I had to go through couple of stack overflow's and google searches to solve the problem of randomizing tiles properly. Nevertheless, learnt something new while building this project.

What's next for CatchTheLiz

I have a Roadmap set for this small project. Maybe integrating authentication would be the next step for CatchTheLiz, and increasing the complexity of the game, giving that complexity option to the user where the user can select what they want to catch (lets say even pokemon) among bunch of other animals, then set the complexity and play the game. One major goal is to find a perfect balance between making it challenging as well as enjoyable while improving focus and observation skills.

Built With

• chakra-ui
• firebase
• nextjs
• react
• restapi
• typescript
• vercel