FluxTask: High-Fidelity State Orchestrator

🎯 Objective

FluxTask is a sophisticated task management engine designed to solve the problem of cognitive overload through organized state persistence. It demonstrates a complete CRUD lifecycle (Create, Read, Update, Delete) wrapped in a modern, accessible interface.

⚙️ Logic Flow

The application follows a Reactive State Pattern:

1. State Initialization: Hydrates the application state from localStorage using a fail-safe nullish coalescing operator.
2. Immutability-Driven Updates: Instead of direct array mutation, the system uses the .filter() and .map() methods to return new state arrays, ensuring predictable data flow.
3. Predicate Filtering: A high-order filtering layer intercepts the state before rendering, allowing for real-time views (Pending vs. Completed) without modifying the underlying data source.
4. DOM Reconciliation: The UI is rebuilt dynamically based on the filtered state, maintaining a strict link between the "Data Layer" and the "View Layer."

🏗️ The Foundation

This project serves as a technical bridge to React/MERN by mastering:

• Event Delegation: Handling multiple dynamic list items via a single parent listener (closest("li")).
• Persistence Logic: Serializing complex object arrays into JSON for browser storage.
• CSS Variable Architecture: Using :root variables for a scalable design system and theme consistency.
• Functional Programming: Heavy reliance on declarative array methods which are the standard for modern JavaScript development.