Initial commit: Agile Project Manager

- 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
This commit is contained in:
Your Name
2025-10-24 17:58:09 -07:00
commit bf1dbe39a8
73 changed files with 12773 additions and 0 deletions

127
README.md Normal file
View File

@@ -0,0 +1,127 @@
# 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