CASE STUDY
PRODUCT

Know who's in, the moment they check in.

CLIENTClocked Live
INDUSTRYWorkforce Management
TECHNOLOGYWeb Application
Clocked Live ▪ Know who's in, the moment they check in.

CLOCKED LIVE

OVERVIEW

Clocked Live set out to replace the daily "is anyone online?" ritual with a single live view of who's actually at their desk, on leave, or on break, built for hybrid teams who didn't want the surveillance-heavy tools that usually come bundled with attendance software.

ARCHITECTURE

A single login serves three distinct views (employee, manager, HR admin) off one real-time Supabase (Postgres) ledger. Check-ins, breaks, and leave requests all write to that same ledger, so the live dashboard, the audit log, and the payroll export are always reading from one source of truth instead of three systems that can quietly drift out of sync.

KEY DECISIONS

Geofenced check-in, not GPS surveillance

Check-ins from outside a configured office radius are flagged automatically, without continuously tracking an employee's location for the rest of the day, enough to catch a bad check-in, not enough to feel like a tracking device.

Offline-first check-in queue

Check-ins and breaks queue locally when a device loses connection and sync the moment it's back, so a spotty connection on a job site never costs someone their attendance record.

Per-employee grace periods

How many minutes late counts as "late" is configurable per employee rather than one rigid company-wide rule, since real teams don't run on a single universal shift pattern.

Installable, and never silent

The app installs like a native one with no app-store step, and check-in reminders or pending leave approvals arrive as push notifications, so HR isn't required to keep a dashboard open all day to catch what needs attention.

TECH STACK
ReactNode.jsSupabaseGeolocation APIProgressive Web AppPush Notifications
THE OUTCOME

HR gets a real-time roster with real photos and real status instead of a spreadsheet reconstructed at the end of the month, and payroll reconciliation drops from hours of manual cross-checking to a pre-validated export.

Have a project in mind? Let's talk.

START A CONVERSATION
TRY IT LIVE

Edit the code, watch it run.

Change the function on the left: your letter's background updates instantly. No reload, no waiting.

highlight.js
OUTPUT: A..Z, click a letter and watch the alphabet drop
ABCDEFGHIJKLMNOPQRSTUVWXYZ
HELLO@20THLETTER.COM LET'S SET IT IN TYPE HELLO@20THLETTER.COM LET'S SET IT IN TYPE HELLO@20THLETTER.COM LET'S SET IT IN TYPE HELLO@20THLETTER.COM LET'S SET IT IN TYPE