About

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!

Computer

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

Mobile

For mobile users all controls are always visible.

To Run

1. Run yarn start

Running tests

1. Click the hamburger menu in the upper left corner
2. Select "25 + 5 Clock" from the dropdown menu
3. Click "Run Tests"

Future Changes

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

Helpful Links

• 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.

See Also

• Browser extension to avoid distracting sites 💯