Digital Clock

Digital Clock is a personal project that extends a full-screen digital clock into an installable web utility. The main screen renders the time on a seven-segment display built from React components and CSS, updated every second and configurable for 12/24h format, date format, timezone, size, color theme, and animation. Preferences are persisted in localStorage and propagated through a shared ClockContext.

The product has four modes on the same surface: Clock, Stopwatch, Timer, and Alarm. The stopwatch measures minutes, seconds, and hundredths, the timer accepts hours/minutes/seconds and triggers a local notification at the end, and the Alarm mode allows multiple alarms, labels, enabling/disabling, and daily repeat. Alarms are kept locally and synced to an Express API that maintains an in-memory copy.

The experience is designed for desktop and mobile: controls rearrange responsively, double-tap toggles fullscreen, swipes change the mode, and a shake gesture cycles through the available themes. A screensaver can move the display across the viewport with a bounce effect and configurable speed. The code also includes support for Wake Lock, although the hook is not actually wired into the main analyzed flow.

In Clock mode, the app can request the browser's geolocation, uses Nominatim for reverse geocoding and Open-Meteo for the current temperature, then refreshes the information periodically. If geolocation or the requests fail, the weather component hides itself without blocking the main clock function.

The app is configured as a PWA via Remix + Vite and @vite-pwa/remix, with a manifest, icons for multiple platforms, declared screenshots, fullscreen/standalone mode, a service worker, and a NetworkFirst strategy. The root registers the service worker, checks for updates, and attempts to maintain a Web Push subscription associated with a local userId.

The custom Express server exposes endpoints for syncing alarms, reading alarms, checking active ones, registering push subscriptions, and publishing the VAPID key. A server-side interval checks the current minute and attempts to send notifications via web-push. In the analyzed snapshot, however, state is kept only in in-memory Maps, VAPID keys are regenerated on restart, the timezone selected in the UI is not sent to the server, and the custom service worker attempts to use localStorage — unavailable in a Service Worker context. For these reasons, the background alarm part must be considered an experimental implementation, not a persistent production scheduler.

Deployment is prepared for Node/cPanel hosting: the Remix build produces a client/server bundle, loader.cjs starts the custom server, and the repository includes an FTP script that uploads the build to a subdirectory. The snapshot contains no CI/CD workflows or automated tests. There is also security debt in the deployment area: the repository contains hardcoded FTP credentials and VAPID keys, which must be revoked and moved to secret management before reuse.