📝 TaskManager - React Context API & Tailwind CSS v4

A modern, highly responsive task management application built to demonstrate clean state architecture in React. The project bypasses traditional prop-drilling by leveraging a centralized data broadcasting layer via the React Context API, backed by seamless client-side data persistence.

🚀 Live Demo: View Live App
📂 Context Architecture Branch: main (Redux Toolkit implementation coming soon in an isolated repository)

---

🛠️ Tech Stack & Development Ecosystem

• Frontend Core: React.js (Functional Components & Hooks)
• Styling Engine: Tailwind CSS v4 (Featuring modern alpha-compositions and fluid layouts)
• State Layer: React Context API (createContext + useContext)
• Persistence: Web Storage API (LocalStorage)
• Ecosystem Workflow: 100% engineered, tracked, and deployed within a mobile-first environment utilizing Termux (GitHub release), customized Neovim (LazyVim), and FV File Explorer.

---

🏗️ Architecture & State Flow

Instead of passing states manually through nested components, this application implements a central state manager that decouples data management from presentation layouts.

• TodoContext.Provider broadcasts the global array and state modifiers down the tree.
• TodoForm dispatches App-wide mutations via context when creating tasks.
• TodoItem consumes specific data fields, handles local inline editing, and fires state deletions.

Key Engineering Features:

• Lazy State Initialization: Eliminates the common flash-and-delete React bug on rapid reloads. The state initializes directly from a callback function evaluating LocalStorage, ensuring zero-latency data hydration.
• Thread-Safe Functional Updates: All structural updates utilize functional callbacks (prev) => [...]. This ensures that rapid user interactions modify the absolute latest operational snapshot of the state array.
• Immutable Array Pipelines: Uses optimized .map() projections for real-time item editing/toggles and .filter() pipelines for memory-safe item exclusions.

---

📂 File Directory Blueprint

src/ ├── contexts/ │ ├── TodoContext.js # Defines global Context object, Provider, and custom useTodo hook │ └── index.js # Clean entry point for context tracking ├── components/ │ ├── TodoForm.jsx # Input interface for registering new task objects │ ├── TodoItem.jsx # Individual task card featuring responsive inline text editing │ └── index.js # Export aggregator for clean application imports ├── App.jsx # Application core layout; orchestrates top-level context state logic └── main.jsx # DOM mounting point

---

⚡ How It Works (Code Spotlights)

Custom Hook Architecture (TodoContext.js)

Exposing state securely through an abstraction layer rather than raw context injection:

export const useTodo = () => { return useContext(TodoContext); };

High-Fidelity App-Level State Update Operations (App.jsx)

// Toggle Task Completion State cleanly via Map mapping const toggleComplete = (id) => { setTodos((prev) => prev.map((prevTodo) => prevTodo.id === id ? { ...prevTodo, completed: !prevTodo.completed } : prevTodo ) ); };

---

🚀 Local Setup Instructions

If you wish to test or run this repository locally within a standard environment or inside Termux, execute the following sequences:

1. Clone the repository: git clone https://github.com/your-username/react-todo-context.git cd react-todo-context

2. Install dependencies: npm install

3. Boot up the local development environment: npm run dev

---

👨‍💻 Author

Muhammad Saleem (MSaleemDev)

• LinkedIn: MSaleemDev
• Brand Portfolios: SaleemSeron / CodeMaster Saleem

---

Note: This repository represents Milestone 1 (Context API). A separate repository showcasing the exact layout migrated entirely into an enterprise-level state layer via Redux Toolkit (RTK) is currently under active development.