🎯 Task Management#

FocusTimer allows you to organize your work into task groups and individual tasks. For example, you might create a “Work Projects” group with tasks like “Code Review”, “Feature Development”, and “Bug Fixes”, or a “Learning” group with tasks for different subjects you’re studying.

Task Creation Options:

• Preset times: Quick select 25, 30, 45 minutes, or 1 hour
• Custom duration: Set any specific time in minutes
• Forward timer: Unlimited timing to track actual time spent

⏰ Flexible Timer Modes#

The app supports two distinct timing modes:

1. Countdown Mode: Set a fixed duration and watch the timer count down to zero - perfect for the Pomodoro Technique
2. Forward Timer Mode: Start an unlimited timer to track exactly how long you spend on a task

Both modes feature:

• Large, readable time display
• Visual progress bar (countdown mode)
• Pause, resume, stop, and reset controls
• Customizable backgrounds for different states

📊 Comprehensive Statistics#

One of my favorite features is the powerful statistics system. You can:

• View stats across multiple time periods: today, this week, last 15 days, this month, or custom date ranges
• Analyze by task or by task group
• See detailed metrics: total duration, session count, completion rate
• Toggle between chart view and list view for different perspectives
• Interactive pie charts showing time distribution across tasks

The statistics help you understand where your time goes and make informed decisions about time allocation.

🎨 Customization#

Make the timer your own:

• Background options: solid colors, gradients, or custom images
• Separate backgrounds for running and paused states
• Transparency controls for a subtle, elegant look
• Multi-language support: Full Chinese and English interfaces

Frontend#

• React 19: Latest features for a smooth, reactive UI
• TypeScript: Type safety and better developer experience
• Vite: Lightning-fast development and optimized builds
• Recharts: Beautiful data visualizations
• Lucide React: Clean, consistent icons

Backend#

• Rust: Memory-safe, blazingly fast backend logic
• Tauri 2.0: Modern framework for building lightweight desktop apps
• SQLite + SQLx: Type-safe database operations with zero runtime overhead
• date-fns: Powerful date manipulation

Why Tauri?#

I chose Tauri over alternatives like Electron because:

• Smaller bundle size: ~3-5 MB vs 100+ MB for Electron apps
• Lower memory footprint: Uses the system’s webview instead of bundling Chromium
• Native performance: Rust backend handles heavy lifting efficiently
• Security: Built-in security features and careful API design
• Cross-platform: Single codebase for Windows, macOS, and Linux

Main Interface#

The main interface shows all your task groups and tasks at a glance. You can quickly create, edit, or start any task with just a few clicks.

Timer Interface#

When a task is running, the timer displays in large, readable format with a progress bar. The clean interface keeps you focused on the task at hand.

The timer in paused state with custom background.

Statistics Dashboard#

The statistics view offers both interactive pie charts and detailed list views. Switch between different time periods to analyze your productivity patterns.

Interactive pie chart showing time distribution across tasks with detailed metrics.

Settings Panel#

Customize backgrounds, adjust transparency, and switch languages - all from the intuitive settings interface.

Prerequisites#

• Node.js 18+
• Rust 1.70+
• Tauri CLI 2.0+

Installation#

1
# Clone the repository
2
git clone https://github.com/alvinluo-tech/tauri-FocusTimer.git
3
cd tauri-FocusTimer
4

5
# Install dependencies
6
npm install
7

8
# Run in development mode
9
npm run tauri dev
10

11
# Build for production
12
npm run tauri build