{"id":28663051,"url":"https://github.com/c-w-d-harshit/flow-mate","last_synced_at":"2026-04-24T21:31:32.449Z","repository":{"id":295188231,"uuid":"988829608","full_name":"C-W-D-Harshit/Flow-Mate","owner":"C-W-D-Harshit","description":"A modern, efficient task management and productivity application built with Next.js. FlowMate features a Kanban board interface with drag-and-drop functionality, automation rules, and local data persistence.","archived":false,"fork":false,"pushed_at":"2025-05-26T11:21:31.000Z","size":3449,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-13T11:52:02.741Z","etag":null,"topics":["kanban-board","nextjs","planner","task-management"],"latest_commit_sha":null,"homepage":"https://flow-mate.cleverdeveloper.in","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/C-W-D-Harshit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-23T06:23:04.000Z","updated_at":"2025-05-26T11:21:34.000Z","dependencies_parsed_at":"2025-05-24T05:38:42.192Z","dependency_job_id":null,"html_url":"https://github.com/C-W-D-Harshit/Flow-Mate","commit_stats":null,"previous_names":["c-w-d-harshit/flow-mate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/C-W-D-Harshit/Flow-Mate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/C-W-D-Harshit%2FFlow-Mate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/C-W-D-Harshit%2FFlow-Mate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/C-W-D-Harshit%2FFlow-Mate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/C-W-D-Harshit%2FFlow-Mate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/C-W-D-Harshit","download_url":"https://codeload.github.com/C-W-D-Harshit/Flow-Mate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/C-W-D-Harshit%2FFlow-Mate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32241570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["kanban-board","nextjs","planner","task-management"],"created_at":"2025-06-13T11:39:47.286Z","updated_at":"2026-04-24T21:31:32.444Z","avatar_url":"https://github.com/C-W-D-Harshit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FlowMate\n\nFlowMate is a modern, intuitive task management and productivity application designed to streamline your workflow and boost productivity. Built with Next.js 15 and TypeScript, it combines the power of a Kanban board interface with intelligent automation features, all while keeping your data secure with local storage.\n\n![FlowMate Preview](/public/og.png)\n\n## ✨ Why FlowMate?\n\nFlowMate stands out with its perfect blend of simplicity and power:\n\n- **Intuitive Interface**: Clean, modern UI with a focus on usability\n- **Privacy-First**: All data stays on your device with IndexedDB storage\n- **Smart Automation**: Create custom rules to automate your workflow\n- **Type-Safe**: Built with TypeScript for reliability and developer experience\n- **Modern Stack**: Leverages Next.js 15, React 19, and Tailwind CSS 4\n- **Cross-Platform**: Responsive design works seamlessly across all devices\n\n## 🚀 Features\n\n- **Kanban Board**: Visual task management with customizable columns\n- **Drag \u0026 Drop**: Intuitive task organization powered by @hello-pangea/dnd\n- **Task Management**: Complete task details with subtasks, custom fields, and due dates\n- **Automation Rules**: Automated task workflows based on conditions\n- **Local Storage**: All data persists locally using IndexedDB via Dexie\n- **Data Management**: Export/import backups and clear data functionality\n- **Dark Mode**: Theme toggle support with next-themes\n- **Responsive Design**: Works seamlessly on desktop and mobile devices\n- **Type Safety**: Built with strict TypeScript for better developer experience\n\n## 📋 Table of Contents\n\n- [Getting Started](#getting-started)\n- [Technology Stack](#technology-stack)\n- [Project Structure](#project-structure)\n- [Data Persistence](#data-persistence)\n- [Automation System](#automation-system)\n- [Component Documentation](#component-documentation)\n- [Development Guidelines](#development-guidelines)\n- [API Reference](#api-reference)\n- [Deployment](#deployment)\n- [Contributing](#contributing)\n\n## 🏁 Getting Started\n\n### Prerequisites\n\n- Node.js 18+ \n- npm, yarn, pnpm, or bun\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/C-W-D-Harshit/Flow-Mate.git\ncd day-planner\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Run the development server:\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser to see FlowMate.\n\n### Available Scripts\n\n- `npm run dev` - Start development server with Turbopack\n- `npm run build` - Build the application for production\n- `npm run start` - Start the production server\n- `npm run lint` - Run ESLint for code quality checks\n\n## 🛠 Technology Stack\n\n- **Framework**: Next.js 15 with React 19 and App Router\n- **Language**: TypeScript with strict typing\n- **Styling**: Tailwind CSS 4 with Radix UI components\n- **Database**: IndexedDB via Dexie for local storage\n- **Drag \u0026 Drop**: @hello-pangea/dnd\n- **Icons**: Lucide React\n- **Date Handling**: date-fns\n- **Theme Management**: next-themes\n- **Notifications**: Sonner (react-hot-toast alternative)\n- **Date Picker**: react-day-picker\n\n## 📁 Project Structure\n\n```\nday-planner/\n├── app/                    # Next.js App Router\n│   ├── layout.tsx         # Root layout with providers\n│   ├── page.tsx           # Home page (Kanban board)\n│   └── globals.css        # Global styles and Tailwind imports\n├── components/            # React components\n│   ├── ui/               # Reusable UI components (Radix + Tailwind)\n│   ├── kanban-board.tsx  # Main Kanban board component\n│   ├── task-detail-sidebar.tsx  # Task details panel\n│   ├── column.tsx        # Kanban column component\n│   ├── task-card.tsx     # Individual task card\n│   ├── automation-rules.tsx     # Automation rules manager\n│   ├── theme-provider.tsx       # Theme context provider\n│   └── theme-toggle.tsx         # Dark/light mode toggle\n├── hooks/                # Custom React hooks\n│   ├── use-database.ts   # Database operations hook\n│   └── use-toast.tsx     # Toast notifications hook\n├── lib/                  # Utility libraries\n│   ├── database.ts       # Dexie database configuration\n│   └── utils.ts          # General utility functions\n├── types/                # TypeScript type definitions\n│   └── kanban.ts         # Core data models\n└── public/               # Static assets\n```\n\n## 💾 Data Persistence\n\nFlowMate uses **IndexedDB** for local data storage via the Dexie library, ensuring your tasks, columns, and automation rules persist between sessions without requiring external servers or accounts.\n\n### Database Schema\n\nThe application stores the following entities:\n\n- **Tasks**: Individual work items with metadata\n- **Columns**: Board columns containing tasks\n- **Rules**: Automation rules for workflow management\n\n### Data Operations\n\nAll database operations are centralized in the `use-database` hook, providing:\n- CRUD operations for tasks, columns, and rules\n- Data export/import functionality\n- Database reset capabilities\n- Real-time updates across components\n\n## ⚡ Automation System\n\nCreate custom automation rules to streamline your workflow:\n\n### Supported Conditions\n- **Due Date**: Trigger on overdue tasks\n- **Subtasks**: When all subtasks are completed\n- **Custom Fields**: Based on field values and operators\n\n### Available Actions\n- **Move to Column**: Automatically move tasks between columns\n\n### Condition Operators\n- `equals` / `not-equals`: Exact value matching\n- `contains`: Partial text matching\n- `greater-than` / `less-than`: Numeric/date comparisons\n- `is-empty` / `is-not-empty`: Field presence checks\n- `is-overdue`: Date-based checks\n- `all-completed`: Subtask completion checks\n\n## 📚 Component Documentation\n\n### Core Components\n\n#### `KanbanBoard`\nThe main application component managing the entire board state.\n\n**Features:**\n- Drag and drop functionality\n- Column management (add, edit, delete)\n- Task filtering and management\n- Automation rules integration\n- Data export/import\n\n#### `TaskDetailSidebar`\nComprehensive task editing interface.\n\n**Features:**\n- Task metadata editing\n- Subtask management\n- Custom field support\n- Due date selection\n- Task deletion\n\n#### `Column`\nIndividual board column component.\n\n**Features:**\n- Task list rendering\n- Drag and drop zones\n- Column actions (edit, delete)\n- Task creation\n\n#### `AutomationRules`\nAutomation management interface.\n\n**Features:**\n- Rule creation and editing\n- Condition/action configuration\n- Rule enabling/disabling\n- Real-time rule execution\n\n### UI Components\n\nBuilt with Radix UI primitives and Tailwind CSS:\n- Dialogs and modals\n- Form controls\n- Navigation components\n- Feedback components\n\n## 👨‍💻 Development Guidelines\n\n### Code Style\n\n- **TypeScript**: Strict mode enabled, no `any` types\n- **Naming**: Use descriptive, camelCase names for variables and functions\n- **Components**: PascalCase for component names\n- **Files**: kebab-case for file names\n\n### Best Practices\n\n1. **Type Safety**: Always define proper TypeScript interfaces\n2. **Error Handling**: Implement proper error boundaries and try-catch blocks\n3. **Performance**: Use React.memo and useCallback for expensive operations\n4. **Accessibility**: Follow ARIA guidelines and semantic HTML\n5. **Testing**: Write unit tests for utility functions and hooks\n\n### State Management\n\n- Local component state with `useState`\n- Database operations via `use-database` hook\n- Theme management via `next-themes`\n- No external state management library required\n\n## 🔌 API Reference\n\n### `use-database` Hook\n\nMain hook for all database operations:\n\n```typescript\nconst {\n  tasks,\n  columns,\n  rules,\n  addTask,\n  updateTask,\n  deleteTask,\n  addColumn,\n  updateColumn,\n  deleteColumn,\n  addRule,\n  updateRule,\n  deleteRule,\n  exportData,\n  importData,\n  clearAllData\n} = useDatabase()\n```\n\n### Database Functions\n\n- `addTask(task: Omit\u003cTask, \"id\" | \"createdAt\"\u003e): Promise\u003cvoid\u003e`\n- `updateTask(id: string, updates: Partial\u003cTask\u003e): Promise\u003cvoid\u003e`\n- `deleteTask(id: string): Promise\u003cvoid\u003e`\n- `addColumn(column: Omit\u003cColumn, \"id\"\u003e): Promise\u003cvoid\u003e`\n- `updateColumn(id: string, updates: Partial\u003cColumn\u003e): Promise\u003cvoid\u003e`\n- `deleteColumn(id: string): Promise\u003cvoid\u003e`\n\n## 🚀 Deployment\n\n### Vercel (Recommended)\n\nFlowMate is optimized for deployment on Vercel:\n\n1. Push your code to GitHub/GitLab/Bitbucket\n2. Connect your repository to Vercel\n3. Deploy with zero configuration\n\n### Other Platforms\n\nFlowMate can be deployed on any platform supporting Next.js:\n- Netlify\n- AWS Amplify\n- Railway\n- Render\n\n### Build Configuration\n\nThe application uses:\n- Static export capability\n- Optimized bundle splitting\n- Image optimization\n- Automatic code splitting\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit your changes: `git commit -m 'Add amazing feature'`\n4. Push to the branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n### Development Setup\n\n1. Follow the [Getting Started](#getting-started) guide\n2. Make your changes\n3. Test thoroughly\n4. Ensure TypeScript compilation passes\n5. Run linting: `npm run lint`\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🆘 Support\n\nFor support and questions:\n- Check the [documentation](#component-documentation)\n- Review existing [issues](https://github.com/C-W-D-Harshit/Flow-Mate/issues)\n- Create a new issue with detailed information\n\n---\n\n**FlowMate** - Streamline your workflow with intelligent task management.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-w-d-harshit%2Fflow-mate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc-w-d-harshit%2Fflow-mate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-w-d-harshit%2Fflow-mate/lists"}