https://github.com/racky7/kanban-board-v2
Implementation of Kanban board using ReactJs.
https://github.com/racky7/kanban-board-v2
kanban-board react reactcontextapi reactjs reactquery
Last synced: about 1 month ago
JSON representation
Implementation of Kanban board using ReactJs.
- Host: GitHub
- URL: https://github.com/racky7/kanban-board-v2
- Owner: racky7
- Created: 2024-11-03T06:45:59.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-03T07:07:50.000Z (6 months ago)
- Last Synced: 2025-01-29T10:30:03.453Z (3 months ago)
- Topics: kanban-board, react, reactcontextapi, reactjs, reactquery
- Language: TypeScript
- Homepage: https://kanban-board-x.vercel.app
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kanban Board
Implementation of Kanban board using ReactJs.
## Demo
https://kanban-board-x.vercel.app
## Local Setup
#### 1. Install Package Dependencies
```bash
npm install
```
#### 2. Start the Project
```bash
npm run dev
```
## Features
- Change status of Task from Card Itself
- Navigate through Task using Keyboard Arrow Keys
- Open Task in Modal (Using 'Enter' Key Press)
- Perform Actions In Modal - Change Status (Using Keyboard Shortcuts - 1, 2, 3), Add Comments
## Design Choices
### 1. Technical Stack Decisions
* **shadcn/ui**: Chosen for its accessible, customizable components that provide a modern look while maintaining high performance
* **React Context**: Used for global state management, particularly for task status and modal states
* **React Query**: Implemented for efficient server state management and data caching
* **React Hotkeys**: Integrated for comprehensive keyboard navigation and shortcuts
* **Faker**: Utilized to generate realistic mock data for development and testing
### 2. Performance-First Approach
React Query Features:
- Automatic background data updates
- Optimistic updates for status changes
- Efficient caching strategy
- Context Optimization: Carefully structured to prevent unnecessary re-renders
### 3. Keyboard Navigation Implementation
React Hotkeys Integration:
- Global navigation with arrow keys (↑↓)
- Task detail access with Enter
- Status change shortcuts (1,2,3)