Note

    Family Shapes Intake Dossier

    Primary intake record for project architecture, workflows, source links, screenshots, and import constraints.

    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

    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

    8) Supporting Docs and External Resources

    Hydration Source Artifacts

    Artifact (relative repo path)Canonical URLTypeWhy hydrate this into note body
    ../../ROADMAP.mdROADMAP.mdmarkdownCaptures current priorities, milestone timing, and active dependency chain.
    ../../CHANGELOG.mdCHANGELOG.mdmarkdownProvides chronological implementation facts and production issue history (including RLS 403 status).
    ../../DOCS/project-master.mdDOCS/project-master.mdmarkdownDefines vision, personas, architecture snapshot, and source-of-truth matrix.
    ../../DOCS/database/README.mdDOCS/database/README.mdmarkdownCanonical DB migration + RLS workflow needed for operational node hydration.
    ../../AGENTS.mdAGENTS.mdmarkdownEncodes AI agent guardrails and process constraints useful for workflow node extraction.
    ../../.cursorrules.cursorrulestextHigh-signal concise policy file for migration and documentation guardrails.
    ./screenshots/03-key-feature-for-donors.pngUnknown (local artifact; not yet in remote default branch)imageVisual representation of donor-facing value proposition and UX tone for media enrichment.
    ../../src/App.tsxsrc/App.tsxtextSingle best route map for deriving product-surface and workflow graph nodes.

    9) Screenshot Gallery (with relative links + captions)

    1. Home/Landing

    2. Primary Workflow (Get Started)

    3. Key Feature (Donor Experience)

    4. Key Feature (Clinic/Cryobank Experience)

    5. Auth Entry

    6. Contact/Conversion Support

    7. Admin Route Gate

    8. Community Hub

    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

    domain:motherdomain:smcdomain:builderdomain:entrepreneurintake