A professional, feature-rich task management web application built with React, TypeScript, and Tailwind CSS. This application provides a modern Kanban-style board for managing tasks with comprehensive analytics and team performance tracking.
- Kanban View: Drag-and-drop tasks between columns (Todo, In Progress, In Review, Done)
- List View: Grouped list view of tasks organized by status
- Filters: Filter tasks by authors, tags, priorities, and search
- Quick Actions: Create, edit, and delete tasks with ease
- Task Details:
- Assignee management
- Due date tracking
- Priority levels (Low, Medium, High)
- Multiple tags
- Rich text descriptions
- Status tracking
-
KPIs:
- Task completion rate
- On-time completion percentage
- Overdue task counter
- Active task tracking
-
Visualizations:
- Stacked bar chart: Tasks by status and priority
- Donut chart: Task distribution by tags
- Line chart: Task creation vs completion trends
-
Team Performance:
- Leaderboard showing completed tasks per team member
- Workload distribution visualization
-
Activity Tracking:
- Upcoming deadlines timeline
- Recent activity feed
- Real-time task updates
- React 19 - UI framework
- TypeScript - Type safety
- Vite - Build tool
- Tailwind CSS 4 - Styling
- Recharts - Data visualization
- @dnd-kit - Drag and drop functionality
- date-fns - Date utilities
- Lucide React - Icons
- Node.js 18 or higher
- pnpm package manager
- Install dependencies:
pnpm install- Start the development server:
pnpm dev- Build for production:
pnpm build- Preview production build:
pnpm previewtaskflow/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── TaskCard.tsx
│ │ ├── TaskModal.tsx
│ │ ├── CreateTaskModal.tsx
│ │ ├── KanbanView.tsx
│ │ ├── ListView.tsx
│ │ └── FilterPanel.tsx
│ ├── pages/ # Page components
│ │ ├── TaskBoard.tsx
│ │ └── Dashboard.tsx
│ ├── hooks/ # Custom React hooks
│ │ └── useTaskManager.ts
│ ├── utils/ # Utility functions
│ │ └── cn.ts
│ ├── data/ # Mock data
│ │ └── mockData.ts
│ ├── types/ # TypeScript type definitions
│ │ └── index.ts
│ ├── App.tsx # Main app component
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── public/ # Static assets
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js
The application comes with comprehensive mock data:
- 100+ tasks with realistic titles and descriptions
- 6 team members with unique avatars
- 15 tags covering various development areas (frontend, backend, bug, feature, etc.)
- Task activities tracking recent changes
- All tasks are themed around tech/development work
- Drag tasks between columns to update their status
- Visual indicators for task priority
- Overdue task highlighting
- Quick task creation in any column
- Responsive grid layout
- Click any task to view/edit details
- Comprehensive task editing modal
- Multi-select tag assignment
- Date picker for due dates
- Priority level selection
- User assignment dropdown
- Search tasks by title
- Filter by multiple authors
- Filter by tags
- Filter by priority levels
- Clear all filters at once
- Active filter count indicator
- Real-time KPI calculations
- Interactive charts with tooltips
- Team performance leaderboard
- Upcoming deadline tracking
- Activity feed with timestamps
- Responsive chart layouts
The application features a professional dark mode theme as the default, with carefully chosen colors for optimal readability and reduced eye strain.
Fully responsive design that works seamlessly across:
- Mobile devices (320px+)
- Tablets (768px+)
- Desktops (1024px+)
- Large screens (1440px+)
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
MIT
Built with Claude Code