FocusFlow is a task prioritization tool designed to reduce decision fatigue and help users focus on what truly matters.
Instead of managing endless to-do lists, FocusFlow helps users identify high-impact tasks, visualize priorities, and reflect on how they spend their time.
Most task management tools focus on what needs to be done, but not what matters most.
Common problems:
- Too many tasks, no clarity
- High effort tasks stealing time from impactful ones
- Decision fatigue every morning
- No reflection on weekly work patterns
FocusFlow is built around Impact vs Effort thinking.
It helps users:
- Assign impact and effort to tasks
- Automatically calculate priorities
- Visualize tasks on a priority matrix
- Focus only on the most important tasks each day
- Reflect weekly on how time was spent
- Create tasks with impact and effort values
- Automatic priority calculation
- Local persistence (localStorage)
- 2×2 visualization (Impact × Effort)
- Color-coded priority points
- Hover details for quick inspection
- Click-to-focus interaction
- Automatically selects top 3 priority tasks
- Reduces daily decision fatigue
- Encourages intentional work
- Task completion overview
- Average priority insights
- Quadrant-based task distribution
- Encourages reflection and improvement
FocusFlow follows a clean, layered architecture:
-
UI Layer
- React components
- Tailwind CSS for styling
-
Domain & Logic Layer
- Task model
- Priority calculation
- Focus & review services
-
Persistence Layer
- LocalStorage-based storage
- Client-only access guards
This separation keeps the app:
- Testable
- Maintainable
- Easy to extend with a backend later
- Next.js (App Router)
- React 18
- Tailwind CSS v4
- pnpm
- LocalStorage
- Git (feature-based workflow)
LocalStorage is accessed safely using client-only mounting patterns to avoid hydration mismatches.
Pages do not store duplicated state. Data is always derived from a single source of truth.
All business logic lives outside UI components for clarity and reuse.
pnpm install
pnpm devThen open:
This project is intentionally released as an MVP.
Possible future enhancements include:
- Backend persistence
- User authentication
- Weekly charts & trends
- Keyboard shortcuts for faster task entry
- Dark mode support
- Subtasks and recurring tasks
- Data export and backup
These features were consciously postponed to keep the product focused and usable.
Built as a case study to explore:
- Product thinking
- Decision-focused UX
- Modern React & Next.js patterns