A very simple pomodoro timer I made to split work in small tasks with small breaks in between. This can increase productivity by eliminating distractions during the focus time (25 minutes) and taking a small break (5 minutes) after each period of focused work.

I made this in my spare time mainy for learning purposes:

• For learning purposes I tried to keep it simple on purpose by not using a real UI framework like React or a big module bundler which needs configuration like Webpack. I figured this could be added later when really needed. Instead I just tried to use the modern JavaScript features to work with the DOM and divide the logic in several controllers
• For bundling I used ParcelJS, because it works without any explicit configuration.
• I used Typescript, because I never used it before.
• I made my own SVG icons for the buttons with Affinity Designer.
• The first time I used the web workers API so that the timer keeps running even when you go to another tab or application.
• The first time I used the notificaiton API to notify the user when the focus time or break time is ended when in another tab or application.

It is hosted on Netlify: https://koen-pomodoro.netlify.app/. Every push to the master branch will trigger a production deploy. Pull requests against this branch will also get their own deploy previews to check how the new changes would look like in a production environment.

• Node (I used version 12.13.0)
• Yarn (I used version 1.22.5)

The first time the dependencies need to be installed by running yarn in the terminal.

To start the local development server run the following command:

yarn dev

It should start a local server on http://localhost:1234/ which live reloads on every saved change.

To create a production build, run the following command:

yarn build

At the moment is a very basic timer that could be improved by:

• Adding a notification sound for end of focus and break time.
• Being able to set the amount of time for focus and breaks.
  • This could be stored in browser storage like local storage
• Log completed focus and break periods and also store it in browser storage.
• Make it a PWA so that users can install it and use it without internet connection.