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

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.



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *