Agile Project Management Tool with Kanban Boards, Sprint Planning & Team Analytics
A modern Agile project management platform inspired by Jira and Trello. Features drag-and-drop Kanban boards, sprint planning with velocity tracking, burndown charts, team workload management, and real-time activity feeds. Built to demonstrate software engineering leadership and Agile methodology understanding.
- Drag-and-drop task cards between columns (To Do → In Progress → In Review → Done)
- Color-coded priority badges (Critical, High, Medium, Low)
- Task assignee avatars with team member selection
- Due date tracking with overdue highlighting
- Story point estimation for sprint planning
- Create and manage time-boxed sprints (1-4 weeks)
- Sprint backlog with task assignment
- Burndown chart showing ideal vs actual progress
- Sprint velocity tracking across multiple sprints
- Sprint retrospective notes
- Team member directory with roles and avatars
- Workload distribution visualization
- Task assignment and capacity tracking
- Activity feed showing recent team actions
- Project progress overview with completion percentages
- Tasks by status breakdown (pie chart)
- Sprint velocity trend (bar chart)
- Team workload heatmap
- Overdue tasks alert panel
ProjectFlow/
├── src/
│ ├── components/
│ │ ├── KanbanBoard.tsx # Drag-and-drop board
│ │ ├── KanbanColumn.tsx # Board column
│ │ ├── TaskCard.tsx # Draggable task card
│ │ ├── TaskModal.tsx # Task detail/edit modal
│ │ ├── SprintPlanning.tsx # Sprint management view
│ │ ├── BurndownChart.tsx # Sprint burndown visualization
│ │ ├── Dashboard.tsx # Analytics overview
│ │ ├── TeamView.tsx # Team management
│ │ ├── Sidebar.tsx # Navigation sidebar
│ │ └── ActivityFeed.tsx # Recent actions feed
│ ├── types/
│ │ └── index.ts # TypeScript interfaces
│ ├── data/
│ │ └── sampleData.ts # Realistic sample data
│ ├── hooks/
│ │ └── useLocalStorage.ts # Persistent state hook
│ ├── utils/
│ │ └── helpers.ts # Date, color, formatting utils
│ └── App.tsx # Root with routing
├── package.json
└── README.md
| Technology | Purpose |
|---|---|
| React 18 | UI component library |
| TypeScript 5 | Type safety and better DX |
| Vite 5 | Fast build tool |
| React Router 6 | Client-side routing |
| Chart.js 4 | Burndown & analytics charts |
| Vercel | Cloud deployment |
git clone https://github.com/KHALEDNOAMAN/ProjectFlow.git
cd ProjectFlow
npm install
npm run dev| Concept | Implementation |
|---|---|
| Kanban | Visual board with WIP limits and flow optimization |
| Sprints | Time-boxed iterations with backlog grooming |
| Burndown | Daily progress tracking against sprint goals |
| Velocity | Story points completed per sprint trending |
| Retrospectives | What went well / What to improve / Action items |
| User Stories | Task descriptions following "As a... I want... So that..." |
MIT License - see LICENSE file.
Built by Khaled Noaman — Aspiring Engineering Manager 🚀
"The best managers are those who understand the work their teams do."