A modern, feature-rich time tracking application built with React, TypeScript, and Tailwind CSS. Perfect for freelancers, consultants, and professionals who need to track time, manage projects, and generate invoices.
- Start/Stop Day Tracking: Begin and end your work day with clear boundaries
- Task Management: Create, edit, and delete tasks with real-time duration tracking
- Project & Client Organization: Assign tasks to specific projects and clients
- Persistent Data: All data is automatically saved to localStorage
- Archive System: Complete days are archived with full task details
- Export Capabilities: Export data as CSV or JSON for external use
- Invoice Generation: Generate invoice data for specific clients and date ranges
- Project Management: Create projects with hourly rates and client assignments
- Print Support: Print-friendly archive views for physical records
- Revenue Tracking: Automatic calculation of earnings based on hourly rates
- Time Analytics: View total hours and revenue across all projects
- Data Export: Multiple export formats for integration with accounting software
- Mobile Responsive: Works seamlessly on desktop and mobile devices
# Clone the repository
git clone <YOUR_GIT_URL>
# Navigate to project directory
cd <YOUR_PROJECT_NAME>
# Install dependencies
npm install
# Start development server
npm run dev- Start Your First Day: Click "Start Day" to begin time tracking
- Add Projects (Optional): Go to Archive → Projects to set up your clients and hourly rates
- Create Tasks: Use "New Task" to start tracking specific work items
- End Your Day: Click "End Day" when finished, then "Post Time to Archive"
- Morning: Click "Start Day" to begin tracking
- Throughout the day: Create new tasks as you switch between different work items
- Evening: Click "End Day" to stop tracking and review your summary
- Archive: Click "Post Time to Archive" to save the day permanently
- Access via Archive → Projects button
- Set up clients with hourly rates for automatic revenue calculation
- Assign projects to tasks for better organization
- Access via Archive → Export button
- Choose from CSV, JSON, or Invoice formats
- Filter by date range for specific periods
- Perfect for submitting timesheets to employers or generating client invoices
- React 18 with TypeScript for type safety
- Tailwind CSS for responsive styling
- shadcn/ui for beautiful, accessible components
- React Router for navigation
- Local Storage for data persistence
- Context API for state management
- Custom hooks for reusable logic
- Component-based architecture for maintainability
- Responsive design for all device sizes
- By default, all data is stored locally in your browser
- Optionally, data can be stored in a Supabase project
- No external servers or accounts required
- Data persists between sessions
- Export capabilities for backup and integration
- Freelancers: Track billable hours and generate client invoices
- Consultants: Organize time by project and client
- Remote Workers: Submit detailed timesheets to employers
- Students: Track study time and project work
- Anyone: Who needs professional time tracking without the complexity
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
src/
├── components/ # Reusable UI components
├── contexts/ # React Context providers
├── pages/ # Main application pages
├── utils/ # Utility functions
└── lib/ # Library configurationsThis project is open source and available under the MIT License.
Ready to take control of your time? Start tracking today and see where your hours really go!
This project originally began as a Lovable prompt LOVABLE README