A modern project management and issue tracking application built with React, TypeScript, and Redux Toolkit. FlowDeck provides a comprehensive solution for managing projects, sprints, issues, and team collaboration.
- Project Management: Create and manage multiple projects with team members
- Sprint Planning: Organize work into sprints with start/end dates and goals
- Issue Tracking: Track tasks, bugs, stories, epics, and subtasks
- Kanban Board: Drag-and-drop interface for managing issue workflows
- Backlog Management: Prioritize and organize issues before sprint planning
- Dashboard & Reports: Visualize project metrics and team performance
- Activity Timeline: Track all changes and updates to issues
- User Management: Role-based access control (Admin, Project Manager, Developer, Viewer)
- Frontend: React 19 + TypeScript
- State Management: Redux Toolkit
- Routing: React Router v7
- UI Framework: React Bootstrap 5
- Drag & Drop: @dnd-kit
- Forms: React Hook Form + Yup validation
- Charts: Recharts
- Styling: Sass + Bootstrap
- Build Tool: Vite
- Mocking: MSW (Mock Service Worker)
src/
├── api/ # Mock API setup and handlers
├── assets/ # Static assets
├── components/ # Reusable UI components
│ ├── common/ # Shared components (Avatar, Badges, etc.)
│ ├── layout/ # Layout components (Header, Sidebar)
│ ├── issues/ # Issue-related components
│ ├── sprints/ # Sprint-related components
│ └── activity/ # Activity timeline components
├── features/ # Redux slices
│ ├── auth/ # Authentication state
│ ├── issues/ # Issues state
│ ├── projects/ # Projects state
│ ├── sprints/ # Sprints state
│ ├── users/ # Users state
│ └── ui/ # UI state
├── hooks/ # Custom React hooks
├── pages/ # Route pages/views
├── routes/ # Route configuration
├── store/ # Redux store setup
├── styles/ # Global styles
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
- Node.js (v18 or higher recommended)
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd flowdeck- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
- Task: Standard work items
- Bug: Defects or issues to fix
- Story: User stories and features
- Epic: Large work items spanning multiple sprints
- Subtask: Breakdown of larger issues
- Highest
- High
- Medium
- Low
- Lowest
- To Do
- In Progress
- In Review
- Done
- Admin: Full system access
- Project Manager: Manage projects and sprints
- Developer: Work on assigned issues
- Viewer: Read-only access
This project uses:
- Vite for fast development and optimized builds
- TypeScript for type safety
- ESLint for code quality
- Mock Service Worker for API mocking during development
MIT