1. Overview
Timer is a modern, cloud-based cross-platform Progressive Web App (PWA) engineered for high-precision time tracking, productivity workflows (Pomodoro and Stopwatch), and comprehensive multi-tenant team and workspace collaboration.
Unlike typical web timers that break the moment network connectivity drops or lag under server round-trips, Timer is designed from the ground up as a local-first application. It utilizes client-side persistence via IndexedDB to ensure uninterrupted timekeeping, paired with background cloud synchronization to Supabase, serverless Edge Functions on Deno, and granular PostgreSQL Row-Level Security (RLS).
2. Technical Architecture & Stack
A surface-level repository scan might misjudge this as a simple static site. In reality, Timer is powered by a sophisticated distributed client-and-edge architecture designed for offline resilience, robust security, and enterprise team operations.
Core Frontend
- React 18: Component model and reactive state UI
- TypeScript: End-to-end strict typing across client and functions
- Vite: Ultra-fast build pipeline & optimized bundles
- Vanilla CSS: Clean, responsive, dependency-free styling
-
PWA Shell: Service worker caching &
cross-platform installability via
vite-plugin-pwa
Storage & Cloud
- Dexie.js & dexie-react-hooks: IndexedDB wrapper powering offline-first data reactivity
- Supabase JS: Client SDK for realtime data subscriptions & auth
- PostgreSQL: Relational schema version-controlled across 23 Supabase SQL migrations
- Row-Level Security (RLS): SQL-enforced tenant and workspace access policies
Serverless Edge & APIs
- 13 Supabase Edge Functions: Deno & TypeScript microservices for critical backend logic
- WhatsApp Cloud API: Phone OTP delivery via webhook integration
- Google OAuth: Frictionless single sign-on authentication
- Team Invitations: Automated tokenized email/link onboarding
Testing & Quality
- Vitest: High-speed unit and integration test runner
- fake-indexeddb: In-memory IndexedDB virtualization for testing storage interactions
- Deterministic Mocking: Isolated backend service and webhook simulation
3. System Architecture
The architecture cleanly decouples client-side local-first operations from cloud coordination. Offline writes commit instantly to IndexedDB; background sync synchronizes with Supabase PostgreSQL under strict Row-Level Security policies. Sensitive workflows—such as WhatsApp OTP dispatch and workspace invitations—execute via isolated Deno Edge Functions.
4. Key Engineering Decisions
1. Local-First Timekeeping with Dexie.js (IndexedDB)
Problem: Network latency or intermittent drops can lead to lost seconds, desynchronized timer states, or complete failure to start or log time entries while on unstable connections.
Decision: Implemented a local-first persistence
layer using Dexie.js and dexie-react-hooks directly in
the browser.
Result: Timers tick accurately with zero network lag. All state changes write instantly to IndexedDB and queue for cloud synchronization as soon as connectivity is detected.
2. 13 Supabase Edge Functions on Deno
Problem: Certain core business operations—such as WhatsApp OTP delivery, invitation token validation, and OAuth handshakes—require server-side secret keys and cannot run safely in the client browser.
Decision: Deployed 13 lightweight, globally distributed Supabase Edge Functions written in TypeScript and executed on the Deno runtime.
Result: Serverless efficiency with near-instant cold starts, complete secret isolation from client bundles, and seamless webhook integrations.
3. Multi-Tenant Isolation with PostgreSQL Row-Level Security (RLS)
Problem: Workspaces contain sensitive corporate time logs, client details, personnel details, and department structures that must be strictly isolated between team members and different client organizations.
Decision: Crafted 23 detailed SQL migration files establishing comprehensive Row-Level Security (RLS) policies directly inside PostgreSQL.
Result: Data security is guaranteed at the database engine level. Even direct client queries via Supabase JS cannot bypass workspace tenancy or role boundary checks.
4. Phone OTP Delivery via WhatsApp Cloud Webhook
Problem: Standard SMS OTP delivery can be expensive and unreliable internationally, particularly across emerging markets.
Decision: Engineered an Edge Function webhook integrating directly with the WhatsApp API to deliver one-time passwords reliably to verified mobile devices.
Result: Cost-effective, high-deliverability two-factor and phone-based authentication with instant receipt.
5. Application Features & UI Walkthrough
Timer combines deep productivity utilities with comprehensive organization-level workspace management:
Stopwatch Time Tracker
Real-time tracking with project tagging, instant play/pause controls, and direct integration with local IndexedDB storage.
Pomodoro Focus Timer
Customizable focus intervals, short breaks, and long breaks to boost productivity, fully backed by audio cues and persistent state.
Work History & Organization
Granular grouped logs displaying daily totals, associated projects, departments, and client associations with inline editing capabilities.
Reporting & Analytics
Visual session history analytics with daily time distribution bar charts, metrics for maximum, minimum, and average daily time, and total hours worked.
Multi-Tenant Workspace Switching
Seamless context switching between personal spaces and corporate workspaces with isolated settings, roles, and time entries.
Member Invitation & Roles
Invite collaborators via email links with granular role-based access control (Admin, Member) orchestrated by Deno Edge Functions.
Project Management
Organize work into structured projects and track individual progress.
Client Management
Maintain external client and customer accounts to organize, filter, and associate projects and tasks across workspaces.
Department Management
Structure organization members into functional departments for streamlined team monitoring and resource management.
Security & Authentication
Multi-factor authentication (MFA), WhatsApp OTP phone verification, and credential management.
Settings & Configuration
Fine-tune timer settings including sound notifications, interval and break lengths, and session state reminders.
Profile Customization
Manage personal profile details, avatars, connected identity providers, and regional timezone preferences.
6. Production Deployment & PWA Capability
Timer is fully deployed and accessible live under a custom domain:
https://timer.jindasoftconsulting.com
Configured as an installable Progressive Web App (PWA), Timer provides desktop and mobile users with a standalone native-app experience, complete with offline service worker caching, instant launch speeds, and background synchronization.