productivity tool

• 

  dashboard

• 

  habit tracker

• 

  personal notes

• 

  focus timer

• 

  calendar

• 

  tasks

Inspiration

Fragmenting workflows across separate apps hurts focus. FocusFlow was built to unify tasks, notes, habits, and a timer into one seamless, distraction-free dashboard.

What it does

Dashboard: Shows live completion metrics and quick action shortcuts. Task Manager: Filters daily priorities (High, Medium, Low). Pomodoro Timer: Controls focus intervals and breaks. Notes & Habits: Saves text ideas and tracks daily habits instantly.

How we built it

Frontend: Built with semantic HTML5 and CSS Grid/Flexbox. Engine: Programmed using Vanilla JavaScript to handle state updates. Storage: Utilizes browser localStorage for instant data persistence.

Challenges we ran into

Building the dynamic calendar engine from scratch required precise math logic to calculate the starting day offset of each month:(\text{Offset}=\text{new\ Date}(\text{year},\text{month},1).\text{getDay}())Managing layout shifts on small mobile viewports also required precise CSS media query overrides.

Accomplishments that we're proud of

Zero Dependencies: Built entirely with raw web languages and no heavy frameworks. Real-Time Sync: Updating data on any page instantly refreshes the dashboard metrics.

What we learned

We mastered managing client-side state engines without external libraries. We also learned how to leverage CSS custom variables to handle an instant dark mode switch.

What's next for productivity tool

Integrate audio alarms for the Pomodoro timer. Migrate from local storage to a secure cloud database for multi-device sync.

Built With

• css
• html5
• javascript