My Pomodoro - using react for the view


Here is my pomodoro clock:

Here is the source:

I used to set things up.
Note that I only use react for the view. The dealing with the data and the application logic is made by my self on my own objects.

On the next project I’ll try to bring redux into the mix, but I feel it is good to use each project to introduce a new tool at a time.

Still to do on my pomodoro:

  • find an audio file to play after the timer is over. Anyone know a good source of free audio files? I am looking for a soft sound that does not drive people crazy if it starts playing all of a sudden.
  • find a tomato icon to use for my count of pomodoros - I show a smal “O” below the clock after each pomodoro session is over. After 4 work sessions, the break time is 5 times the normal break. I want to replace the “O” with a tomato :stuck_out_tongue:

What do you think about my project?

1 Like

And I have finished it. Same link:

Put the audio file. Gave up on the tomato and just use a red circle instead. Give it a try and leave your feedback.

1 Like

It looks great! The code looks clean, and well structured (as far as I can tell :stuck_out_tongue:) and the design is great, it works well both on my desktop and my phone.

I am finishing up my Pomodoro timer now. I tried to write it in modules, but using vanilla JS. (I’m planning on learning React as part of my next project) Aaanyway, the point of all this waffling on was just to say that I think I understand the complexities involved in making a ‘simple’ Pomodoro timer fairly well, and I think you have done an excellent job. Thanks for sharing!

1 Like


Thanks for your comments.

I have used this course: to learn about design patterns and code organization. On the first 2 lessons they teach you do organize your code without any frameworks, and I found that very helpful.

1 Like

Awesome. Thanks for sharing :slightly_smiling_face: