Pomodoro Technique Focus Timer Full Pomodoro productivity timer with customizable work/break intervals and session tracking.

Under the hood, it utilizes React's useState and useEffect hooks to manage its state and side effects. The timer is implemented using setInterval with 1-second ticks, which decrements the secondsLeft counter every second. A state machine controls the mode, switching between work, short break, and long break based on the sessionsCompleted count and longBreakInterval setting. When the secondsLeft counter reaches zero, it automatically switches to the next mode after a brief delay using setTimeout. The tool also uses React's useCallback hook to memoize functions like getDuration and switchMode, improving performance by reducing unnecessary re-renders.

The code employs various data structures, including objects to store mode-specific durations and colors, and arrays to map modes to their corresponding labels. It also utilizes JavaScript's Math library for calculations, such as determining the progress of the timer and formatting time in minutes and seconds. The Web Audio API is not used in this implementation, instead relying on React's event handling and DOM manipulation capabilities to update the timer display and handle user interactions. When the component unmounts, it cleans up any pending intervals using clearInterval to prevent memory leaks.

The settings section of the tool allows users to customize the work duration, short break duration, long break duration, and long break interval using HTML input fields and React's onChange event handler. These values are stored in state variables and used to update the timer's behavior accordingly. The tool also tracks progress by counting completed sessions and calculating total minutes focused, displaying this information in a grid of glass cards. By combining these features and technologies, it provides a customizable and effective way to implement the Pomodoro Technique and boost productivity.