ten-lists

A web application that facilitates listening 👂🎧🔊 to the Holy Bible based on Professor Grant Horner's Bible-Reading System.

📱 Screenshot - Mobile

🖥️ Screenshot - Desktop

• Features
• Getting Started
  • Prerequisites
  • Installation
• Deployment
  • Setting Up Your Cloud Storage
    • Common Cloud Storage Options
      • Cloudflare R2
      • Backblaze B2
      • AWS S3
  • Cloudflare Pages
  • Other Platforms

Features

• 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
• localStorage to remember your current reading day

Getting Started

Prerequisites

• Node.js (v22 or higher)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/engineervix/ten-lists.git
   cd ten-lists

2. Install dependencies:

   npm install
   

3. Set up audio files:

   • During development, audio files should be placed in a /public/audio directory
   • 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

   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.

4. Start the development server:

   npm run dev
   

5. Build for production:

   npm run build
   

Deployment

You'll need the audio files to be hosted on cloud storage, e.g.

• Cloudflare R2
• Backblaze B2
• AWS S3

Setting Up Your Cloud Storage

1. Create a bucket/container in your preferred cloud storage service.
2. Configure public access for the bucket (if you want files to be directly accessible).
3. Upload all audio files to the bucket.
4. Note your bucket URL.
5. Set up appropriate CORS settings.

Common Cloud Storage Options

Cloudflare R2

Your URL will typically be: https://{account-id}.r2.cloudflarestorage.com/{bucket-name}

Backblaze B2

Your URL will typically be: https://{bucket-name}.s3.{region}.backblazeb2.com

AWS S3

Your URL will typically be: https://{bucket-name}.s3.amazonaws.com

Cloudflare Pages

This application can be deployed to Cloudflare Pages:

1. Connect your GitHub repository to Cloudflare Pages.
2. Configure the VITE_MP3_BASE_URL environment variable in the Cloudflare Pages dashboard.
3. Set the build command to npm run build and the build directory to dist.

Other Platforms

You should be able to deploy to Github Pages, Gitlab Pages, Vercel, Netlify, and many other platforms. Check the respective platform docs.