Read the Bible daily with Blessings365 โ A beautiful 365-day reading plan with multiple translations, verse comparison, and a seamless reading experience.
- 365-day structured reading plan covering the entire Bible
- Date picker to navigate to any day of the year
- Pericope headings for better context and understanding
- Verse selection โ click any verse to select it
Support for 11 Bible translations across multiple languages:
| Translation | Language | Code |
|---|---|---|
| ๐ฎ๐ฉ TB (Terjemahan Baru) | Indonesian | TB |
| ๐บ๐ธ ESV | English | ESV |
| ๐บ๐ธ KJV | English | KJV |
| ๐บ๐ธ NASB | English | NASB |
| ๐บ๐ธ NIV | English | NIV |
| ๐บ๐ธ NLT | English | NLT |
| ๐บ๐ธ TLB | English | TLB |
| ๐จ๐ณ ๆฐ่ฏๆฌ (CNVS) | Chinese Simplified | CNVS |
| ๐จ๐ณ ๆฐๆ ็นๅๅๆฌ (ไธๅธ็) | Chinese Simplified | CUNPSS-ไธๅธ |
| ๐จ๐ณ ๆฐๆ ็นๅๅๆฌ (็ฅ็) | Chinese Simplified | CUNPSS-็ฅ |
| ๐ญ๐ฐ ๅๅๆฌ (CUV) | Chinese Traditional | CUV |
- Side-by-side comparison of any two translations
- Synchronized scrolling between panels
- Aligned verses for easy comparison
- Mobile-friendly with swipe indicators
| Setting | Options |
|---|---|
| Theme | Light / Dark mode |
| Font Size | Small / Medium / Large |
| Copy Format | Regular / Bold text |
- Mobile-first design that works beautifully on any device
- Bottom navigation for easy access on small screens
- Smooth animations and transitions
# Clone the repository
git clone https://github.com/gunawanjason/Blessings365.git
cd Blessings365
# Install dependencies
pnpm install# Start the development server
pnpm run devThen open http://localhost:5173 in your browser.
# Build for production
pnpm run build
# Preview the production build
pnpm run previewBlessings365/
โโโ index.html # Main HTML entry point
โโโ package.json # Project dependencies
โโโ vite.config.js # Vite configuration
โ
โโโ public/
โ โโโ Translated_Bacaan_Alkitab_365.json # 365-day reading plan
โ โโโ assets/
โ โโโ bcc.ico # App favicon
โ โโโ bcc.png # App icon
โ โโโ favicon.ico # Favicon
โ โโโ apple-touch-icon-144x144.png # iOS icon
โ โโโ apple-touch-icon-180x180.png # iOS icon
โ โโโ icon-192x192.webp # PWA icon
โ โโโ icon-512x512.webp # PWA icon
โ โโโ manifest.json # PWA manifest
โ
โโโ src/
โ โโโ main.js # App initialization & routing
โ โ
โ โโโ components/
โ โ โโโ BottomNav.js # Mobile bottom navigation
โ โ โโโ DatePicker.js # Date selection component
โ โ โโโ Header.js # App header
โ โ โโโ ScrollToTop.js # Scroll to top button
โ โ โโโ SettingsPanel.js # Settings drawer
โ โ โโโ VerseDisplay.js # Verse rendering
โ โ โโโ VerseSelection.js # Verse selection manager
โ โ โโโ VersionSelector.js # Translation selector
โ โ
โ โโโ pages/
โ โ โโโ DailyPage.js # Daily reading page
โ โ โโโ ComparePage.js # Version comparison page
โ โ
โ โโโ data/
โ โ โโโ bookNames.js # Book name translations
โ โ โโโ config.js # App configuration
โ โ
โ โโโ styles/
โ โ โโโ base.css # Base styles
โ โ โโโ variables.css # CSS custom properties
โ โ โโโ typography.css # Typography
โ โ โโโ animations.css # Animations
โ โ โโโ index.css # Main CSS import
โ โ โโโ components/ # Component-specific styles
โ โ โโโ actions.css
โ โ โโโ bottom-nav.css
โ โ โโโ buttons.css
โ โ โโโ compare.css
โ โ โโโ controls.css
โ โ โโโ feedback.css
โ โ โโโ header.css
โ โ โโโ hero.css
โ โ โโโ settings.css
โ โ โโโ tabs.css
โ โ โโโ verses.css
โ โ โโโ widgets.css
โ โ
โ โโโ utils/
โ โโโ analytics.js # Google Analytics
โ โโโ api.js # API fetch functions
โ โโโ comparisonSync.js # Verse synchronization
โ โโโ confetti.js # Celebration effects
โ โโโ helpers.js # Utility functions
The app uses a simple hash-based router:
// Routes
#/ โ Daily reading page (default)
#/compare โ Compare versions pageThe 365-day reading plan is stored in public/Translated_Bacaan_Alkitab_365.json:
{
"1": ["Genesis 1:1-2:3", "Genesis 2:4-25", "Genesis 3:1-24"],
"2": ["Genesis 4:1-16", "Genesis 4:17-26", "Genesis 5:1-32"],
...
}Verses are fetched from the Blessings365 API:
// Fetch verses
const url = `https://api.blessings365.top/${translation}/multiple?verses=${versesString}`;
const data = await fetch(url).then((res) => res.json());User preferences are stored in localStorage:
// Saved settings
localStorage.getItem("theme"); // 'light' | 'dark'
localStorage.getItem("fontSize"); // 'verse-line--small' | 'verse-line--medium' | 'verse-line--large'
localStorage.getItem("boldCopy"); // 'true' | 'false'The settings panel provides a slide-out drawer with customization options:
| Control | Function |
|---|---|
| โ๏ธ/๐ Theme Toggle | Switch between light and dark mode |
| Aa Font Size | Choose small, medium, or large text |
| B Copy Format | Toggle bold text when copying verses |
- Tab navigation between books
- Click to select individual verses
- Headings for pericope divisions
- Copy button for selected verses
- Two-column layout for side-by-side reading
- Synchronized scrolling across panels
- Mobile indicators showing current panel
- Auto-alignment of verses between translations
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License โ see the LICENSE file for details.
- Bible API โ api.blessings365.top
- Fonts โ Inter by Google Fonts
- Build Tool โ Vite
- Analytics โ Google Analytics