A fast-paced word game built with Firebase and React
GAME DESIGN, WEBDEV, MULTIPLAYER
wordlet!
GAME DESIGN, WEBDEV, MULTIPLAYER
SUMMARY
wordlet! is an online word game I built for my final project in HCDE 438 — Web Technologies class using JSX, Vite, React, and Firebase.
This project taught me how to develop a single-page web application, user-test games, and implement multiplayer capabilities and optimization strategies with Firebase.
Inspired by word games such as Bomb Party, Word Hunt, and Monkeytype, wordlet! was made as my final project in my Web Technologies class. In the game, players must enter as many valid words containing the given prompt as possible within a time limit.
The game prompts a two-character substring and the player must enter a word that contains the substring. Substrings alternate every 20 seconds. The goal is to enter as many valid words as possible within the time limit.
Words that contain previous substring prompts earn bonus points.
Example final summary screen.
Players can either host a game or join an existing game by entering the lobby code.
CHALLENGE
Optimizing the backend
Since the game only accepts valid English words, I needed a way to verify user input. My initial approach was to include a 43MB file of the English dictionary directly in the application, but this caused every user to download the full file on each visit—resulting in heavy resource usage.
To reduce the download size, I moved the dictionary to Firebase and implemented a system that loads only the necessary portions of the file as the game progresses. This significantly reduced the app’s initial download size and ultimately allowed me to support twice as many concurrent players with a free Firebase plan.
By optimizing the way users loaded in the dictionary file, my game was able to double the max number of players it can support under Firebase's free hosting plan.
REFLECTION
Recognizing the impact UI has on cost and efficiency
Working on this project gave me a deeper understanding of how design decisions directly impacts the performance and costs of a product. Being both a UI / UX designer and a developer revealed to me how impactful the front-end experience is to technical scalability, and the challenges I faced while trying to optimize wordlet! showed me how the UI and user flow of an app greatly determines the operational costs and resources the app needs to function. This experience taught me that thoughtful, intentional design goes beyond just aesthetics or usability — that good design also means creating sustainable and efficient products.
.webp)
.webp)
