🗺️ Quick Navigation
| Section | What You Get |
|---|---|
| Features | Bible reader, notes, red-letter text, songs, recordings |
| Architecture | App flow and storage model |
| Tech Stack | Source files and their roles |
| Data Storage | localStorage and IndexedDB breakdown |
| Run Locally | Local server setup |
| Troubleshooting | Fast fixes for common issues |
✨ Features
Bible Reading
Select book, chapter, and translation. Prev/next navigation. Search verse refs like John 3:16 to jump directly. Click a verse to insert its reference into notes.
Red-Letter Text
Quoted speech in Matthew, Mark, Luke, and John is highlighted in red — just like a red-letter Bible.
Notes
Create, edit, and autosave notes. Sidebar list for fast recall. Verse references typed in notes are auto-detected and rendered in the context sidebar.
Referenced Verses Sidebar
Automatically fetches verse text for any references found in your notes. Shows reference cards and lets you jump to them instantly.
Per-Note Audio
Record audio in-browser using your microphone. Recordings attach to the current note. Playback, download, and delete — persisted in IndexedDB.
Per-Note Songs
Add a song title and lyrics to any study note. View, delete, or insert saved songs directly into note content.
🏗️ Architecture
App flow: index.html → apps.js → notes.js / audio.js /
bible.js → bible-api.com / localStorage / IndexedDB
| Entity | Fields |
|---|---|
| NOTE | id, title, content, translation, timestamp |
| SONG | id, title, lyrics, createdAt, noteId |
| RECORDING | id, noteId, timestamp, duration, blob (IndexedDB) |
🔧 Tech Stack
| File | Role |
|---|---|
index.html |
App layout and UI containers |
style.css |
Custom styling |
apps.js |
Main controller, chapter rendering, navigation, search |
bible.js |
Bible metadata, regex parsing, API calls to bible-api.com |
notes.js |
Notes management, autosave, verse detection, songs UI/data |
audio.js |
Recorder, waveform visualizer, IndexedDB audio persistence |
💾 Data Storage
localStorage
bibleStudyNotes — notes array
(title/content/references/songs)bibleStudyRecordings — recording metadata backup
IndexedDB
Database: BibleStudyDB
Store: recordings
Fields: id, noteId, timestamp,
duration, type, blob
Privacy
Microphone access only when recording. All notes and audio stored locally in your browser. Bible text fetched from bible-api.com only.
🚀 Run Locally & Deploy
VS Code Live Server
Install the Live Server extension, right-click index.html → Open with Live Server →
http://127.0.0.1:5500/
Python
cd biblestudypython -m http.server 8000
→
http://localhost:8000
GitHub Pages
Push to main → Settings → Pages → Deploy from branch → main / root. Live in 5–10 min.
🛠️ Troubleshooting
| Issue | Fix |
|---|---|
| Blank Bible panel | Use HTTP server (Live Server), not file:// |
| No microphone | Grant permission when prompted |
| Recordings disappear | Avoid incognito — IndexedDB is cleared in private mode |
| GitHub Pages slow | 5–10 min deploy time — Ctrl+Shift+R to hard refresh |