Pomodoro-like Timer App
A desktop app created with React to help you stay focused and productive.
The well-know Pomodoro technique helps to break you work time into intervals and forces you to take breaks.
You can choose 25 min, 10 min or 5 min.This app is fully customizable and you can adjust colors and fonts to your liking.
Structure
The code architecture is simple and easy to understand.
The main component has a structure like this:
<App>
<Wrapper>
<ModeSelector/>
<Timer/>
<Settings/>
</Wrapper>
</App>
Development
I started with installing the React Create App to initialize the project. The basics like the root component, gitignore and styles were set up first. The challenge to myself was to create an app in a fast and simple way and to make it user-friendly. I went with the best libraries and tools that I know and that I am comfortable with like Material-UI for the design and React for the logic.
Since the calculation logic was pretty simple, I decided to go with the Redux to store the state of the app. The reducer file contained the logic for `start`, `back`, `next`, `answer` and `restart` actions.
Design
Below are the digital assets I used for the app: favicon, logo and custom result image.
I have created a custom illustration for future development to have tiers of difficulty for users:
Conclusion
Main React features used to build the app quickly were:
- React hooks -
useEffect - React Router -
useNavigate - React Redux -
createStore,bindActionCreators
My Redux was organized and structured in a way that it was easy to add new features and actions.
Through this quip all I have learned that the most important thing is to have a clear structure and plan before starting the project. For example, for this project I had to think about the interactions between the components and the state of the app first and then move to the design. I have also thought what would be most user-friendly and engaging way to interact with the app and have a motivation to re-start it and use over and over.
Next Stage
In the future I want to return to this project and add more features like the ability to choose the difficulty level and the ability to share the results on social media.
I would also add more images and animation to make the process more engaging and fun.