Pomodoro Timer

This is a solution to the Pomodoro app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Set a pomodoro timer and short & long break timers
• Customize how long each timer runs for
• See a circular progress bar that updates every minute and represents how far through their timer they are
• Customize the appearance of the app with the ability to set preferences for colors and fonts

Screenshots

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Redux Toolkit - For state management
• Styled Components - For styles
• Reach UI - Accessible React component library. Used the Dialog (Modal) component
• useSound Hook - React hook for playing sound effects
• React Circular Progressbar - React library for a circular progressbar component

What I learned

1. My major focus for this project was to use Redux for state management. First I wanted to make sure I could get all the functionality of the app working with just using the useState hook for state which worked, but I had to do a lot of prop drilling because it turned out that there was a lot of state that needed to be shared between different components and some of those components were deeply nested (you can check out this version of the app in the no-redux branch of this repo). I quickly saw how the maintainability of the app was suffering, so I opted for refactoring the app to use Redux, React Redux, and Redux Toolkit. I had previously shied away from using Redux because of all the boilerplate it requires, but I was pleased to find that Redux Toolkit really cut down on the amount of boilerplate needed. It's also really nice that you can write code that mutates the state inside the case reducers passed to createSlice().

2. This was my first project where I got a chance to implement sound in the App. The useSound Hook makes it surprisingly easy, but you are required to find your own sound files which required a bit of digging around for usable sounds on freesound. After I selected the sounds I wanted to use, I edited them in Audacity and then imported them into the project.

Continued development

1. I'd like to continue learning how to use Redux and may try to use it without the Redux Toolkit in my next project so that I feel more comfortable using it with the extra boilerplate that's needed when you don't use the Toolkit.

Useful resources

• useSound Blog post - This blog post by Josh W Comeau is a nice intro to how to use sound on the web including how to find and prepare sounds and examples of how to use them.
• codecademy's Redux course - This is a resource that requires a pro account on codecademy.com, but if you have access to it or are willing to pay for it, this is the most helpful resource I've come across for learning Redux.

Author

• Frontend Mentor - @En-Jen