ROYGBV

Why it exists

ROYGBV started as an experiment: could I build a real game using nothing but React, no game engine required? I figured if I kept the design simple enough, the answer might be yes.

I’m a sucker for puzzle games built around colored blocks; 1010, 2048, 2Fuse, Block Blast, that sort of thing, so I decided to make my own! (Well… sort of.) Around the same time, I’d come across a video of a chimp playing a memory game and thought it would make an interesting hypercasual game idea. I wanted to put my own colorful spin on it, which was how ROYGBV was born.

Design choices

• Mobile design priority. A lot of the users were going to be playing on their phones, a mobile-first design was a good fit, also given the nature of the games it was inspired by.
• Sound design instead of flashy animations. Fancy effects and particles take away focus from the core gameplay, relying on sound instead to emphasize progress keeps things visually simple and lightweight.

Under the hood

• Serverless by necessity, not fashion. The game started on an Express server running on my own machine — while MongoDB Atlas had a free offering for a cloud database, there was no good free host for a persistent Node process. Rearchitecting to Netlify Functions + static hosting means the whole game, leaderboard included, runs at zero cost.
• Leaderboard on Netlify Blobs. Scores lived in MongoDB Atlas first, where submissions took multiple seconds — most likely the extra hops between the function and the external cluster. Colocating data with the functions in Blobs made submissions perceivably snappy.
• Zustand instead of prop drilling. Current score counts, local high scores, and their setters were being threaded through the component tree; moving them into small stores killed the drilling.
• Fair shuffles. Tile positions use a Durstenfeld (Fisher–Yates) shuffle, so every board is uniformly random — no accidental patterns to memorize.

Build notes

• Leaderboard for competition. Added motivation. Migrated when submissions felt slugginsh.
• AI-accelerated refactor. Cursor sped up the Zustand migration and surrounding boilerplate.
• Everything hand-made. Full mockups and all visual assets in Figma; sound effects built in LMMS and Audacity. I wanted my first game to have a personal touch.