New Life Christian Church - Sermon Itinerary

A web application for managing and displaying weekly sermons for New Life Christian Church.

Features

• 📝 Sermon Management: Create and manage sermon content with a user-friendly form
• 🔐 Authentication: Secure admin access with login system
• 📱 QR Codes: Generate QR codes for easy sermon sharing
• 📅 Date-based URLs: Sermons accessible via sermon-MMDDYYYY format
• 🎨 Modern UI: Clean, responsive design using Tailwind CSS and Inter font
• 📊 Three Sections: Bible References, Personal Appliance, and Pastor's Challenge
• 🗂️ Smart Organization: Recent sermons (last 3 months) displayed by default, older sermons in dropdown
• 🐳 Docker Ready: Fully containerized for easy deployment

Technology Stack

• Frontend: Nuxt 3 (Vue.js)
• Styling: Tailwind CSS with Inter font from Google Fonts
• Database: SQLite
• QR Codes: qrcode library
• Deployment: Docker & Docker Compose

Configuration

This application uses environment variables configured directly in docker-compose.yml. Edit the file to customize your deployment settings.

Environment Variables

Variable	Description	Default
SITE_URL	Public URL where the app is hosted (used for QR codes)	https://nlcc.rydertech.us
AUTH_SECRET	Secret key for authentication sessions	change-this-secret-in-production-please
ADMIN_USERNAME	Initial admin login username	admin
ADMIN_PASSWORD	Initial admin login password	Admin123!
EMAIL_HOST	SMTP server hostname	smtp.example.com
EMAIL_PORT	SMTP server port	587
EMAIL_USER	SMTP authentication username	noreply@example.com
EMAIL_PASSWORD	SMTP authentication password	your-email-password
EMAIL_FROM	Email sender address and name	New Life Christian Church <noreply@example.com>

Customizing Configuration

Edit docker-compose.yml and update the values in both the build.args and environment sections:

services:
  nlcc-itinerary:
    build:
      args:
        - SITE_URL=https://your-church-domain.com
        - AUTH_SECRET=your-secure-random-secret-here
        - ADMIN_USERNAME=your-admin-username
        - ADMIN_PASSWORD=your-secure-password
        - EMAIL_HOST=smtp.gmail.com
        - EMAIL_PORT=587
        - EMAIL_USER=your-email@gmail.com
        - EMAIL_PASSWORD=your-app-password
        - EMAIL_FROM=Your Church Name <your-email@gmail.com>
    environment:
      - SITE_URL=https://your-church-domain.com
      - AUTH_SECRET=your-secure-random-secret-here
      - ADMIN_USERNAME=your-admin-username
      - ADMIN_PASSWORD=your-secure-password
      - EMAIL_HOST=smtp.gmail.com
      - EMAIL_PORT=587
      - EMAIL_USER=your-email@gmail.com
      - EMAIL_PASSWORD=your-app-password
      - EMAIL_FROM=Your Church Name <your-email@gmail.com>

Generate a secure AUTH_SECRET:

openssl rand -hex 32

Getting Started

Prerequisites

• Docker and Docker Compose installed on your system

Installation & Deployment

1. Clone the repository:

git clone <repository-url>
cd nlcc-itinerary

2. Edit docker-compose.yml and configure your settings:

   • Update SITE_URL to your public domain
   • Generate and set a secure AUTH_SECRET (use openssl rand -hex 32)
   • Set your desired ADMIN_USERNAME and ADMIN_PASSWORD
   • Make sure to update values in BOTH build.args AND environment sections

3. Build and run with Docker Compose:

docker-compose up -d --build

The application will be available at http://localhost:3002 (or your configured port)

Important: The SITE_URL must be set correctly for QR codes to work. This should be the public URL where your application is accessible (e.g., https://church.example.com).

Initial Admin Account

The initial admin account is created automatically on first run using the credentials specified in docker-compose.yml:

Default values:

• Username: admin
• Password: Admin123!

⚠️ Important:

• Change these credentials in docker-compose.yml before deploying to production
• After the first build, you can change the admin password through the user management interface
• Additional users can be created through the registration page

Project Structure

nlcc-itinerary/
├── assets/css/          # Global styles
├── components/          # Vue components
│   ├── SermonCard.vue
│   ├── QRCodeButton.vue
│   └── QRCodeModal.vue
├── middleware/          # Route middleware
│   └── auth.ts
├── pages/              # Application pages
│   ├── index.vue       # Main sermon listing
│   ├── login.vue       # Admin login
│   ├── admin.vue       # Sermon creation form
│   └── [slug].vue      # Individual sermon page
├── server/
│   ├── api/            # API endpoints
│   │   ├── auth/       # Authentication endpoints
│   │   └── sermons/    # Sermon CRUD endpoints
│   └── utils/          # Server utilities
│       ├── database.ts # SQLite database functions
│       └── auth.ts     # Authentication helpers
├── logos/              # Church logos
├── Dockerfile          # Docker configuration
├── docker-compose.yml  # Docker Compose configuration
└── nuxt.config.ts      # Nuxt configuration

Usage

Creating a Sermon

1. Navigate to /login and sign in with admin credentials
2. You'll be redirected to /admin
3. Fill in the sermon details:
   • Date: Select the sermon date (URL will be auto-generated as sermon-MMDDYYYY)
   • Title: Enter the sermon title
   • Bible References: Add one or more Bible verses (use +/- buttons)
   • Personal Appliance: Enter personal application content
   • Pastor's Challenge: Enter the pastor's challenge content
4. Click "Create Sermon"

Viewing Sermons

• Main Page (/): Shows recent sermons (last 3 months) with option to view older ones
• Individual Sermon (/sermon-MMDDYYYY): Full sermon details with QR code
• QR Code: Click the QR code button on any sermon card or page to generate a scannable code

Database

The application uses SQLite with the following schema:

Sermons Table

• id: Primary key
• slug: Unique sermon identifier (e.g., sermon-09282025)
• title: Sermon title
• date: Sermon date
• bible_references: Newline-separated Bible verses
• personal_appliance: Personal application content
• pastors_challenge: Pastor's challenge content
• created_at: Timestamp

Users Table

• id: Primary key
• username: User's username
• password: User's password (plain text - should be hashed in production)

Security Notes

⚠️ For Production Use:

1. Change the default admin credentials in your .env file
2. ✅ Password hashing is implemented using bcrypt
3. Use a strong AUTH_SECRET in environment variables (generate with openssl rand -hex 32)
4. Enable HTTPS
5. Consider implementing rate limiting
6. Add CSRF protection

Note: Passwords are now securely hashed using bcrypt with 10 salt rounds before being stored in the database.

Docker Commands

# Build and start
docker-compose up -d

# View logs
docker-compose logs -f

# Stop containers
docker-compose down

# Rebuild after changes
docker-compose up -d --build

# Access container shell
docker exec -it nlcc-itinerary sh

Data Persistence

The SQLite database is stored in the ./data directory, which is mounted as a volume in Docker. This ensures sermon data persists across container restarts.

License

This project is created for New Life Christian Church.

Support

For issues or questions, please contact the development team.