ScreenGrab
ScreenGrab was inspired by games like Wordle and Framed, where players are given a set number of guesses to win the game. In ScreenGrab, players are given 6 tried to guess a video game from screenshots. There are 100 games to play, and
Technologies
Next.js, React, Tailwind, Typescript
Development Process
ScreenGrab is a Next.js application using Typescript, and uses Tailwind for styles. It started as a daily game where there would be a new game to guess every day. Ultimately, I couldn’t keep up with it and ended up changing the game to be a static set of 100 games, where progress is stored locally using the browser’s localstorage.
Architecture
The architectural decisions that I made were based on the fact that I would be the only developer working on this project, and the number of games would stay static (it’s unlikely that I’ll add more games in the future).
- The 100 games are defined as an array of objects with properties such as the game number and the name of the game.
- The application uses the Next.js pages router. The pages are rendered server-side, and the games are fetched on the server using the game number from the url.
- The list of games that is used for autocompletion when guessing is defined as an array of strings.
- Images are all stored in the repository. Since the codebase is relatively small, the number of games is unlikely to become too large, and the images didn’t need to be super high resolution (most of them are 720p), I decided to keep the images in the repository rather than fetch them from a CDN.
Images
