I Built a Baseball Roster Guessing Game with Angular + Cloud Run (and It Roasts You If You Lose)

Roster Riddles is my latest side project—a guessing game where you try to identify a mystery MLB player using just nine guesses.
But be warned: the game will insult your baseball knowledge if you fail.
Play It Here:
Roster Riddles
The Concept:
Players guess MLB names one at a time. Each guess returns color-coded feedback based on how closely the guessed player’s attributes match the mystery player.
Feedback colors: Blue: exact match
Orange: close (e.g., same division, within 2 years of age)
no color: try again, slugger
You also get:
A roster viewer (costs a guess)
A hint system (helpful, not hand-holdy)
A dramatic win/loss screen, including a quote like:
“Just give up. You DO NOT know baseball.” or “You ol’ sandbagger, you beat the game!!”
Tech Stack
I wanted to build something fast, testable, and cloud-friendly.
Frontend:
Angular 17
SCSS + component-based design
Slide-in notifications, hint overlays, responsive layout
Backend & Deployment:
Google Cloud Run (containerized with Docker)
Firebase Hosting (static fallback)
GitHub Actions for CI/CD
Data & Logic:
JSON data dump for rosters (cleaned and batched)
Custom matching logic for age, team, league, etc.
Game state saved in local storage (for now)
Things I Learned Along the Way
Cloud Run is for small, event-based apps — easy scale-to-zero, fast to deploy
Writing Angular apps that feel like “games” requires more state orchestration than you’d expect
Mobile-first matters more than I thought — most testers played on their phones
Roadmap (aka my Post-it Wall of Ideas)
Daily streaks & stats (like Wordle)
Leaderboards
Social share feature (“I guessed the Roster Riddle in 3!”)
Hard mode (no hints, no roster peek)
I’d Love Your Thoughts
Feedback on the game UX?
Ideas for gameplay features?
Would you play a version for NBA, NFL, or NHL?
Hit me with your hot takes. And if you’re building something similar—or want help containerizing your Angular app—I’m all ears.