FLowState AI

Inspiration

FlowState was inspired by a simple problem we kept seeing: most productivity tools optimize task lists, not human energy. In real work sessions, performance quality changes with fatigue, context switching, and cognitive load. We wanted to build a system that treats productivity as a dynamic behavioral process instead of a static checklist.

What we built

FlowState is an energy-aware productivity web app that combines task execution with live session telemetry.
It supports:

• Task creation with difficulty and estimated duration
• Per-task timers and completion tracking
• Real-time behavioral metrics:
  • Energy level
  • Velocity (tasks/hour)
  • Error rate
  • Work pattern classification
  • Burnout risk scoring
• Recovery flow with rest alerts and rest logging
• Analytics dashboard with trend and distribution views
• Settings to tune sensitivity (burnout threshold, energy decay)
• Local export/reset for session data

How we built it

We built the MVP as a React + TypeScript app with Vite for speed and iteration.

• UI layer: React components for Landing, Dashboard, Analytics, and Settings
• State layer: Auth and theme handled through React context
• Behavior engine: A dedicated engagement engine computes metrics and suggestions
• Persistence layer: A storage service persists tasks, logs, analytics, and timer/session state in browser localStorage

At a high level, the engine applies lightweight heuristic modeling:

$$ \text{Velocity} = \frac{\text{Completed Tasks}}{\text{Session Duration (hours)}} $$

$$ \text{Error Rate} = \frac{\text{Errors}}{\text{Total Actions}} \times 100 $$

Energy is decayed over time with configurable sensitivity, then combined with error behavior to estimate burnout risk and classify work state (Deep Focus, Drifting, Struggling, Burnout Risk).

Challenges we faced

• Designing a metric model that is useful without pretending to be medically precise
• Keeping timers, rest state, and analytics synchronized in a purely client-side architecture
• Balancing UX clarity with dense telemetry (avoiding “dashboard overload”)
• Working within hackathon constraints while still shipping an end-to-end loop

What we learned

• Productivity tools become more actionable when they include state awareness, not just planning
• Even simple heuristics can produce meaningful insights when feedback is timely
• Local-first architecture is great for rapid prototyping, but backend sync becomes essential quickly
• Building for sustainability (quality + recovery) is a stronger framing than just “do more tasks”

What’s next

• Replace mock auth with production authentication
• Add backend persistence for multi-device sync
• Improve recommendation quality with personalized historical patterns
• Expand analytics into longitudinal “resilience over time” views

Built With

• css
• html5
• localstorage
• lucide
• react
• recharts
• tailwind-style
• typescript
• vite