AlignTheMind

Home Page.
Dashboard Page. Updates after each session. Contains last sessions, life times, last weeks, and last 5 weeks stats.
Tips To Improve Posture, Tips To Improve Focus, and Why Posture and Focus Matter for Teens
Allows individuals to track there focus, posture, or both. Allows them to select how long they want their session to last.
Summary of session after session has ended. Includes your average posture and/or focus scores

Inspiration

With the rise and rapid growth of technology, the majority of students' work is now being done on their devices. Because of this, teens become overwhelmed with the immense amount of distractions that linger in their environment, decreasing productivity levels and shortening attention spans. Yet, constantly using devices doesn't just ruin students' concentration, it also encourages poor posture, inviting further trouble down the road. I unfortunately have experienced these issues, and so I searched the market for websites and apps that could track my focus and posture and alert me when I was staring into the abyss or simply slouching. I found none. So I created AlignTheMind.

What it does

AlignTheMind tracks individuals' posture and focus in real-time using their webcam. It monitors the upper body to give a posture score out of 10. If an individual's posture drops below the recommended level, the web app reminds them to adjust their posture. The web app's ability to track individuals' eyes also alerts individuals if they are staring away from their screens for more than 10 seconds. Furthermore, individuals have their own personal dashboard to keep track of their scores.

How I built it

I built AlignTheMind using React for the frontend. I also integrated Firebase Authentication to handle user login and signup. For posture and eye tracking, I used MediaPipe Pose and MediaPipe FaceMesh. Data persistence was handled using localStorage, so users can review their past sessions on the dashboard.

Challenges I ran into

One of the biggest challenges I ran into was getting MediaPipe models to run smoothly in the browser without performance drops. Another difficulty I ran into was trying to ensure that the posture detection system would accurately reflect user sitting behavior.

Accomplishments that I am proud of

I am proud of designing a simple yet polished user interface that is easy to use. Also, implementing a voice alert system that notified users to adjust their posture and to look at their screens. Overall, building a fully functional system that allows teens to track their posture and focus is what I am most proud of.

What I learned

I learned how to integrate computer vision models such as MediaPipe into a react app. Also, I learned how to build a dashboard that keeps track of the users data and is able to display it using a simple UI. Finally, how to implement the voice alert system along with the posture and focus tracking.

What's next for AlignTheMind

I hope to bring this web application to the real world, allowing students and teens to fix their focus and improve their concentration. Adding more in depth statistics to show users their improvement is something I am also looking forward to doing.