/Todo-List

The app supports adding, editing, deleting, and organizing tasks with drag-and-drop functionality.

Primary LanguageJavaScript

Task Management App ( Deployed LINK )

The Task Management App is a web-based application designed to help users manage their tasks efficiently. The app supports adding, editing, deleting, and organizing tasks with drag-and-drop functionality. The app leverages React for the frontend and uses the @dnd-kit library for drag-and-drop interactions.

Features

  1. Add Tasks: Quickly add new tasks to your list.
  2. Edit Tasks: Modify existing tasks with ease.
  3. Delete Tasks: Remove tasks that are no longer needed.
  4. Toggle Task Status: Mark tasks as completed or pending.
  5. Drag and Drop: Reorder tasks using a simple drag-and-drop interface.

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Chakra UI: A simple, modular, and accessible component library for React.
  • @dnd-kit: A set of utilities for building complex drag-and-drop interfaces.

Quick preview

image

Learning Areas

React Prop Drilling

Prop drilling is a technique in React where you pass data from a parent component to a deeply nested child component through multiple layers of intermediate components. This can lead to verbose and less maintainable code. In this app, we handle state management and pass necessary props down to child components to ensure they have the data they need.

Chakra UI Library

Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to build your React applications quickly. It provides a set of accessible, reusable, and composable React components that make it easy to create responsive and visually appealing user interfaces.

DnD Kit Library

@dnd-kit is a modern drag-and-drop toolkit for React. It provides a set of utilities for building drag-and-drop interfaces that are customizable and perform well. In this app, we use @dnd-kit to enable drag-and-drop functionality for reordering tasks in the list.

LocalStorage

LocalStorage is a web storage API that allows you to store data in the browser's storage. This data persists even when the browser is closed and reopened. In this app, we use LocalStorage to save the task list, ensuring that the tasks persist across page reloads and browser sessions.


Contact

If you have any questions or suggestions, feel free to contact me at [uma.sahni.me@gmail.com].