Church Organization Reference

An unofficial, static, local-first web app that makes the leadership and calling structure of The Church of Jesus Christ of Latter-day Saints easier to learn, reference, and plan. It renders the organization as an interactive, deep-linkable org chart driven by data cited to the General Handbook.

This is an independent project by a member of the Church. It is not produced, endorsed, or maintained by the Church. Always defer to the General Handbook and your local leaders. See the disclaimer below.

What it does (MVP)

• Reference view — browse a unit's callings grouped by organization, with each calling color-coded by how essential it is (required / important / optional) and its reporting lines shown.
  • Desktop: an interactive pan/zoom org-chart graph.
  • Mobile: a collapsible drill-down tree.
  • Both render the same data model, chosen responsively.
• Calling detail — a shareable, deep-linkable modal for any calling with its handbook links, stewardship (who it reports to / presides over / who covers it when vacant), a concise summary, meetings attended, and how the calling is filled (recommended → approved → extended → sustained → set apart).
• Fully modeled for a Ward today; Branch and Stake are scaffolded.

Planned features (documented, not yet built): a local Leadership view for tracking assignments per device, a Proposed changes view, search, tenure tracking, and more. See docs/ROADMAP.md.

Tech stack

• Vite + React + TypeScript
• Tailwind CSS for responsive styling
• React Router in hash mode (works on GitHub Pages)
• React Flow + Dagre for the desktop graph
• Zustand (localStorage) for the future Leadership view
• Vitest for tests; ESLint + Prettier

Everything compiles to static assets. No server, no APIs, no tracking.

Quick start

npm install
npm run dev        # start the dev server
npm run build      # type-check and build to dist/
npm run preview    # preview the production build
npm test           # run unit + data-integrity tests
npm run lint       # lint
npm run format     # format with Prettier

Requires Node 20+.

Project structure

src/
  domain/          Core types + the model builder (structure + strings -> resolved)
  data/            Language-agnostic structure data
    units/         Ward (active), Branch/Stake (scaffolds), unit registry
    meetings.ts    Meetings catalog (chapter 29)
    handbook.ts    Handbook URL helper (section number -> cited URL)
  i18n/            Locale strings, separated from structure
    locales/en/    English strings (common + per-unit)
  components/      UI: layout, tree, graph, calling modal, badges/legend
  views/           Route views: Home, Reference, Leadership (stub)
  leadership/      localStorage store skeleton for the future Leadership view
  hooks/, lib/     Small utilities
docs/              Architecture, data model, roadmap, handbook sync, contributing

Privacy model

Any data you enter (future Leadership view) is stored only in your browser's localStorage. It never leaves your device, is never uploaded, and is not shared between devices or users. Opening the app on another device is a fresh session by design. See docs/ARCHITECTURE.md.

Contributing

See docs/CONTRIBUTING.md, including how to add a language (the app is built to make localization a drop-in) and how the handbook data is kept accurate (docs/HANDBOOK_SYNC.md).

Disclaimer

This tool summarizes and links to the General Handbook as an entry point; it does not reproduce it. Interpretations such as requiredness tiers and reporting lines are the authors' best reading to aid planning and may not match the handbook exactly. The handbook is periodically updated. Always verify against the current General Handbook and follow the direction of your local leaders.

License

MIT. See package.json.