Music Round

A multiplayer song guessing game where players compete to identify songs from 30-second Spotify previews.

Features

• Multiplayer - Real-time lobbies with shareable game codes
• Daily Challenge - Same songs for everyone each day, compete on the leaderboard
• Battle Royale - 50 rounds, 3 lives, last player standing wins
• Solo Mode - Practice without friends (we've all been there)
• Hints - Stuck? Reveal letters to help guess, but it costs points
• Multiple Playlists - Decades, genres, festival lineups (Glastonbury 2023-2025, etc.)

Tech Stack

• TanStack Start / React 19 / TypeScript
• Convex (real-time backend)
• Spotify Web API + Deezer fallback
• Tailwind CSS

Getting Started

Prerequisites

• Node.js 18+ or Bun
• A Spotify Developer account

1. Install Dependencies

bun install

2. Set Up Convex

Initialize Convex (creates deployment and sets up environment):

npx convex dev

This will create a .env.local file with CONVEX_DEPLOYMENT and VITE_CONVEX_URL.

3. Set Up Spotify Integration

1. Go to Spotify Developer Dashboard
2. Create a new app
3. Note your Client ID and Client Secret
4. Set redirect URI to http://localhost:3000 (required but not used)

Add Spotify credentials to Convex (server-side):

npx convex env set SPOTIFY_CLIENT_ID your_client_id_here
npx convex env set SPOTIFY_CLIENT_SECRET your_client_secret_here

4. Run the Application

Start both the dev server and Convex:

# Terminal 1: Start Convex
npx convex dev

# Terminal 2: Start app
bun run dev

The app will be available at http://localhost:3000.

Environment Variables

Local .env.local (auto-generated by Convex)

CONVEX_DEPLOYMENT=your-deployment-name
VITE_CONVEX_URL=https://your-deployment.convex.cloud

Convex Environment Variables (server-side)

Set these using npx convex env set:

SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret

Note: Spotify credentials must be set in Convex, not in .env.local, as they're used server-side.

Building For Production

bun run build

Development

Scripts

bun run dev      # Start dev server
bun run test     # Run tests (69 tests, ~850ms)
bun run lint     # Lint with oxlint
bun run lint:fix # Lint and auto-fix

Type Checking

Uses tsgo (native TypeScript compiler, experimental):

bunx tsgo --noEmit

Test Stack

• Vitest - Test runner
• happy-dom - DOM environment (faster than jsdom)
• Testing Library - Component tests
• convex-test - Backend integration tests

How to Play

1. Create a Game: Click "Create Game" to generate a unique game code
2. Join Lobby: Share the game code with friends who can join the lobby
3. Start Game: Host starts the game when all players are ready
4. Listen & Guess: Each round plays a 30-second preview - guess the artist and song title
5. Scoring: Points decay over time (500 → 250), so faster answers score higher. Partial credit for getting just the artist or title.
6. Win: Player with the most points after all rounds wins!

Contributing

This project is open source for reference and learning, but I'm not accepting contributions at this time.