🕺 PoseFlow — AI Dance Practice & Choreography Dashboard

A full-stack, privacy-first AI dance practice platform with real-time pose tracking, community choreography discovery, and remote teacher analytics.

Live App: Open PoseFlow

✨ Features

View A — Choreography Discovery & Creator Hub

Grid of community dance loops with YouTube thumbnails, timestamps, and creator info
Creator Studio form to submit new loops (YouTube URL/ID, title, timestamps, choreographer)
Generate Challenge Link — B2B feature for dance instructors to create shareable challenge slugs with target sync scores

View B — Live Practice Arena (Privacy-First)

Split-screen workspace with YouTube player + live webcam pose tracking
Interactive overlay controls: Video Mirror, 8-Count Beat Marker, Pitch-Normalized Slow-Mo, Neon Skeleton Layer with angle detection
Webcam activation via navigator.mediaDevices.getUserMedia — all processing is 100% local
Animated canvas skeleton with color-coded joints (green = good form, orange/red = misalignment)
Neon Skeleton Mode & Ghost Mode Overlap (skeleton overlaid on YouTube video)
Live Sync Score ticker with real-time updates
Finish & Log Session — generates random score (75-95%), analytical breakdown (Timing, Posture, Stance), saves to database
Export Flex Clip mockup with watermarked video preview for TikTok/Reels

View C — Remote Teacher Dashboard & Analytics

Personal progress stats: Total Minutes, Average Sync Score, Daily Habit Streak
Session history table with score breakdowns
Teacher Assignments Tracker with anonymous student opens, pass rates, and leaderboard

🏗️ Architecture

Rendering mermaid diagram...

📁 File Structure

index.ts                          ← Hono backend (API + static serving)
frontend/
  index.html                      ← HTML shell (Twind, dark theme, animations)
  index.tsx                       ← React entrypoint
  favicon.svg                     ← PoseFlow stick-figure logo
  lib/
    types.ts                      ← Shared TypeScript interfaces
    api.ts                        ← API helpers + utilities (formatTime, etc.)
  components/
    App.tsx                       ← Root: navigation, state, data fetching
    DiscoveryHub.tsx              ← View A: loop grid + challenge modal
    CreatorStudio.tsx             ← Loop submission form
    PracticeArena.tsx             ← View B: split-screen practice workspace
    SkeletonCanvas.tsx            ← Animated canvas skeleton overlay
    TeacherDashboard.tsx          ← View C: stats, sessions, challenges

🗄️ Database Schema (SQLite)

Table	Columns
`loops`	id, youtube_video_id, title, start_time, end_time, description, creator_name, created_at
`challenges`	id, loop_id, target_score, teacher_name, challenge_link_slug (unique), created_at
`practice_sessions`	id, loop_id, date, duration_minutes, sync_score, breakdown_json

🔒 Privacy First

All webcam video feeds are processed entirely on the client side using navigator.mediaDevices.getUserMedia and canvas-based rendering. Zero video data is uploaded to the server. Only numerical practice results (sync scores, breakdowns, durations) are persisted to the database.

🛠️ Tech Stack

Backend: Hono on Val Town (Deno runtime)
Database: Val Town built-in SQLite (Turso/libSQL)
Frontend: React 18 + Twind (Tailwind CSS at runtime)
Icons: Lucide React
Video: YouTube IFrame API

Ttt

poseflow