Skip to content

Rootstory

website

A private, local-first family archive for mapping relationships, preserving life details and photographs, and carrying a complete family history between browsers.

Rootstory family tree workspace showing three generations and a selected profile

A private, local-first family archive for mapping relationships, preserving life details and photographs, and carrying a complete family history between browsers.

Rootstory is a web application created to make a real workflow clearer, faster, and easier to trust. It turns a focused product idea into something people can use, evaluate, and understand without needing to inspect the source code.

Why Rootstory exists

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.

The goal is not simply to add another tool. Rootstory is designed to reduce the friction around that problem and give people a more dependable way to complete the work.

What it delivers

  • 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.

The experience

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.

The project brings the important parts of the workflow into one coherent experience. Its interface and behavior are shaped around the people using it, while the implementation stays focused on predictable results and honest feedback.

What to know

Every product has boundaries. These are the most important considerations for Rootstory:

  • Parent, child, partner, former-partner, and sibling relationships must remain visually distinct without making the tree difficult to scan.
  • Portraits, contact details, notes, and living-person records are sensitive, so the application stores its working archive locally and does not silently upload it.
  • A complete backup must preserve people, relationships, photos, private fields, sharing records, and display settings, while interoperability formats necessarily carry less information.
  • The workspace must remain usable across desktop and small screens while keeping navigation, profile controls, and tree exploration understandable.
  • Browser-local storage provides no automatic device synchronization, so users must keep complete backups if the archive matters.

These limitations are presented openly so visitors can understand where the project works well, what it depends on, and what may change in future versions.

Current status

Publicly deployed; archives remain local to each browser. The current release demonstrates the core value of the project and the main end-to-end experience.

My role was product designer and frontend engineer, covering product strategy, relationship modeling, responsive interface design, browser persistence, data portability, testing, and deployment. The related case study explains the decisions and delivery process in greater depth for visitors who want the engineering story behind the product.

Project stack

  • TanStack Start
  • React 19
  • TypeScript
  • Tailwind CSS
  • Radix UI
  • Zod
  • IndexedDB
  • Netlify
  • GitHub Actions
  • Node.js Test Runner
  • System Design

Need help with this project? Get project support

Working through something similar?

Share your challenge, scope, and timeline to start a focused conversation.

Discuss a project