A sleek and efficient timer application built with React, TypeScript, and Vite. Track your tasks, manage labels, and visualize your productivity history.
- Customizable Timers: Create and manage different timer durations.
- Label Management: Categorize your sessions with custom labels.
- Productivity History: View detailed history of your timed sessions with charts and lists.
- Tab Notifications: Get notified when a timer finishes, even if you're on another tab.
- Import/Export: Easily backup or migrate your data via CSV.
- User Authentication: Secure your data with registration and login.
- Responsive Design: Modern UI built with Tailwind CSS.
- Frontend Framework: React 19
- Build Tool: Vite
- Language: TypeScript
- Routing: React Router 7
- Styling: Tailwind CSS 4
- Components: Headless UI, Heroicons, HeroUI
- Data Fetching: Axios
- State Management: React Hooks (Custom hooks for settings, labels, history, etc.)
- Node.js (v18 or higher recommended)
npmoryarn
- Navigate to the
timer_frontenddirectory:cd timer_frontend - Install dependencies:
npm install
To start the development server:
npm run devThe application will be available at http://localhost:5173.
npm run dev: Starts the Vite development server.npm run build: Compiles the TypeScript code and builds the production-ready assets.npm run lint: Runs ESLint to check for code quality issues.npm run preview: Locally previews the production build.npm run deploy: Deploys the application to GitHub Pages.
src/components: Reusable UI components organized by feature.src/hooks: Custom React hooks for business logic and state management.src/pages: Main application views/routes.src/types: TypeScript interfaces and types.src/utils: Helper functions for time formatting, CSV handling, etc.
This project is licensed under the MIT License - see the LICENSE file for details.