FocusFlow

Front Page / Session Setup
Study Session
Active / Break Session
Results Page

Inspiration

We spend long hours studying; we wanted a flow timer that also keeps posture and movement healthy. What it does

What it does

Runs focus/break timers, streams camera posture and reps with MediaPipe/OpenCV, shows live landmarks, posture score, reps, and session summaries.

How we built it

Frontend: Vite/React + Tailwind/Shadcn UI, React Router, custom Timer/CameraPreview/PostureMonitor components. Backend: FastAPI + Uvicorn, MediaPipe/OpenCV pipeline for posture scoring and squat counting, streaming JPEG endpoint, session state and polling APIs.

Challenges we ran into

Syncing live video between backend streaming and frontend fallback camera, and normalizing posture scores (0–1 vs 0–100) and avoiding drift in timers.

Accomplishments that we're proud of

We are proud of many things, including (1) a functioning end-to-end loop: start focus -> posture tracked -> auto break with reps -> results card with history with posture averages; (2) smooth UI with progress and live status badges; and (3) implementing posture landmarking onto the video stream.

What we learned

There are at least three things we learned:

MediaPipe + OpenCV integration inside FastAPI, and how to stream frames efficiently.
Importance of clamping/normalizing metrics and anchoring timers to wall-clock time.
Managing session state across frontend/localStorage/backend.