🎵 RetroBox

A nostalgia-driven desktop themed as Windows XP with classic media players — Winamp Classic and VLC. Paste YouTube URLs to discover and play old music.

Features

• Windows XP Desktop Shell — full desktop experience with wallpaper, icons, taskbar, draggable windows, and right-click context menu
• Winamp Classic Player — dark skin with LED display, spectrum analyzer, transport controls, volume/seek sliders
• YouTube Playback — paste any YouTube URL, plays in a mini video window inside the player
• Per-Session Playlist — build your own playlist, reorder, remove tracks
• Trending System — tracks play counts across sessions, shows what's popular
• Wallpaper Switching — right-click desktop to switch between XP Bliss and Windows 7 Aurora
• XP Dialogs — all prompts and errors use authentic Windows XP dialog styling

Quick Start

# Install dependencies
npm install

# Start the server
npm start

Open http://localhost:3000 in your browser.

How to Use

1. Double-click "My Music" on the desktop to open the Winamp player
2. Click "Eject" or "+Add" to paste a YouTube URL
3. Use transport controls — play, pause, stop, next, previous
4. Toggle shuffle/repeat for extended listening
5. Check trending — click the "🔥 Trending" panel in the playlist, or double-click the "Trending" desktop icon
6. Single-click a trending track to add it to your playlist
7. Double-click a trending track to add and play it immediately
8. Right-click the desktop to change wallpaper

Tech Stack

Layer	Technology
Frontend	Vanilla HTML, CSS, JavaScript (no framework)
Backend	Node.js + Express (local) / Vercel Serverless Functions (production)
Database	SQLite via better-sqlite3 (local) / Upstash Redis (production)
Video	YouTube iframe API + oEmbed API

Project Structure

media-players/
├── server.js              # Express server + API endpoints (local dev)
├── db.js                  # SQLite database module (local dev)
├── vercel.json             # Vercel deployment config
├── api/                   # Vercel serverless functions (production)
│   ├── track.js           # POST /api/track — resolve YouTube URL
│   ├── trending.js        # GET /api/trending — get top tracks
│   └── track/
│       └── [videoId]/
│           └── play.js    # POST /api/track/:videoId/play — record play
├── public/                 # Static frontend files
│   ├── index.html
│   ├── css/
│   │   ├── desktop.css
│   │   ├── window.css
│   │   ├── winamp.css
│   │   └── playlist.css
│   └── js/
│       ├── app.js
│       ├── desktop.js
│       ├── taskbar.js
│       ├── window-manager.js
│       ├── dialog.js
│       ├── player.js
│       ├── playlist.js
│       └── api.js
├── data/                   # SQLite database (local only, gitignored)
└── package.json

API Endpoints

Method	Endpoint	Description
POST	/api/track	Resolve YouTube URL to metadata
POST	/api/track/:videoId/play	Record a play event
GET	/api/trending	Get top 20 trending tracks

Environment Variables

Variable	Default	Description
PORT	3000	Server port (local dev only)
UPSTASH_REDIS_REST_URL	—	Upstash Redis REST URL (set by Vercel)
UPSTASH_REDIS_REST_TOKEN	—	Upstash Redis REST token (set by Vercel)

Deployment

Vercel (recommended)

Full stack — player, playlist, and trending all work.

1. Push repo to GitHub
2. Import on vercel.com — auto-detects config
3. Vercel dashboard → Storage → add Upstash Redis (free tier)
4. Redeploy — env vars auto-set, trending works

# Local dev still uses Express + SQLite (no Redis needed)
npm start

# Deploy to Vercel
vercel

Local Development

npm install
npm start

Uses Express + SQLite. No Redis or Vercel needed.

License

MIT