Treat relationships as graph data
Tree placement, generation labels, parent junctions, sibling grouping, and relationship views are derived from shared relationship records instead of separate presentation-only links.
Rootstory
website
A local-first family archive that combines a readable relationship graph with detailed profiles, timelines, recurring dates, version history, and complete backup restoration without requiring an account.
- Role
- Product designer and frontend engineer
- Scope
- Product strategy, relationship modeling, responsive interface design, browser persistence, data portability, testing, and deployment
- Status
- Publicly deployed; archives remain local to each browser
Problem
Family history becomes difficult to trust when relationships are visually ambiguous, important life details are scattered across tools, and an export cannot recreate the archive that a family carefully assembled.
Constraints
- C1
Parent, child, partner, former-partner, and sibling relationships must remain visually distinct without making the tree difficult to scan.
- C2
Portraits, contact details, notes, and living-person records are sensitive, so the application stores its working archive locally and does not silently upload it.
- C3
A complete backup must preserve people, relationships, photos, private fields, sharing records, and display settings, while interoperability formats necessarily carry less information.
- C4
The workspace must remain usable across desktop and small screens while keeping navigation, profile controls, and tree exploration understandable.
- C5
Browser-local storage provides no automatic device synchronization, so users must keep complete backups if the archive matters.
Architecture
TanStack Start and React render a responsive archive workspace around a typed family domain, IndexedDB persistence, versioned recovery, and explicit import/export boundaries.
01
Family domain
Typed people and relationship records drive generation levels, relatives, life events, tree ordering, and direct parent-child connectors from one shared graph.
02
Local persistence
IndexedDB stores the active archive and recent recoverable versions, with migration support for older browser-local records.
03
Archive workspace
Tree, People, Timeline, Calendar, profile, settings, and print surfaces share one responsive application shell with focused scrolling regions.
04
Portability boundary
A native Rootstory archive preserves the complete model; GEDCOM, CSV, text, HTML, PDF, and iCalendar exports serve narrower interchange and presentation needs.
Decisions
Keep the working archive local
The product works without an account and keeps sensitive family information in the current browser unless the user explicitly downloads or imports a file.
Separate complete backup from interoperability exports
The native backup is the restorable source of truth, while GEDCOM and spreadsheet exports are described honestly as partial interchange formats.
Use one visual language for relationship meaning
Parent-child, partner, former-partner, and sibling connections use distinct colors and line styles that match the tree legend.
Contribution
- Designed and implemented the landing page, responsive application shell, family tree, profile inspector, People, Timeline, Calendar, settings, and print workflows.
- Modeled people and relationships so parent pairs, children, siblings, partners, former partners, and generation ordering resolve consistently across the product.
- Implemented local persistence, recoverable version history, complete backup restoration, GEDCOM interchange, privacy-safe HTML, CSV, text, PDF, and iCalendar exports.
- Added validation at form and import boundaries plus automated coverage for search, dates, relationship direction, tree ordering, backup restoration, export privacy, and calendar recurrence.
- Prepared the repository for public GitHub collaboration and deployed the TanStack Start SSR build to Netlify.
Outcomes
- Families can build and inspect a multi-generation tree with direct, consistently styled relationship connectors.
- The complete archive format restores profiles, relationships, portraits, private fields, sharing records, and display settings together.
- People, Timeline, Calendar, version history, and print views reuse the same validated archive rather than maintaining separate copies.
- Twenty-two automated domain and portability tests, formatting, linting, type checking, and production builds run in the public CI workflow.
- The application is publicly available while keeping each visitor's working family archive local to their browser.
Product screenshot
Verified stack
- TanStack Start
- React 19
- TypeScript
- Tailwind CSS
- Radix UI
- Zod
- IndexedDB
- Netlify
- GitHub Actions
- Node.js Test Runner
- System Design
Working through something similar?
Share your challenge, scope, and timeline to start a focused conversation.