FocusUp!

Inspiration

Midterms are coming up, and us CS students really need to keep good posture and keep good study habits. We wanted to develop something web-based and easily accessible for any student on mobile and desktop.

What it does

Our application tracks various metrics to see if the user is blinking, slouching, or looking away. With this, we give the user a "focus score" to show them in real time how focused they are during their session. When this score drops below certain thresholds, they will get an alert and a sound to nudge them back on track. At the end of their session, the user is given feedback to encourage or compliment their effort.

How we built it

We used React and Next.js as our framework to build this project. Using MediaPipe AI recognition, we tracked landmarks on the user's body to give information about their pose to our algorithms. We used the landmarks to track the user's blink rate, posture, and to check if they are looking at the screen. Users have the option to customize parameters affecting their overall focus score. Based on this score, we send alerts in real-time to nudge them back to better posture or attention.

Challenges we ran into

One main challenge was tuning our algorithm to recognize slouching based on the angle of their body and other data. Git was a challenge to get working, due to several conflicts. Much of our time went to tweaking the scoring so the user would not be heavily penalized when they were focusing.

Accomplishments that we're proud of

• Using AI recognition
• Clean UI and UX
• User can customize settings
• Session feedback
• It's a working product

What we learned

Mehmet:

• This was my first exposure to TypeScript and facial recognition software as well as webdev in general. I learned a lot from the iterative process of building and starting the project each time I made a change, which taught me the value to properly trace code rather than wasting time building after each small change.

Raghav:

• I developed a lot of experience in team collaboration for development projects. I also learned much more about proper use of Git, which took a lot of troubleshooting.

Harrison:

• I learned about front-end development especially, with CSS and HTML. I also learned how to debug the UI and provide a good experience for the user.

Anshul:

• This was my first time in web development, after almost exclusively doing hardware projects. I learned about CSS, HTML, and TypeScript for the first time this weekend, and I learned how to properly use Git to keep a good flow and strong documentation. I also learned about the structure of web development in the stack.

What's next for FocusUp!

Up next for this project is personalized login to track feedback over multiple study sessions. We want this to be a habit building tool for the long-run. Another addition is adding more metrics towards posture, such as head tilt.

Built With

• css
• html
• javascript
• mediapipe
• next.js
• react
• typescript