CanUDance
Pick a dance, mirror a 3D instructor on camera, and get a score out of 10 with feedback. Then grab a shareable photo of your best move.
- Event
- StarterHacks 2024
- Built
- July 2024
- Role
- Frontend developer and UX
- Team
- Tom Zhang, James Cao and me
The idea
Dance challenges are all over reels (guilty). We wanted to make one that actually tells you how you did, in real time.
What I built
I sketched the wireframes for the whole flow, from picking a dance to the final score, then built the Next.js frontend:
- The Spline 3D instructor and the webcam view, so you dance side by side with the model.
- Screenshot capture during the dance, sent to the backend for scoring.
- The dance flow, the results screen and the Instagram-style photo of your best move.
- Animations and last-minute bug squashing, plus a few backend fixes to get the Gemini scoring working.
Team
My teammates built the Django backend, the image upload and snapshot endpoints, and the Gemini prompt that turns those snapshots into a score. We didn't win the top prize, but watching people try it at demo time made it worth it.
Stack
Next.js 14 · Spline · react-webcam · html2canvas · GSAP · Framer Motion · Django REST Framework · Gemini API