An interactive, multi-language Bible explorer built on Reformed/Evangelical theology. Browse all 66 books of the Protestant canon organized by division, study structured theological commentary, trace the redemptive arc through an interactive timeline, and explore key biblical characters — in Spanish, English, and Portuguese.
README also available in Spanish: README.es.md
- Canonical shelf — 66 books organized into 10 divisions (Pentateuch, Historical, Wisdom, Major Prophets, Minor Prophets, Gospels, Acts, Pauline Epistles, General Epistles, Revelation) with color-coded era bands
- Multi-tab book viewer — Overview, Theology, Purpose, Canon Position, History, Key Verses, and Sources per book
- Systematic theology integration — Westminster Confession chapter anchors and Covenant Theology framework mapped to each book
- Interactive chapter timeline — Horizontal scrollable timeline with era bands and character nodes; click any character for bio, typology, and NT references
- Division tours — Category-level overviews with Christological focus, covenant period, and Reformed distinctives before drilling into individual books
- Chapter summaries + audio player — A bottom "AUDIO · CHAPTERS" panel streams dramatized Bible audio from Google Cloud Storage per language (es = RVR60, en = MSB, pt = ACF); audio auto-advances chapter by chapter and individual chapters are deep-linkable
- Trilingual — Spanish (es), English (en), Portuguese (pt); language is persisted in the URL so any view can be shared or bookmarked
- URL-based navigation — Every view state is encoded in the hash (e.g.
#book/1/theology/en) for shareable, refreshable deep links - Session persistence — Last language, location, and chapter are stored in
localStorageand restored automatically on next visit - Scholarly sources — Tiered bibliography per book covering primary, secondary, and reference works
| Layer | Technology |
|---|---|
| UI | React 19 |
| Build | Vite 8 |
| Language | JavaScript (ES Modules) |
| Styling | Inline CSS-in-JS with a unified color token system |
| Data | Static JSON files loaded at runtime |
| Linting | ESLint 10 with React Hooks and React Refresh plugins |
ebpi/
├── canon/ # React application
│ ├── src/
│ │ ├── App.jsx
│ │ ├── CanonShelf.jsx # Main routing controller
│ │ ├── constants.js # Color tokens, book registry, UI strings
│ │ ├── utils.jsx # Verse linking, URL builders
│ │ ├── adapters/
│ │ │ └── canonToViewer.js # CANON schema → component shapes
│ │ ├── components/
│ │ │ ├── IndexPage.jsx # OT / NT shelf view
│ │ │ ├── DivisionTour.jsx # Division overview page
│ │ │ ├── BookViewer.jsx # Multi-tab book detail
│ │ │ ├── VerseLink.jsx # Clickable verse reference component
│ │ │ └── book/
│ │ │ ├── ChapterSummaries.jsx # Audio player + chapter summary list
│ │ │ ├── Timeline.jsx # Interactive chapter timeline
│ │ │ ├── TheologyTab.jsx
│ │ │ └── SourcesTab.jsx
│ │ └── __tests__/
│ │ └── utils.test.jsx
│ ├── public/
│ │ └── data/ # Book JSON files (served at runtime)
│ ├── package.json
│ └── vite.config.js
├── scripts/ # Audio download utilities
│ ├── download_audio_en.py
│ ├── download_audio_es.py
│ └── download_audio_pt.py
├── audio/ # Local audio cache (en / es / pt)
└── data/ # Source data (CANON Pipeline output)
├── books-manifest.json
├── personas-display.json
├── genesis.json
└── ...
- Node.js v18 or later
- npm (included with Node.js)
# 1. Clone the repository
git clone https://github.com/mixwarecs/ebpi.git
cd ebpi
# 2. Install dependencies
cd canon
npm installnpm run devOpens a Vite dev server at http://localhost:5173 with hot module replacement.
npm run buildOutputs an optimized bundle to canon/dist/.
npm run previewServes the production build locally for final verification.
npm run lintThe app uses hash-based routing so every state is shareable:
| Pattern | Description |
|---|---|
# |
Canonical shelf (OT / NT index) |
#division/[key]/[lang] |
Division tour for a given canonical group |
#book/[id]/[lang] |
Book overview (default tab, current language) |
#book/[id]/[tab]/[lang] |
Book at a specific tab and language |
#book/[id]/summaries/[lang] |
Chapter summaries + audio player |
#book/[id]/summaries/[chapterIdx]/[lang] |
Deep link to a specific chapter's audio |
Example: #book/1/theology/en opens Genesis in the Theology tab in English.
Example: #book/1/summaries/2/en opens Genesis with chapter 2 highlighted and ready to play.
Book records are generated by the CANON Pipeline — a separate process that produces structured JSON following a fixed schema. Each record contains:
- Authorship, date, and audience
- Chapter-by-chapter summaries
- Systematic theology doctrines with verse anchors
- Westminster Confession chapter mapping
- Covenant theology connections
- Key characters with typology and NT references
- Historical background (chronology, geography, ANE context)
- Tiered scholarly sources
Completed books are placed in canon/public/data/ and registered in books-manifest.json.
| Division | Complete |
|---|---|
| Pentateuch | Genesis, Exodus, Leviticus, Numbers, Deuteronomy |
| Historical | Joshua, Judges, Ruth, 1 Samuel |
| Gospels | Matthew, Mark, Luke, John |
| Acts | Acts |
| Pauline Epistles | Romans, Ephesians |
| General Epistles | 1 Peter |
15 books complete — 51 remaining.
The content is written from a Reformed Protestant / Evangelical perspective:
- Westminster Confession of Faith anchors link doctrine to book content
- Covenant Theology — Adamic, Noahic, Abrahamic, Mosaic, and Davidic covenants are traced across books
- Christological focus — Every book is connected to its redemptive-historical role and typological fulfillment in Christ
- Redemptive history epochs define the timeline era bands visible in the book viewer
- Fork the repository
- Create a feature branch:
git checkout -b feature/my-addition - Commit your changes:
git commit -m "Add: description" - Push and open a pull request
To add a new book, run the CANON Pipeline to generate the book JSON, then follow the viewer integration steps.
MIT — see LICENSE for details.