Workflow ⏱️

Modern work time tracking desktop application

Features • Installation • Usage • Development

---

📋 Overview

Workflow is a beautiful, minimalist desktop application for tracking your work hours. Built with Electron and SQLite, it helps you stay motivated with streak tracking, daily targets, and detailed work session history.

✨ Features

🎯 Core Features

• Timer Management: Start, pause, and adjust your work sessions with ease
• Daily Target: Set and track your daily work hour goals
• Work History: View all past sessions with filtering and search
• Streak Tracking: 🔥 Monitor consecutive days of reaching your daily target
• Session Management: Save, edit, and delete work sessions with custom names

📅 Pomodoro Timer

• Focus Sessions: Built-in Pomodoro timer with customizable work/break intervals
• Visual Progress: Dynamic progress ring that changes color based on mode (Work/Break)
• Smart Notifications: Auto-start options and sound alerts for session changes
• Persistence: Timer state is saved even when you close the app or switch pages

🎨 Design

• Modern UI: Clean, dark-mode interface with glassmorphism effects
• Bottom Navigation: Sleek, mobile-style navigation with hover animations and indicator lines
• Frameless Window: Custom title bar for a native app feel
• Responsive: Optimized mobile-style layout (430x932px)
• Interactive Cards: Hover effects, glow animations, and visual feedback

🔔 Notifications

• Goal Achievement: Sound and visual notifications when daily target is reached
• Congratulations Modal: Celebrate your productivity milestones

💾 Data Management

• SQLite Database: Fast, local data storage
• Persistent Storage: Data is preserved across app updates
• Settings: Customizable daily targets and notification preferences

🚀 Installation

Prerequisites

• Node.js (v16 or higher)
• npm (comes with Node.js)

Quick Start

1. Clone the repository

   git clone https://github.com/fleizean/workflow-timer.git
   cd workflow-timer

2. Install dependencies

   npm install

3. Run the application

   npm start

Building for Production

To create a distributable executable:

npm run build

The built application will be in the dist_output/ directory.

💻 Development

Project Structure

workflow-timer/
├── src/
│   ├── pages/           # HTML pages
│   │   ├── index.html   # Main timer page
│   │   ├── work-history.html
│   │   └── settings.html
│   ├── renderer/        # Frontend JavaScript
│   │   ├── timer.js
│   │   ├── shared.js
│   │   └── tailwind-config.js
│   ├── styles/          # CSS files
│   │   ├── common.css
│   │   └── titlebar.css
│   └── assets/          # Images and sounds
├── database/
│   └── db.js           # SQLite database logic
├── main.js             # Electron main process
├── preload.js          # IPC bridge
└── package.json

Technologies Used

• Electron - Desktop application framework
• better-sqlite3 - Fast SQLite database
• Tailwind CSS - Utility-first CSS framework
• Material Symbols - Icon library

Linting & Code Quality

We use ESLint to enforce code style and catch errors. Before submitting a PR, make sure your code passes the linter:

npm run lint

Key Scripts

npm start          # Run in development mode
npm run build      # Build for Windows
npm run build:dir  # Build unpacked directory

📖 Usage

Starting a Work Session

1. Click the Play button to start tracking time
2. The timer will count up and show your remaining time to reach the daily target
3. Click Pause to temporarily stop the timer
4. Use Adjust to manually add or remove time

Saving Sessions

1. Click the Save button
2. Enter a custom name for your session (e.g., "Frontend Development")
3. Confirm to save - the session is added to your history

Tracking Your Streak

• Your streak shows consecutive days where you've reached your daily target
• Weekends are included in the streak calculation
• Missing a day resets your streak to 0

Troubleshooting

macOS: "App is damaged" or "Cannot be opened"

If you see an error saying the app is damaged or cannot be opened, run this command in Terminal:

xattr -dr com.apple.quarantine /Applications/Workflow.app

Viewing History

1. Click on the Logged card on the main screen
2. Browse your past sessions grouped by week
3. Use filters to find specific sessions
4. Edit or delete sessions as needed

🎯 Roadmap

• Statistics dashboard with charts
• Pomodoro timer mode
• Multi-language support
• Custom themes
• Excelsheet sync

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Workflow Team

• Website: fleizean.dev

🙏 Acknowledgments

• Icons by Material Symbols
• Font: Inter by Rasmus Andersson
• Inspired by modern productivity tools

---

Made with ❤️ and ⏱️ by Workflow Team

⬆ Back to Top