A clean, customizable pomodoro timer to help you set up distraction-free focus time.

The Pomodoro Technique is a method of time management where you divide your work into long-ish focus blocks (e.g. 25 minutes) with shorter breaks in between (e.g. 5 minutes). Every 4 pomodoros, you should take a longer break (e.g. 10 min).

Created as my final project for the FreeCodeCamp Frontend Frameworks certificate. Bootstrapped with Create React App.

>> Try it out!

For simplicity, the '+' and '-' buttons only appear when user mouses over "Focus Time" or "Break Time" controls.

For mobile users all controls are always visible.

• Add link to github
• Add ability for user to switch to dark mode

• I looked at awwwards and dribbble for design inspo.
• This answer explains that a switch can be written either with or without brackets for each case. Mind blown.
• I took some pointers from this simple redux stopwatch.
  • However I had to change getState to getState() for it to work. Thanks to this answer.
  • Implementing this also taught me about thunks.
• How to add seconds and minutes to current time with date-fns.
• Playing audio in React
  • Using Audio() objects. I wanted to do it this way, but one of the FreeCodeCamp requirements is to use an <audio> tag.
  • Using refs. This codepen introduced me to React.createRef() which helped to play audio using <audio> tags in React.

• Browser extension to avoid distracting sites 💯