Family Shapes Intake Dossier

Source Summary

Project Intake - Family Shapes Project Name: Family Shapes Repository: [https://github. com/maggielerman/family-shapes](https://github.

Imported Context

Project Intake - Family Shapes

Project Name: Family Shapes Repository: https://github.com/maggielerman/family-shapes Live URL(s): https://familyshapes.com, https://www.familyshapes.com Source Repo Path: /Users/maggielerman/Github/family-shapes

1) Executive Summary

Family Shapes is a React + Supabase product for donor-conceived family relationship mapping, collaboration, donor workflows, and community content. The current codebase and roadmap indicate a platform-in-transition: core family tree collaboration and RLS permissions work is active, with a documented unresolved 403 issue on collaborator inserts and a broader architecture split planned (Family Platform, SaaS Platform, Donor Platform).

For Hyphenomenon import, this project should be represented as a supernode with linked technical, product, workflow, and governance nodes. The repo contains strong process documentation (roadmap/changelog/agents/database), clear route structure, and CI workflows suitable for graph hydration.

2) Project Type and Domain

• Project type: Web application (SaaS-style, multi-role platform)
• Domain: Donor-conceived family networks, fertility clinic/cryobank workflows, donor privacy and communication
• Primary user groups: Families, donors, clinics/cryobanks, admins, internal engineering
• Current phase (per roadmap): Database Architecture Refactoring (Q3 2025) with immediate priorities on permissions/sharing/security and platform separation

3) Repository and Live URLs

• GitHub repo: https://github.com/maggielerman/family-shapes
• Live app: https://familyshapes.com
• Live app (www): https://www.familyshapes.com
• Internal docs index: ../../DOCS/README.md
• Roadmap: ../../ROADMAP.md
• Changelog: ../../CHANGELOG.md
• Agent/process guardrails: ../../AGENTS.md

4) Product/User Journey Summary

• Public discovery journey: landing (/) -> role-specific marketing pages (/for-donors, /for-clinics-and-cryobanks) -> get-started (/get-started) -> auth/contact.
• Primary onboarding path: /get-started uses role/value proposition + waitlist form components (src/pages/GetStarted.tsx).
• Authenticated family workflow (route-level): /dashboard -> /family-trees -> /family-trees/:id -> /family-trees/:id/settings plus people/connections/media.
• Donor workflow (route-level): /donor/auth -> /donor/dashboard -> /donor/profile -> /donor/health -> /donor/privacy -> /donor/communication.
• Community workflow: /community (public read), with protected creation routes for forums/blog/resources.
• Admin workflow: /admin behind AdminProtectedRoute; unauthenticated users are redirected to auth (/auth?next=/admin observed on live site).

5) Architecture and Stack Summary

• Frontend: React 18 + TypeScript + Vite (package.json, src/App.tsx)
• UI/system: Tailwind CSS + Radix/shadcn-style component composition
• Data/auth: Supabase JS client + Supabase Auth + Postgres with RLS
• State/data-fetching: TanStack React Query
• Visualization: XYFlow/React Flow + Dagre + ELK + D3
• Routing model: react-router-dom with public, protected, donor-protected, and admin-protected routes in src/App.tsx
• Backend functions: Supabase Edge Functions in supabase/functions/ (send-contact-form, send-invitation, send-sharing-link, etc.)
• Testing: Vitest + Playwright; CI smoke and DB drift workflows in .github/workflows/
• Database operations: Makefile-driven Supabase migration workflow (make db/reset, make db/check, make db/diff, make db/types, make db/push)

6) Key Workflows and Operational Flows

• Build/test flow
  • npm run typecheck
  • npm run build
  • npm run test:smoke
  • npm run test:e2e (Playwright)
• Database migration flow
  • Prepare env (SUPABASE_PROJECT_REF, SUPABASE_DB_PASSWORD)
  • make db/reset -> make db/check -> schema changes -> make db/diff name=... -> make db/reset -> make db/check -> make db/types -> PR -> make db/push after approval
• Docs operations flow
  • npm run docs:frontmatter -> npm run docs:manifest -> npm run docs:links -> npm run docs:build
  • Triggered in .github/workflows/docs-site-sync.yml
• Auth/access control flow
  • Route guards: ProtectedRoute, DonorProtectedRoute, AdminProtectedRoute
  • DB/RLS strategy centered on family_tree_collaborators, family_tree_invitations, helper functions, and related migrations

7) AI Context: Prompts, Chats, Agent Workflows

• Primary agent policy file: ../../AGENTS.md
  • Requires roadmap/changelog review before work
  • Enforces migration-first DB changes and Makefile command usage
• Secondary automation rules: ../../.cursorrules, ../../.zencoder/rules/repo.md, ../../.zencoder/rules/architecture.md
• Execution/checkpoint pattern: ../../DOCS/development/checkpoint-workflow.md (ET timestamping via script)
• Observed AI/governance themes for import
  • Strong policy around DB drift prevention and RLS-safe migrations
  • Documentation synchronization expectations (ROADMAP + CHANGELOG + DOCS index)
  • Project-numbered planning docs under DOCS/PROJECTS/

8) Supporting Docs and External Resources

• Core internal references
  • ../../DOCS/README.md
  • ../../DOCS/project-master.md
  • ../../ROADMAP.md
  • ../../CHANGELOG.md
  • ../../DOCS/database/README.md
  • ../../DOCS/features/implemented-features.md
• External technical references
  • Supabase Docs
  • React Flow / XYFlow Docs
  • Vite Docs

Hydration Source Artifacts

Artifact (relative repo path)	Canonical URL	Type	Why hydrate this into note body
../../ROADMAP.md	ROADMAP.md	markdown	Captures current priorities, milestone timing, and active dependency chain.
../../CHANGELOG.md	CHANGELOG.md	markdown	Provides chronological implementation facts and production issue history (including RLS 403 status).
../../DOCS/project-master.md	DOCS/project-master.md	markdown	Defines vision, personas, architecture snapshot, and source-of-truth matrix.
../../DOCS/database/README.md	DOCS/database/README.md	markdown	Canonical DB migration + RLS workflow needed for operational node hydration.
../../AGENTS.md	AGENTS.md	markdown	Encodes AI agent guardrails and process constraints useful for workflow node extraction.
../../.cursorrules	.cursorrules	text	High-signal concise policy file for migration and documentation guardrails.
./screenshots/03-key-feature-for-donors.png	Unknown (local artifact; not yet in remote default branch)	image	Visual representation of donor-facing value proposition and UX tone for media enrichment.
../../src/App.tsx	src/App.tsx	text	Single best route map for deriving product-surface and workflow graph nodes.

9) Screenshot Gallery (with relative links + captions)

1. Home/Landing

   • ./screenshots/01-home.png
   • 
   • Caption: Main public landing page (/) with primary navigation and CTA entry points.

2. Primary Workflow (Get Started)

   • ./screenshots/02-primary-workflow-get-started.png
   • 
   • Caption: Core onboarding/workflow entry (/get-started) combining value proposition and waitlist funnel.

3. Key Feature (Donor Experience)

   • ./screenshots/03-key-feature-for-donors.png
   • 
   • Caption: Donor-specific feature/value screen (/for-donors) showing privacy/control-oriented positioning.

4. Key Feature (Clinic/Cryobank Experience)

   • ./screenshots/04-key-feature-for-clinics.png
   • 
   • Caption: Organization-facing value proposition (/for-clinics-and-cryobanks).

5. Auth Entry

   • ./screenshots/05-auth-sign-in.png
   • 
   • Caption: Sign-in screen (/auth) used by protected and redirect flows.

6. Contact/Conversion Support

   • ./screenshots/06-contact.png
   • 
   • Caption: Contact funnel page (/contact) supporting inquiry and conversion workflows.

7. Admin Route Gate

   • ./screenshots/07-admin-route-or-auth-gate.png
   • 
   • Caption: Accessing /admin redirects unauthenticated users to /auth?next=/admin.

8. Community Hub

   • ./screenshots/08-community.png
   • 
   • Caption: Public community surface (/community) for forums/blog/resources.

10) Candidate Import Nodes and Relationships

• Project supernode

  • Label: Family Shapes
  • Suggested slug: family-shapes

• Major node candidates

  • Repo node: maggielerman/family-shapes
  • Product node: Family Shapes Web App
  • Runtime/stack nodes: React, TypeScript, Vite, Supabase, React Query, XYFlow, D3/Dagre/ELK
  • Docs/governance nodes: ROADMAP.md, CHANGELOG.md, AGENTS.md, DOCS/project-master.md, DOCS/database/README.md
  • Workflow nodes: DB Migration Workflow, Docs Build Workflow, CI Smoke Workflow, DB Drift Check Workflow
  • Experience nodes: Family Journey, Donor Journey, Clinic/Cryobank Journey, Community Journey, Admin Journey
  • Prompt/agent nodes: .cursorrules, .zencoder/rules/*, checkpoint-workflow
  • Media nodes: screenshot set in docs/intake/screenshots/

• Likely edges

  • Family Shapes -> has_repo -> maggielerman/family-shapes
  • Family Shapes Web App -> deployed_at -> familyshapes.com
  • Family Shapes Web App -> uses -> Supabase, React, Vite, XYFlow
  • AGENTS.md -> governs -> DB Migration Workflow
  • ROADMAP.md -> prioritizes -> P1.1/P1.2/P2/P1.3/P7
  • CHANGELOG.md -> records -> RLS policy/migration events
  • src/App.tsx -> defines_routes_for -> `Family Journe

...[truncated for intake]

Provenance

• Source file: family-shapes/DOCS/intake/hyphenomenon-project-intake.md
• Source URL: https://github.com/maggielerman/family-shapes/blob/main/DOCS/intake/hyphenomenon-project-intake.md