FocusFlow

Stay focused, get things done, and keep your flow!

FocusFlow is a beautiful, minimalist Pomodoro timer designed to help you boost your productivity without the clutter. Whether you're coding, studying, or just trying to clear your inbox, FocusFlow is here to keep you on track.

It's built with Vue 3 and Vite, featuring a sleek dark mode, custom sounds, and it's fully installable as a PWA on your phone or desktop!

---

Features You'll Love

• Minimalist Design: A clean, distraction-free interface that looks great on any device.
• Customizable Timer: Adjust work and break durations to fit your personal workflow.
• Task Tracking: Keep a list of tasks right next to your timer and track your sessions.
• Beautiful Sounds: Choose from a selection of calming completion sounds (Bell, Chime, Digital, Gentle).
• Visual Progress: A stunning gradient border that fills up as you work.
• Light & Dark Mode: Switch between light and dark themes with system preference detection.
• Multiple Color Themes: Choose from 5 beautiful color schemes (Default, Forest, Ocean, Sunset, Purple Dream).
• Keyboard Shortcuts: Control the timer without touching your mouse.
• Browser Notifications: Get notified when your timer completes.
• PWA Ready: Install it once, use it offline, anywhere!

---

How to Run It

Want to run FocusFlow locally? It's super easy! Just follow these steps:

1. Clone the repo: Grab the code:

   git clone https://github.com/yourusername/focus-flow.git
   cd focus-flow

2. Install dependencies: Let npm do its magic:

   npm install

3. Start the app: Launch the development server:

   npm run dev

That's it! Open your browser to the URL shown (usually http://localhost:5173) and start focusing!

---

How to Use FocusFlow

Basic Timer Controls

• Start/Pause: Click the "Start" button or press Space to begin your Pomodoro session
• Reset: Click "Reset" or press R to reset the timer to the current mode's default duration
• Switch Modes:
  • Click the mode buttons (Work, Short Break, Long Break) or
  • Press 1 for Work, 2 for Short Break, 3 for Long Break

Task Management

• Add Task: Click the "+ Add Task" button to create a new task
• Set Active Task: Click on a task to mark it as your current focus
• Complete Task: Click the circle icon next to a task to mark it as done
• Delete Task: Click the trash icon to remove a task
• Session Tracking: Tasks automatically track how many Pomodoro sessions you've completed

Customization

• Settings: Click the gear icon (⚙️) or press S to open settings
• Timer Durations: Customize work, short break, and long break durations in settings
• Sound Selection: Choose from Bell, Chime, Digital, or Gentle completion sounds
• Color Themes: Select from Default (Red), Forest (Green), Ocean (Blue), Sunset (Orange), or Purple Dream
• Dark/Light Mode: Toggle between light and dark themes using the moon/sun icon

Keyboard Shortcuts

• Space - Start/Pause timer
• R - Reset timer
• 1 - Switch to Work mode
• 2 - Switch to Short Break mode
• 3 - Switch to Long Break mode
• S - Open Settings
• Esc - Close task input (when typing)

Notifications

• Enable browser notifications when prompted to get alerts when your timer completes
• Notifications work even when the app is in the background

---

How to Contribute

We'd love your help to make FocusFlow even better! If you have an idea for a new feature or found a bug, here's how you can contribute:

1. Fork the repository: Make your own copy of the project.
2. Create a branch: Give it a cool name like feature/amazing-new-thing.
3. Make your changes: Write your code and make it shine!
4. Push to your fork: Save your work.
5. Open a Pull Request: Tell us what you did, and we'll review it!

Don't be shy, all contributions are welcome, big or small! Let's build something awesome together.

---

Happy Focusing!