FocusFlow

Your AI-powered daily planner that prioritizes what matters most.

Comment

Project Showcase: FocusFlow What problem does FocusFlow solve? I built FocusFlow to solve the "productivity fragmentation" problem. Most people jump between a task list, a separate timer app, and a notes tool, losing focus with every switch. FocusFlow is a minimalist, all-in-one productivity hub that integrates task management, Pomodoro timers, and nested knowledge mapping into a single, cohesive experience.

How I built it with MeDo Building FocusFlow was a collaborative journey. I structured my conversations with MeDo using a modular approach:

Foundation: We started by establishing a robust Supabase backend for real-time task syncing. Specialization: I then directed MeDo to implement specialized "Focus Modes," like the Pomodoro timer and the Calendar time-blocking view. Refinement: Finally, we used MeDo’s specialized skills to handle complex features like full-text search, data localization, and a highly customizable aesthetic system. The most impressive feature The most impressive part MeDo generated is the Nested Documentation System (Notes). It’s a full-featured knowledge base that supports infinite nesting, Notion-style slash commands for block creation, and real-time auto-saving. MeDo handled the complex recursive data structures and drag-and-drop logic with remarkable precision, ensuring the UI remained fluid and "Minimalist" as requested.

Extending functionality with Skills & APIs MeDo’s ability to integrate external capabilities was a game-changer. We used Supabase Edge Functions for secure data handling and the Theme Customizer skill to allow users to build their own color schemes from scratch. This transformed the app from a simple tool into a deeply personal workspace that users can truly own.

The Best Part? The "magic moment" was seeing MeDo execute a complete localization sweep. In a single pass, it audited over 100 files, translated every UI string and code comment into English, and ensured the entire codebase remained lint-clean and production-ready. It didn't just write code; it maintained the architectural integrity of the entire project.

Built With

Share this project:

Updates

posted an update —

FocusFlow Release Update

New Features

1. Comprehensive Calendar View

We’ve launched the new Calendar Page, giving your schedule a clear and visual home.

  • Drag-and-Drop Scheduling
    Reschedule tasks instantly by moving them across the monthly calendar grid.

  • Time Blocking
    Create dedicated focus blocks directly on the calendar to reserve time for specific tasks.

  • Task Details
    Access and edit task metadata, including priority, descriptions, and tags, directly from the calendar interface.

2. Interactive Analytics Dashboard

The Analytics Dashboard has received a major upgrade, offering deeper productivity insights.

  • Custom Date Ranges
    Filter your data by the last 7 days, last 30 days, current week, current month, or all-time.

  • Four New Visualizations

    • Activity Trends
      Track task creation versus completion over time.
    • Priority Distribution
      Understand the balance of your workload across different priorities.
    • Time Allocation
      See exactly where your hours are going with task-specific bar charts.
    • Planned vs. Actual
      Compare initial time estimates against real tracked time to improve planning accuracy.

3. Professional Pomodoro Timer

A fully featured Pomodoro Timer is now live to help you maintain deep focus.

  • Smart Cycles
    Automatically transition between Work sessions of 25 minutes, Short Breaks of 5 minutes, and Long Breaks of 15 minutes.

  • Visual & Audio Feedback
    Stay on track with an SVG-based circular progress indicator and gentle audio alerts when each session ends.

  • Personalized Settings
    Fully customize session durations and the number of sessions required before a long break.

Visual & UI Updates

Minimalist Aesthetic

All new components follow our “Airy & Restrained” design philosophy, prioritizing high-contrast typography and generous whitespace for long-term reading comfort.

Dynamic Theme Engine

The Pomodoro Timer now includes a user-selectable color palette:

  • Red
  • Blue
  • Green
  • Purple
  • Orange

Changing the theme instantly updates the primary accent colors across the timer UI.

Technical Developments

Keyboard Shortcut System

Implemented a global keyboard event-listening system for power-user workflows:

Shortcut Action
Space Start / Pause timer
R Reset session
N Skip to the next session
1-5 Instantly switch themes

Enhanced Supabase Integration

Developed new CRUD helpers for time_entries and pomodoro_sessions to ensure real-time synchronization and persistent data storage.

Database Schema Evolution

Successfully applied migrations to support user-specific theme preferences and detailed session logging.

General Progress

Type-Safe Architecture

Fixed 10+ TypeScript compilation errors across the main task and calendar modules.

Performance Optimization

Optimized chart rendering for large datasets using memoized data aggregation.

Linting Compliance

The entire project, covering 97+ files, now passes 100% of strict linting checks.

Objective Accomplished

These updates transform FocusFlow from a simple task list into a full-scale productivity ecosystem.

We’d love to hear your thoughts on the new Calendar and Pomodoro features. Drop a comment below and share your feedback!

Log in or sign up for Devpost to join the conversation.

posted an update —

FocusFlow Project Update

Status Update

This week, I added a new authentication system for FocusFlow. Users can now create an account, log in, and access their own protected workspace. This helps keep each user's tasks and productivity data private and separated from other users.

New Features Added

User Authentication Pages

I added both Login and Sign Up pages for FocusFlow.

The authentication system includes:

  • Login form with username and password
  • Sign up form with username, email, password, and confirm password
  • Terms and privacy agreement checkbox
  • "Remember me" option
  • Forgot password link
  • User session support so each user can access their own task data

This is an important step because FocusFlow is now moving from a basic task management prototype into a more complete personal productivity app.

Protected User Workspace

After logging in, users are brought into their own FocusFlow dashboard. The app now displays the current user in the interface, showing that the workspace is connected to an authenticated account.

This makes it possible to protect:

  • A user's personal tasks
  • Calendar planning
  • Templates
  • Settings
  • Future analytics data

Calendar Page

I added a new Calendar page for scheduling and visualizing tasks.

Current progress:

  • Calendar navigation item added to the sidebar
  • Time blocking calendar section created
  • Placeholder area added for the future drag-and-drop calendar view

Next, I plan to make this page support dragging tasks into time blocks.

Templates Page

I added a Templates page so users will eventually be able to save and reuse task templates.

Current progress:

  • Templates navigation item added
  • Empty state UI added
  • "Create Template" button added
  • "Create Your First Template" call-to-action added

This will help users quickly create recurring tasks without starting from scratch every time.

Settings Page

I also added a new Settings page where users can customize their FocusFlow experience.

The first completed settings section is for the Pomodoro Timer.

Current Pomodoro settings include:

  • Work duration
  • Short break duration
  • Long break duration
  • Sessions until long break

The settings page also includes tabs for:

  • Pomodoro
  • Notifications
  • Appearance
  • Data
  • Shortcuts

Screenshots Added

I added screenshots showing the current progress of the app:

  1. Login page
  2. Sign up page
  3. Calendar page
  4. Templates page
  5. Settings page

These screenshots show the updated authentication flow and the new protected app pages.

Current Progress

FocusFlow now has a stronger foundation with authentication and multiple user-facing pages. The app is no longer just a single task screen. It now has a structure for a full productivity platform, including task management, calendar planning, reusable templates, analytics, and customizable settings.

Next Steps

The next features I plan to work on are:

  • Connect authentication to persistent user task data
  • Build the real calendar time-blocking functionality
  • Allow users to create and save task templates
  • Add working Pomodoro timer behavior
  • Improve analytics for user productivity tracking
  • Add more settings customization options

Summary

This update focused on making FocusFlow more complete and user-centered. By adding authentication, protected user pages, and new sections like Calendar, Templates, and Settings, the project is moving closer to becoming a real AI-powered task management app that users can personalize and use every day.

Log in or sign up for Devpost to join the conversation.

Submission history