Taskflow ✅ — Modern Productivity Suite

Taskflow is a high-performance, production-grade productivity application designed for the modern web. Built with a focus on Visual Excellence, Glassmorphic Design, and Advanced Task Intelligence.

🔗 Live Demo

---

📸 Visual Experience

Dashboard & Analytics

The Bento-style dashboard provides a high-level overview of your productivity with dynamic SVG charts and real-time stats.

Dark Mode	Light Mode

Task Management

A clean, card-based interface for managing tasks with priority indicators, tags, and inline editing.

Dark Mode	Light Mode

Calendar & Scheduling

Stay ahead of your deadlines with a dedicated monthly grid view.

Dark Mode	Light Mode

---

✨ Core Features

🛠 Advanced Task Management

• Full CRUD Support: Create, Read, Update, and Delete tasks with a modern modal interface.
• Inline Editing: Double-click any task title to edit it instantly on the list.
• Priority Intelligence: Assign High, Medium, or Low priority with visual indicators.
• Smart Tags: Add multiple tags to categorize tasks; filterable across all views.
• Pinned Tasks: Keep your most important items at the very top of your list.
• Recurring Engine: Set tasks to repeat Daily, Weekly, or Monthly. Completed recurring tasks automatically schedule their next occurrence.

📊 Analytics & Insights

• Interactive Charts: Donut charts for completion rates and bar charts for priority breakdowns.
• Productivity Stats: Track total tasks, completion percentage, weekly average, and overdue items.
• Visual Feedback: Overdue tasks are automatically highlighted to ensure they aren't missed.

📅 Views for Every Workflow

• Today View: Focused list of tasks starting or due today.
• Overdue View: Dedicated area for incomplete tasks past their due date.
• Calendar View: Monthly grid for visual planning and deadline tracking.
• Pinned View: Isolation of your top-priority items.

---

📂 Import / Export Engine

Manage your data with professional-grade tools.

• Dual Format Support: Import and Export tasks via CSV or Excel (.xlsx).
• Schema Validation: Ensures your data matches the required structure before importing.
• Row Preview: Review imported data in a clean UI before committing to storage.
• Bulk Export: Backup your entire database with a single click.

Import / Export Tool

---

🌙 Premium UX & Design

• Glassmorphic Theme: Stunning dark and light modes with persistent user preference.
• Micro-interactions: Smooth transitions and subtle hover effects for a premium feel.
• Bulk Actions: Multi-select tasks using Ctrl/Cmd + Click for mass deletion or completion.
• Toast System: Real-time feedback for every action (create, delete, import, etc.).
• Keyboard Power: Esc to close modals, Enter to add tags, and intuitive navigation.

---

🛠 Tech Stack

• Framework: React 18 (Context API for State Management)
• Tooling: Vite 5 (Lightning-fast HMR)
• Styling: CSS Modules with Design Tokens (Glassmorphism)
• Libraries:
  • PapaParse (CSV Parsing)
  • SheetJS (Excel Processing)
• Storage: persistent localStorage with schema versioning.

---

🚀 Deployment

The project is optimized for Vercel with custom routing and asset management.

Deploy to Vercel

1. Push to GitHub: Ensure your latest changes are in your repository.
2. Import to Vercel: Go to vercel.com and import your repository.
3. Automatic Detection: Vercel will automatically detect the Vite project and use npm run build with the dist output directory.
4. Client-side Routing: The provided vercel.json ensures that all routes point to index.html for a seamless SPA experience.

---

🚀 Getting Started

# 1. Clone & Install
git clone https://github.com/your-username/taskflow.git
cd taskflow
npm install

# 2. Run Development
npm run dev

# 3. Build for Production
npm run build

---

---

📁 Project Structure

taskflow/
├── index.html
├── vite.config.js
├── package.json
└── src/
    ├── main.jsx                    # React entry point
    ├── App.jsx                     # Root app with providers
    ├── styles/
    │   └── globals.css             # Design tokens + global styles
    ├── context/
    │   ├── TodoContext.jsx         # Central todo state (CRUD, localStorage)
    │   ├── ThemeContext.jsx        # Dark/light mode state
    │   ├── NotificationContext.jsx # Toast notification system
    │   └── Notification.module.css
    ├── hooks/
    │   └── useFilter.js            # Filter + sort logic (useMemo)
    ├── utils/
    │   └── exportUtils.js          # CSV and Excel export helpers
    └── components/
        ├── Layout/
        │   ├── Layout.jsx          # App shell (sidebar + main)
        │   └── Layout.module.css
        ├── Sidebar/
        │   ├── Sidebar.jsx         # Navigation + badges + theme toggle
        │   └── Sidebar.module.css
        ├── Topbar/
        │   ├── Topbar.jsx          # Search bar + actions
        │   └── Topbar.module.css
        ├── FilterBar/
        │   ├── FilterBar.jsx       # Priority / status / date filters
        │   └── FilterBar.module.css
        ├── BulkBar/
        │   ├── BulkBar.jsx         # Multi-select bulk actions
        │   └── BulkBar.module.css
        ├── TodoCard/
        │   ├── TodoCard.jsx        # Individual task card
        │   └── TodoCard.module.css
        ├── TodoModal/
        │   ├── TodoModal.jsx       # Create / edit task modal
        │   └── TodoModal.module.css
        ├── Views/
        │   ├── TodosView.jsx       # Main list (all/today/overdue/pinned)
        │   ├── TodosView.module.css
        │   ├── AnalyticsView.jsx   # Dashboard with charts
        │   ├── AnalyticsView.module.css
        │   ├── CalendarView.jsx    # Monthly calendar grid
        │   ├── CalendarView.module.css
        │   ├── ImportExportView.jsx
        │   └── ImportExportView.module.css
        └── UI/
            ├── EmptyState.jsx
            └── EmptyState.module.css

---

Built with ❤️ by the Taskflow Team.