https://github.com/umasahni/todo-list
The app supports adding, editing, deleting, and organizing tasks with drag-and-drop functionality.
https://github.com/umasahni/todo-list
chakra-ui dnd-kit drag-and-drop localstorage propdrilling react
Last synced: 20 days ago
JSON representation
The app supports adding, editing, deleting, and organizing tasks with drag-and-drop functionality.
- Host: GitHub
- URL: https://github.com/umasahni/todo-list
- Owner: UmaSahni
- Created: 2024-07-25T10:41:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-26T11:52:14.000Z (about 1 year ago)
- Last Synced: 2024-11-12T14:07:20.242Z (11 months ago)
- Topics: chakra-ui, dnd-kit, drag-and-drop, localstorage, propdrilling, react
- Language: JavaScript
- Homepage: https://taskwriter.vercel.app/
- Size: 196 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Task Management App [ ( Deployed LINK ) ](https://taskwriter.vercel.app)
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
## 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].