I made a Pomodoro timer app based on the Pomodoro Technique. The app allows users to set work intervals separated by short breaks. When the timer starts, all buttons are disabled except for the pause and stop button. The use can increase the work and break time by 5 minute increments. Additionally, a separate component displays the time remaining along with a progress bar to help keep track of time.
The project was intended to be used for practicing the Pomodoro technique.
The layout of the app was provided at the start. I was responsible for implementing the functionalities for the buttons, progress bar, and conditionally rendering the components that show up when the timer starts.
The app was built with React, Bootstrap, HTML, and CSS.
While making this app, I learned how to use a custom hook to animate the progress bar. I also learned how to use conditional rendering to display different part of the screen based on the state of the app.
Future goals for the project:
- a way to save timer preferences for future sessions
- implement a clock instead of the progress bar
- dark mode
- refactor and clean up code
- refactor styling to move away from a generic design