FlowState

Inspiration

There's countless pomodoro timer apps out there. However, most don’t know when you’re distracted, they only track time. We thought it would be cool if your computer could tell when your attention drifts and gently remind you to refocus.

What it does

FlowState is a Pomodoro-style focus app that uses your webcam to detect when you’re distracted. It tracks your focus during work sessions and shows insights about when your attention drops. The goal is to help you understand your habits and build stronger focus over time.

How we built it

We built FlowState using a React and Electron frontend connected to a Python FastAPI backend. The frontend handles the timer, progress tracking, and user interface, designed with TailwindCSS to look clean and modern.

The backend uses OpenCV and MediaPipe to analyze the webcam feed and detect when the user gets distracted based on their face and eye movement. FastAPI serves this data to the frontend in real time, so the app can show when the user loses focus. Everything runs locally, no cloud, no data collection.

Challenges we ran into

The live camera feed was tricky to implement correctly. Connecting the Python model to the Electron app in real time was tricky. We also had to make sure the distraction detection was fast and accurate without slowing down the app. Designing a smooth user interface that worked well across platforms took some experimenting.

Accomplishments that we're proud of

We got a working prototype that can track focus in real time and visualize distractions. It’s simple, lightweight, and runs fully offline. We’re also proud of how polished the UI looks for a 24-hour project.

What we learned

We learned how to connect machine learning models to a desktop frontend, how to optimize performance for Electron apps, and how to use TailwindCSS for fast UI development. We also realized how powerful small, well-designed tools can be for productivity.