Minimalist task management and time tracking application
Graft is a modern, full-stack web application built for focused productivity. Track your tasks, measure time, and gain insights into your work patterns through a clean, distraction-free interface.
- Task Management: Create and organize tasks with topics and subtopics
- Time Tracking: Record work sessions with detailed time analytics
- Daily Planning: Plan your day with structured planning sessions
- Analytics Dashboard: Visualize time spent across different tasks and topics
- Real-time Updates: Live data synchronization across all devices
- OAuth Authentication: Secure login with Google, GitHub, and Apple
- Dark/Light Theme: System-adaptive theme with manual toggle
- Node.js 18+
- npm or pnpm
# Clone the repository
git clone <repository-url>
cd graft
# Install dependencies
npm install
# Set up development environment
npm run devThis starts both the frontend (Next.js) and backend (Convex) development servers in parallel.
| Command | Description |
|---|---|
npm run dev |
Start both frontend and backend servers |
npm run dev:frontend |
Start Next.js development server only |
npm run dev:backend |
Start Convex development server only |
npm run build |
Build for production and deploy Convex functions |
npm run start |
Start production server |
npm run lint |
Run ESLint code quality checks |
npm test |
Run tests in watch mode |
npm run test:ui |
Run tests with visual UI |
npm run test:run |
Run tests once |
Frontend
- Next.js 15 - React framework with App Router
- React 19 - Latest React features
- Tailwind CSS - Utility-first styling
- shadcn/ui - High-quality component library
- next-themes - Theme management
Backend
- Convex - Real-time database and serverless functions
- @convex-dev/auth - OAuth 2.0 authentication system
Development
- TypeScript - Type-safe development
- Vitest - Fast unit testing
- ESLint - Code linting and formatting
graft/
├── app/ # Next.js App Router
│ ├── dashboard/ # Main application pages
│ │ ├── track/ # Time tracking interface
│ │ ├── plan/ # Daily planning
│ │ ├── analyze/ # Analytics and insights
│ │ └── shared/ # Shared dashboard components
│ ├── sign-in/ # Authentication pages
│ └── layout.tsx # Root layout with providers
├── components/ # Reusable React components
│ ├── auth/ # Authentication components
│ ├── ui/ # shadcn/ui base components
│ └── navbar/ # Navigation components
├── convex/ # Backend functions and schema
│ ├── schema.ts # Database schema definition
│ ├── tasks.ts # Task management functions
│ ├── timeEntries.ts # Time tracking functions
│ ├── dashboard.ts # Dashboard data aggregation
│ └── auth.config.ts # Authentication configuration
└── lib/ # Utility functions
- Title, topic, and subtopic organization
- User-scoped with creation timestamps
- Indexed for efficient querying by user and topic
- Duration tracking with start timestamps
- Denormalized task data for performance
- Optional notes for context
- Indexed by user and date for analytics
- Daily planning content per user
- Date-based organization
- Creation and update timestamps
Graft uses Convex Auth with OAuth providers:
- Google - Social login
- GitHub - Developer-friendly authentication
- Apple - iOS/macOS integration
Authentication is handled server-side with secure session management and automatic user provisioning.
- Responsive Design: Mobile-first approach with desktop optimization
- Accessibility: WCAG compliant components via Radix UI
- Theme Support: Automatic dark/light mode detection
- Progressive Enhancement: Works without JavaScript for core features
The project uses Vitest with React Testing Library:
# Run tests in watch mode
npm test
# Run tests with UI dashboard
npm run test:ui
# Run tests once for CI/CD
npm run test:runTest files are located alongside components using the *.test.tsx pattern.
npm run buildThis command:
- Builds the Next.js application
- Deploys Convex functions to production
- Optimizes assets for production
Required environment variables:
CONVEX_DEPLOYMENT- Convex deployment URLNEXT_PUBLIC_CONVEX_URL- Public Convex client URL
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and add tests
- Run
npm run lintto ensure code quality - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For issues, questions, or contributions:
- Open an issue on GitHub
- Check the Convex documentation
- Review the Next.js documentation
Built with ❤️ using modern web technologies for focused productivity.