Family Graph App

Problem

Most family tree tools are either static images or clunky desktop software. Building an interactive, collaborative family tree on the web requires:

• A graph visualization that handles complex relationships (marriage, divorce, adoption)
• Real-time updates with optimistic UI
• A relational database schema that cleanly models persons and partnerships
• Smooth user experience for adding, editing, and connecting family members

Solution

A full-stack family tree application with React Flow at its core:

1. Graph UI: @xyflow/react renders nodes (persons) and edges (relationships) with drag, zoom, and layout
2. Data Layer: Prisma ORM with persons, partnerships, and parent_children junction tables
3. State Management: Zustand for client-side graph state, TanStack Query for server synchronization
4. CRUD Operations: Add/edit/delete persons and relationships with optimistic updates

Key Tech Decisions

React Flow over Cytoscape.js

React Flow (@xyflow/react) won because of its React-native API — custom nodes are React components, not DOM hacks. The plugin ecosystem (minimap, controls, background) works out of the box. Cytoscape.js would require imperative bridge code between the graph lib and React state.

Polymorphic relationships for partnerships

The partnerships table connects two persons without assuming gender roles — just partner1_id and partner2_id with a partnership_type enum (marriage, partnership, divorced). This cleanly supports all family structures.

Tailwind 4 early adoption

Used Tailwind CSS v4 for this project to evaluate the new CSS-first configuration approach. The @theme directive and CSS variables-based theming proved significantly cleaner than the old tailwind.config.js approach.

Metrics

Metric	Value
Entity Tables	3 core (persons, partnerships, parent_children)
Graph Library	@xyflow/react (React Flow)
Loading Strategy	TanStack Query + optimistic updates