DanceIt
Practise dance from any YouTube video: mirror it, slow it down, loop a section, then split the screen with your webcam and record yourself dancing alongside the reference, in sync.
// A practice tool for learning dance from YouTube. Mirror the video, slow it down, loop one section, and dance next to it on your webcam.
The brief
Learning choreography from YouTube has a specific set of frictions: the dancer’s left is your right, the move you need is 4 seconds long and buried at 2:13, and you can’t see yourself. DanceIt fixes all three. Paste a video, mirror it so left and right match your body, slow the playback, loop a section by timestamps, then flip into split-screen with your webcam and record yourself. The recording plays back synchronized against the reference so you can see exactly where you drift.
Architecture
A pnpm monorepo with the weight deliberately in the frontend:
- Frontend (Next.js 15, React 19). Owns the hard parts: a custom YouTube embed, mirroring via CSS transform (no processing round-trip, so no latency), playback-rate control, timestamp looping on the player’s time events, and the split-screen webcam capture with synchronized playback.
- Auth and data. Firebase Authentication (Google and Apple) on the client; Supabase Postgres persists practice history, sessions and a personal library.
- Backend (NestJS). A thin API layer, scaffolded and kept deliberately minimal. The browser does the real work here, and pretending otherwise would be overselling it.
Why it’s interesting
Everything difficult happens client-side under real-time constraints. Mirroring had to be free (CSS transform, not video processing), looping had to be frame-tight, and record-and-compare had to stay in sync without a server in the loop. It’s a study in doing the maximum with the browser’s own primitives.