What We Want to Achieve
Pomodoro timers in browsers suck so we are going to build an impressive modern timer. We want our Pomodoro to be PWA, so we can use it offline and open it as a native app. Our Pomodoro will not have useless features, but basics — a nice time picker and timer. Also, we want to see the current time and time from the last Pomodoro set we made.
Technology Stack
We are going to use react, redux, redux-saga and styled-components for development. And to make Pomodoro reachable on the web, we will use AWS + Terraform.
To bootstrap a new project I always use the create-react-app tool. Steps to make a newly created app work with redux and saga described in my other story. If you interested in the bootstrapping part it will take you a few minutes to go through the steps.
If you interested in DevOps part check the story about personal website hosting and CI/CD on AWS since we will use the same approach for Pomodoro.
Structure of the Repository
At first, let’s describe the structure of our project. At the root, we have directories with front and infrastructure, buildspec file describes steps for CI/CD pipeline. Father in the story we will talk about what we have in the source directory, we will omit infrastructure which contains terraform configuration for AWS.
Components
The most important components we want to build for Pomodoro are TimePicker, Timer and Time. TimePicker to select the duration of the set. A Timer will show how mщку time we need to stay focused. And Time so we can see the current time and period from the last set finish. We have already created TimePicker and Timer in previous articles so now we can add them in our app via NPM.
npm install --save increaser-timepicker increaser-timerFor both Time and Timer, we will use sagas to update state and therefore components. Let’s look at how it works for the Time component.
And since we dispatch mount and unmount actions, our saga will know when it should go in the ticking loop.
Notifications
When Pomodoro set finished, we want to show browser notification. It goes like this:
And we need additional code in service worker so that notifications will work on mobile devices, to do this we will use the cra-append-sw library.
PWA
Since we want our app to be a progressive web app, we need to fulfill all the requirements listed here so we can prompt a user with “Add to Home Screen”. Also, worth to mention that now PWA can be “installed” not only on mobile devices but also on desktops.
Desktop progressive web apps can be ‘installed’ on the user’s device much like native apps. They’re fast. Feel integrated because they launched in the same way as other apps, and run in an app window, without an address bar or tabs. They’re reliable because service workers can cache all of the assets they need to run. And they create an engaging experience for users.
To prompt a user in the future, we will save prompt event by adding an event listener in the root component. And when the user finishes the first Pomodoro set, he will see the prompt.
Conclusion
In this story, we have made the Pomodoro app. You can try it now at pomodoro.increaser.org. And for sure, it is not the final version. If you want to fix or improve something, please let me know by leaving a comment or by making pull request :)
For Medium readers, I provide a Udemy course How to Start React Project: Best Practices for 9.99$. The goal of this course is to share with You my findings of the last few years about what steps and decisions are better to make at the beginning of development so that you will have a good starting point for your new project.
Reach the next level of focus and productivity with increaser.org.
