Table of contents
About the project
I was looking for a free timer, and I had a few criteria. First, I wanted an interval timer. Second, it has to be really flexible enough to cover my needs. I haven't found such an interval timer for free, so I decided to develop one on my own. This project is entirely written on Vue.js 3 and Pinia. Honestly, Vue.js + Pinia are both are fantastic. Down the road, I made a decision to make PWA so that it could be used with any gadgets. And it was extremely easy to do this with Vue plugins. It is important to note that this project has been written with a mobile-first design. If you're anything like me, you'll probably find this project valuable.
The app is hosted on the DigitalOcean. It can be found here:
https://monkfish-app-xna4v.ondigitalocean.app/
Usage
Adding single pomodoro usage
The primary instance within the project is a session. It consists of an interval list. If you want to do a simple Pomodoro, add one interval with a duration of 25 minutes. Fill in the interval name and time and hit the "Add interval" button. You also need to enter the session name. In our case, we'll enter 'Single Pomodoro.' There also is a toggle with the label "Auto to stop on interval end"; ignore it for now. Once you've filled in all the fields, click on the "Add session" button, and you're ready to go.
Adding complex pomodoro usage
In some circumstances, you want to have a more complex session. What do I mean? For instance, you want one Pomodoro, then a break, one Pomodoro again, and a long break. It's pretty easy to do. Add all necessary intervals you are supposed to work or study on, fill in all required fields, and submit.
The toggle "Auto to stop on interval end" is responsible for auto-running the next interval without stopping. If you run your Pomodoro interval and you want all subsequent intervals to start automatically, this toggle has to be on.
Running the session
Within this page, you can select any time interval and run, stop, or reset it. In case you want to reset all intervals, you need to click the reset all button, which is at the top right corner of the timer.
Editing the session
When you feel that some interval, name, or configuration doesn't meet your criteria, you can hit the edit button to update your session.
Session list
There is a link, "Sessions," if you want to see all available sessions.
Removing the session
To remove the session, open the session list, find the one you want to remove, and confirm the removal in a modal window.
Editing the interval
If you want to edit the interval, click on the edit session window and the interval itself. It will select an interval which you can edit now:
Removing the interval
To remove the interval, open the form and click the minus button, which is aligned with an interval. Then confirm removal.
