💻 TaskFlow — Modern Task Management Web App

TaskFlow is a sleek, minimalist, and highly functional client-side productivity application. Built entirely with Vanilla JavaScript (ES6+), Semantic HTML5, and Modern CSS3 Variables, it delivers a frictionless user experience for managing daily workflows, tracking priorities, and analyzing personal progress in real time.

---

✨ Features

• ⚡ Zero-Config Local Storage: Full CRUD functionality that automatically persists all records to your browser’s LocalStorage—no server required.
• 📊 Real-Time Progress Analytics: Dynamic progress bar metrics that recalculate pending vs. completed tasks instantly.
• 🎨 Ambient Dark & Light Themes: Smooth, client-side theme-switching engine that respects and saves user preferences.
• 🗂️ Advanced Multi-Tier Filters: Filter tasks dynamically by status tabs (All, Active, Completed) or operational categories (Personal, Work, Shopping, Others).
• ⚠️ Smart Deadline & Overdue Alerts: Built-in time checking logic that automatically flags uncompleted tasks with clear visual warning badges once their due date passes.
• 🔍 Instant Asynchronous Search: High-performance query lookup to instantly filter massive lists as you type.
• 🔒 Built-In XSS Protection: Integrated input sanitization layer to escape raw strings and block potential Cross-Site Scripting injections.
• 📱 Fully Responsive Layout: Styled using the crisp Plus Jakarta Sans typeface, optimized for mobile viewports, tablets, and desktop displays.

---

🛠️ Architecture & Tech Stack

This project uses a clean, framework-free architecture optimized for high performance and lightweight asset footprints.

• Language & Logic: Vanilla JavaScript (ES6 Modules/State Architecture)
• UI/UX Layout: Semantic HTML5 & CSS3 Flexbox/Grid
• Styling Engine: CSS Custom Properties (:root variables) for flawless theme inheritance
• Typography & Vector Graphics: Google Fonts (Plus Jakarta Sans) & FontAwesome v6.4.0

---

🚀 Quick Start / Installation

Since TaskFlow runs entirely on the client side, you don’t need any backend environments or package compilation.

Step 1: Clone the Repository

git clone https://github.com/iamx-ariful-islam/TaskFlow.git

Step 2: Navigate to Directory

cd TaskFlow

Step 3: Run the Application

Simply double-click the index.html file to launch it in your browser or run it using a local server environment (like VS Code Live Server):

# If using python for a quick local host
python -m http.server 8000

Now, open http://localhost:8000 in your preferred web browser.

---

📁 File Structure

TaskFlow/
│
├── screenshots/      # Folder contains project screenshots
├── index.html        # App layout, interactive modals, and semantic structural components
├── style.css         # Modern stylesheets, dynamic root themes, layouts, and animations
├── app.js            # Main controller containing state engine, filtering, logic, and sanitizers
└── README.md         # Comprehensive technical documentation (This file)

---

🎨 System Workflows & Sorting Logic

TaskFlow automatically maintains clean visual structures by processing tasks through a multi-layered priority weight system:

1. Status First: Active tasks always float above completed records.
2. Priority Secondary: Items are structured dynamically by strict importance metrics (High ➔ Medium ➔ Low).
3. Timeline Sorting: Tasks sharing identical flags are neatly organized chronologically by their closest due dates.

---

🔒 Security Measures

// TaskFlow native string sanitizer against injection vectors
function escapeHTML(str) {
    return str.replace(/[\x26\x3C\x3E\x27\x22]/g, 
        tag => ({
            '\x26': '&',
            '\x3C': '<',
            '\x3E': '>',
            '\x27': ''',
            '\x22': '"'
        }[tag] || tag)
    );
}

---

Sreenshots

Here are some screenshots of the TaskFlow project:

Main Window

Create New Task

🤝 Contributing

Contributions, feedback, and optimization pull requests are welcome!

1. Fork the Project Repository.
2. Create your Feature Branch (git checkout -b feature/new-feature).
3. Commit your Changes (git commit -m 'Add some new-feature').
4. Push to the Branch (git push origin feature/new-feature).
5. Open a Pull Request.

---

🌐 For more or connect with me

        

📜 License

The MIT License (MIT)