A Progressive Web App delivering daily Bible verses, motivational quotes, and affirmations as beautiful swipeable flashcards — with push notifications and full offline support.
Bible Verse Card |
Daily Quote Card |
Reflection Card |
- 📖 Daily Bible Verses — Curated uplifting verses powered by API.Bible (KJV)
- 💬 Motivational Quotes — Hand-picked daily quotes from great thinkers
- ✨ Affirmations — Positive daily affirmations to start your day
- 🃏 Swipeable Flashcards — Swipe left/right or use buttons to navigate cards
- 🔄 Card Flip — Tap any card to flip and reveal the reflection side
- 🔔 Push Notifications — Daily verse delivered to your device even when the app is closed
- 📱 PWA Installable — Add to Home Screen on any device, works like a native app
- 🌐 Offline Support — Cached content loads without an internet connection
- 🌟 Animated UI — Midnight blue background with twinkling stars and glowing card borders
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite 6 | Build tool & dev server |
| Framer Motion | Card animations |
| react-swipeable | Touch/swipe gestures |
| vite-plugin-pwa | PWA manifest & service worker |
| Playfair Display + DM Sans | Typography |
| Technology | Purpose |
|---|---|
| Node.js + Express | REST API server |
| node-cron | Daily push notification scheduler |
| web-push | Web Push API (VAPID) |
| API.Bible | Full Bible content (KJV) |
| dotenv | Environment variable management |
| Service | Purpose |
|---|---|
| GitHub Pages | Frontend hosting |
| Render | Backend hosting |
- Node.js v18+
- npm v9+
# Clone the repository
git clone https://github.com/Officialsammy2701/bibleflash.git
cd bibleflash
# Install root dependencies
npm install
# Install all dependencies
npm install --prefix client
npm install --prefix serverCreate server/.env:
PORT=5000
VAPID_PUBLIC_KEY=your_vapid_public_key
VAPID_PRIVATE_KEY=your_vapid_private_key
VAPID_EMAIL=mailto:you@example.com
BIBLE_API_KEY=your_api_bible_keyGenerate VAPID keys:
cd server
node -e "const wp = require('web-push'); const k = wp.generateVAPIDKeys(); console.log(k);"Get a free Bible API key at scripture.api.bible
# Run both frontend and backend simultaneously
npm run dev- Frontend:
http://localhost:5173/bibleflash/ - Backend:
http://localhost:5000
# Deploy frontend to GitHub Pages
npm run build --prefix client
cd client && npm run deploy
# Backend deploys automatically via Render on git push
git push origin mainbibleflash/
├── client/ # React + Vite PWA frontend
│ ├── public/
│ │ └── icons/ # PWA icons
│ ├── src/
│ │ ├── components/
│ │ │ ├── FlashCard.jsx
│ │ │ ├── Header.jsx
│ │ │ └── NotificationToggle.jsx
│ │ ├── App.jsx
│ │ └── main.jsx
│ └── vite.config.js
├── server/ # Node.js + Express backend
│ ├── src/
│ │ ├── routes/
│ │ │ ├── verse.js # API.Bible integration
│ │ │ ├── quote.js
│ │ │ ├── date.js
│ │ │ └── push.js # Push notification endpoints
│ │ ├── services/
│ │ │ └── cron.js # Daily notification scheduler
│ │ └── index.js
│ └── db/
│ └── subscriptions.json
└── data/
├── bibleVerses.json # Fallback verse collection
└── quotes.json # Motivational quotes
BibleFlash uses the Web Push API with VAPID keys to deliver daily notifications at 8:00 AM. Subscriptions are stored server-side and notifications are sent via node-cron.
To test notifications manually:
cd server
node -e "import('./src/services/cron.js').then(m => m.startCron())"Verses are fetched from API.Bible using the King James Version (KJV). The app uses a curated list of 50 uplifting verses from Psalms, Proverbs, John, Romans, Isaiah, and more.
Bible ID used: de4e12af7f28f599-01 (KJV)
Scan to install on mobile:
Visit the link on your phone and tap "Add to Home Screen" in your browser menu.
Ismail Adewale Akande
- GitHub: @Officialsammy2701
- Project: BibleFlash
This project is open source and available under the MIT License.
Bible content provided by API.Bible — King James Version (KJV), Public Domain.