Skip to main content
Family Graph screenshot
Back to Projects
Web App

Family Graph

I wanted to see our family's journey as a living, connected map.

Interactive knowledge graph that maps your family's interests, values, goals, and growth — all connected visually.

React 19 TypeScript xyflow Zustand 5 Fireworks AI Tailwind CSS v4

The Problem

Family life is rich and interconnected, but we track it in scattered lists and calendars. There’s no way to see the big picture — how your kids’ interests connect to your values, how events shape goals, how growth happens across a family.

The Solution

Family Graph is a knowledge graph application that visualizes your family’s growth — interests, values, events, and goals — all connected in an interactive graph you can explore, expand, and reflect on.

Key Features

  • 5 entity types — Person, Interest, Value, Event, Goal
  • 8 relationship types — Participates, Practices, Strengthens, Contributes, Influences, Supports, Learns, Achieves
  • Interactive graph — Custom xyflow node types with drag, zoom, and connection editing
  • AI extraction — Chat with AI to extract entities and relationships from natural conversation
  • 5 views — Dashboard, Graph, Chat, Extract, Timeline
  • Local-first — All data in localStorage with debounced persistence

Why I Built This

I wanted to see our family’s journey holistically — not just a timeline of events, but a living map of how our interests, values, and goals interconnect and evolve together.

Screenshots

Family Graph screenshot
Family Graph screenshot