A modern, collaborative sprint management application built with React, TypeScript, and Tailwind CSS. Sprint Flow helps teams manage design sprints with real-time collaboration, task tracking, and performance monitoring.

• Sprint Management: Create and manage design sprints with 5 distinct phases (Understand, Sketch, Decide, Prototype, Test)
• Task Board: Drag-and-drop Kanban board for task management with filtering and search
• Real-time Collaboration: Team members can collaborate on tasks with comments and help requests
• Performance Dashboard: Track team performance across sprint phases with metrics and analytics
• Bottleneck Detection: Automatic identification and resolution of project bottlenecks
• Role-based Access: Different views for facilitators and team members

1. Understand - Define the problem and set sprint goals
2. Sketch - Generate and share solution ideas
3. Decide - Choose the best solution to prototype
4. Prototype - Build a realistic facade
5. Test - Get feedback from target customers

• Dashboard: Overview of current sprint progress and team performance
• Task Board: Interactive Kanban board with drag-and-drop functionality
• Sprint Timeline: Visual representation of sprint phases with progress tracking
• Performance Dashboard: Analytics and metrics for team performance
• Facilitator Dashboard: Advanced tools for sprint facilitators
• Task Management: Create, assign, and track tasks with comments and help requests

• Frontend: React 18 with TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Build Tool: Vite
• Linting: ESLint with TypeScript support
• State Management: React Hooks with custom data management

1. Clone the repository:

git clone <repository-url>
cd sprint-flow

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

src/
├── components/           # React components
│   ├── CollaborationPanel.tsx
│   ├── FacilitatorDashboard.tsx
│   ├── Navigation.tsx
│   ├── PerformanceDashboard.tsx
│   ├── SprintModal.tsx
│   ├── SprintTimeline.tsx
│   ├── TaskBoard.tsx
│   ├── TaskCard.tsx
│   └── TaskModal.tsx
├── hooks/               # Custom React hooks
│   └── useSprintData.ts
├── types/               # TypeScript type definitions
│   └── index.ts
├── App.tsx              # Main application component
├── main.tsx             # Application entry point
└── index.css            # Global styles

1. View Dashboard: Get an overview of current sprint progress
2. Manage Tasks: Use the task board to track and update your assigned tasks
3. Request Help: Toggle help needed status on tasks when you need assistance
4. Add Comments: Collaborate with team members through task comments
5. Track Progress: Monitor your performance through the performance dashboard

1. Create Sprints: Set up new design sprints with team members and timelines
2. Manage Team: Add and manage team members
3. Monitor Progress: Use the facilitator dashboard to track overall sprint health
4. Resolve Bottlenecks: Address issues and bottlenecks as they arise
5. Phase Management: Control sprint phase transitions

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

• Sprint metadata (title, description, dates)
• Phase management (current phase, durations, start times)
• Team members and tasks
• Bottleneck tracking

• Task details (title, description, priority)
• Assignment and status tracking
• Time tracking and quality ratings
• Comments and help requests

• User profile information
• Role-based permissions (facilitator/team_member)
• Authentication data

• Responsive Design: Works on desktop, tablet, and mobile devices
• Dark/Light Theme: Clean, modern interface with consistent styling
• Drag & Drop: Intuitive task management with visual feedback
• Real-time Updates: Live collaboration features
• Accessibility: Keyboard navigation and screen reader support

This project uses modern React patterns including:

• Functional components with hooks
• TypeScript for type safety
• Custom hooks for data management
• Component composition
• Responsive design principles

This project is part of the MegaVX sprint management suite.

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