{"id":23661311,"url":"https://github.com/prashant-malviya/task-management-todo-app","last_synced_at":"2026-05-05T13:39:01.273Z","repository":{"id":268108542,"uuid":"903341297","full_name":"Prashant-Malviya/Task-Management-Todo-App","owner":"Prashant-Malviya","description":"This project is a simple Task Manager application built using React.js. The app allows users to manage tasks by adding, editing, deleting, and filtering tasks based on their status. The application features a responsive user interface to ensure usability across devices of different screen sizes.","archived":false,"fork":false,"pushed_at":"2024-12-20T15:41:02.000Z","size":122,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-20T18:17:00.326Z","etag":null,"topics":["axios","react-hooks","react-router","react-toast","reactjs","tabulatorjs","tailwind-css"],"latest_commit_sha":null,"homepage":"https://task-manager-by-prashant-malviya.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Prashant-Malviya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-14T11:02:43.000Z","updated_at":"2024-12-20T15:41:06.000Z","dependencies_parsed_at":"2024-12-14T12:17:37.793Z","dependency_job_id":"086dfa9a-3144-489e-b860-844e130456ef","html_url":"https://github.com/Prashant-Malviya/Task-Management-Todo-App","commit_stats":null,"previous_names":["prashant-malviya/task-management-todo-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Prashant-Malviya/Task-Management-Todo-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prashant-Malviya%2FTask-Management-Todo-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prashant-Malviya%2FTask-Management-Todo-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prashant-Malviya%2FTask-Management-Todo-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prashant-Malviya%2FTask-Management-Todo-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Prashant-Malviya","download_url":"https://codeload.github.com/Prashant-Malviya/Task-Management-Todo-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prashant-Malviya%2FTask-Management-Todo-App/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261186368,"owners_count":23121938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","react-hooks","react-router","react-toast","reactjs","tabulatorjs","tailwind-css"],"created_at":"2024-12-29T04:57:09.165Z","updated_at":"2026-05-05T13:38:56.252Z","avatar_url":"https://github.com/Prashant-Malviya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Task Manager\n\nThis project is a simple **Task Manager** application built using **React.js**. The app allows users to manage tasks by adding, editing, deleting, and filtering tasks based on their status. The application features a responsive user interface to ensure usability across devices of different screen sizes.\n\n## Deployed Link:- https://task-manager-by-prashant-malviya.netlify.app/\n\n---\n\n## Features\n\n- **Add Tasks**: Users can create new tasks by providing a title, description, and status.\n- **Edit Tasks**: Inline editing of tasks directly within the table.\n- **Delete Tasks**: Remove tasks easily with a single click.\n- **Filter Tasks**: Filter tasks based on their current status (\"To Do\", \"In Progress\", \"Done\").\n- **Responsive Design**: Fully responsive UI for small and large screens.\n- **Dynamic Table**: Integrated using the Tabulator library for efficient data handling.\n- **Notifications**: Success messages for task actions using `react-hot-toast`.\n\n---\n\n## Technologies Used\n\n- **Frontend**: React.js, Tailwind CSS\n- **Table Management**: Tabulator.js\n- **Notifications**: react-hot-toast\n- **Styling**: Tailwind CSS for responsive design\n\n---\n\n## Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/your-repo/task-manager.git\n   ```\n\n2. Navigate to the project directory:\n\n   ```bash\n   cd task-manager\n   ```\n\n3. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n4. Start the development server:\n\n   ```bash\n   npm start\n   ```\n\nThe application will be accessible at `http://localhost:3000`.\n\n---\n\n## Project Structure\n\n```\n.\n├── public\n├── src\n│   ├── components\n│   │   ├── TaskForm.jsx       # Component to add tasks\n│   │   ├── TaskTable.jsx      # Component to display tasks in a table\n│   ├── App.jsx               # Main application file\n│   ├── index.js              # React entry point\n├── package.json\n├── README.md\n```\n\n---\n\n## Usage\n\n1. **Adding Tasks**:\n   - Enter a task title and description in the form.\n   - Select a status (default is \"To Do\").\n   - Click the \"Add Task\" button.\n\n2. **Editing Tasks**:\n   - Double-click a cell in the \"Title\" or \"Description\" columns to edit the content.\n   - Change the task's status via the dropdown in the \"Status\" column.\n\n3. **Deleting Tasks**:\n   - Click the cross button in the \"Delete\" column to remove a task.\n\n4. **Responsive Behavior**:\n   - On small screens, the table collapses less critical columns for better usability. Collapsed data can be accessed by expanding rows.\n\n---\n\n## Challenges and Solutions\n\n1. **Handling Inline Editing**:\n   - Used Tabulator's `editor` functionality to enable inline editing of task fields.\n\n2. **Responsive Table**:\n   - Configured Tabulator with `responsiveLayout: \"collapse\"` and prioritized columns using the `responsive` property.\n\n3. **State Management**:\n   - Managed tasks using React's `useState` and ensured updates are reflected dynamically in the table.\n\n4. **ID Management on Deletion**:\n   - Reassigned task IDs after deletions to maintain consistency.\n\n---\n\n\n## Acknowledgements\n\n- [React.js](https://reactjs.org/)\n- [Tabulator](http://tabulator.info/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [react-hot-toast](https://react-hot-toast.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprashant-malviya%2Ftask-management-todo-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprashant-malviya%2Ftask-management-todo-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprashant-malviya%2Ftask-management-todo-app/lists"}