Molecule.dev

Family Tree

Content & Social · React + Node (Express) · 12 @molecule/* packages

Ancestry-lite family tree builder with people, relationships, a navigable tree view, and per-person life timelines — with built-in Stripe-backed subscription tiers

Open in Molecule

Try it

Opens instantly. Runs on sample data, so changes reset on reload.

Open preview in a new tab ↗View workspace ↗

What is inside

Screens (17)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Pricing /pricing
  • About /about
  • Privacy /privacy
  • Terms /terms
  • Tree /tree (signed in)
  • People /people (signed in)
  • PersonDetail /people/:id (signed in)
  • AddPerson /people/new (signed in)
  • EditPerson /people/:id/edit (signed in)
  • AddRelative /people/:id/add-relative (signed in)
  • Settings /settings (signed in)
  • PlanUpdated /plan-updated (signed in)

Data model (4 tables)

  • people — id, user_id, first_name, last_name, maiden_name, gender, birth_date, birth_place, …
  • relationships — id, user_id, from_person, to_person, kind, created_at
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • payments — id, createdAt, updatedAt, userId, transactionId, productId, platformKey, data, …

API (5 handlers)

  • \_graph api/src/handlers/_graph.ts
  • \_seed api/src/handlers/_seed.ts
  • people api/src/handlers/people.ts
  • profile api/src/handlers/profile.ts
  • tree api/src/handlers/tree.ts

Built from 12 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

  • DATABASE_URL PostgreSQL connection string
  • STRIPE_SECRET_KEY Stripe secret API key (sk_test_... in test mode)
  • STRIPE_WEBHOOK_SECRET Stripe webhook signing secret (whsec_...)

The @molecule/* packages are Apache-2.0. The app you build from this template is yours to export and self-host. Licensing