← Back

Quiet Verse

A calm, offline Bible app — vibecoded with Claude

Product: Quiet Verse (Bible App)
Role: Designer & Vibecoder
Status: Shipped
Tools used: Claude Code, React, Capacitor, Tailwind CSS
[App Screenshot — Home Page]

A peaceful scripture reading app designed for calm, focused Bible study. Built entirely through AI-assisted "vibecoding" — conversational prompts with Claude Code that generated a production-ready React app wrapped as a native mobile app with Capacitor.

The Challenge

Most Bible apps are cluttered with ads, social features, and notifications — the opposite of what scripture reading should feel like.

The goal was to create a distraction-free, offline-first Bible experience that feels like holding a beautifully typeset book.

Design Decisions

[App Screenshot — Reader Dark Mode]
  • Cream & Gold palette — warm, paper-like tones that feel timeless rather than digital
  • Dual typography — Inter (clean sans-serif) for UI, Cormorant Garamond (elegant serif) for scripture text
  • Minimal chrome — no tabs, no sidebars, just the text and subtle navigation
  • Dark mode — deep navy with warm accents for nighttime reading
  • 44px touch targets — Apple HIG compliant, comfortable one-handed use

Key Features

[App Screenshot — Bookmarks]
  • Complete KJV Bible (66 books, 31,102 verses) — all offline
  • Verse bookmarking with haptic feedback
  • Adjustable font size for readability
  • Reflection timer with breathing cues
  • Smooth dark/light mode transitions
  • Lazy-loaded books (initial load under 114 KB)

The Vibecoding Process

This app was built entirely through conversation with Claude Code — no manual coding. The process:

  • Described the vision and aesthetic in natural language
  • Claude generated the React components, styling, and data architecture
  • Iterated on feel and interactions through conversational feedback
  • Wrapped as a native app with Capacitor in a single session
  • Added all 66 books of the Bible from public domain KJV data

Total time from idea to working iOS app: ~3 hours

Technical Architecture

  • React 19 with HashRouter for native file:// protocol support
  • Tailwind CSS with custom CSS variables for theming
  • localStorage for offline data persistence (bookmarks, preferences)
  • Capacitor for iOS/Android native shell
  • Self-hosted fonts for complete offline operation
  • Lazy loading — each Bible book loads only when opened

Try It

Experience Quiet Verse in your browser — no install required.

Open Quiet Verse →