Vanilla Tasks Tracker

Date: July 25, 2024

Time to read: 3 min

This is a small vanilla javascript/css application designed to demonstrate the capabilities of native technologies in a browser environment. The application does not use any libraries and (almost) third-party resources.

Features

Inter-session data storing: using the localStorage and firebase cloud database (for authorized users, see below).
User authorization (using Google OAUTH).
Caching service worker with abilities to automatically flush the cache on version change and installation of the PWA application.
Time tracking functionality (even when the apllication is not active).
Adaptive layout (using native CSS variables), adaptive main menu.
Data import/export from/to a local json file.
Minimal UI: Popup dialogs, toasts.
Change the order of the project/task items by drag-and-drop (with support for mobile devices).
ES6 JavaScript code.
ES6 browser modules.
Internal TypeScript support (via jsdoc tags).

Resources

The actual version is deployed to:

https://vanilla-tasks.lilliputten.com/

The source code is located in github repository:

https://github.com/lilliputten/vanilla-tasks

Screenshots

The layout of the application with empty data, the main menu contains a sign-in button (v.0.0.13).

The user is signed in, the data is loaded (if it was in the server database) (v.0.0.13).

Notification of a version change (v.0.0.13).

The main application layout, different task states and active time tracking (v.0.0.10).

Used technologies

This project uses only vanilla css and (almost; see below) vanilla javascript.

Only one 3rd-party resource was used: font-awesome icons library (v.4.5.0).

It’s possible to use unicode symbols or local svg resources to completely get rid of external resources.

I’ve already tried using unicode icons, but they look a bit sloppy. So, I decided to leave this icons pack here.

No other libraries or dependencies are used at all.

The package.json has some dependencies, but they are only used to support the development process:

eslint (v.8.45.0)
prettier (v.3.0.0)
serve (v.14.2.3)
stylelint (v.15.10.2)
typescript (v.5.1.6)

It’s not required to install anything – the code is already production-ready.

Not entirely pure javascript is used here. Some exceptions include:

The code uses typescript support via jsdoc typing syntax.
There used modern es modules support in browser. This is not a very good solution in terms of performance, but it is suitable for a demo application.

I’ve used some of the technologies I used in my client’s project.

I’ve applied here some of the approaches and technologies that I’d developed for my client’s Brightway Matchbox project, where we used the lightweight vanilla front-end part.