Skip to main content

Church Offering Deposit Form

Overview

This project builds upon the digital signature form project to create a mobile-friendly offering deposit entry form. The form will streamline the process of recording multiple donations collected during church offerings, with digital signatures from two counting staff members.

Due Date: August 31, 2025

Objectives

  • Build a mobile-optimized offering deposit form as a Google Apps Script web app
  • Support rapid entry of multiple deposits with minimal friction
  • Implement dynamic data loading from Google Sheets for staff names and fund types
  • Capture digital signatures from two counting staff members
  • Generate timestamped PDF records with signatures
  • Store all data in Google Sheets for tracking and reporting
  • Embed the application in BookStack for easy access

Prerequisites

Before starting, ensure you have completed the digital signature project and are familiar with:

  • Google Apps Script web app development
  • HTML5, CSS3, ES6+, and Web Components
  • Digital signature capture using canvas/Signature Pad
  • PDF generation and Google Drive integration
  • Google Sheets API operations
  • Mobile-responsive design principles

Database Structure Setup

1. Create Required Google Sheets

Create three Google Sheets in your project folder:

Sheet 1: "Offering Deposits" (Main Data Sheet)

Columns: Date, Name, Payment Form, Amount, Offering, Note, Counter 1, Counter 2, Timestamp, PDF File ID, Drive Link, Status

Sheet 2: "Offering Counting Staff"

Columns: Name, Active Status Pre-populate with:

  • Xiaoying Shen
  • Weihong Xue
  • Sinnie Lee
  • Lisa Hsieh

Sheet 3: "Funds"

Columns: Fund Name, Active Status, Display Order Pre-populate with:

  • General
  • Church Building
  • Benevolent
  • Missions
  • Short-Term Mission
  • Capital Projects
  • Next Generation Leadership

Development Tasks

  1. Create Efficient Deposit Entry Interface
    Design for Speed:
    • Use a repeatable row component for deposits
    • Implement "Add Another" functionality
    • Auto-calculate running totals
    • Validate data as user enters data
  2. Implement Dual Digital Signature
  3. Backend Data Processing
  4. PDF Generation with Signatures
  5. Data Validation & Error Handling
  6. Optimize
    • When entering the person who makes the donation, provide the ability to select people who make donations previously to allow rapid selection.

Technical Specifications

Mobile Breakpoints:

  • Ensure usability on both portrait and landscape
  • Test on iOS Safari and Android Chrome

User Experience Flow

  1. Setup Phase: Select date and two counting staff members
  2. Data Entry: Add deposits one by one with quick workflow
  3. Review: Show summary with totals by fund type
  4. Signatures: Capture both staff signatures
  5. Submission: Generate PDF and save to sheets
  6. Confirmation: Show success message with PDF link

Final Deliverable

Required Outputs:

  • Fully functional mobile-optimized web app
  • Integration with three Google Sheets
  • PDF generation with digital signatures
  • BookStack embedded implementation
  • Demo video (3-5 minutes) showing:
    • Mobile form usage workflow
    • Multiple deposit entries
    • Signature capture process
    • Generated PDF output
    • Google Sheets data updates

Testing Checklist:

  • Mobile responsiveness across devices
  • Data validation and error handling
  • Signature capture functionality
  • PDF generation with proper formatting
  • Google Sheets integration
  • Performance under typical usage loads

Questions or Issues?

If you encounter challenges during development, especially with mobile optimization or performance issues, reach out to Thian-Peng directly via Signal.

  • Use Cursor or GitHub Copilot for accelerated development
  • Test on actual mobile devices, not just browser dev tools
  • Consider using Chrome DevTools' mobile simulation for initial testing

This project emphasizes practical mobile UX for rapid data entry while maintaining the robust backend architecture from the digital signature project.

Back to top