Skip to main content

DevoteMe user documentation — design

Goal​

Add user-facing documentation for DevoteMe (the Christian devotional PWA in DevoteMe-Web) to ald-website, following the same product-docs pattern already used for Zander. Scope is the end-user app only — no backend/admin/API docs, since DevoteMe's backend and admin panel are operated by us and aren't something an end user configures.

Content basis​

Verified directly against DevoteMe-Web (not the stale copy in products.ts):

  • Prayers — browse prayers grouped by category; users can also submit their own personal prayers (visible only to them, filterable via "Mine"); prayers can be favorited (heart icon); each prayer supports voice-guided narration via ElevenLabs.
  • Verse of the Day — one scripture verse per day, greeted by the user's name, cached locally for offline reading.
  • Daily Devotion — an in-depth daily devotional reading, same personalization and offline caching as Verse of the Day.
  • Dashboard / progress — a personalized greeting, today's completion state across prayer/devotion/verse, and a rolling streak counter across the last 60 days.
  • Account settings — display name, a separate "comment nickname" used when posting, email, and password.
  • Installing the app — confirmed via public/manifest.json: installable as a standalone PWA on Android/iPhone/Desktop, with home-screen shortcuts to Prayers/Verse/Devotion, and IndexedDB-backed offline caching.

Structure​

docs/products/devoteme/
  _category_.json
  index.md
  features/
    _category_.json
    index.md
    prayers.md
    verse-of-the-day.md
    daily-devotion.md
    progress-streaks.md
    account-settings.md
    installing-the-app.md

This mirrors docs/products/zander/ (an index.md overview plus a features/ folder with one page per feature), minus the admin/ and api-reference/ sections Zander has, which don't apply here.

Each feature page follows Zander's feature-page shape: a short intro, a screenshot placeholder callout (:::note 📸 Screenshot: ...) where a real screenshot will eventually go, and plain-language explanation of what the feature does and how to use it — no implementation details (no mention of ElevenLabs, IndexedDB, Prisma models, or API routes) since this is user-facing documentation, not a developer/admin reference.

Product listing changes​

src/data/products.ts's existing devoteme entry is inaccurate (describes Bible reading plans, journalling, and verse highlighting — none of which exist — and is marked in-development / noindex: true). Update it to match the real app:

  • description: rewritten to describe the actual app (daily prayer, verse of the day, devotion, streak tracking, offline PWA)
  • features: rewritten to the real feature list
  • status: 'available'
  • noindex: false
  • docsUrl: /docs/products/devoteme

Landing page​

Add src/pages/products/devoteme.tsx, modeled on src/pages/products/zander.tsx: hero (with a screenshot placeholder), a feature grid (highlights drawn from the real feature list above), a "how it works" steps section, and a closing CTA linking to the docs. Uses DevoteMe's existing brand color (#7C3AED) from products.ts. No admin/API framing, since none of that is public-facing.

Out of scope​

  • Backend/admin panel documentation (hosted and operated by us)
  • API reference (no public API surface for end users)
  • Real screenshots (placeholders only, to be swapped in later)