Interactive family knowledge graph
FamTree
A private family archive designed as a navigable system—not a spreadsheet, slideshow or public social network.
Family history is relational data. The interface should make those relationships legible while treating the people inside them as private by default.
Follow one branch
through the archive.
Select a person to trace their lineage. The demonstration mirrors the interaction model without using anyone from the real family tree.
No production dataMake complexity visible.
Keep identity protected.
The project began with a family tree stored as a presentation. That format preserved names, but it could not express changing relationships, support search, or let relatives propose corrections safely.
The core design decision was to separate the family’s canonical record from proposed edits. Members can explore the archive and submit a change; administrators decide what becomes part of the shared tree.
-
01
Data modelMember ↔ Family unit
Relationships are first-class records.
People and family units are modeled separately, so parents, children, spouses and multi-generation branches remain explicit instead of being buried inside one profile.
-
02
NavigationCanvas + minimap
A large tree needs spatial memory.
Pan, zoom, generation bands and a minimap help people keep their place while moving through a relationship graph that is much larger than a single screen.
-
03
TrustSubmit → Review → Publish
Edits enter a review queue.
Invite-only authentication protects the archive. Proposed changes carry the submitter’s identity, and only an administrator can promote them to canonical family data.
-
04
QualityTypes + rules + tests
Validation exists at several boundaries.
Typed models, form schemas, Firestore rules and interface tests reduce the chance that invalid relationships or unreviewed updates reach the shared tree.
A small interface
with firm boundaries.
React application
Tree canvas, search, timeline, profiles and forms
Firebase Auth
Firestore
Cloud Storage
Canonical tree
Verified members, family units and settings
From static document
to living system.
FamTree became an end-to-end application for exploring relationships, finding people, reviewing history and managing proposed corrections. It demonstrates graph-oriented thinking, product judgment and privacy-aware engineering in one system.
The public presentation deliberately shows no production records, personal email addresses or family photographs.
- InterfaceReact 19 · TypeScript · Tailwind
- GraphD3 zoom · minimap · generation bands
- State & formsZustand · React Hook Form · Zod
- BackendFirebase Auth · Firestore · Storage
- VerificationVitest · Testing Library · security rules
DataDQ
An AI-assisted dataset health analyser for profiling, anomaly detection and controlled cleaning.