Focus

Focus is a Pomodoro timer clone that enhances your productivity with a unique feature: the ability to play music during break sessions. This app follows the classic Pomodoro Technique while providing a refreshing musical backdrop to make your breaks more enjoyable.

Core Features

1. Pomodoro Timer:

   • Start, pause, and reset the timer.
   • Default session time (e.g., 25 minutes) and break time (e.g., 5 minutes).
   • Adjustable timer settings for work sessions and breaks.

2. Session Tracking:

   • Keep track of completed Pomodoro sessions.
   • Display the number of completed sessions.
   • Auto start focus and break sessions.
   • Use the spacebar to start and pause the timer.

3. Notifications:

   • Browser notifications when the session ends or the break starts.
   • Option for sound notifications or alerts.

4. User Interface:

   • Clean and minimalistic design.
   • Visual indicators for the remaining time.
   • Progress bar for the session and break periods.

5. Settings Page:

   • Customizable timer lengths for work sessions and breaks.
   • Option to enable/disable sound and notifications.
   • Option to set longer breaks after a certain number of Focus sessions (e.g., 4 Focus sessions).
   • Change theme colors for focus sessions, short breaks, and long breaks.
   • Option to run the timer in dark mode for a more comfortable viewing experience.
   • Choose music from a dropdown for break sessions to enhance relaxation..

Getting Started

Installation

1. Clone the repository:

   git clone https://github.com/1LE00/focus-ts.git
   cd focus-ts

2. Install the Dependencies

   npm install

3. Start the development Server

   npm run dev

Technologies Used

This project was built using the following technologies:

• React: A JavaScript library for building user interfaces.
• TypeScript: TypeScript is JavaScript with syntax for types.
• Redux Toolkit: Redux Toolkit is the official library for simplifying Redux state management.
• React Router: React Router is a library for handling navigation and routing in React applications.
• Vite: A fast build tool for modern web development.
• Tailwind CSS: A utility-first CSS framework for quickly building custom designs.

Sound Attributions

• Multimedia button click 1
  Sound Effect from Zapsplat.com

• Break Sessions and Alarm Sounds

  • Clock Alarm
    Sound Effect by Microsammy from Pixabay

  • Soft Plucks
    Sound Effect by Lesiakower from Pixabay

  • Star Dust
    Sound Effect by Lesiakower from Pixabay

  • Lofi Alarm Clock
    Sound Effect by Lesiakower from Pixabay

  • Vintage
    Sound Effect by Lesiakower from Pixabay

  • Dreamscape
    Sound Effect by Lesiakower from Pixabay

  • Oversimplified
    Sound Effect by Lesiakower from Pixabay

  • Super Mario
    Sound Effect by Lesiakower from Pixabay

  • Dream Memory
    Sound Effect by Lesiakower from Pixabay

  • Morning Joy
    Sound Effect by Lesiakower from Pixabay

  • Tropical
    Sound Effect by Lesiakower from Pixabay