{"id":22111322,"url":"https://github.com/racky7/kanban-board-v2","last_synced_at":"2026-05-20T05:40:50.324Z","repository":{"id":260869373,"uuid":"882575768","full_name":"racky7/kanban-board-v2","owner":"racky7","description":"Implementation of Kanban board using ReactJs.","archived":false,"fork":false,"pushed_at":"2024-11-03T07:07:50.000Z","size":68,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T04:33:33.715Z","etag":null,"topics":["kanban-board","react","reactcontextapi","reactjs","reactquery"],"latest_commit_sha":null,"homepage":"https://kanban-board-x.vercel.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/racky7.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-11-03T06:45:59.000Z","updated_at":"2024-11-12T11:53:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"96cf3016-5de9-4fca-9cca-b3b22fb164a7","html_url":"https://github.com/racky7/kanban-board-v2","commit_stats":null,"previous_names":["racky7/kanban-board-v2"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/racky7/kanban-board-v2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/racky7%2Fkanban-board-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/racky7%2Fkanban-board-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/racky7%2Fkanban-board-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/racky7%2Fkanban-board-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/racky7","download_url":"https://codeload.github.com/racky7/kanban-board-v2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/racky7%2Fkanban-board-v2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267317956,"owners_count":24068483,"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-07-27T02:00:11.917Z","response_time":82,"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":["kanban-board","react","reactcontextapi","reactjs","reactquery"],"created_at":"2024-12-01T10:38:34.927Z","updated_at":"2026-05-20T05:40:50.261Z","avatar_url":"https://github.com/racky7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Kanban Board\nImplementation of Kanban board using ReactJs.\n\n## Demo\n\nhttps://kanban-board-x.vercel.app\n\n## Local Setup\n\n#### 1. Install Package Dependencies\n```bash\nnpm install\n```\n\n#### 2. Start the Project\n```bash\nnpm run dev\n```\n\n\n\n## Features\n\n- Change status of Task from Card Itself\n- Navigate through Task using Keyboard Arrow Keys\n- Open Task in Modal (Using 'Enter' Key Press)\n- Perform Actions In Modal - Change Status (Using Keyboard Shortcuts - 1, 2, 3), Add Comments\n\n\n## Design Choices\n\n### 1. Technical Stack Decisions\n\n* **shadcn/ui**: Chosen for its accessible, customizable components that provide a modern look while maintaining high performance\n\n* **React Context**: Used for global state management, particularly for task status and modal states\n\n* **React Query**: Implemented for efficient server state management and data caching\n\n* **React Hotkeys**: Integrated for comprehensive keyboard navigation and shortcuts\n\n* **Faker**: Utilized to generate realistic mock data for development and testing\n\n### 2. Performance-First Approach\n\nReact Query Features:\n\n- Automatic background data updates\n\n- Optimistic updates for status changes\n\n- Efficient caching strategy\n\n\n- Context Optimization: Carefully structured to prevent unnecessary re-renders\n\n### 3. Keyboard Navigation Implementation\n\nReact Hotkeys Integration:\n\n- Global navigation with arrow keys (↑↓)\n\n- Task detail access with Enter\n- Status change shortcuts (1,2,3)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fracky7%2Fkanban-board-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fracky7%2Fkanban-board-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fracky7%2Fkanban-board-v2/lists"}