Inspiration As students, we often found ourselves doomscrolling or checking sports scores instead of focusing on schoolwork. Rather than fighting these habits, we designed Focus Up to work around them. The goal was to make focus easier without removing small, enjoyable distractions.
What it does Focus Up uses MediaPipe AI to track facial features and detect when a user loses focus. When attention shifts away, the app responds with real-time audio feedback generated via the Web Audio API. It also uses the Pomodoro method with intentional breaks that include simple games and sports scores.
How we built it We built the app using MediaPipe, JSX, and CSS, running locally with npm for easy development. Live sports data is fetched using TheSportsDB API. A flexible search allows users to find teams without needing exact official names.
Challenges we ran into
Integrating real-time AI vision with the frontend while maintaining performance was challenging. We also had to ensure focus detection worked across different lighting conditions. Another challenge was connecting backend AI logic with responsive UI feedback.
Accomplishments that we're proud of We successfully implemented real-time AI focus detection with instant audio feedback. The system integrates smoothly with Pomodoro sessions and intentional break activities. We also built a searchable live sports scoreboard that minimizes distractions.
What we learned We learned how to implement MediaPipe across both frontend and backend environments. We gained experience handling APIs and managing state in a React application. Most importantly, we learned the importance of strong user experience design in productivity tools.
What's next for Focus Up We would like to add more break games and activities tailored to different attention spans. We would also like to implement cross-device synchronization so we can use it to check whether the user's phone use is genuinely productive.
Log in or sign up for Devpost to join the conversation.