Playlist Puzzle

Music trivia meets playlist building! Guess songs from any era, create themed playlists, and climb the leaderboard in this retro jukebox game on Reddit.

Comment

Inspiration

I wanted to create a nostalgic music experience that brings people together through shared musical knowledge. Inspired by classic jukeboxes and music trivia nights, I envisioned a game where players could both test their knowledge and express their creativity through playlist building, all within the Reddit community.

What it does

Playlist Puzzle is a dual-mode music game on Reddit:

Music Trivia Mode: Players identify songs by artist across all genres and eras. Each correct answer earns points, features visual green/red feedback, and plays satisfying sound effects. Questions pull from a database of 120+ artists spanning decades.

Daily Playlist Challenge: Every day presents a themed challenge (like "Upbeat 80s songs for working out"). Players search MusicBrainz's extensive database to build 5-song playlists matching the theme, then share and vote on community creations.

The game features real-time leaderboards, streak tracking, a vintage jukebox aesthetic with golden yellows and warm reds, and seamless Reddit integration.

How we built it

Tech Stack

  • Frontend: React + TypeScript with Tailwind CSS for the retro jukebox UI
  • Backend: Express.js serverless endpoints on Devvit
  • Database: Redis for caching and data persistence
  • Music Data: MusicBrainz API (free, open-source music database)
  • Audio: Web Audio API for procedurally generated sound effects
  • Platform: Reddit's Devvit framework

Architecture Highlights

  • Implemented aggressive Redis caching (24-hour TTL) to handle MusicBrainz's 1 req/sec rate limit
  • Built automated cache warmup system with scheduled jobs running every 6 hours
  • Created timeout handling with automatic retries for first-load scenarios
  • Designed mobile-first responsive UI that works seamlessly on all devices

Challenges we ran into

1. MusicBrainz Rate Limiting

The biggest challenge was working within MusicBrainz's 1 request/second limit while providing instant gameplay. With 5 artists requiring 10+ API calls, initial loads took 10+ seconds and hit Devvit's 30-second timeout.

Solution: Implemented a multi-layered caching strategy with 24-hour TTL, automated warmup jobs, and graceful timeout handling with automatic retries.

2. Search Quality

Initial searches returned irrelevant results—searching "Britney Spears" would return songs titled "BRITNEY" by other artists.

Solution: Added quoted MusicBrainz queries and post-search filtering to ensure artist names actually match the search query.

3. Challenge Generation Logic

Early versions asked "Which song is by Madonna?" but showed songs by completely different artists.

Solution: Rewrote the song selection algorithm to guarantee one song by the correct artist and two songs by different artists.

4. Mobile Scrolling

The splash screen had unnecessary scrollbars on mobile devices.

Solution: Changed from min-h-screen to h-screen with overflow-hidden and added CSS to hide scrollbars across all browsers.

Accomplishments that we're proud of

  • Performance Optimization: Reduced load times from 10+ seconds to under 1 second through intelligent caching
  • User Experience: Created satisfying visual and audio feedback that makes every interaction feel rewarding
  • Music Database: Integrated access to millions of songs across all genres and decades
  • Community Features: Built a complete social system with voting, sharing, and leaderboards
  • Production Ready: Deployed a fully functional game with automated maintenance (cache warmup)
  • Aesthetic: Achieved an authentic vintage jukebox look with CSS animations and gradients

What we learned

  • Serverless Constraints: Working within Devvit's 30-second timeout taught us to design for serverless-first architecture
  • Rate Limit Strategies: Learned creative caching and warmup techniques to work with strict API rate limits
  • Web Audio API: Discovered how to create satisfying sound effects without external audio files
  • Reddit Platform: Gained deep understanding of Devvit's capabilities and limitations
  • User Testing: Iterative testing revealed UX issues we wouldn't have caught otherwise (scrollbars, search quality)

What's next for Playlist Puzzle

  • Multiplayer Mode: Real-time head-to-head trivia battles
  • Genre-Specific Challenges: Dedicated modes for rock, hip-hop, country, etc.
  • Playlist Themes: More creative daily challenges (e.g., "Songs with colors in the title")
  • Achievement System: Badges for streaks, perfect scores, and playlist creativity
  • Spotify Integration: Optional playlist export to Spotify
  • Community Voting: Weekly "Playlist of the Week" contests
  • Mobile App: Native iOS/Android versions for better performance
  • AI-Generated Challenges: Use AI to create unique, creative daily themes

Try it out!

🎮 Play on Reddit: r/playlistpuzzle_dev4

🎵 Features:

  • Music trivia with 120+ artists
  • Daily playlist challenges
  • Real-time leaderboards
  • Vintage jukebox aesthetic
  • Sound effects & visual feedback
  • Mobile-friendly design

Built With

Share this project:

Updates