Inspiration Inspired by TikTok’s “color perception / spot the difference” challenges — quick to understand, addictive to repeat. I wanted the same fast feedback loop embedded directly in a Reddit post so communities can run daily challenges without leaving Reddit. What it does A lightweight web game inside a Reddit post where players pick the correct color under time pressure. Modes: Classic, Daily (same seed for everyone), Hardcore, Zen (no timer). Shows streaks/score and a simple leaderboard; supports hints and sound toggles. Designed for very fast loads and zero navigation (everything in‑post). How we built it Client: Phaser 3 + Vite → dist/client web assets for the post. Server: @devvit/web/server (Express‑style) → dist/server/index.cjs with endpoints: GET /api/daily-challenge, POST /api/score/submit, GET /api/leaderboard/top. Devvit CLI for login, upload, playtest, install; schema v1 devvit.json. Started from an offline skeleton, then migrated online. Used an AI coding assistant (Codex/Codex CLI) to scaffold, patch files, run builds, and automate CLI steps. Challenges we ran into Network in Mainland China: required VPN. Middleboxes sometimes closed connections during “Create version,” causing Devvit uploads to fail (503/connection reset). IPv6 vs IPv4: Node’s DNS/undici behavior needed IPv4‑first to reduce timeouts. Mod tools UX: custom post type wasn’t visible until enabled in “Post types.” Packaging details: server needed to bundle to CommonJS entry (index.cjs), asset paths and post entrypoints had to match devvit.json. Accomplishments that we’re proud of Playtest subreddit created and app installed (r/color_masterg_dev), with a working in‑post game flow. Migrated the offline game to Devvit web with daily seed + leaderboard endpoints. Wrote a complete README and submission materials aligned with Devpost rules. Built a repeatable build/upload pipeline and documented operational steps. What we learned Devvit architecture and config schema v1 (post entrypoints, server bundle, menu/triggers). The difference between upload, install, and playtest workflows. Practical debugging of Node networking (DNS result order, timeouts) behind VPN. How to pair with an AI assistant (Codex) for fast iteration while keeping code review and safety checks in place. What’s next for Color MasterG Persistent Redis leaderboard (per‑subreddit + global views) and moderation tools. Authenticated score submissions using Devvit context and anti‑cheat throttling. Accessibility: color‑blind palettes, narration cues, adjustable contrast. Seasonal events/daily ladders, shareable seeds, and richer analytics. Polish copy/art, then publish to the App Directory for broader community trials. Try it Playtest: https://www.reddit.com/r/color_masterg_dev/?playtest=color-masterg If the post shows a template screen, it means the latest version is still uploading; refresh or check back shortly.
Built With
- codex/ai?assisted
- css
- devvit-(reddit-developer-platform)
- devvit-cli
- devvit/web/server
- esbuild/vite-bundling
- express?style-routing
- git
- html5
- node.js-22
- phaser-3
- powershell-(scripts)
- typescript
- vite
- vs-code
Log in or sign up for Devpost to join the conversation.