Runetrace
A private family archive — digitizing pen-and-paper records and photo albums from Daniel’s grandparents’ era. The centrepiece is a 3D force-directed graph where nodes are people and edges are relationships. Invite-only, mobile-first, and built for a non-technical primary user.
| Client | Personal project |
| Role | Interaction Designer — Product Design, Full-Stack Development |
| Deliverable | Progressive Web App (Next.js + Supabase) — in development |
| Venue | runetrace.org |
Overview
Runetrace is a family history keeper built for three tiers of users — Admins, Editors, and Viewers — with accounts distributed by invite rather than open registration. The primary data-entry user is Daniel’s dad: not a developer, not a power user, but someone with deep knowledge of family history and a phone full of scanned photos from his parents’ albums.
The graph view is the core of the experience. Every person in the archive is a node; every relationship is an edge. The 3D force-directed layout makes the shape of the family immediately legible — clusters of siblings, generational layers, branches that connect through marriage. Tapping a node opens a slide-up profile sheet without leaving the graph.
Data is modelled against the GEDCOM standard from day one — flexible date handling, relationship variants (biological, adoptive, step, half, foster), and a schema that supports export to Ancestry or any other platform if that ever becomes desirable.
The Challenge
3D for a non-technical user
The primary user is Daniel’s dad. A 3D interface that requires explanation is a failed interface. Touch controls, tap targets, and the full interaction model had to be immediately legible on a phone.
Mobile-first graph UX
Force-directed 3D graphs and mobile touch create genuine conflict — orbit, pan, zoom, and page scroll all compete for the same gestures. The solution required a dedicated full-screen graph mode to resolve it cleanly.
Import workflow for scanned photos
Dad’s source material is decades of family photos sitting in Google Drive. The upload workflow needed to meet him where his files already lived rather than requiring a separate transfer step.
Controlled access for a family audience
Living people in the archive need privacy controls. The three-tier role model lets Daniel manage what gets published, with Editors able to contribute without overwriting each other or exposing unreviewed data.
Approach
Graph UX & Mobile Interaction
The graph lives on its own full-screen view — a deliberate architectural decision to eliminate the scroll-versus-orbit conflict that makes most mobile graph interfaces unusable. Entering the graph is a single tap; exiting returns to the main navigation without losing position.
Touch controls follow platform conventions: single finger to orbit, two-finger pinch to zoom, two-finger drag to pan. Tapping a node opens a slide-up profile sheet (built with Vaul) rather than navigating to a new page — keeping the graph in context while surfacing the full person record.
3D is the default. 2D is a first-class alternative, not a fallback — both modes are supported by the same react-force-graph library, so the interaction model is identical between them. Users who find 3D disorienting can switch without losing any functionality.
Person Profiles & Relationship Model
Person profiles support the kind of partial, uncertain data that real family records contain — approximate birth decades, unknown birthplaces, living individuals with reduced visibility for Viewers. The data model accommodates this from the start rather than treating it as an edge case.
Relationships are typed and bidirectional. Adding a parent automatically creates the child link on the other profile. Relationship variants — biological, adoptive, step, half, foster — are first-class fields rather than freetext notes, keeping the graph accurate without requiring manual cross-referencing.
The schema maps directly to GEDCOM tags. Export to Ancestry or a similar platform is not a current priority, but the data will support it without a migration when the time comes.
Photo Import & Storage
The primary upload workflow is Google Drive import via the Google Picker API — the entry point Dad actually uses. Decades of family photographs and scanned documents already live in Drive; requiring a separate download-and-re-upload step would have made the tool a chore rather than a tool.
Uploads run through a Next.js API route that handles Sharp.js resize and compression before writing to Supabase Storage. PDF support covers scanned letters, certificates, and documents stored as artifacts alongside photos — the distinction between a photo and a document is preserved in the data model.
Photos can be attached to a specific person, left in the shared family album, or associated with multiple people. The gallery on each profile surfaces everything linked to that person.
Access Model & Editor Flow
Three roles govern what each user can do. Admins have full CRUD and account management. Editors can add and edit content, but new person profiles they submit enter a pending queue rather than publishing immediately. Viewers are read-only — suitable for extended family members who want to browse without the ability to make changes.
No self-signup exists. Every account is created by an Admin via Supabase invite-by-email. This keeps the archive genuinely private — access is a conscious decision, not something that happens by sharing a URL.
Living individuals have a visibility flag that suppresses sensitive details — birth dates, current location — for Viewer-tier accounts. The profile still appears in the graph; it just exposes less.
Outcome
Runetrace is in active development. The data model and Supabase schema are complete. Auth, person profiles, and relationship management are built. The graph view is the current focus — integrating react-force-graph-3d with the mobile touch model and the slide-up profile sheet.
The photo upload pipeline and Google Drive import are scoped for the next milestone. Remaining work: the Editor suggestion queue, PWA service worker configuration, and a Dad usability review before the archive goes live for the family.
The Supabase Pro upgrade — covering both Runetrace and Dreamer Graph on a single org — is planned to coincide with the first live deployment to family members.