MotionMatch

Inspiration

Nearly 80% of dance and movement instructors have seriously considered leaving the industry due to a punishing combination of extreme burnout, scheduling constraints, and financial stress. Observational studies show that instructors lose up to a third of their class time to repetitive, non-creative management tasks,specifically correcting basic posture habits, getting individual student errors across large groups, and correcting kids outside of class hours. Two members from our team are dance students, and have experienced this problem in real time.

We built Motion Match to function as a "Google Classroom for Movement." By offering AI-powered video grading alongside real-time live-stream pose tracking, we free instructors from repetitive grading bottlenecks. This allows teachers to quickly pinpoint exactly where students are struggling, highlighting the quality of practice over the quantity of hours. This drastically reduces teacher burnout while elevating student technique and collaboration.

What it does

Motion Match is an Google-Classroom ecosystem built with two primary features tailored for movement instructors and students:

1. Asynchronous Video Assignment Suite (Choreography Grading)

-Framework Analysis: The teacher uploads a master reference choreography video. Students record and upload their own performance video attempting the same routine. -Frame-by-Frame Comparison: The platform extracts 33 distinct landmarks from every single frame of both videos using MediaPipe. -Drastic Error Highlighting: The system calculates the difference between the coordinates across the timeline, automatically highlighting and timestamping the exact frames where a student's technique drops drastically below the benchmark.

1. Live Pose Submission Portal (Pose Tracking)

-Real-Time Webcam Workspace: The teacher sets a reference image of a dance pose. The student launches their webcam to practice the stance live. -Live Coaching: The live stream draws a skeletal overlay, compares vectors using the Law of Cosines, and serves on-screen corrections (e.g., "Straighten your right leg") with an active accuracy percentage. -Automated Proof-of-Submission Snapshots: The moment the student's live accuracy breaks and holds above 80%, the engine automatically captures a screenshot of the successful pose and logs it directly into the dashboard as a completed assignment for the teacher to review.

How we built it

Frontend Stack -Next.js 16 (App Router): Leveraged React Server Components (RSC) for optimized initial workspace rendering and Server Actions for direct, secure backend file/score submission handling. -React 19 & TypeScript: Strict typing for 33-landmark coordinate datasets combined with modern state primitives to handle intensive client-side canvas painting and multi-video time syncs. -Tailwind CSS 4: Implemented the latest utility features to create a clean, minimalist, Google Classroom-inspired dashboard with responsive video player panels and transparent diagnostic overlays.

MediaPipe Integration -Asynchronous Video Core (Node.js backend): Handles frame-by-frame file analysis for video assignments. It evaluates datasets across student and reference choreography uploads. -Live Pose Stream Core (Python backend): It maps 33 body keypoints using the pose_landmarker_full.task file, and then directly compares the student's live angles against the reference image to score their accuracy. If a student passes and holds a high enough accuracy score, the script automatically triggers a local screenshot and routes it straight to the teacher as proof of completion --Joint Angle Calculation: We map vectors directly between landmark triples. We calculate the lengths (magnitudes) of vectors connecting adjacent joints, solve for their dot product, and apply the Law of Cosines to isolate exact angle degrees -Teacher side Grading Interface (Browser WASM): Ships MediaPipe WASM models directly to the browser for instant client-side canvas tracking overlays, gesture initialization, and real-time feedback UI transitions.

Backend Architecture -PostgreSQL 17 & Prisma ORM 7: Used pg driver adapter to manage a relational schema tracking class rosters, assignment requirements, timestamped frame errors, and submission links. -Dual-Layer Object Storage: Utilized Supabase Postgres integrated with an AWS SDK interface for managing assignment metadata, alongside a localized MinIO cluster for private, S3-compatible storage of teacher references, student video uploads, and automated completion screenshots. -Secure Infrastructure: Powered by Next.js Server-Only storage modules to block unauthorized frontend access to private student media. Security relies on robust Argon2id password hashing alongside masked, opaque logging systems for safe handling of technical errors.

Challenges we ran into

We mainly ran into challenges with connecting mediapipe, and connecting the backend with frontned. We also had multipe issues with connecting the webcam, and intiliazing the mediapipe model into the folders.

Accomplishments that we're proud of

Correctly build the mediapipe implementation, and incorporating live feedback Created an asynchronous video analytics capable of pinpointing exactly where a student breaks form, drastically shortening a teacher's grading loop.

What we learned

The backend needs to be pushed earlier in order for front end to have enough time to incorporate it

What's next for MotionMatch

Choreagraphy Tracker: Allowing teachers to brainstorm and design positioning for dance songs

Built With

• nextjs
• orm
• postgresql
• prisma
• react19
• tailwind
• typescript
• vercel