Clocker
A time-tracking app for small teams — employees clock in and out from one button, managers review hours and export a filtered log.
- Role
- Solo developer
- Year
- 2026
- Stack
- Next.js · TypeScript · PostgreSQL
Clocker exists because small teams tracking hours on paper or a shared spreadsheet hit the same two failures: entries get written down after the fact, and nobody can answer "who is on shift right now" without asking. The app collapses the employee side to a single button and gives the manager a live view.
An employee signs in with a username and password and sees one control that toggles between clock-in and clock-out. Managers get a separate dashboard showing who is currently clocked in, per-employee weekly hour charts built with Recharts, and a full entry log filterable by date range with durations calculated per shift. It runs on Next.js with Prisma over PostgreSQL, and the schema is deliberately minimal — an Employee and a TimeEntry with a nullable clockOut.
That nullable column is the core design decision. There is no isClockedIn flag anywhere; an open shift is simply the most recent TimeEntry whose clockOut is still null. A single POST /api/clock looks for that row and either closes it or opens a new one, so the button has no state of its own to get out of sync with the database.
Engineering notes
Clock state derived, never stored
An open shift is defined as the latest TimeEntry with a null clockOut, rather than a boolean on the employee record. A double-submitted request or a client that reloads mid-action cannot produce a user who is clocked in twice.
Two session realms with different lifetimes
Employees and managers get separate iron-session cookies with independent expiries — 30 days for employees so a shop-floor device stays signed in, 8 hours for managers so an unattended dashboard closes itself.
Authorization at the edge, not in handlers
Middleware gates the manager pages, the manager API and the clock endpoint by session role before any route code runs, redirecting pages and returning 401 for APIs. Adding a manager endpoint inherits protection from the path rather than needing its own check.