ColorMatcher

Inspiration

I wanted a small, focused game to learn about Reddit's Devvit platform, something simple enough to finish as a first hackathon project but with enough moving parts (client, server, state) to actually learn the stack properly.

What it does

ColorMatcher challenges players to recreate a target color using a limited number of clicks on the three primary RGB colors against a countdown timer. When the round ends, the game calculates and displays how close your mixed color was to the target as a percentage match.

How I built it

I started by structuring the HTML and styling it with CSS, then built out the Devvit Web server (TypeScript, Redis for storing each post's target color) and wired up the client to fetch the target, submit guesses, and get scored server-side. I used AI assistants (ChatGPT, Gemini, and Claude) throughout as coding help, especially for TypeScript and Devvit-specific patterns I hadn't used before.

Challenges I ran into

This was my first time using TypeScript and my first time using Devvit. I understood TypeScript conceptually as JavaScript with types but had never made any project using it, so I leaned on AI assistants, the official docs, and Stack Overflow/Reddit threads to get the client-server structure, Redis usage, and Devvit's routing pattern right.

Accomplishments that I'm proud of

This is my first hackathon, and shipping a complete, working submission from client to server to a live Reddit post feels like a real milestone.

What I learned

I learned the basics of the Devvit Web "bare" template, how to structure a small game's backend and frontend together, and got my first hands-on experience with TypeScript.

What's next for ColorMatcher

• Let players create and share their own color-matching challenges
• Expand beyond primary RGB to more complex color palettes
• Add a leaderboard so players can compete for best matches

Built With

• css
• devvit
• html
• javascript
• typescript