FocusFlow

About FocusFlow

FocusFlow was inspired by the common struggle of managing a busy day and staying productive. I noticed that even with to-do lists, it’s often unclear what to do first, how long tasks will take, or how to maintain focus without distractions. I wanted a tool that could take a plain-language description of your day and turn it into a clear, prioritized action plan with estimated times and focused work sessions.

What I Learned

Natural Language Processing (NLP): I learned how to parse plain-language input to identify tasks, priorities, and durations.

Time Management Algorithms: I implemented a basic scheduler that balances priorities with estimated completion times.

User Experience (UX): I explored ways to make task breakdowns visually intuitive and motivating, including a focus timer that encourages the Pomodoro technique.

How It Was Built

Frontend: Built using React for responsive and interactive UI.

Backend: Node.js server with AI integration to parse user input and generate task breakdowns.

AI Integration: Leveraged a language model API to interpret natural language and produce prioritized, timed tasks.

Focus Timer: Custom-built timer that encourages uninterrupted work blocks, with progress tracking.

Challenges Faced

Parsing ambiguous user input into actionable tasks was difficult, especially with overlapping or vague descriptions.

Balancing estimated time for each task without overloading the user required multiple iterations and testing.

Integrating AI output seamlessly into a user-friendly frontend took careful design and debugging.

Result

FocusFlow now lets users describe their day in plain language, see a prioritized schedule with estimated times, and use a focus timer to actually complete tasks efficiently. The project taught me valuable lessons in AI, UX design, and practical time management.

Built With

• auth0-state-management:-redux
• aws-(lambda
• canva-other-tools:-eslint
• css
• cypress-analytics-&-monitoring:-google-analytics
• date-fns-version-control-&-collaboration:-git
• express.js-database:-mongodb
• firebase-realtime-database-cloud-&-hosting:-vercel
• github
• github-actions-testing-&-debugging:-jest
• gpt-4
• heroku-apis-&-ai:-openai-api
• html
• languages:-javascript
• next.js
• nlp.js-authentication-&-user-management:-firebase-auth
• prettier
• python-frontend-frameworks:-react
• s3)
• sentry-design-&-prototyping:-figma
• tailwind-css-backend-frameworks:-node.js
• typescript
• zustand-task-scheduling-&-timing:-custom-pomodoro-timer