Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Multi-Artist Event Site Deployment: Building Consistent Booking Infrastructure Across Rady Shell Properties

What Was Done

Over this development session, we completed a comprehensive infrastructure and content update for the Rady Shell Events network, specifically focusing on two artist property sites: the Bob Dylan event page and the newly populated Kool & the Gang event page. The work encompassed three major initiatives:

  • Integrating a Zelle QR code payment option into the Bob Dylan booking modal
  • Sourcing, optimizing, and deploying artist photography to the Kool & the Gang property
  • Ensuring consistent booking UX and visual branding across both artist sites
  • Managing CloudFront cache invalidation for production deployment

Technical Details: Bob Dylan Booking Modal Enhancement

The Bob Dylan page lives at:

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

The existing booking modal contained a payment section with initial form steps. The requirement was to add a Zelle QR code to the primary form view (Step 1), providing users with an alternative payment method before they complete the booking form.

Why Zelle QR in Step 1? Placing the QR code prominently in the initial modal view gives users immediate visibility of payment options. Rather than burying alternative payments in later steps or confirmation screens, this placement encourages conversion by reducing friction—users can decide instantly whether to proceed with direct booking or pay via Zelle.

The modal structure uses a step-based form pattern where each step is conditionally rendered. Adding the Zelle QR required:

  • Locating the modal container and initial form step markup
  • Inserting an image element referencing the Zelle QR code asset
  • Implementing hint text below the submit button to guide users
  • Ensuring responsive layout so the QR code displays properly on mobile devices

The QR code asset was already available in the Bob Dylan site's asset directory, so no new image acquisition was necessary for this change.

Technical Details: Kool & the Gang Artist Site Build-Out

The Kool & the Gang event page required substantially more work. The site structure already existed at:

/Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/koolandthegang/index.html

However, the page lacked artist imagery that would establish visual brand coherence with the group's official online presence.

Content Sourcing Strategy

Rather than use generic music industry stock photos, we sourced official press materials from Shore Fire Media, Kool & the Gang's authorized press representative. This approach ensures:

  • Brand authenticity—images match the artist's official visual identity
  • Legal clarity—press photos from official media representatives eliminate licensing ambiguity
  • Visual consistency—professional photography maintains the premium feel of the Rady Shell venue

Downloaded images included:

  • kg-band.jpg — Full band ensemble shot
  • kg-gma.png — Performance or GMA appearance imagery

Image Optimization Pipeline

Downloaded press photos typically exceed web optimization standards. We implemented a local image processing pipeline:

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

The sips (System Image Processing Service) command with the -Z flag constrains the image to a maximum width of 1400 pixels while maintaining aspect ratio. This decision balances:

  • Visual Fidelity: 1400px width supports modern high-DPI displays without excessive file size
  • Page Performance: Smaller files reduce initial page load time, critical for mobile users at event venues
  • CloudFront Efficiency: Smaller objects reduce edge cache memory consumption
  • Responsive Design: 1400px is sufficient for container breakpoints used in the Rady Shell site architecture

Infrastructure: S3 and CloudFront Deployment

S3 Upload and Sync

The optimized images and updated HTML files were deployed to the production S3 bucket via AWS CLI sync:

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

The sync command performs delta detection, uploading only modified files. This reduces unnecessary network traffic and API calls.

CloudFront Cache Invalidation

Following S3 upload, we invalidated the CloudFront distribution cache for the Kool & the Gang subdomain. The production CloudFront distribution ID was identified through AWS console queries, and we executed:

aws cloudfront create-invalidation --distribution-id [DISTRIBUTION_ID] --paths "/rady-shell-events/sites/koolandthegang/*"

Why explicit invalidation? CloudFront edge locations worldwide cache content based on TTL headers. Without invalidation, users might receive stale HTML or images for up to 24 hours depending on cache settings. Explicit invalidation ensures the latest assets are served immediately across all edge locations.

The wildcard path pattern /rady-shell-events/sites/koolandthegang/* invalidates all objects under that prefix, ensuring both HTML and image updates propagate simultaneously.

UX Consistency: Booking Button Integration

Both artist pages required a "Reserve Now" button that opens the booking modal. The implementation pattern is consistent across the Rady Shell Events network:

  • Button element with semantic HTML <button> tag
  • JavaScript event listener that toggles modal visibility state
  • Modal overlay with keyboard support (ESC to close)
  • Form submission handling that communicates with backend booking service

By using a shared button pattern and modal component, we reduce code duplication and ensure users experience identical UX across all artist properties—critical for brand consistency and user confidence.

Key Decisions and Rationale

  • Press Photo Sourcing Over Stock Images: Official press materials establish authenticity and reduce legal risk compared to generic music industry stock photography.
  • 1400px Maximum Width Constraint: Balances visual quality with performance requirements for mobile users accessing sites from event venues.
  • CloudFront Invalidation Strategy: Wildcard path invalidation ensures all related assets propagate together, preventing partial updates that create visual inconsistency.
  • Modal-Based Booking Pattern: Keeps users on the artist property page during booking, maintaining context and reducing bounce rates compared to redirects to external booking systems.

What's Next

Future enhancements for the Rady Shell Events network include:

  • Implementing image lazy-loading for improved page load performance as more artist sites are added
  • Creating a templated pattern for new artist site onboarding to reduce manual configuration
  • Adding event date/time display and automated calendar sync from ticketing backend
  • Monitoring Cloud