TaskFlow 📋

A beautiful, modern task management application built with React, TypeScript, and Tailwind CSS. Organize your tasks with workspaces and lists for maximum productivity.

✨ Features

🏢 Workspace Organization

• Create multiple workspaces for different projects or life areas
• Switch between workspaces seamlessly
• Custom emoji icons for visual organization
• Edit and delete workspaces with intuitive modals

📝 Smart List Management

• Organize tasks into categorized lists within workspaces
• Flexible list creation with custom names and emojis
• Easy list editing and deletion
• Visual indicators for active selections

✅ Advanced Task Management

• Create, edit, and delete tasks with inline editing
• Mark tasks as complete with satisfying animations
• Filter tasks by status (All, Active, Completed)
• Real-time progress tracking with visual progress bars
• Task context showing associated list and workspace

🎨 Beautiful Design

• Modern, clean interface with Apple-inspired design aesthetics
• Smooth animations and micro-interactions
• Responsive design that works on all devices
• Consistent 8px spacing system
• Professional color scheme with blue, teal, and neutral tones
• Hover states and focus indicators for accessibility

🚀 Technical Excellence

• Built with React 18 and TypeScript for type safety
• Zustand for lightweight, efficient state management
• Tailwind CSS for rapid, maintainable styling
• Lucide React for consistent, beautiful icons
• Vite for lightning-fast development and builds

🛠️ Tech Stack

• Frontend: React 18, TypeScript
• Styling: Tailwind CSS
• State Management: Zustand
• Icons: Lucide React
• Build Tool: Vite
• Linting: ESLint with TypeScript support

🚀 Quick Start

Prerequisites

• Node.js 16+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/hammadhttps/taskflow.git
   cd taskflow

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

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

Build for Production

npm run build

The built files will be in the dist directory, ready for deployment.

📱 Usage

Getting Started

1. Create a Workspace: Click the "+" button next to "Workspaces" to create your first workspace (e.g., "Work", "Personal")
2. Add Lists: Click the "+" button next to "Lists" to create task categories (e.g., "To Do", "In Progress", "Shopping")
3. Add Tasks: Use the input field at the top to add new tasks to your selected list
4. Organize: Switch between workspaces and lists to organize your tasks effectively

Pro Tips

• Use emojis to make your workspaces and lists visually distinct
• Filter tasks by status to focus on what matters most
• Use inline editing by clicking the edit icon on any task
• Watch the progress bar fill up as you complete tasks for motivation

🏗️ Project Structure

src/
├── components/          # React components
│   ├── SideBar.tsx     # Navigation and workspace/list management
│   ├── MainArea.tsx    # Task display and management
│   └── Modal.tsx       # Create/edit modals for workspaces and lists
├── store/              # State management
│   └── useStore.ts     # Zustand store with all app state
├── App.tsx             # Main application component
├── main.tsx            # Application entry point
└── index.css           # Global styles and Tailwind imports