FlowBoard is a modern Task Management Dashboard designed to help users efficiently manage tasks, track progress, and stay organized. It offers a clean, user-friendly interface with essential productivity tools.
- Drag and drop task management
- Status tracking (TODO, IN_PROGRESS, COMPLETED)
- Real-time search functionality
- Dark/Light theme support
- Responsive design
- Local storage persistence
- Task details with deadlines and time tracking
The application follows a component-based architecture using React, with:
- Component-based structure using TypeScript
- Context API for state management
- DnD-kit for drag-and-drop functionality
- Modular components with clear separation of concerns
- Responsive layouts using Tailwind CSS
- Theme switching with context-based management
- Task Columns for different status categories
- Interactive Task Cards with priority indicators
- Search functionality with real-time filtering
- Theme toggle for user preference
- Modal system for task operations (Add/Edit/Delete)
- React.js - UI Library
- Chosen for its component-based architecture and robust ecosystem
- Typescript - Type Safety
- For enhanced development experience and code reliability
- Tailwind CSS - Styling and UI
- Provides rapid UI development with a utility-first approach
- @dnd-kit - Drag and Drop
- Modern drag-and-drop library for React
- Vite - Build tool
- Offers faster development experience and optimized builds
- Vercel - Hosting and Deployment
- Enables seamless deployment and excellent performance
Follow these steps to run FlowBoard on your local machine.
- Node.js (v14 or higher)
- npm or yarn package manager
git clone https://github.com/Pappyjay23/FlowBoard.gitcd FlowBoardnpm installRun the development server to view the app.
npm run devNow, you can navigate to http://localhost:5173/ to view the app.
npm run build- The app uses React Context for global state management
- Task data persists in localStorage
- Separate contexts for tasks, modal, and theme management
Implementation by @Pappyjay23