A top-tier, production-ready, personal task and project management web application. ClarityFlow is designed for daily, intensive use—offering a flawless, delightful, and highly customizable experience that surpasses Todoist and similar tools.
- Minimal, distraction-free interface with a unified design language
- Three-column layout: Sidebar, Top Bar, Main Content, and Detail Panel
- Quick Add Bar with natural language parsing (dates, projects, labels, priorities, assignees)
- Multiple views: List, Kanban Board (drag-and-drop), Calendar (drag-to-reschedule), Gantt Chart, Focus Mode, and more
- Unlimited projects, sections, subtasks, and dependencies
- Productivity assistant for smart suggestions, habit nudges, and risk alerts
- Comprehensive analytics dashboard with customizable widgets and exportable reports
- Google Calendar integration (two-way sync, status indicator, event conversion)
- Personalization: Theme (Light/Dark/Auto), density, brand color, font size
- Offline-first: Works seamlessly without internet, syncs when online
- Accessibility: WCAG AA contrast, keyboard navigation, screen reader support
- Instant performance: Virtualized lists, smooth animations, no lag
- Node.js (v18+ recommended)
- npm (v9+ recommended)
# Clone the repository
git clone https://github.com/your-github-username/clarityflow.git
cd clarityflow
# Install dependencies
npm installnpm run devVisit http://localhost:5000 in your browser.
# Run all tests
npm test
# Run tests with UI
npm run test:ui
# Run tests with coverage
npm run test:coveragenpm run buildnpm run lint# Run all checks
npm run lint && npm test && npm run buildClarityFlow automatically optimizes for large datasets:
- Automatic virtualization kicks in at 100+ tasks
- Handles 10,000+ tasks smoothly with virtual scrolling
- 90%+ performance improvement for large datasets
- See
CLARITYFLOW_FEATURE_CHECKLIST.mdfor a full breakdown of features and progress. - See
DEVELOPMENT_UPDATES.mdfor recent improvements and updates. - See
COMPLETION_REPORT.mdfor the comprehensive development completion report. - See
TESTING_STRATEGY.mdfor testing approach and guidelines.
✅ Test Suite Implementation
- 41 comprehensive tests covering components, utilities, and hooks
- Vitest + Testing Library setup with full mocking support
✅ Performance Optimization
- Virtualized lists for handling 10,000+ tasks
- Automatic virtualization threshold at 100+ tasks
✅ Code Quality
- ESLint v9 configuration with TypeScript rules
- React Hooks plugin for hook validation
We welcome contributions! Please read CONTRIBUTING.md and our CODE_OF_CONDUCT.md before submitting issues or pull requests.
If you discover a security vulnerability, please see SECURITY.md for how to report it.
- Built with React, Vite, Tailwind CSS, and Radix UI
- Inspired by the best of modern productivity tools, but designed for clarity, focus, and personal excellence.