# 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:
```bash
git clone <repository-url>
cd agile-project-manager
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm run dev
```

4. Open [http://localhost:5173](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](https://ui.shadcn.com/) for the beautiful component library
- [Tailwind CSS](https://tailwindcss.com/) for utility-first styling
- [Lucide](https://lucide.dev/) for the icon set
- [Recharts](https://recharts.org/) for data visualization