WorkLog
Log the hours you work and see the month at a glance.
- Type
- Web app
- Role
- Design and development
- Year
- 2024
- For
- Personal project
- Stack
- Next.js 14 · TypeScript · Zustand · Supabase · Radix UI
Visit worklog.uzdowski.design (opens in a new tab)View code (opens in a new tab)
02
Context
A personal tool for logging the hours worked on any project, day by day.
03
Role
Personal project. Design and development; the code is public.
04
Idea
One month, one grid.
Every day is a cell. The colour is the number of hours - the same way a code-contribution graph shows activity.
05
Experience
- Sign in with Google or GitHub.
- Add a day’s hours (1–24) with a note; entries are keyed by date, so a second entry updates the day.
- The current month as a heatmap with details on hover, and a table that highlights days under four hours.
06
System
- InterfaceNext.js 14 App Routershadcn/ui on Radix
- StateZustand store, hydrated once from the server
- DataSupabase PostgresSupabase OAuth, session refreshed in middleware
07
Details
Server first, then client state
The page is a server component that checks the session and loads the month; a small client component hydrates the store exactly once, and writes go straight to Supabase.
08
Output
A live app and a public repository.
09
Reflection
The database schema lives only in the Supabase project, not in the repository. Today I would keep migrations in the repo, as my later products do.