A Bible browsing and reading web application built with Next.js , TypeScript, TailwindCSS, Supabase, Docker, and Google Cloud Run with Scripture data by API.Bible** Users can explore books and chapters, search across all verses, and save notes for each chapter to support depper study.
Visit Here: https://bible-verse-979607262100.asia-southeast1.run.app
Live Demo: https://youtu.be/uj23JAGdaKE
| Technology | Description |
|---|---|
| Next.js | React framework for web apps. |
| TypeScript | Typed JavaScript for reliability. |
| Supabase (BaaS) | Backend As A Service with auth and database. |
| TailwindCSS | Utility-first CSS framework. |
| Argon Dashboard | Tailwind UI dashboard components. |
| API.Bible | Bible data (books, chapters, verses). |
| Docker | Container runtime for development and production deployment |
| Google Cloud Run | Serverless container hosting platform |
- Supabase Authentication
- Email Password
- Google OAuth
- View all Books and Chapters
- Read chapte verses using the API.Bible data
- Save, update, delete notes per chapter of the book
- Notes tied to authenticated user with RLS of Supabase
- Search Page - Search keywords across All verses
- Developer Utilities
- Supabase RLS Policies for secure, user-scoped data access
- Supabase Migration included as SQL files for version-controlled schema changes
- Supabase Seeders to populate initial data and improve navigation experience
npm run route-listto view all registered API routes
/app/api— API route handlers for server-side logic and data fetching/app/(auth)— Route group for authentication pages (sign-in, sign-up)/app/(private)— Route group for protected pages (dashboard, read-bible, search)/app/components— Reusable UI components used across the application/app/constants— Centralized constants (paths, config values, etc.)/app/lib/actions— Actions and API interactions/app/lib/supabase— Supabase utilities:server.ts,client.ts,auth.ts/app/lib/helpers— Utility functions and shared helpers/app/lib/types— TypeScript type definitions and interfaces/supabase/migrations— Database migration SQL files and seeders/public— Static assets such as images, icons, and manifest files
git clone https://github.com/m-antoni/bible-verse.git
cd bible-versenpm installCreate a .env.local file and add the following:
# API Website: https://scripture.api.bible (get your api-key and request endpoint)
BIBLE_API_ENDPOINT=
BIBLE_API_KEY=
BIBLE_API_ID=
# SUPABASE
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
NEXT_PUBLIC_SITE_URL=http://localhost:3000
npm run devIf you modify SQL migrations or want to sync schema:
npx supabase db pushThis will apply your local migration files directly to your Supabase project.
npm run route-list- Docker Desktop installed (or Docker Engine + docker-compose plugin)
.env.localfile with all required variables (see step 3)
Docker Compose reads .env by default (not .env.local). Run this once:
# Windows PowerShell
Copy-Item .env.local .env
# or Linux/macOS
cp .env.local .env# Build the dev image
docker compose build dev
# Start dev server with hot-reload
docker compose up devApp is available at http://localhost:3000. Code changes on your host reflect immediately.
# Build the production image
docker compose build
# Start the container
docker compose up -d# Login
docker login
# Tag and push
docker tag bible-verse_app:latest your-username/bible-verse:latest
docker push your-username/bible-verse:latestgcloud run deploy bible-verse --image your-username/bible-verse:latest --port 3000Note: Server-side secrets (
BIBLE_API_KEY,BIBLE_API_ID,SUPABASE_SERVICE_ROLE_KEY) must be set as environment variables in Cloud Run.
If Google OAuth is broken after deployment, register your Cloud Run URL in:
- Google Cloud Console → OAuth redirect URIs
- Supabase Dashboard → Authentication → URL Configuration
See docker_setup.md for detailed OAuth setup instructions.
This project is open-source and available under the MIT License.
Michael B. Antoni
LinkedIn: https://linkedin.com/in/m-antoni
Email: michaelantoni.tech@gmail.com