Games as a Way to Learn Web Dev - Elementle.io

My wife and I enjoy playing many of New York Times's daily games like Wordle, Connections, and the Mini. These games are short enough to play while waiting for gas at Costco or while waiting for our food to arrive at a restaurant.

I also work at a startup where a majority of our tech stack has had intelligent abstracts layered above them for optimization and security. While it is great to work with these abstractions since I do not have to worry about the intricate details about GraphQL, Mongo, or Material UI, I feel as if part of my growth is stunted by not having to dig into the weeds.

From these two, building out a Wordle-like game was in my line of sight. One day I was brainstorming different ideas for what websites I could make for practice. Several Wordle-like games came to mind. Since I had never taken Chemistry and had little knowledge about the periodic table, I decided to focus on building a Periodic Table game.

How would a Periodic Table Wordle Game Work?

Wordle is fairly simple, you are only able to choose one of 26 letters and have only 5 slots to guess. The hints are whether the correct letter was selected and if it was in the correct position. This makes it quite difficult to make a similar periodic table based game since there are 118 elements and I was not interested in making a word based game.

Gamedle is another daily guessing website with multiple minigames (It's really fun, give it a try!). The "Guess" game requires you to guess a game based on different specifications like platform, genre, themes, engine, etc. This style of game is more compatible with a periodic table game. Instead of having platforms and genres, I would use the atomic number, period, group, and other properties of elements to guide the user.

The Tech Stack

Given that I wanted to practice my front end skills without internal frameworks designed by geniuses, I wanted to use React, Next.js, and Mantine UI as a base. We use React and Next.js at work which would allow me to develop skills learn more about these frameworks without our abstractions. We use Material UI at work and its phenomenal, but I decided to use Mantine in order to stretch myself with new components.

For a maintaining user data, I stored data in the user's local storage and on Upstash Redis. I initially wanted something basic to quickly store whether a user had won that game mode for that day already and track the number of wins. Redis is not a great fit for this though as it will not scale well as more people play. I aim to transition into a database in the future, potentially dipping into Supabase or another DB that runs on postgres.

Finally, for hosting I used Vercel. I've heard about Vercel quite frequently in the recent months. Vercel was one of the first names that popped up when I was doing initial research for cheap website hosting. It was incredibly seamless to take my Github repository and deploy it on Vercel. Hooking it up to use a domain I setup with Hostinger took more time than setting up the Vercel project. For future projects I will definitely be returning to Vercel just because of its ease of use.

Core Gameplay

There are two main modes, one practice mode, and one endless mode. The goal in the Classic and Hard mode is to guess the target element. Each guess gives a hint of whether the period, group, discovery era, or other properties are correct. For the Classic mode, a hint of whether the atomic number is higher or lower is provided. For the Hard mode, this is not given. The endless mode is the same ast he Classic mode, but with replay-ability. The practice mode takes you through guessing each element in the periodic table.

Part of the Wordle-like games is that they are daily. Once you lose or win you must wait until the next day to play again. For both the Classic and Hard mode, the target element must also be static for a given day. To do this, the date is combined with the game mode to create a unique hash. This hash is then used to randomly select the target element of that day. Hashes should be relatively distributed so it is very unlikely for the same element to be selected for two days in a row. As a future change, I would like to make any consecutive group of 14 elements to be different to ensure uniqueness.

Development Mistakes and Learnings

Development was fairly straightforward. There isn't any complicated logic needed on the backend, almost all the code is run on the frontend. Unfortunately, using React and choosing to use a reducer made this much more complicated than needed. I also chose to reuse too many components across the game modes making it difficult to know when I broke another game mode.

I also fell into pitfall of building out far too much without launching the website. I originally thought of having even more game modes. It seemed trivial to add a hard mode and a practice mode. However, adding these modes brought bugs that delayed the initial launch of the site. What would have taken me one weekend to build out and launch ended up waiting several months until I returned to the project and fixed it. It would have been prudent to have the classic mode working as is before adding other modes.

Going Forward

There are some changes I'd like to add in the next few months.

• Guessing element by a visual representation of the element.
• Adding more types of practice modes, creating a variety of difficulties, etc.
• Visual atomic elements table to help users figure out the target element.
• UI/UX improvements to make the game less of an eyesore.

Otherwise, I plan on moving onto other projects. Wordle-like games are quite easy to make. If I can avoid over-engineering and producing a simple and initial version, I'm sure I can make something cleaner in a much shorter amount of time.

Overall, I'm happy with the result. It's nice to see users bounce in and win games. I've never built my own website before so this feels like a great accomplishment!