Youtube Karaoke Singer

A real-time karaoke queue app built with React, Convex, and the YouTube API. Display videos on a host screen while guests add songs to the queue from their devices.

Features

• Real-time sync: Queue updates instantly across all connected devices
• Guest view (/): Search YouTube for karaoke songs and add them to the queue
• Host view (/host): Full-screen video player with auto-advance
• Anonymous access: Just enter a nickname to start adding songs
• Queue management: Anyone can add or remove songs from the queue

Setup

1. Install dependencies

npm install

2. Set up Convex

Create a Convex account at convex.dev if you don't have one, then:

npx convex dev

This will create your backend and set the VITE_CONVEX_URL in .env.local.

3. Get a YouTube API Key

1. Go to Google Cloud Console
2. Create a new project (or select existing)
3. Enable the YouTube Data API v3
4. Create credentials (API Key)
5. Add to your .env.local:

VITE_YOUTUBE_API_KEY=your-api-key-here

4. Run the app

npm run dev

Usage

1. Open http://localhost:5173/ on guest devices
2. Enter a nickname and start searching for karaoke songs
3. Open http://localhost:5173/host on the main display/TV
4. Songs play automatically and advance when finished

Tech Stack

• Frontend: React 19, TypeScript, Tailwind CSS, shadcn/ui
• Backend: Convex (real-time database)
• Video: react-youtube (YouTube IFrame API)
• Routing: react-router-dom