📋 TaskFlow — Smart Task Management Dashboard

TaskFlow is a responsive, accessible task management dashboard built with vanilla HTML, CSS, and JavaScript. It lets you create, organize, filter, and track tasks with live statistics, a completion chart, dark mode, and a handful of fun easter eggs.

🔗 Live Demo: https://a7med-nasr.github.io/taskflow/ (enable GitHub Pages on this repo to activate)

---

✨ Features

• Task management — add, edit, complete, and delete tasks with title, description, priority, category, and due date.
• Live dashboard — total, completed, pending, and completion-rate cards, updated in real time.
• Statistics chart — a Chart.js doughnut chart comparing completed vs. pending tasks.
• Search, filter & sort — search by title, filter by priority/category/status, and sort by priority, due date, or status.
• Due-date awareness — tasks are automatically flagged as overdue, due today, or upcoming.
• Dark mode — theme preference is saved and restored via localStorage.
• CSV export — export the full task list to a .csv file with one click.
• AI-style suggestions — a lightweight rule-based assistant that recommends what to tackle next.
• Sound feedback & achievements — subtle audio cues and unlockable achievements as you complete tasks.
• Fully responsive — reworked mobile-first layout for phones, tablets, and desktops.
• Accessible — semantic landmarks, keyboard focus states, ARIA labels/live regions, skip link, and reduced-motion support.
• SEO-ready — meta description/keywords, Open Graph & Twitter Card tags, and JSON-LD structured data.

🖥️ Tech Stack

• HTML5 — semantic markup
• CSS3 — custom properties, Flexbox, Grid, clamp(), mobile-first media queries
• JavaScript (ES6+) — vanilla, no frameworks
• Chart.js — statistics chart (loaded via CDN)
• Font Awesome — icon set (bundled locally)

📁 Project Structure

TaskFlow/
├── assets/
│   ├── css/
│   │   └── main.css
│   ├── JS/
│   │   └── app.js
│   ├── imgs/
│   │   └── icon.png
│   ├── sounds/
│   │   ├── achievement.wav
│   │   ├── canceled.mp3
│   │   ├── click.wav
│   │   ├── complete.wav
│   │   ├── delete.mp3
│   │   ├── notification.wav
│   │   └── pop.wav
│   └── vendors/
│       ├── fontAwesome/
│       └── webfonts/
├── index.html
└── README.md

🚀 Getting Started

No build tools or dependencies required — it's a static site.

1. Clone the repository:

   git clone https://github.com/A7med-Nasr/taskflow.git
   cd taskflow

2. Open index.html directly in your browser, or serve it locally for the best experience (some browsers restrict local audio/fetch on file://):

   # Using Python
   python3 -m http.server 5500
   
   # Or using the VS Code "Live Server" extension

3. Visit http://localhost:5500 in your browser.

⌨️ Keyboard Shortcuts

• Ctrl + K — jump to the search field
• Esc — close the delete confirmation modal
• ↑ ↑ ↓ ↓ ← → ← → B A — a small surprise 😉

📌 Notes

• Tasks are stored in the browser's localStorage, so data is local to your device/browser and isn't synced anywhere.
• Update the Open Graph/Twitter meta tags in index.html with your live URL once the project is deployed, for the best link-preview results.

📄 License

This project is licensed under the MIT License.

👤 Author

Ahmed Nasr Frontend Developer GitHub: @A7med-Nasr

If you're hiring or want to collaborate, feel free to reach out!