{"id":25617588,"url":"https://github.com/bhabishya-123/todo-list-react","last_synced_at":"2026-04-18T00:03:37.880Z","repository":{"id":276449918,"uuid":"929318556","full_name":"Bhabishya-123/todo-list-react","owner":"Bhabishya-123","description":"📝 A responsive and feature-rich TODO list application built with React, TypeScript, Redux Toolkit, and Sass. Includes drag-and-drop sorting, context menus, task filtering, and persistent data storage.","archived":false,"fork":false,"pushed_at":"2025-03-05T14:58:02.000Z","size":201,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-15T08:53:18.301Z","etag":null,"topics":["drag-and-drop","react","react-dnd","redux-toolkit","responsive-design","sass","task-management","todo","todo-list","typescript"],"latest_commit_sha":null,"homepage":"https://todotypescriptredux.netlify.app/","language":"TypeScript","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/Bhabishya-123.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-08T09:09:17.000Z","updated_at":"2025-03-05T14:58:05.000Z","dependencies_parsed_at":"2025-02-08T10:28:22.872Z","dependency_job_id":"77f719be-f977-4cac-b1f8-083f40ad57fa","html_url":"https://github.com/Bhabishya-123/todo-list-react","commit_stats":null,"previous_names":["bhabishya-123/todo-list-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Bhabishya-123/todo-list-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bhabishya-123%2Ftodo-list-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bhabishya-123%2Ftodo-list-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bhabishya-123%2Ftodo-list-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bhabishya-123%2Ftodo-list-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bhabishya-123","download_url":"https://codeload.github.com/Bhabishya-123/todo-list-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bhabishya-123%2Ftodo-list-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000707,"owners_count":26082805,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["drag-and-drop","react","react-dnd","redux-toolkit","responsive-design","sass","task-management","todo","todo-list","typescript"],"created_at":"2025-02-22T05:24:04.843Z","updated_at":"2025-10-08T19:16:30.835Z","avatar_url":"https://github.com/Bhabishya-123.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"📝 TODO List Application\n\n\n📚 Table of Contents\n/*******************************/\n1.Overview\n2.Features\n3.Technologies Used\n4.Setup Instructions\n5.Implementation Details\n6.File Structure\n7.Live Demo\n/*******************************/\n\n\n🧐 Overview\n/*******************************/\nThis feature-rich TODO List Application is built using React, TypeScript, and Sass. The app allows users to efficiently manage tasks with advanced features like drag-and-drop sorting, context menus, and task filtering. It is responsive, leveraging Redux Toolkit for state management and React DnD for seamless drag-and-drop functionality.\n/*******************************/\n\n\n🚀 Features\n✅ Core Functionality\n-Add Tasks: Add tasks via an input field and button, with validation to prevent empty tasks.\n-Edit Tasks: Edit task names directly or through the context menu.\n-Delete Tasks: Remove tasks using the delete button or the context menu.\n-Mark Complete/Incomplete: Toggle a task's completion status via a checkbox or the context menu.\n\n\n🛠 Advanced Features\n-Global State Management: Task state is globally managed using Redux Toolkit.\n-Persistent Data: Tasks are saved in localStorage to persist across browser reloads.\n-Drag-and-Drop Sorting: Reorder tasks effortlessly using React DnD.\n-Context Menu: Right-click on a task to open a context menu with options like:\n     --Edit\n     --Delete\n     --Mark as Complete/Incomplete\n\n-Task Filtering: Filter tasks to view:\n     --All Tasks\n     --Completed Tasks\n     --Incomplete Tasks\n\n\n📱 Responsive and Reusable Design\n-Fully responsive design built using Sass with reusable variables and mixins.\n-Mobile-friendly layout that adapts seamlessly to various screen sizes.\n\n\n🌐 Live Demo\nCheck out the live version of the application here:\n[ToDo Application](https://todotypescriptredux.netlify.app/)\n\n\n🛠️ Technologies Used\nCore Libraries\n-React: Component-based frontend library for building the UI.\n-TypeScript: Enforces type safety across the application.\n-Redux Toolkit: Simplifies state management for tasks and filters.\n-React DnD: Enables drag-and-drop functionality for reordering tasks.\n\n\nStyling\n--Sass: Used for custom styles with variables and mixins for reusability.\nData Persistence\n--localStorage: Saves task data locally for persistence across browser reloads.\n\n\n⚙️ Setup Instructions\nPrerequisites\nMake sure you have the following installed:\n--Node.js (v16 or higher)\n--npm or yarn\n\nSteps to Run the Project\n1.Clone the Repository:\n--git clone git@github.com:Bhabishya-123/todo-list-react.git\n--cd todo-list-react\n\n\n2.Install dependencies:\n--npm install\n\n3.Start the development server:\n--npm start\n\n4.Open the application in your browser at:\nhttp://localhost:3000\n\n\n🛠️ Implementation Details\n🌐 State Management\n-Redux Toolkit is used to manage the global state for tasks and filters.\n-Actions include adding, editing, deleting, toggling completion, filtering, and reordering tasks.\n-Task data is saved in localStorage to persist across reloads.\n\n\n🔄 Drag-and-Drop Sorting\n-Built using React DnD.\n-Tasks are both draggable (useDrag) and droppable (useDrop), enabling seamless reordering.\n\n\n📋 Context Menu\n-A custom ContextMenu component is triggered by the onContextMenu event.\n-Offers task-specific actions:\n     --Edit\n     --Delete\n     --Toggle Complete/Incomplete\n\n\n🔍 Filtering\n-Users can filter tasks based on their completion status:\n     --All tasks\n     --Completed tasks\n     --Incomplete tasks\n-Filtering is handled by Redux's global state.\n\n\n🎨 Responsive Design\n-Built using Sass, utilizing variables and mixins to ensure reusable and maintainable styles.\n-Mobile-friendly and responsive across various screen sizes.\n\n\n✨ Optional Animations\n-Smooth transitions enhance user experience for adding, deleting, and reordering tasks.\n\n\n📂 File Structure\nsrc/\n├── components/\n│   ├── App.tsx          # Main application component\n│   ├── Form.tsx         # Component for adding new tasks\n│   ├── List.tsx         # Component displaying the list of tasks\n│   ├── Item.tsx         # Component for individual task items\n│   ├── Filter.tsx       # Component for filtering tasks\n│   ├── ContextMenu.tsx  # Custom context menu for task actions\n├── store/\n│   ├── store.ts         # Redux store setup\n│   ├── taskSlice.ts     # Redux slice for task actions\n├── styles/\n│   ├── App.scss         # Styles for the main application\n│   ├── Form.scss        # Styles for the form\n│   ├── List.scss        # Styles for the task list\n│   ├── Item.scss        # Styles for individual task items\n│   ├── Filter.scss      # Styles for filter buttons\n│   ├── ContextMenu.scss # Styles for the context menu\n│   ├── responsive.scss  # Styles for responsive styles\n│   ├── index.scss       # Styles for root index\n│   ├── _variables.scss  # Sass variables for reusable styles\n│   ├── _mixins.scss     # Sass mixins for reusable design patterns\n├── types/\n│   ├── Item.ts          # Type definition for task items\n├── index.tsx            # Entry point for the application\n├── README.md            # Documentation for the application\n\n\n🎯 Features and Implementation Summary\n-State Management: Powered by Redux Toolkit for managing tasks and filters globally.\n-Drag-and-Drop Sorting: Built with React DnD, allowing users to reorder tasks seamlessly.\n-Responsive Design: Custom styles using Sass ensure a clean and consistent UI.\n-Context Menu: Provides a user-friendly way to edit, delete, and toggle tasks.\n-Persistent Data: Tasks are saved in localStorage to ensure the user's data is not lost on refresh.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhabishya-123%2Ftodo-list-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhabishya-123%2Ftodo-list-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhabishya-123%2Ftodo-list-react/lists"}