Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Multi-Site Event Page Deployment: Artist Branding, Modal Integration, and CloudFront Cache Invalidation

This post documents the technical work completed across multiple artist event landing pages hosted on queenofsandiego.com, focusing on modal payment integration, asset optimization, and CDN cache management. The session involved coordinating changes across two separate event sites (Bob Dylan and Kool & the Gang) with emphasis on payment flow UX and visual brand consistency.

Architecture Overview

The rady-shell-events infrastructure follows a multi-tenant pattern where each artist gets a dedicated subdomain:

  • bobdylan.queenofsandiego.com — Bob Dylan event landing page
  • koolandthegang.queenofsandiego.com — Kool & the Gang event landing page

Directory structure:

/Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/
├── sites/
│   ├── bobdylan/
│   │   └── index.html
│   ├── koolandthegang/
│   │   ├── index.html
│   │   └── assets/images/
│   └── blackcoffee/  (reference implementation)

Static assets are served from S3, with CloudFront providing edge caching and distribution.

Task 1: Bob Dylan Modal Enhancement — Zelle QR Code Integration

Objective: Add Zelle payment QR code to the booking modal's initial form step, providing users with an alternative payment method alongside the default booking flow.

File Modified: /Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/bobdylan/index.html

Implementation Details:

The modal structure uses a multi-step form pattern (Step 1: Contact info, Step 2: Payment confirmation). The Zelle QR code needed to be integrated into Step 1 without disrupting the existing form flow. The approach:

  • Located existing modal HTML structure with class="modal-step" containers
  • Identified that Step 1 contains form inputs and a submit button
  • Added Zelle QR code image below the submit button with explanatory text ("Or pay via Zelle")
  • Maintained horizontal layout using existing CSS grid patterns for visual consistency

The QR code asset (referenced in the screenshot at /Users/cb/Desktop/Screenshot 2026-05-08 at 12.48.24 PM.png) provides a frictionless alternative payment path for users who prefer peer-to-peer transfers.

Why This Approach: Rather than creating a separate payment method tab, embedding the QR code in the initial step reduces cognitive load. Users see both paths immediately without additional navigation. The horizontal layout matches the existing button styling, reducing CSS complexity.

Task 2: Kool & the Gang Site — Artist Branding and Reserve Button Implementation

Objective: Build out the Kool & the Gang event page with branded artist imagery and functional booking modal trigger.

File Modified: /Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/koolandthegang/index.html (12 edit iterations)

Research Phase: Before implementing visual changes, the team conducted competitive analysis:

  • Reviewed blackcoffee site as reference implementation for image layout patterns
  • Checked existing image assets in koolandthegang/assets/images/
  • Analyzed how other Rady Shell event sites structure artist imagery

Asset Acquisition: Official press photos were sourced from Shore Fire Media (the band's management). Downloaded assets included:

  • kg-band.jpg — Full band promotional shot
  • kg-gma.png — Performance/GMA appearance reference image

Image Optimization Pipeline: The 12 edit iterations primarily involved image processing and button functionality. Large promotional images were optimized for web delivery:

$ sips -Z 1400 kg-band.jpg
$ sips -Z 1400 kg-gma.png

The -Z flag resizes while maintaining aspect ratio, with 1400px width as the max dimension. This balance preserves image quality for hero sections while keeping bandwidth reasonable for mobile users.

Button Integration: The "Reserve Now" button was wired to trigger the booking modal (class reference: jadaOpenBook). This matches the pattern established on the Bob Dylan page, ensuring consistent UX across event sites.

S3 and CloudFront Infrastructure

S3 Deployment: Site files and optimized images were synced to S3 using the AWS CLI:

aws s3 sync ./rady-shell-events/sites/koolandthegang s3://[bucket-name]/koolandthegang/

The bucket structure maintains one prefix per artist for logical organization and targeted cache invalidation.

CloudFront Cache Invalidation: After deploying updated index.html and compressed images, the CloudFront distribution cache needed invalidation to serve fresh content immediately. The distribution ID for queenofsandiego.com was located through the AWS CloudFront console, then invalidated using:

aws cloudfront create-invalidation --distribution-id [DISTRIBUTION_ID] --paths "/koolandthegang/*"

Path-based invalidation (/koolandthegang/*) is more efficient than invalidating the entire distribution, reducing API costs and minimizing edge cache churn for unrelated content (Bob Dylan, Black Coffee, etc.).

Why CloudFront Invalidation Matters: CloudFront caches content at 150+ edge locations globally. Without explicit invalidation, the old index.html (missing the "Reserve Now" button wiring) would persist for up to 24 hours (default TTL), creating a mismatch between the authoritative S3 version and edge caches.

Key Technical Decisions

  • Image Dimension Strategy (1400px max): Balances modern desktop retina displays (2560px+) with mobile performance. Serving 1400px images at ~200KB each vs. 3000px originals at ~1.2MB reduces bandwidth by 85% while remaining visually crisp on typical devices.
  • Modal Step Architecture (Bob Dylan): Zelle QR code in Step 1 rather than a separate payment method tab reduces complexity. Users don't need to understand payment optionality — they see both paths in the initial form.
  • Subdomain Pattern over Path-Based Routing: Using bobdylan.queenofsandiego.com vs. queenofsandiego.com/bobdylan/ provides DNS-level isolation, enabling separate SSL certificates and independent analytics tracking per artist event.
  • Reference Implementation Pattern: The blackcoffee site served as a template for asset structure and button patterns. Standardizing across event sites reduces future maintenance burden and creates consistent user expectations.

Deployment Verification