> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Build a Pomodoro app
- URL: https://reactpractice.dev/exercise/build-a-pomodoro-app/
- Published: 2024-11-20T09:24:01.000Z
- Updated: 2026-06-01T01:58:21.000Z
- Author: Corina Udrescu
- Tags: Essential, #corina-2, Exercises, Intermediate, Working with setInterval, #Import 2026-06-09 12:07

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](https://zapier.com/blog/best-pomodoro-apps/?ref=reactpractice.dev):

> 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](https://pomofocus.io/?ref=reactpractice.dev), [Forest](https://www.forestapp.cc/?ref=reactpractice.dev), [Tomito](https://tomito.app/?ref=reactpractice.dev), [Pomodor](https://pomodor.app/timer?ref=reactpractice.dev), [ZenTimer](https://www.zentimer.work/?ref=reactpractice.dev)), 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:

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/11/pomodoro-wireframes.png)

Good luck!

💡

Ready to check your work?  
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/tutorial-how-to-build-a-pomodoro-app/) and the comments section for feedback and discussion.