Focus Fox

Your Go-To Online Timer for Enhanced Productivity

---

Table of Contents

• 🔍 Overview
• 🌐 Live Demo
• 🚀 Features
• 🤔 How to Use the Focus Fox Timer
• 🛠 Technologies Used
• 💻 Installation
• 🚧 Roadmap
• 🤝 Contributing
• 📄 License

---

🔍 Overview

Focus Fox is an open-source Pomodoro timer web app designed to help boost productivity through structured work and break sessions. It supports customizable timer lengths for Pomodoro sessions, short breaks, and long breaks. This project is still in its early stages, so feedback and contributions are welcome and appreciated!

🌐 Live Demo

Check out the live version here: Focus Fox

🚀 Features

• Pomodoro Timer: Focus on tasks in timed intervals (work/break cycles a.k.a. rounds).
• Customizable Timers: Adjust durations for Pomodoro, Short Breaks, Long Breaks and auto-start behavior to suit your preferences.
• Notifications: Get browser notifications when a timer expires with customizable sounds.
• Mobile Responsive: Works smoothly across desktop and mobile devices.
• Dark/Light Mode: Toggle between dark and light themes.
• Accessible & Minimalist Design: Simple UI that helps you stay focused.

🤔 How to Use the Focus Fox Timer

1. Customize the timer settings to fit your preferences.
2. Choose a task to focus on.
3. Start the Pomodoro timer and concentrate solely on your task for the set duration (default: 25 minutes).
4. Take a short break after each Pomodoro (default: 5 minutes).
5. After several Pomodoros, opt for a longer break (default: 15 minutes after every 4 rounds).
6. Repeat steps 3-5 until all your tasks are completed.

If you would like to learn more about the Pomodoro technique you can read about it here.

🛠 Technologies Used

• React for building dynamic UI components.
• React Router for page navigation.
• Vite for fast development and build tooling.
• Tailwind CSS (with ShadCN/UI) for utility-first styling and component library.
• FontAwesome for icons.

💻 Installation

To run this project locally:

1. Clone the repository:

git clone https://github.com/marinoffDev/Focus-Fox.git

2. Navigate to the project directory:

cd Focus-Fox

3. Install the dependencies:

npm install

4. Start the development server:

npm run dev

🚧 Roadmap

Future plans for enhancements and development:

• Add page routes for Privacy Policy, Terms and Conditions, and 404 Page Not Found
• Add a sitemap.xml, robots.txt and meta tags
• Add a customization option for number of pomodoro rounds before a long break (currently default is 4)
• Add an option to reset all user customizations preferences back to default
• Add more notification sound options
• Add open graph meta tags
• Add an option to enable browser notifications
• Add browser cookies support to store the user's customization preferences
• Add an option to start subsequent timers automatically
• Add a component that provides user feedback when their custom preferences have been applied
• Add volume controls for the notification sound
• Add more theme customization options
• Add a toggle for "super dark mode" while a timer is active
• Add SSG build step before deployment

🤝 Contributing

Contributions are welcome!

Here's how you can contribute:

1. Submit an Issue: If you encounter a bug or have a feature request, please submit a GitHub issue first. This helps us discuss your suggestions before you begin working on it.
2. Fork the Repository: After an issue has been submitted, feel free to fork this repository and work on a fix or enhancement.
3. Open a Pull Request: Once your changes are ready, open a pull request (PR). Please reference the issue number and describe the changes you made.

📄 License

Focus Fox is licensed under the CC BY-NC 4.0 License - see the LICENSE file for details.