APEX | Devpost

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, posture, and fatigue and stress levels and alert me when I was staring into the abyss or simply slouching. I found none. I tried finding for apps that could also build my focus and give me breaks once I was tired. I found none. So I created APEX.

What it does APEX 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. If the app alerts the user to fix their posture or focus more than 3 times, it will suggest a break. Users can also track their fatigue and stress levels, and if levels are too high, then the app will suggest a break. Furthermore, users can build their focus via the FocusGuide. Here, they can play games such as Dual N-Back, Selective Pick, Moving Object Tracking, and Sustained Attention. Together, they build working memory, selective attention, sustained focus, and vigilance. When users are tired, they can visit the GuidedBreaks screen where they can do Box Breathing, PMR, and Mindful Stretching.

How I built it I built APEX 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. Finally, implementing fatigue and stress detection was also very difficulty.

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. Implementing multiple focus-centered games and breaks that users can use is also something I am proud of.

What I learned I learned how to integrate computer vision models such as MediaPipe into a react app. Although I knew some React before going into this project, I had to still learn a lot in order to build a project like this. 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. Being able to build games that are designed for focus was something I had to research on, but I really enjoyed this part of the process. Finally, being able to implement the voice alert system along with the posture and focus tracking with fatigue and stress detection was something new to me which I also had to learn.

What's next for APEX I hope to bring this web application to the real world, allowing students and teens to fix their focus and improve their concentration. This app has the potential to fix students posture, make sure that they are not burnt out, and have a healthy mind and body. It prioritizes that they feel enegerqzed when they work, gives them an opportunity to build their focus, and take breaks when they are tired.

Track: Well-being & Focus – time-boxing, motivation, distraction guards

I used ChatGPT to assist me only in the coding process. However, I too also worked on the coding. GPT was used on all screens however it did not write all the code. Prompts included try and fix the bug or help me center this for css. The idea and design was not generated by GPT.