Focus Bar

Inspiration

Students don’t struggle because they don’t care — they struggle because large tasks feel overwhelming and invisible until it’s too late.

Traditional to-do lists show what needs to be done, but they fail to show progress, pressure, and effort. We wanted to build something that makes progress tangible, emotionally engaging, and rewarding — something that feels more like playing a game than managing a checklist.

That idea became Focus Bar.

What it does

Focus Bar is a gamified productivity web app where students turn their tasks into RPG-style boss battles.

Every task becomes an enemy with HP
Large goals are broken down into smaller sub-quests
Time spent focusing deals continuous damage
Completing a sub-task deals a powerful finishing blow
Progress is visual, measurable, and satisfying

Instead of feeling stressed by deadlines, students feel motivated to defeat them.

How we built it

Focus Bar is built as a modern web application using Next.js App Router and React, with a strong emphasis on performance, UX, and clarity. Boss art created by chierit.

Frontend
- React Server Components for fast initial load
- Client Components for real-time game state
- Tailwind CSS for a dark, cyberpunk-inspired UI
- Framer Motion for smooth, game-like animation
- Howler.js for immersive background music and sound effects
AI Integration
- Google Gemini is used as a controlled “Dungeon Master”
- The AI helps:
  - Break large goals into actionable sub-tasks
  - Assign relative effort values fairly
- AI does not judge quality, grades, or performance
Game Logic
- Deterministic formulas calculate damage, XP, and progression
- This ensures fairness, transparency, and predictable behavior
Infrastructure
- Fully typed with TypeScript (strict mode)
- Dockerized for reproducible development
- No login required — all data is stored locally for simplicity

Challenges we ran into

Balancing AI involvement We had to carefully limit AI’s role so it assists without overstepping or becoming opaque.
Making productivity feel like a game without distraction The UI needed to feel exciting but not overwhelming during focus sessions.
Seamless audio on the web Looping background music smoothly required offline audio preprocessing to avoid latency or clicks.

Accomplishments that we're proud of

Designed an AI system that is helpful, transparent, and ethically restrained
Built a complete game-like experience without sacrificing usability
Created a focus tool that feels fun instead of stressful
Delivered a polished UI with sound, animation, and feedback in a short hackathon timeframe