TaskFlow - Task Management Application

A modern, responsive task management application built with React, TypeScript, and Tailwind CSS. TaskFlow helps you organize your tasks with an intuitive drag-and-drop interface, real-time dashboard, and beautiful dark/light mode support.

🚀 Live Demo

View Live Application

✨ Features

Core Functionality

• 📋 Task Management: Create, edit, and delete tasks with detailed information
• 🎯 Priority Levels: Organize tasks by Low, Medium, and High priority
• 📊 Status Tracking: Track tasks through To Do, In Progress, and Completed states
• 🏷️ Custom Labels: Create and assign colored labels to categorize tasks
• 📅 Due Dates: Set and track task deadlines with overdue indicators

User Experience

• 🖱️ Drag & Drop: Intuitive task movement between columns
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile
• 🌙 Dark/Light Mode: Toggle between themes with system preference detection
• 💾 Local Storage: Automatic data persistence across browser sessions
• 📈 Real-time Dashboard: Live statistics and progress tracking

Dashboard Analytics

• Completion Rate: Visual progress tracking
• Task Counters: Real-time count of tasks by status
• Due Soon Alerts: Highlights tasks due within 3 days
• Progress Bar: Visual representation of task distribution

🛠️ Technology Stack

• Frontend: React 18 with TypeScript
• Styling: Tailwind CSS with dark mode support
• Drag & Drop: React DnD with HTML5 backend
• Icons: Lucide React
• Build Tool: Vite
• Deployment: Netlify
• Data Storage: Browser localStorage

🏗️ Project Structure

src/
├── components/           # React components
│   ├── Dashboard.tsx    # Analytics and statistics
│   ├── Header.tsx       # Navigation bar with theme toggle
│   ├── TaskBoard.tsx    # Main kanban board
│   ├── TaskCard.tsx     # Individual task cards
│   ├── TaskColumn.tsx   # Drag-drop columns
│   ├── TaskForm.tsx     # Task creation/editing form
│   └── LabelForm.tsx    # Label creation form
├── context/             # React context providers
│   ├── TaskContext.tsx  # Task state management
│   └── ThemeContext.tsx # Theme state management
├── types/               # TypeScript type definitions
│   └── index.ts         # Task, Label, Priority types
├── App.tsx              # Main application component
├── main.tsx             # Application entry point
└── index.css            # Global styles and Tailwind imports

🚀 Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd taskflow-organizer

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📱 Usage Guide

Creating Tasks

1. Click the "Add Task" button in the Task Board section
2. Fill in task details:
   • Title: Brief task description
   • Description: Detailed task information
   • Priority: Low, Medium, or High
   • Status: To Do, In Progress, or Completed
   • Due Date: Optional deadline
   • Labels: Assign custom labels for categorization

Managing Tasks

• Edit: Click the edit icon on any task card
• Delete: Click the trash icon (with confirmation)
• Move: Drag and drop tasks between columns
• Status: Tasks automatically update status when moved

Creating Labels

1. Click "Add Label" in the task form
2. Enter label name and choose a color
3. Labels can be reused across multiple tasks

Theme Toggle

• Click the sun/moon icon in the header
• Automatically detects system preference
• Preference saved in browser storage

🎨 Design Features

Color System

• Primary: Blue (#3B82F6) for main actions
• Success: Green (#10B981) for completed items
• Warning: Yellow (#F59E0B) for in-progress items
• Danger: Red (#EF4444) for high priority/overdue

Responsive Breakpoints

• Mobile: < 768px (single column layout)
• Tablet: 768px - 1024px (responsive grid)
• Desktop: > 1024px (full three-column layout)

Accessibility

• Keyboard navigation support
• ARIA labels for screen readers
• High contrast color ratios
• Focus indicators

💾 Data Persistence

TaskFlow uses browser localStorage to persist:

• All tasks and their properties
• Custom labels
• Theme preference
• Application state

Data is automatically saved on every change and restored on page reload.

🔧 Customization

Adding New Task Statuses

1. Update the Status type in src/types/index.ts
2. Add new column configuration in TaskBoard.tsx
3. Update the dashboard statistics in Dashboard.tsx

Custom Label Colors

Modify the COLORS array in src/components/LabelForm.tsx to add new color options.

Theme Customization

Update Tailwind configuration in tailwind.config.js to customize colors, fonts, and spacing.

🚀 Deployment

The application is deployed on Netlify with automatic builds from the main branch.

Deploy Your Own Copy

1. Fork this repository
2. Connect your GitHub account to Netlify
3. Deploy from your forked repository
4. Netlify will automatically build and deploy

Manual Deployment

npm run build
# Upload the 'dist' folder to your hosting provider

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• React Team for the amazing framework
• Tailwind CSS for the utility-first CSS framework
• Lucide for the beautiful icon set
• Netlify for free hosting and deployment

📞 Support

If you have any questions or need help with the application:

• Open an issue on GitHub
• Check the documentation above
• Review the code comments for implementation details

---

Built with ❤️ using React, TypeScript, and Tailwind CSS