Rehab QUEST

our home page
progress dashboard

Inspiration

Rehabilitation exercises are often repetitive and difficult to track without supervision. Many patients lose motivation or perform movements incorrectly, slowing recovery. We wanted to create a tool that combines AI-driven motion tracking with a gamified, user-friendly interface to make rehab more engaging and effective.

What We Learned

How to use MediaPipe Pose for real-time human pose detection and rep counting.
Integrating Firebase Authentication & Firestore for secure login and progress tracking.
Designing a consistent UI/UX with dark mode, animations, and accessibility in mind.
The importance of clear feedback loops (rep counters, streaks, progress bars) to motivate users.

How We Built It

Frontend: HTML, CSS, and JavaScript with responsive layouts and theme support.
Pose Tracking: MediaPipe + TensorFlow.js for detecting joints and counting reps.
Backend/Database: Firebase (Auth + Firestore) to store user progress and reports.
Hosting: Deployed on Netlify for fast, serverless delivery.
Animations: Lottie + CSS animations for polished, engaging interactions.

Challenges

Fine-tuning rep detection so that small body movements were not falsely counted.
Maintaining consistent styling and component design across multiple pages.
Handling authentication redirects (login → return to exercise selection smoothly).
Optimizing video performance so the app works on different devices without lag.

Accomplishments

Built a full rehab experience: landing page, login, exercise selection, live tracking, and reports.
Added progress bars, streaks, and motivational feedback to increase user engagement.
Delivered a professional-looking, theme-aware UI that works seamlessly across devices.