YogaFlow

• 

  Homepage at midnight.

• 

  Homepage at sunrise.

• 

  Homepage in the morning.

• 

  Homepage in the afternoon.

• 

  Homepage at sunset.

• 

  Homepage at nighttime.

• 

  Homepage scrolled down. Shows options for workout mode.

• 

  Workout screen before camera is enabled.

• 

  Active camera detects the user and draws their skeleton. The skeleton parts turn green when form is correct.

• 

  3 second countdown between exercises.

• 

  Match score is low when form is incorrect. Reference pose is only partially green.

• 

  Meditation page at the end of a workout.

• 

  Final page after completing workout and meditation.

• 

  Final page scrolled down. Shows total time spent on the workout and calories lost.

Inspiration

We were all inspired by a build up of stress over the past few months. From constant school deadlines to job applications, we found ourselves and our peers neglecting our health. After brainstorming, we decided on a service that helped others prioritize their health and find zen in their life, through yoga. Many people want to practice yoga but feel intimidated, lack time, or don’t know where to start. We were inspired to create a platform that helps users integrate yoga into their daily routines, no matter their experience level.

What it does

YogaFlow uses body-tracking to detect the user's body points and match them to the pose of the reference exercise. There are three modes: Easy, Medium, and Hard. Once the user is detected to have the correct pose, a timer starts for them to hold the pose until the timer runs out, then moves on to the next exercise.

How we built it

We used Python and Mediapipe to get the user's body points and draw them on the screen. We used Typescript and React to build the frontend. We used AI tools such as Cursor and v0 to help us build the project.

Challenges we ran into

We ran into some deployment issues with Vercel. We also struggled to make the logic for the reference poses and the user's skeleton. We ran into time constraints and couldn't perfect our UI in time.

Accomplishments that we're proud of

We're proud of being able to create a finished website that uses a new open source framework (MediaPipe) we've never worked with before. We're very proud of our UI with all the colors and features that change according to the time of day.

What we learned

We learned how to use MediaPipe, Vercel, v0, and work with React to create an interactive website.

What's next for YogaFlow

If we were to expand upon it, we would want to add sound effects or background music. We would also want more modes and options for exercising. If there were more time, we would perfect our UI and implement new features like Google Authentication for more personalized logins, warm-up exercises before workouts, and voiceovers that guide the users through the workout and meditation.

Built With

• eslint
• mediapipe
• next.js
• node.js
• react
• typescript