Agile Project Manager

A modern, full-featured Agile project management application built with React, TypeScript, and Tailwind CSS.

🚀 Features

• Dashboard - Overview of project metrics and key performance indicators
• Kanban Board - Drag-and-drop task management with customizable columns
• Product Backlog - User story management with prioritization and estimation
• Sprint Management - Sprint planning, tracking, and retrospective tools
• Task Management - Create, edit, and track tasks with comments and time complexity
• User Story Management - Define acceptance criteria, story points, and business value
• Real-time Updates - Live updates across all components

🛠️ Tech Stack

• Frontend: React 18 with TypeScript
• Styling: Tailwind CSS with shadcn/ui components
• Build Tool: Vite
• State Management: React Context API
• Charts: Recharts
• Drag & Drop: React DnD
• Icons: Lucide React
• Date Handling: date-fns

📦 Installation

1. Clone the repository:

git clone <repository-url>
cd agile-project-manager

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:5173 in your browser.

🏗️ Project Structure

├── components/           # React components
│   ├── ui/              # Reusable UI components (shadcn/ui)
│   ├── Dashboard.tsx    # Dashboard with metrics and charts
│   ├── KanbanBoard.tsx  # Drag-and-drop task board
│   ├── ProductBacklog.tsx # User story management
│   └── SprintManagement.tsx # Sprint planning and tracking
├── contexts/            # React Context providers
│   └── AppContext.tsx   # Main application state
├── types/               # TypeScript type definitions
│   └── index.ts         # Application types
├── styles/              # Global styles
│   └── globals.css      # Tailwind CSS configuration
└── main.tsx            # Application entry point

🎯 Usage

Dashboard

• View project overview with key metrics
• Monitor sprint progress and team velocity
• Track completed vs. remaining work

Kanban Board

• Drag tasks between columns (To Do, In Progress, Blocked, Done)
• Add comments and track time complexity
• Filter tasks by user story or assignee

Product Backlog

• Create and prioritize user stories
• Define acceptance criteria and story points
• Estimate business value and effort

Sprint Management

• Plan sprints with capacity and goals
• Move user stories from backlog to sprint
• Track sprint progress and close completed sprints

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📝 Data Model

The application uses the following main entities:

• Tasks: Individual work items with status, comments, and time estimates
• User Stories: Feature descriptions with acceptance criteria and story points
• Sprints: Time-boxed development periods with goals and capacity
• Comments: Collaborative notes on tasks

🎨 UI Components

Built with shadcn/ui components including:

• Buttons, Cards, Dialogs
• Progress bars, Badges, Labels
• Form inputs and validation
• Responsive design with Tailwind CSS

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• shadcn/ui for the beautiful component library
• Tailwind CSS for utility-first styling
• Lucide for the icon set
• Recharts for data visualization