{"id":32622807,"url":"https://github.com/its-rath/kanban-task-management-system","last_synced_at":"2026-04-10T04:57:20.081Z","repository":{"id":321587654,"uuid":"1086283185","full_name":"its-rath/Kanban-Task-Management-System","owner":"its-rath","description":"Open Source Task Management System","archived":false,"fork":false,"pushed_at":"2025-10-30T11:45:32.000Z","size":68778,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-30T13:31:55.741Z","etag":null,"topics":["jsx","rag","react","tailwindcss","task-management-system","tsx-language","typescript"],"latest_commit_sha":null,"homepage":"","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/its-rath.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-10-30T07:51:37.000Z","updated_at":"2025-10-30T11:45:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"413fe99f-fcd0-4934-88b5-ab490f02cd7e","html_url":"https://github.com/its-rath/Kanban-Task-Management-System","commit_stats":null,"previous_names":["its-rath/kanban-task-management-system"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/its-rath/Kanban-Task-Management-System","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/its-rath%2FKanban-Task-Management-System","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/its-rath%2FKanban-Task-Management-System/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/its-rath%2FKanban-Task-Management-System/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/its-rath%2FKanban-Task-Management-System/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/its-rath","download_url":"https://codeload.github.com/its-rath/Kanban-Task-Management-System/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/its-rath%2FKanban-Task-Management-System/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281873520,"owners_count":26576262,"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-30T02:00:06.501Z","response_time":61,"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":["jsx","rag","react","tailwindcss","task-management-system","tsx-language","typescript"],"created_at":"2025-10-30T19:51:28.417Z","updated_at":"2025-11-01T02:04:50.633Z","avatar_url":"https://github.com/its-rath.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kanban Board Component\n\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/React-18.2-61dafb)](https://reactjs.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.3-38bdf8)](https://tailwindcss.com/)\n[![Storybook](https://img.shields.io/badge/Storybook-7.0-ff4785)](https://storybook.js.org/)\n\nA production-grade, fully accessible Kanban Board component built with React, TypeScript, and Tailwind CSS.\n\n## ✨ Features\n\n- **Drag \u0026 Drop**: Smooth drag-and-drop using @dnd-kit/core primitives\n- **Type-Safe**: Built with TypeScript strict mode\n- **Accessible**: WCAG 2.1 AA compliant with full keyboard navigation\n- **Responsive**: Mobile, tablet, and desktop layouts\n- **Performant**: Optimized with memoization and virtualization\n- **Documented**: Comprehensive Storybook documentation\n\n## 🚀 Installation\n```bash\n  npm install\n  npm run storybook\n```\n\n## 📖 Usage\n\nimport { KanbanBoard } from './components/KanbanBoard';\nimport { useKanbanBoard } from './hooks/useKanbanBoard';\n\nfunction App() {\n  const {\n    columns,\n    tasks,\n    handleTaskMove,\n    handleTaskCreate,\n    handleTaskUpdate,\n    handleTaskDelete,\n  } = useKanbanBoard({ initialColumns, initialTasks });\n\n  return (\n    \u003cKanbanBoard \n    columns={columns}\n    tasks={tasks} \n    onTaskMove={handleTaskMove} \n    onTaskCreate={handleTaskCreate} \n    onTaskUpdate={handleTaskUpdate} \n    onTaskDelete={handleTaskDelete} /\u003e\n  );\n}\n\n\n## 🎯 Architecture\n\n### Component Structure\n\n- **KanbanBoard**: Main container with drag-and-drop context\n- **KanbanColumn**: Individual columns with droppable areas\n- **KanbanCard**: Task cards with drag functionality\n- **TaskModal**: Editing interface for task details\n\n### Custom Hooks\n\n- **useDragAndDrop**: Manages drag-and-drop state and sensors\n- **useKanbanBoard**: Manages board state and CRUD operations\n\n### Utilities\n\n- **task.utils**: Task-related helper functions\n- **column.utils**: Column manipulation utilities\n\n## ⌨️ Keyboard Navigation\n\n| Key       | Action                                |\n|-----------|---------------------------------------|\n| Tab       | Move focus between cards              |\n| Shift+Tab | Move focus backwards                  |\n| Enter/Space | Select card or activate element     |\n| Arrow Keys| Navigate between cards                |\n| Escape    | Close modal or cancel action          |\n| Delete    | Delete focused card                   |\n\n## 🎨 Customization\n\nExtend Tailwind configuration in `tailwind.config.js` to customize colors, spacing, and animations.\n\n## 📊 Performance\n\n- React.memo for expensive components\n- useCallback and useMemo for optimization\n- List virtualization for large datasets (50+ items)\n- Debounced search and filter inputs\n\n## 🧪 Storybook Stories\n\n- **Default**: Basic board with sample data\n- **Empty State**: Board with no tasks\n- **Large Dataset**: 50+ tasks for performance testing\n- **Mobile View**: Responsive layout demonstration\n- **Accessibility Demo**: Keyboard navigation showcase\n\n## 🧾 Conclusion\n\nThis production-grade Kanban Board component demonstrates enterprise-level React developmentwith TypeScript, featuring comprehensive accessibility, performance optimization, and Storybookdocumentation. All code follows strict type-safety standards and modern best practices for scalablecomponent libraries.\n\n## 📝 License\n\nMIT\n\n## 👨‍💻 Author\n\n[Swayam Rath]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fits-rath%2Fkanban-task-management-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fits-rath%2Fkanban-task-management-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fits-rath%2Fkanban-task-management-system/lists"}