Task Management (To-Do) App

A dynamic to-do list application built with React that allows users to add, edit, delete, and prioritize tasks. The app features task categorization, due dates, and drag-and-drop reordering using react-beautiful-dnd. Task data is persisted across sessions using the Context API and localStorage.

Table of Contents

• Overview
• Features
• Installation
• Usage
• Project Structure
• Technologies Used
• License

Overview

This Task Management (To-Do) App is designed to help users keep track of their daily tasks in an intuitive interface. Users can easily create tasks with descriptions and due dates, update existing tasks, delete tasks, and reorder them via drag-and-drop. The app leverages React Context for state management and persists data using localStorage.

Features

• Add Tasks: Create new tasks with a description and an optional due date.
• Edit Tasks: Update task details using an inline edit feature.
• Delete Tasks: Remove tasks from your list.
• Drag-and-Drop Reordering: Reorder tasks easily using react-beautiful-dnd.
• Persistent State: Task data is saved to localStorage, so your tasks remain even after refreshing or closing the browser.

Technologies Used

React: For building the user interface.

Vite: Fast build tool and development server.

React Router DOM: For client-side routing (if additional pages are added later).

react-beautiful-dnd: For drag-and-drop functionality to reorder tasks.

Context API & localStorage: For state management and persisting data across sessions.

Installation

Make sure you have Node.js installed.

1. Clone the repository:

   git clone https://github.com/your-username/task-manager.git
   cd task-manager

Install dependencies:

npm install

Run the development server:

npm run dev

Open your browser:

Navigate to http://localhost:3000 (or the port specified by Vite) to see the app in action.

Usage

Adding a Task: Use the form at the top of the home page to enter a task description and an optional due date, then click "Add Task".

Editing a Task: Click the "Edit" button next to a task to modify its details.

Deleting a Task: Click the "Delete" button to remove a task from your list.

Reordering Tasks: Click and drag a task to a new position in the list. The new order will be saved automatically.

State Persistence: Your tasks are saved in your browser's localStorage, so they persist between sessions.

Project Structure

task-manager/
├── package.json
├── index.html
└── src/
    ├── main.jsx              # Application entry point
    ├── App.jsx               # Main app component
    ├── index.css             # Global styles
    ├── contexts/
    │   └── TaskContext.jsx   # Context API for managing tasks and localStorage integration
    ├── components/
    │   ├── TaskItem.jsx      # Component representing individual tasks (with drag-and-drop functionality)
    │   └── TaskForm.jsx      # Form component for adding new tasks
    └── pages/
        └── Home.jsx          # Home page displaying the task list and task form