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.
- 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.
The 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.
Who it is for
Families documenting their lineage and relatives invited to view or help edit a shared tree, on web, Android and iOS.
Features
- 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
Pages & screens
- Your family trees
- Tree editor (canvas)
- Person side panel
- Export menu
- Search
- Share dialog
- Collaborators
- Notifications
- Public view-only share page
- Profile
Stack
- 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)
How 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.
Design 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