🥚🍮's Mood Jukebox

Search by feeling, not keywords — a little machine that plays the groove your mood is in.

A demo for connecting creators across countries who share a vibe and a visual language: a bright, playful pop-kawaii interface (made for @gdan_pudding) paired with laid-back jazz hop & groove from grgr_playlist. Describe how you feel in English or 中文, spin the vinyl, and leave handwritten notes.

Built with React 19 + TypeScript + Vite + Tailwind v4. It's fully client-side — no server, no API keys — so it deploys to Vercel as a static build.

Run locally

Prerequisite: Node.js 18+

npm install
npm run dev

Open the printed localhost URL. (No .env needed — the app makes no server/API calls.)

Deploy to Vercel (via GitHub)

1. Push this folder to a GitHub repository.
2. vercel.com → Add New → Project → Import your repo.
3. Vercel auto-detects Vite. Confirm the defaults:
   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist
4. Click Deploy. Every git push redeploys automatically.

No environment variables are required.

How it works

• src/data.ts — the mood catalogue: each entry is one real grgr_playlist track (YouTube ID + bilingual title, vibe text, and search tags).
• src/App.tsx — UI, mood search, the YouTube IFrame player, the spinning vinyl, and the sticky-note board (notes save to the visitor's own device via localStorage).
• src/audio.ts — tiny Web-Audio click/pop sound effects (no audio files).
• Music streams live from YouTube; nothing is downloaded or rehosted.

Credits

• Music: grgr_playlist — used with permission, non-commercial.
• Made with care for @gdan_pudding.