TaskFlow

Task planner to help organize your schedule.

Comment

TaskFlow

Inspiration

The idea for TaskFlow came from a personal frustration: the difficulty of staying organized. Like many people, I found ourselves juggling multiple tasks, missing deadlines, and struggling to prioritize effectively. Existing solutions felt either too simplistic or overly complex, leaving a gap between what's needed and what's available.

I wanted to build something that could help anyone—especially those who struggle with time management—plan their day intelligently, considering not just the tasks themselves, but also the natural rhythms of work: breaks, lunch, and the mental energy required to switch between different types of work.

The core concept is simple: tasks take time, time is finite, and planning ahead makes the difference between a productive day and an overwhelming one.

What it does

TaskFlow is a task management application that goes beyond simple to-do lists. It helps users:

  • Manage tasks with full CRUD operations, filtering, sorting, and search
  • Predict time estimates using intelligent analysis of task titles, descriptions, and tags
  • Plan realistic workdays by generating optimized schedules that include breaks and lunch
  • Reschedule dynamically when tasks take longer than expected—intelligently redistributing remaining work
  • Visualize on a calendar with full monthly view and task indicators
  • Stay notified about upcoming and overdue tasks with customizable alerts
  • Switch languages between French and English seamlessly

The day planner generates realistic schedules like:

09:00 - 10:30  Task A (high priority)
10:30 - 10:40  Short Break
10:40 - 12:00  Task B (medium priority)
12:00 - 12:45  Lunch Break
12:45 - 14:15  Task C (high priority)
14:15 - 14:25  Short Break
14:25 - 15:30  Task D (medium priority)

How I built it

TaskFlow is a fully client-side Vue 3 application with no backend required.

Technology Stack

  • Vue 3 with Composition API for reactive, maintainable code
  • TypeScript for type safety throughout the codebase
  • Pinia for centralized state management
  • Vue Router for navigation between views
  • localStorage for data persistence (works offline)

Architecture: Atomic Design

I followed the Atomic Design methodology for creating scalable, reusable components:

src/
├── components/
│   ├── atoms/              # Foundation elements
│   │   ├── AppButton.vue
│   │   ├── AppInput.vue
│   │   ├── AppSelect.vue
│   │   ├── StatusBadge.vue
│   │   ├── PriorityBadge.vue
│   │   ├── DurationDisplay.vue
│   │   └── TagChip.vue
│   ├── molecules/          # Composed patterns
│   │   ├── TaskCard.vue
│   │   ├── CalendarCell.vue
│   │   ├── TimeBlock.vue
│   │   ├── TaskFormModal.vue
│   │   ├── TaskDetailModal.vue
│   │   └── ConfirmDialog.vue
│   └── organisms/          # Feature components
│       ├── TaskList.vue
│       ├── CalendarGrid.vue
│       ├── DayPlannerPanel.vue
│       ├── NotificationPanel.vue
│       └── DayReschedulePanel.vue
├── composables/            # Reusable logic
│   ├── useCalendar.ts      # i18n-aware calendar navigation
│   ├── useDayPlanner.ts    # Workday generation algorithm
│   ├── useTimePrediction.ts # Duration estimation
│   ├── useNotifications.ts  # Notification system
│   └── useDayRescheduler.ts # Dynamic rescheduling
├── stores/
│   └── task.store.ts       # Task CRUD + planned slots
└── i18n/                  # Internationalization
    ├── index.ts
    ├── fr.ts
    └── en.ts

Key Features Implementation

Time Prediction Algorithm Analyzes task metadata to suggest realistic durations:

  • Keywords in titles (e.g., "report" → longer tasks)
  • Description length and complexity
  • Tag patterns (e.g., "meeting" → shorter durations)

Day Planning Algorithm Generates optimal schedules by:

  1. Sorting tasks by priority
  2. Inserting breaks every 90 minutes
  3. Reserving lunch at midday
  4. Calculating realistic end times based on total work duration

Dynamic Rescheduling When users log actual time spent:

  1. Calculates overtime from completed tasks
  2. Distributes overrun proportionally across remaining tasks
  3. Regenerates schedule from current time

Challenges I ran into

  1. Balancing simplicity and functionality — I wanted rich features but didn't want to overwhelm users. Finding the right UX took careful iteration.

  2. Responsive design for notifications — The notification panel needed to work on both mobile and desktop without compromising either experience. I ultimately went with a full-screen modal approach on mobile.

  3. State management complexity — With tasks, planned slots, time entries, notifications, and settings all needing to persist and sync, I had to carefully design the Pinia store to avoid redundancy.

  4. i18n in composables — Making sure calendar labels and date formatting adapted to locale required careful integration between the i18n system and the calendar composable.

Accomplishments that I'am proud of

  • Complete task management system with a cohesive design language
  • Intelligent time prediction that actually provides useful estimates
  • Realistic day planning that accounts for human factors (breaks, lunch)
  • Dynamic rescheduling that helps users adapt when plans change
  • Fully responsive interface that works on mobile and desktop
  • Bilingual support (FR/EN) with seamless switching
  • Offline-capable — no backend required, all data in localStorage
  • Type-safe codebase with no type-check errors

What I learned

  • Atomic Design works well for Vue — The hierarchical component structure made code organization intuitive and reuse straightforward.

  • localStorage has limits — For larger datasets, I'd need IndexedDB or a backend, but for personal use, localStorage provides instant load times.

  • Composition API enables great composables — Extracting logic into composables (day planning, rescheduling) made components much cleaner.

  • Planning algorithms need real-world testing — The day planner worked in theory, but real usage revealed edge cases around lunch timing and end-of-day constraints.

What's next for TaskFlow

  1. Drag-and-drop reordering — Let users manually reorder tasks in the planner
  2. Recurring tasks — Support for daily, weekly, or monthly patterns
  3. Data export — Export tasks and schedules to JSON or CSV
  4. Multiple workspaces/projects — Organize tasks into larger categories
  5. Statistics dashboard — Track completion rates, time spent, productivity trends
  6. PWA support — Installable app with push notifications
  7. Collaborative features — Share schedules or assign tasks (would require backend)
  8. Dark/light theme toggle — Currently dark-only, but light mode could be added

TaskFlow was built as a personal project to solve real organization challenges and explore Vue.js architecture patterns.

Built With

Share this project:

Updates