bf1dbe39a8
- Complete React + TypeScript application with Vite - Dashboard with charts and metrics visualization - Kanban board with drag-and-drop functionality - Product backlog management with user stories - Sprint planning and tracking features - Comprehensive UI component library (shadcn/ui) - Tailwind CSS styling with dark mode support - Context-based state management - Mock data for immediate testing and demonstration
128 lines
3.8 KiB
Markdown
128 lines
3.8 KiB
Markdown
# 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
|