Pomodoro App

Pomodoro App is a mini web application which helps people boost their productivity by setting timer for focus and break intervals. This project is inspired by a challenge created by Frontend Mentor. I implemented the design's core layout and color themes, and added some more user settings and also app sound.

Tech: React, Styled Components

Code: View Repository

Live: View Site

Project Purpose and Goal

The main purpose of this project was to practicing and improving my React and CSS skill. After many tutorials and courses, doing a project from scratch in unguided way is a good practice to solidify what I've learned.

Lessons Learned

Even it's a very small app, I learned a lot about hooks and state management in React. During earlier implementation I used useState for every state logic in the root component hence made the codebase quite messy. Then I replaced useState with useReducer when the state logic got more complex and when setting a state depends on the current value of another state. That made the state management more clean and easier to maintain. I also practiced a lot of CSS knowledge when trying to translate the design into code.