LifeTime is a web-based attendance and time tracking tool built with React, TypeScript, and Supabase. It handles live session timers, idle tracking, incident reports, and automatic clock-outs so no session is ever left running by accident.
Tracking work hours by hand is messy. People forget to clock out, sessions get left running overnight, and the numbers stop matching reality. The team needed a simple way to log time, see totals at a glance, and trust that the records were accurate without anyone having to babysit a timer.
LifeTime gives each person a one-click clock in and clock out, a live timer that counts the current session down to the second, and a dashboard that adds up time for the day, week, month, and year automatically.
Tech stack: React and TypeScript run the frontend, Tailwind keeps the UI light and consistent, and Supabase handles the database, auth, and the edge function logic behind clock-outs and stale sessions.
Reliable session handling: The app clocks you out when you sign out, refresh, or close the tab, so a forgotten session never inflates the totals.
Idle and incident tracking: Idle periods get logged separately, and people can file incident reports with notes and screenshots when something goes wrong during a shift.
Clean, honest history: Every past session lands in a sortable, responsive table with filters by date, so reviewing attendance takes seconds.
The hardest part wasn't the timer, it was the edge cases. Tabs closing, refreshes, frozen accounts, and sessions left open all forced me to think about state I couldn't always see. I learned to design for the moment things go wrong, not just the happy path. If I revisited it, I'd add admin reporting and exportable timesheets to round out the workflow.