Focus Flow

Inspiration

In my daily work, I often found it difficult to keep track of tasks, especially when coordinating with teammates, switching between priorities, and trying to remember what was still pending or delegated. I needed a tool that wasn’t bloated or overly complex — just something simple, effective, and based on a proven method. That’s why I decided to build FocusFlow, a task manager based on the Getting Things Done (GTD) methodology, to bring order and clarity to everyday work

What it does

FocusFlow helps users organize their tasks into actionable categories like Inbox, Next Actions, Projects, Waiting For, Someday/Maybe, and Calendar

How we built it

We built FocusFlow using React, TypeScript, Tailwind CSS, Zustand for state management, and React Router for page navigation. The app persists user data in localStorage using Zustand's persist middleware, with built-in versioning and migration logic to ensure compatibility. The design prioritizes simplicity and speed, with a mobile-first, distraction-free layout.

Challenges we ran into

One prompt

Accomplishments that we're proud of

Structuring the GTD flow into intuitive UI components using only one prompt, there are many profesionals webs with worst aspects and management compare with mine with only one prompt.

What we learned

How to apply the GTD methodology in a real, usable app The importance of keeping the UI simple and focused to avoid overwhelming the user How to manage global state efficiently using Zustand, especially with persistence and migration handling How small UX details (like quick add, keyboard shortcuts, and clean navigation) can make a big difference in usability

What's next for Focus Flow

Add real-time sync and multi-device support Implement Google Calendar integration Expand import/export features for backups and migration Add AI-based task suggestions and natural language input Package it as a PWA for offline and installable use

Built With

• css
• localstorage
• react
• router
• tailwind
• typescript
• zustand