A bird's-eye view.
I was directly inspired by Buster Benson's project and decided to create my own version. Each square in the grid represents one week of your life, organized into decades. Fill in the weeks that matter to you and see your life at a glance.
This repo is the bones of what powers the live version on my site.
- Next.js 15 (App Router) with React 19
- TypeScript
- Supabase for data storage and authentication
- date-fns for date formatting
- CSS Modules for component-scoped styles
npm installRun the SQL in seed/records.sql in your Supabase project's SQL Editor. This creates the life_overview_records table with Row Level Security policies. Works fine alongside existing tables.
Copy .env.local.example or create .env.local in the project root:
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
NEXT_PUBLIC_BIRTH_DATE=2026-04-10
Set NEXT_PUBLIC_BIRTH_DATE to your own birthday (ISO format: YYYY-MM-DD). This is the single place that controls the "today" indicator and all birthday/age calculations.
npm run devOpen http://localhost:3000 to view it in the browser.
Builds the app for production. The output goes to the .next folder.
Records are stored in a Supabase life_overview_records table. Each record ties an event to a specific week of your life:
{
"week": 1,
"date": "April 15, 2020",
"title": "Example Heading",
"content": "Longer description shown in the tooltip on hover",
"tags": ["travel", "milestone"],
"public": true
}| Field | Description |
|---|---|
week |
How many weeks from your birth date to the event. Use a tool like this one to calculate. |
date |
Human-readable date string displayed in the tooltip. |
title |
Short label shown inside the week cell. |
content |
Optional longer text shown in the tooltip on hover. |
tags |
Array of strings for grouping/styling weeks (e.g. ["travel"]). Tagged weeks get a colored left border. |
public |
If false, the record is only visible when logged in. |
Some records can be marked as private (public: false). These are hidden from anonymous visitors and only appear when you're logged in.
- Visit
/loginto sign in with email and password - Auth is handled by Supabase Auth with JWT sessions stored in cookies
- Row Level Security policies on the database automatically filter records based on auth state
To create a login, go to your Supabase dashboard > Authentication > Add user.
The current week is highlighted automatically based on NEXT_PUBLIC_BIRTH_DATE in your .env.local. No code changes needed.
Records with tags get a colored left border on their week cell. The tag-to-color mapping lives in components/WeekFilled.tsx (TAG_COLORS). Add or change colors there as needed.
Weeks 300-304 have a red background by default as a demo. This is controlled by isExampleWeek() in lib/helpers.ts — remove or modify the set of IDs there.
app/ # Next.js App Router pages
layout.tsx # Root layout (HTML shell, metadata, global CSS)
page.tsx # Home page (server component, fetches from Supabase)
login/page.tsx # Login page
components/ # React components
Overview.tsx # Grid container (server component)
Decade.tsx # One decade row (server component)
WeekGrid.tsx # Client boundary — week rendering loop
Week.tsx # Core logic: which week variant to render
WeekFilled.tsx # Week with record data
WeekBirthday.tsx # Birthday milestone marker
WeekToday.tsx # "Today" indicator
Tooltip.tsx # Hover tooltip (polymorphic)
AuthButton.tsx # Login/logout toggle
LoginForm.tsx # Login form
styles/ # CSS Modules
lib/ # Shared utilities
types.ts # TypeScript interfaces
helpers.ts # Week math, class builders
supabase/ # Supabase client setup (server + browser)
middleware.ts # Auth session refresh on every request
seed/records.sql # Database schema + seed data
Thank you to Buster Benson for sharing his work publicly and inspiring this project.