MD Tasks - A Robust Markdown Todo List Application

MD Tasks is a feature-rich, modern application built with React that allows users to effortlessly convert markdown into interactive and hierarchical todo lists. This powerful tool not only enhances productivity through task management, but also provides valuable insights into user progress.

🌐 Live Demo: todo.commandboard.online

Features

Core Functionality

• Multi-List Management: Seamlessly create, manage, and switch between multiple to-do lists.
• Markdown-to-Tasks Conversion: Effortlessly convert markdown content with headers and bullet points into an interactive to-do list.
• Persistent Storage: Automatically save all lists and tasks to local storage, with debounced saves to ensure performance.
• Search Functionality: Easily find tasks across all lists with real-time filtering results.
• Progress Tracking: Get a quick overview of completed versus pending tasks for each list.
• Quick Add Feature: Add tasks promptly using an input field designed for speed.

Task Management

• Interactive Checkboxes: Toggle task completion with immediate visual feedback.
• Hierarchical Structure: Maintain organization with proper indentation and collapsible sections for nested tasks.
• Inline Editing: Edit task descriptions directly in the list using intuitive keyboard shortcuts.
• Add and Delete Tasks: Create subtasks under existing tasks or remove unwanted tasks with ease.
• Section Headers: Use headers for better organization, derived directly from markdown.
• Hide Completed Tasks: Choose to hide completed tasks to maintain focus on outstanding items.

Due Date Management

• Due Date Picker: Easily assign due dates to tasks using an intuitive dropdown menu.
• Quick Options: Insert due dates for today, tomorrow, or next week rapidly.
• Visual Due Date Status: Color-coded indicators highlight overdue, today, and upcoming tasks.
• Smart Sections and Filters: Automatically categorize tasks based on their due date status and filter accordingly.
• Calendar Integration: Export tasks to popular calendar applications like Google Calendar, or download .ics files for use with other apps.

Focus Mode

• Distraction-Free Interface: Enjoy a full-screen focus mode that centers on a single task without distractions.
• Visual Task Highlighting: Large display of task text for easier readability and a quick completion checkbox.

Integrated Pomodoro Timer

• Focus Timer Functionality: Utilizes an integrated timer for productive work sessions with customizable durations.
• Timers for Breaks: Set up distinct work and break intervals, complete with audio notifications.
• Session Tracking: Keep track of completed pomodoro sessions visually.

Productivity Dashboard

• Statistics Overview: View key statistics such as daily completed tasks, streaks, and overall completion rates.
• Completion Trend Charts: Visual bar charts represent productivity metrics over various timeframes.
• Task List Analysis: Assess completion rates for individual todo lists.

Kanban Board

• Three-Column Layout: Organize tasks easily into To Do, In Progress, and Done sections.
• Drag & Drop Functionality: Move tasks between columns smoothly using intuitive drag-and-drop mechanics.
• Responsive Design: Adapt seamlessly to any device, offering optimal usability on mobile and desktop.

Advanced Features

• Markdown Visualizer: A dual-pane interface allows for real-time markdown input and preview.
• Customization options: Change background images and styles easily within the app settings.

User Experience Enhancements

• Smooth Animations: Transitions and micro-interactions create a polished user experience.
• Keyboard Shortcuts: Improve task management speed with dedicated shortcuts for editing and saving.

Markdown Support

The application incorporates extensive support for markdown syntax, allowing users to structure their lists and tasks efficiently. Examples of supported markdown features include:

### Sample To-Do List

* [ ] Task One
  * [ ] Subtask A
  * [x] Subtask B
* [ ] Task Two

Project Structure

The project is organized in a structured manner, promoting ease of navigation and maintainability. Key directories include:

todo-list/
├── public/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── pages/
├── package.json
└── README.md

Technologies Used

• React for UI components
• TypeScript for type-safe coding
• Vite for optimal build performance
• Styled-components for CSS-in-JS styling
• pnpm as a package manager

Conclusion

MD Tasks serves as an innovative tool for both personal and professional task management, blending markdown simplicity with advanced productivity features, making it ideal for anyone looking to enhance their organizational skills.