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.
NEW: TimeTracker Pro now supports both authenticated and guest usage!
- 🔄 Cloud Sync: Sign in with Supabase to sync data across devices
- 💾 Local Storage: Use without an account - data stays on your device
- 🔄 Data Migration: Existing data automatically migrates when you sign in
- ⚡ Offline-First: Full functionality available with or without internet
See AUTHENTICATION.md for detailed setup instructions.
- 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: Data saved to localStorage (guest) or Supabase (authenticated)
- 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
# 🔒 IMPORTANT: Setup environment variables for cloud sync (optional)
cp .env.example .env
# Edit .env with your Supabase credentials (see .env.example for instructions)
# Start development server
npm run dev- 🔒 Environment Setup (Optional - for cloud sync):
- Copy
.env.exampleto.env - Add your Supabase URL and anon key (see
.env.examplefor detailed instructions) ⚠️ Never commit .env to version control!
- Copy
- Start Your First Day: Click "Start Day" to begin time tracking
- Authentication (Optional): Click "Sign In" in the top-right corner to enable cloud sync
- 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 ESLintnpm run test-full-import- Run test of full CSV importnpm run test-error-handling- Run test of CSV import error handlingnpm run test-csv-import- Run test of standard CSV import
src/
├── components/ # Reusable UI components
├── config/ # Category and Project configuration files
├── contexts/ # React Context providers
├── hooks/ # Use files
├── lib/ # Libraries
├── pages/ # Main application pages
├── services/ # Data service configuration
└── utils/ # Utility functions- Security - Configuration for project security with Chat Agents
- Scheme Compatibility - Chat record of updating DB schema for Supabase
- Chatbot Notes - Chat records from interactions with GitHub CoPilot
- Authentication - Record for how authentication was configured and is handled
- Data Persistence - Record on how data persistence issues were fixed
- CSV Templates - Available CSV templates for importing, testing, and exporting of time entries
- Migration - Document for migrating data to Supabase database
- ChatGPT Features - Notes from ChatGPT related to updates and improvements requests
- Styles - Rules to govern the style choices for Agents
- Pull Requests - Rules for Agents to create pull requests
- Project Rules - Setting project rules when using the local agent editor extension "Continue"
This 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
-
Badges from https://github.com/Ileriayo/markdown-badges