A modern, high-performance, enterprise-grade Kanban board built with React. This project replicates and extends the core functionalities of industry-leading tools like Jira and Trello, offering customizable pipelines, advanced drag-and-drop, and comprehensive deal tracking.
- Advanced Drag & Drop: Smooth reordering and seamless transitions between pipeline stages powered by
@dnd-kit. - Enterprise Search: Real-time global search across task titles, descriptions, and companies to instantly find deals.
- Smart Multi-Select Filtering: Stack multiple filters (e.g., "Assigned to me" AND "High Priority") with accurate active-state tracking.
- Dynamic Pipeline Switcher: Instantly navigate between different custom workflows and boards via a unified dropdown.
- WIP Limits (Work In Progress): Set maximum task limits per column with dynamic visual warnings to prevent bottlenecks.
- Comprehensive Deal Tracking: Track task titles, deep descriptions, company names, contact emails, deal values ($), expected close dates, priority levels, and custom tags.
- Financial Summaries: Automatically calculates and displays the total deal value for every stage in your pipeline.
- Framework: React
- State Management: Zustand
- Drag & Drop: @dnd-kit
- Styling: Tailwind CSS + shadcn/ui
- Icons: Lucide React
- Language: TypeScript (Strictly typed interfaces)
-
Clone the repository:
git clone https://github.com/rupeshpatil27/react-kanban-board.git
-
Navigate to the project directory:
cd react-kanban-board -
Install dependencies:
npm install # or yarn install # or pnpm install
-
Start the development server:
npm run dev # or yarn dev
