Concept · built with AI tools

Family Tree Builder v2 Map every generation of your family on one canvas

A family tree app where you start with your own card and grow the tree with seven relationship actions on an infinite, auto-arranged canvas. Every card shows how that person relates to you (Father, Aunt, Cousin), and the tree can be searched, shared, exported and edited offline. The frontend is complete with a mocked backend (IndexedDB), ready for Firebase and Capacitor mobile builds.

See the screensBuild something like this
Family Tree Builder v2: cover screen
Status
Concept · built with AI tools
Type
Web app
Category
Consumer web & mobile app
Version
v2 (package 0.1.0)
Built with
Next.js 15, React 19, TypeScript …

This is a self-initiated concept, designed and built by Srini with AI tools. It is not a real company or client project.

01The problem

Families want to record every branch and generation in one place, but most tree tools are cluttered and make relationship-keeping manual. The PRD called for password-free sign-in, an engine that automatically links parents, siblings, spouses and children, and a canvas that stays fast even with very large trees.

02Who it is for

Families documenting their lineage and relatives invited to view or help edit a shared tree, on web, Android and iOS.

03Features

  • Password-free sign-in: Google, Apple or mobile OTP (simulated in preview)
  • Infinite canvas with pan, zoom, minimap and fit-to-screen
  • Seven relationship actions from the green + on each card
  • Relationship engine that auto-links parents, siblings, spouses and children
  • Kinship labels relative to 'Me' (Father, Uncle, Cousin…)
  • Search by name, gender or relationship with highlight and focus
  • Edit, photos, Trash/restore, merge duplicates, undo/redo
  • Export to PDF (A3), PNG, JPG, Excel and CSV
  • Public view-only link and Owner/Editor/Viewer roles
  • Offline editing with IndexedDB and a service worker
  • Virtualised rendering above 300 nodes; 1,000-member demo tree
  • Light/dark mode and responsive layout

04Pages & screens

  • Sign in
  • Your family trees
  • Tree editor (canvas)
  • Person side panel
  • Export menu
  • Search
  • Share dialog
  • Collaborators
  • Notifications
  • Public view-only share page
  • Profile

05Stack

Next.js 15
React 19
TypeScript
Tailwind CSS
React Flow (@xyflow/react)
Zustand + IndexedDB (idb-keyval)
jsPDF, ExcelJS, html-to-image
Vitest
Capacitor (planned mobile wrapper)

06How I built it with AI

Built with an AI coding assistant from Srini's Family Tree Builder PRD. The README maps every PRD section (§3 Auth through §22 theming) to the screen or file where it can be reviewed, which shows the spec-to-build workflow. The AI also generated four docs — a hybrid mobile development guide, a user manual, a technical specification and a roadmap/enhancement guide — plus unit tests for the relationship engine and layout (including a 10,000-member layout test). The codebase includes 'AI-ready hooks' (lib/ai.ts) for duplicate detection and suggestions, written as simple heuristics with signatures meant to be swapped for a cloud model later. No prompt file was supplied.

07Design highlights

Highlight 01

Relationship consistency engine written as pure, unit-tested functions so adding 'father' or 'spouse' keeps every related link correct

Highlight 02

Every card is labelled relative to 'Me', which also powers search by relationship (try 'uncle' or 'cousin')

Highlight 03

Generation-layered auto layout with spouses side by side and colour-coded lines by gender

Highlight 04

Backend deliberately mocked behind the same surface as Firebase Auth/Storage, so the frontend can be reviewed end-to-end today

Highlight 05

Built for scale: virtualised canvas rendering above 300 nodes and a 1,000-member demo tree