Skip to content

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

Notifications You must be signed in to change notification settings

UmaSahni/Todo-List

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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].

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published