1 min read

Build a Pomodoro app

Build a React app that allows users to track a Pomodoro cycle.

Here's how a Pomodoro cycle works, in the words of Harry Guinness from the Zapier blog:

You set a timer for 25 minutes, work until it's up, then take a five-minute break—and repeat the whole process three more times. After that, you take a 15- to 30-minute break, depending on how you feel. And that's one full Pomodoro cycle.

There are many Pomodoro apps out there (PomoFocus, Forest, Tomito, Pomodor, ZenTimer), and they all have a few features in common:

  • ability to start a 25 minute session, to pause, reset and skip it
  • ability to continue the session with a 5 min break
  • ability to track a full 4 pomodoro cycle - and take a long break at the end of it

Let's build a similar Pomodoro app as well!

Here are the wireframes of how it should work:

Good luck!

When you're ready to check your work, checkout the official solution.

Get the React Practice Calendar!

28 days of focused practice of increasing difficulty, going through everything from Fundamentals, Data fetching, Forms and using Intervals in React.

You will also get notified whenever a new challenge is published.