A web application that facilitates listening ๐๐ง๐ to the Holy Bible based on Professor Grant Horner's Bible-Reading System.
- Generate a playlist of 10 Bible chapters for any day in the bible reading plan.
- Audio playback of Bible chapters using Plyr.io
- Responsive design with tailwindcss
- Interactive UI with Alpine.js
- Bible reference tooltips via Blue Letter Bible ScriptTagger
localStorageto remember your current reading day
- Node.js (v22 or higher)
- npm
-
Clone the repository:
git clone https://github.com/engineervix/ten-lists.git cd ten-lists -
Install dependencies:
npm install -
Set up audio files:
- During development, audio files should be placed in a
/public/audiodirectory - The audio files should follow this naming convention:
- Old Testament:
A[book-code]___[chapter]_[formatted-name]ENGESVC2DA.mp3 - New Testament:
B[book-code]___[chapter]_[formatted-name]ENGESVC2DA.mp3
- Old Testament:
For example:
- Job 1:
A18___01_Job_________ENGESVC2DA.mp3 - Song of Solomon 8:
A22___08_SongofSongs_ENGESVC2DA.mp3 - Acts 1:
B05___01_Acts________ENGESVC2DA.mp3
That's the convention used for the ESV dramatized audio Bible downloaded from the Faith Comes by Hearingยฎ website.
- During development, audio files should be placed in a
-
Start the development server:
npm run dev -
Build for production:
npm run build
You'll need the audio files to be hosted on cloud storage, e.g.
- Cloudflare R2
- Backblaze B2
- AWS S3
- Create a bucket/container in your preferred cloud storage service.
- Configure public access for the bucket (if you want files to be directly accessible).
- Upload all audio files to the bucket.
- Note your bucket URL.
- Set up appropriate CORS settings.
Your URL will typically be: https://{account-id}.r2.cloudflarestorage.com/{bucket-name}
Your URL will typically be: https://{bucket-name}.s3.{region}.backblazeb2.com
Your URL will typically be: https://{bucket-name}.s3.amazonaws.com
This application can be deployed to Cloudflare Pages:
- Connect your GitHub repository to Cloudflare Pages.
- Configure the
VITE_MP3_BASE_URLenvironment variable in the Cloudflare Pages dashboard. - Set the build command to
npm run buildand the build directory todist.
You should be able to deploy to Github Pages, Gitlab Pages, Vercel, Netlify, and many other platforms. Check the respective platform docs.