Personal product on this site · 2024 – 2026
Family Tree Builder
A drag-and-drop family tree editor with automatic layout, read-only sharing by email, photos and export, rebuilt from a 2024 prototype into a signed-in product with private storage.
At a glance
- Browser editor
- Flask API
- Per-user folder in Cloud Storage
- Read-only share
Context
Families keep their history in scattered notes and photos. The first version (2024) used react-d3-tree; a React Flow version followed in April 2025.
Problem
Make a tree quick to build on a phone or laptop, keep people's details private, and let relatives view a tree without being able to change it.
My role
Product design, architecture and full-stack build, end to end.
Approach and architecture
- React Flow editor with dagre auto-layout, top-to-bottom or left-to-right
- Add parent, sibling and several people at once; a "Myself / Primary" person links everyone
- Sign-in with Google, Microsoft or LinkedIn; each user's trees in their own private folder
- Read-only sharing by email, with dates of birth, notes, emails and mobiles shown only if the owner chooses
- Export to JSON, PNG and Print/PDF; import of both older file formats
- Enforced Content Security Policy, privacy page, export and delete-my-account controls
Stack
- React 18
- @xyflow/react
- dagre
- Vite
- Flask 3
- Authlib
- Google Cloud Storage
- App Engine
Outcome
- Two earlier versions (2024 and April 2025) merged into one editor that still opens their files
- Trees built without signing in never leave the browser
- Photos capped at 250 KB each; unused photos are removed after a day
What I'd do next
- Move the build to Node 20 and Vite 5/6
- Remove the two older Family Tree builds once the new editor has run in production