Lineage

Ongoing

A genealogy and family tree application with interactive graph visualization

Next.jsReactMongoDBD3.jsNode.js

Motivation

Family history is often lost across generations. I wanted to build a tool that makes it easy to document, visualize, and share family trees in a beautiful and intuitive way.

Architecture

Next.js frontend with the App Router handles SSR and API routes. MongoDB stores the graph data structure representing family relationships. D3.js renders the interactive family tree visualization on the client.

Features

→ Interactive graph-based family tree visualization
→ Add, edit, and remove family members
→ Relationship types: parent, child, spouse, sibling
→ Profile pages for each family member with photos and notes
→ Export tree as PNG or PDF
→ Share trees with family members via link

Challenges

→ Representing complex family structures as a graph (handling multiple marriages, step-relations)
→ Implementing an efficient D3.js layout for large trees without performance degradation
→ Designing a MongoDB schema flexible enough for any family structure

Lessons Learned

→ Graph data structures are more appropriate than trees for real family relationships
→ D3.js requires significant patience but produces unmatched visualizations
→ Good schema design upfront saves massive refactoring time later

Future Plans

→ DNA match integration for discovering relatives
→ Historical photo scanning and enhancement with AI
→ GEDCOM format import/export for genealogy software compatibility