Jan 11, 2021
7 mins read
In this short and not-too-deeply technical post I'll take a look at the choice of software used to create AnotherPomodoro.
The web as a platform
So I knew I wanted to build a pomodoro timer. The question was: where do I distribute the app? Do I build a mobile app or a desktop app? Do I really need to build something that users should install at all?
Vue and Nuxt.js
Web page it is, then. But I did not want to write my own HTML files because as the app would get bigger, so would its maintenance become more difficult.
Before starting out with AnotherPomodoro I've found that there's something that makes it even easier to build a Vue app: Nuxt.js.
Nuxt allows me to create websites that just work: no need to set up things like a router (what to do when the user types in
That's what I wanted, so I focused on building a fully static website. I probably cannot list all the benefits of using something like Nuxt.js and it might not be too interesting either: they are most noticeable to me, a developer. Among a lot of advantages I can easily separate my app into components - like how the three styles of timers are just different components: when you switch between them, they get swapped. This makes it really easy to build more stuff into the app without it getting too bloated (like having thousands of lines of code in a single file).
Right, web technologies are cool. Nuxt.js is really cool. How do I make it even easier to develop a web app? Well, let's get ourselves a UI library first to create a beautiful app quickly!
At first I tried Vuetify. I loved it because it allowed me build an app without having to know how to style stuff and program things like a modal (dialog) window. I just wrote
v-dialog and I had a modal window with beautiful material design looks.
In the end, I felt that it slowed the app down and without effort the whole site started to look really generic. I then decided to switch to Tailwind CSS (kind of the opposite of what Vuetify provides) and refreshed the app's looks with a hand-crafted design. There were no ready-made components any more but it's really easy to create whatever you want using Tailwind. I just write
p-4 border border-gray-200 shadow and I have a box that now looks like a card: it has padding inside it, a grey border and a shadow. Awesome!
Later on some more plug-ins were added to the site: I needed an app that can be translated into different languages (thanks nuxt-i18n and vue-i18n!), I wanted it to save the settings so when the user comes back they are reloaded (thanks vuex-persistedstate!), I did not want to write my own date and time formatting functions (thanks Day.js!) and so on. You can find the full list of modules I used on the project's GitHub page! There's actually a lot and they all helped make AnotherPomodoro what it is now.
Publishing the results with Netlify
Once the app was sort-of ready, I needed a place where I could host it so that it has a URL address and anyone can access it without having to execute commands on their own computers. Normally one would say that you cannot host your own website without paying for a hosting service. Sure, when you want to build an app with a database and extra logic and authentication (register and log in) - anything that requires some extra work on the server's side - that's not necessarily free. Or if it is free, you'd soon reach the free tier's limits, anyway.
"Hacking the system" with static websites
AnotherPomodoro is equipped with features that one could easily say would require a "proper" server: storing your settings and tasks, for example. Thanks to frameworks like Nuxt.js and their static site generation functionality, this can be avoided in a lot of cases. You can even build a blog or a news site with static site generation! Since there's no authentication (you edit the code of your site on your machine, not the content in some database on the internet) there's also a lot less space for attacks. Just be sure to protect the source code and your materials properly.
Static site generation is not some universal magic wand to avoid databases and more complex servers, though. Since no data is stored on servers, AnotherPomodoro is not able to synchronize your settings and tasks across your devices: if your browser does that for you, all the better. There's no way to create leaderboards, either. In fact, sharing any user-generated content (think social media posts, for example) through a static app is without any supporting server is (mostly) impossible. To me, these things were never really important, anyway. I am willing to spend 30 seconds to configure the app and I don't think that pomodoro apps need leaderboards. I can build a statistics module into the app, though 🙂
The key is to recognize when the features you want in your app actually don't require more than what a static website can provide. It might be tempting to include a log in feature just to share data across devices but in some cases it might be overkill. In AnotherPomodoro's case, a quick setup page is being made to set the app up for first use even quicker so users will not need to delve into the settings that much. This also helps avoid having to sync settings across multiple browsers.
The app's source code (along with more technical information) is available at the project's GitHub page.
Thanks for reading this little snippet of the making of AnotherPomodoro. If you haven't yet, check out the app at https://another-pomodoro.netlify.app!