The visible feature was only the surface
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 system also had to respect concrete constraints. 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.
My role covered product designer and frontend engineer, with responsibility for product strategy, relationship modeling, responsive interface design, browser persistence, data portability, testing, and deployment.
I turned the constraints into boundaries
TanStack Start and React render a responsive archive workspace around a typed family domain, IndexedDB persistence, versioned recovery, and explicit import/export boundaries.
Tree placement, generation labels, parent junctions, sibling grouping, and relationship views are derived from shared relationship records instead of separate presentation-only links.
The product works without an account and keeps sensitive family information in the current browser unless the user explicitly downloads or imports a file.
The native backup is the restorable source of truth, while GEDCOM and spreadsheet exports are described honestly as partial interchange formats.
Parent-child, partner, former-partner, and sibling connections use distinct colors and line styles that match the tree legend.
The key decision: Treat relationships as graph data.
The implementation had to prove the model
I delivered the work across the full path: 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.
The result is concrete: 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 senior engineering lesson was that solving the visible workflow is only half the job. The architecture must also make constraints, failure modes, evidence, and ownership explicit enough for the next change to remain safe.