Volta Clock

A simple alarm-clock built with Electron, React and Typescript

Installation/Development

Checkout INSTALL.md

Features

• Show the current datetime on the front page
• Display a list of saved alarms on the front page
• Show a detailed view of a saved alarm
• Create or edit an alarm with the following fields:
  • datetime (required): when will the alarm ring
  • active (default to true): should the alarm ring
  • name (optional): a custom name for this alarm
• Delete an alarm

All datetimes should be displayed in local values but must be stored in UTC values.

Architecture

• Electron: application manager handling:
  • the main process (Node)
  • the renderer process (React)
• Bree: background-jobs scheduler
• RxDB: data-storage manager
• Redux Tool Kit: UI state manager
• Ant Design: UI design library

The main process in Electron orchestrates inter-process communication with various implementations of the Worker Threads API (node) and the Channel Messaging API (web)

• main <-> renderer: default IPC set up by Electron (implemented in the preload script and the IPC hook)
• main <-> worker: default messaging system provided by Bree (implemented in scheduler.ts via a parentPort)
• storage <-> renderer: custom messaging system provided by the RxDB electron plugin (implemented in the preload script and listener.ts)
• storage <-> worker: custom messaging system (implemented in storage.ts and worker.ts via a RxDBRemoteStorage)

All messages addressed to the renderer process are piped through the Redux Tool Kit listener middleware to handle dispatching asynchronous/time-related actions (implemented in the epics module)

All dates are created with Day.js (parsing, manipulation, i18n, l10n, etc.)

Caveats

1. The store works fine, but it should be configured with the database connection already defined. For now, there is a wrapper around each listener's effect to add the connection on the fly to the extra argument of the RTK Listener API. This would remove a condition when running the effect (not a big performance gain but still it's not neat)
2. In the development environment, it is common to get either the React dev-tools extension or the Redux dev-tools extension working. It seems that whenever one is working, the other one crashes (even more so with hot-reloading enabled)

Next steps

1. Enhance the Alarm model by:

   • snoozing an alarm that's ringing (ring again in 3/5/10 minutes)
   • prioritizing alarms with specific sound bips (higher sound -> higher priority)
   • repeating the alarm periodically (every N hour/day/week/month)

2. Encapsulate the app into an icon tray:

   • open the notifications on the desktop rather than the renderer's window (it may not always be opened to show them)
   • move the renderer's window to a kind of system widget (like the weather app or the real clock of a classic desktop environment)

3. Expand the app to include more pages related to a time-based model:

   • a timer
   • a countdown
   • a world-clock with a weather feature