https://github.com/ullaskunder3/tasktickler-task-management-app
TaskTickler: A hands-on journey into crafting an efficient Task Management App featuring intuitive Drag-and-Drop functionality.
https://github.com/ullaskunder3/tasktickler-task-management-app
Last synced: about 1 year ago
JSON representation
TaskTickler: A hands-on journey into crafting an efficient Task Management App featuring intuitive Drag-and-Drop functionality.
- Host: GitHub
- URL: https://github.com/ullaskunder3/tasktickler-task-management-app
- Owner: ullaskunder3
- Created: 2024-01-09T12:40:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-09T13:02:59.000Z (over 2 years ago)
- Last Synced: 2025-02-08T22:25:16.035Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://task-tickler-task-management-app-six.vercel.app
- Size: 60.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Task Management App
## Overview
The Task Management App is a web application built using React and React Beautiful DND for managing tasks and their associated items through an intuitive drag-and-drop interface. The app allows users to organize tasks into different categories, add new items to each task, and reorder tasks as needed.
## Preview
🚀 **Published:** [TaskTickler App](https://task-tickler-task-management-app-six.vercel.app/)
Explore the live preview of the TaskTrove Task Management App! Click the link above to experience the drag-and-drop functionality and streamline your tasks
|||
|--|--|
||-😄-|
## Project Structure
The project follows a modular structure to enhance maintainability and readability. Here's a brief overview of the main directories and files:
- **src/**
- **components/**
- **DragNDrop/**
- Contains components related to drag-and-drop functionality.
- **Main/**
- Contains components and styles specific to the main task management functionality.
- **Modal/**
- Contains components and styles related to modals for adding new items.
- **helpers/**
- Contains utility functions for interacting with local storage and handling background colors.
- **types/**
- Defines TypeScript interfaces for the data structures used in the app.
- **assets/**
- Placeholder for any additional assets used in the project.
- **public/**
- Contains the `index.html` file.
## Key Files and Functions
### Local Storage Helpers
- **`helpers/get_localStoredData.ts`**
- Exports `getDataFromLocalStorage`, a function to retrieve data from local storage.
- **`helpers/set_localStoredData.ts`**
- Exports `setDataToLocalStorage`, a function to store data in local storage.
### Background Color Utility
- **`helpers/getBackgroundColor.ts`**
- Exports `getBackgroundColor`, a function to determine the background color based on item priority.
### Task Interfaces
- **`src/types/task.ts`**
- Defines TypeScript interfaces (`Item`, `Task`, and `TaskListProps`) for the data structures used in the app.
### Main Component
- **`src/components/Main/Main.tsx`**
- The main functional component that renders the entire task management app.
- Utilizes React Beautiful DND for drag-and-drop functionality.
- Manages local state for tasks, handles adding items, and updates local storage on state changes.
## Getting Started
1. Clone the repository.
2. Install dependencies using `npm install`.
3. Run the app using `npm start`.
4. Open the app in your browser at `http://localhost:3000`.
## Dependencies
- React
- React Beautiful DND
- UUID (v4)
- React Modal
## License
This project is licensed under the [MIT License](LICENSE.md). Feel free to use, modify, and distribute it as per the terms of the license.
## Acknowledgments
- Thanks to youtube Dave Gray, Laith.
- https://github.com/atlassian/react-beautiful-dnd/tree/master