A Desktop application for time tracking (stopwatch) coupled with a calendar view.

The goal was to try to develop an end-to-end application I could actually use on my day to day, using some tools that are totally out of my comfort zone (some of them totally new, like Electron or Vue).

2022-10-04

Selecting a couple of tools: settled with Electron for the desktop application (always wanted to try it). For the backend I wanted to use Python (to include some ML/analytics/viz components). I would also like to be able to select different storage backends (local or s3 for example), for which I will probably end up using boto or equivalent JS library (basically will just need to use s3).

Seems like I will be using Vue for the frontend since I created the Electron project using the Vue CLI Electron Builder plugin (it was the first tutorial I found on how to create an Electron app :-) ). That’s fine because I don’t know Vue either!

Followed the guide here to install Electron on WSL: https://www.beekeeperstudio.io/blog/building-electron-windows-ubuntu-wsl2

• Additionally had to install sudo apt install libasound2
• Due to WSl2 had to set the DISPLAY variable following this StackOverflow post instead: https://stackoverflow.com/questions/61860208/wsl-2-run-graphical-linux-desktop-applications-from-windows-10-bash-shell-erro
  • export DISPLAY=$(route.exe print | grep 0.0.0.0 | head -1 | awk '{print $4}'):0.0

Will most likely use this stopwatch package: https://www.npmjs.com/package/statman-stopwatch

Can also look here for some inspiration: https://github.com/akras14/simple-stopwatch/blob/master/app.js

To launch XServer (required to see the Electron Window):

• use XLaunch
• use the profile in D:\\projects\\time_tracker\\xlaunch_config

WTF is XServer - https://www.youtube.com/watch?v=mV1TNyWGQQ8 (pretty cool!)

To create linux binaries: yarn run electron:build

To build for Windows… there’s probably a tool for that 😀

Following another guide to learn how to customize the Electron app created through the VUE cli: https://blog.logrocket.com/building-app-electron-vue/

TeleportHQ is a good option to quickly design elements and export them to Vue code: https://play.teleporthq.io/ but I still had to learn a bit about CSS and flex layouts to design a simple component.

TeleportHQ is a good option to quickly design elements and export them to Vue code: https://play.teleporthq.io/ but I still had to learn a bit about CSS and flex layouts to design a simple component.