The Wellness Wizard

Over 31 million Americans suffer from poor posture at any given time. Our app tracks where a person's face is located through the webcam and when it detects slouching sends a notification.

Comment 1

Inspiration

As software developers face long hours in their chairs, coding with poor posture, they could come down with back pain and other health conditions. This inspired us to create the Wellness Wizard.

What it does

Our app bears three main functionalities. Primarily, with the use of tinyYOLO API, our application is able to detect the coordinates of the user's face. With this information, along with a customizable "slouch line," our algorithms are able to detect and notify the user whenever they are slouching below the slouch line for 10 seconds.

Additionally, as the Wellness Wizard is all about reminding users to practice healthy habits, there are water and stretch reminders that a user may toggle to be notified by. The water reminder will notify users to stay hydrated every time the clock hits anything o'clock, providing a routine reminder every hour. The stretch reminder will notify users to get up from their chair every time the clock hits anything o'clock or half past anything, providing a consistent reminder every half an hour (The recommended amount of time as proven through a study in the American Journal of Physiology-Endocrinology and Metabolism)

How we built it

We built our project using the react framework and typescript to reduce errors during production. We used FaceAPI to detect the location of someone's face within the webcam and used Mantine as our UI component library. We also employed Cloudflare tunnels, which tunnels traffic so that users that are not on your network can still have the advantages of localhost.

Challenges we ran into

Some of the challenges that we ran into were made prominent in the selection the facial recognition model. Some of the models we tested were unable to filter out the rest of the body or focus solely on the face. We settled for FaceAPI which ultimately worked perfectly. Another challenge that we faced was sending the notifications both through the actual website and a global desktop notification due to nobody on our team having implemented such a functionality before. We ended up performing this through the inbuilt JavaScript Notification API.

Accomplishments that we're proud of

Some accomplishments that we're proud of are the fact that we completed the project without overcomplicating it or losing focus of our original goals. We are also proud of the responsiveness and accuracy of the facial recognition and the sleekness of the UI elements that we created.

What we learned

We learned that we should use our time more wisely and give ourselves a more leeway in terms of editing and recording the project. Spending too much time on the code is worthless if it cannot be presented in a proper manner. Also, as the majority of this team is inexperienced in web development and reactJS, a priceless amount of hands-on experience and knowledge was acquired merely through powering through this single project, learning syntax as we go.

What's next for The Wellness Wizard

We intend to clean up the main page and fix any stray bugs that had slipped under our radar previously. Furthermore, in the farther future we shall attempt to improve upon the overall purpose of the Wellness Wizard (such as broadening our horizons past reminders) and make alterations to the design in certain parts. For now, we will fix some major bugs that might come up on the website.

Built With

Share this project:

Updates