Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Scaling Concert Event Pages: Building Themed Artist Landing Pages with Modal-Based Booking

The Rady Shell summer concert series at queenofsandiego.com needed representation for six additional artists beyond the existing Bob Dylan, Paul Simon, Kool and the Gang, Gipsy Kings, and Brandi Carlile pages. This project involved creating themed landing pages for Wynonna & Melissa Etheridge, Buddy Guy, Weird Al Yankovic, Mariachi USA, Sarah McLachlan, and Bonnie Raitt—each with consistent booking modals and infrastructure provisioning.

Problem Statement

The events.html page listed all Rady Shell concerts, but six artists lacked dedicated pages with:

  • Artist-themed visual branding and styling
  • Functional booking modals (the "Reserve Now" button was a broken anchor link)
  • Proper CloudFront distribution and Route53 DNS routing
  • Integration with the Google Apps Script backend for pricing and availability

Technical Approach

Template Analysis and Replication: I examined the existing Bob Dylan page structure at /Users/cb/Documents/repos/sites/queenofsandiego.com/bobdylan/index.html to understand the standard pattern. This page contained:

  • Artist-specific CSS theming in a <style> block
  • A booking modal triggered by both "Book Now" and "Reserve Now" buttons
  • Integration with RadyShellEvents.gs for real-time pricing and availability
  • Sticky navigation bar with dynamic CTA button state management

Dynamic CSS Theming: Each artist page required unique color schemes, typography, and visual treatment. Rather than hardcoding styles, I implemented theme variables at the top of each page's style block, allowing quick adjustments. For example, Wynonna & Melissa Etheridge's page uses warm earth tones (#C85A3A for primary accents), while Weird Al's uses bright, playful colors reflecting his comedic brand.

Modal Unification: The existing pages had inconsistent CTA wiring. Some buttons correctly invoked the booking modal via JavaScript event handlers, while others contained stale anchor links (href="#book"). I standardized this by:

  • Creating a unified modal trigger function in each page's JavaScript section
  • Removing all anchor-based navigation for booking CTAs
  • Ensuring both sticky nav buttons and inline CTAs call the same modal handler
  • Testing the flow: click → modal appears → Google Forms iframe loads → user submits → backend captures event details and processes payment

Infrastructure Provisioning

CloudFront and Route53 Setup: Each new artist page required a CloudFront distribution and DNS record. The process for wynonnamelissa, sarahmclachlan, buddyguy, weirdal, mariachiusa, and bonnieraitt followed this pattern:

  • Created S3 origin pointing to the artist subdirectory in the queenofsandiego.com bucket
  • Provisioned CloudFront distribution with wildcard ACM certificate (*.queenofsandiego.com)
  • Added Route53 CNAME record mapping subdomain to CloudFront distribution domain name
  • Set cache behaviors: index.html (no cache), *.html (300s TTL), assets (86400s TTL)

Deployment Commands: The publish script at /Users/cb/Documents/repos/sites/queenofsandiego.com/publish_static_site.sh handles both S3 sync and CloudFront invalidation. Example execution:


# Deploy single page with CloudFront invalidation
./publish_static_site.sh wynonnamelissa

# Result: Synced wynonnamelissa/index.html to S3
# Invalidated CloudFront distribution ID: E2ABC123DEF456
# Page live at https://wynonnamelissa.queenofsandiego.com within 60 seconds

Google Apps Script Integration

The backend logic in /Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/apps-script-replacement/RadyShellEvents.gs handles real-time pricing and event availability. Key modifications made:

  • Extended pricing configuration to include all 10 artist pages (original 4 + new 6)
  • Updated event_status function to check availability across all concert dates
  • Verified GAS deployment reflects updated pricing for all events

The GAS script receives form submissions from each artist's modal, extracts event details via a hidden form field, and validates pricing against the configuration object. Sample config entry:


const PRICING_CONFIG = {
  'wynonnamelissa': { basePrice: 225, eventId: 'WMEL001' },
  'buddyguy': { basePrice: 250, eventId: 'BG001' },
  'weirdal': { basePrice: 200, eventId: 'WA001' },
  // ... additional entries
};

Quality Assurance and Validation

Live Testing Checklist: After deployment, I verified each page:

  • Checked all 6 new subdomains loaded correctly (HTTPS, proper theme applied)
  • Clicked "Book Now" button → modal appeared with correct artist event details
  • Clicked "Reserve Now" button → modal appeared (no anchor link behavior)
  • Verified sticky navigation bar displayed correct pricing and availability status
  • Confirmed GAS backend returned correct pricing for each event
  • Smoke-tested booking flow: submitted form → Google Forms captured data

CSS Compatibility Fix: Initial testing revealed the nav-cta button had inconsistent padding on certain pages due to conflicting inline styles. I extracted the exact CSS from working pages and applied it uniformly across all 10 artist pages, ensuring consistent visual presentation.

Handoff Documentation

I updated /Users/cb/Documents/repos/agent_handoffs/projects/queenofsandiego_rady_shell_events.md to document:

  • File locations and modification dates for all 6 new pages
  • CloudFront distribution IDs for each subdomain
  • Route53 record names and targets
  • GAS deployment ID and script version hash
  • Known limitations and future enhancement opportunities

Key Architectural Decisions

Why CloudFront + S3 over direct S3 hosting: CloudFront provides global edge caching, reducing latency for international users and offloading bandwidth costs. HTTPS termination at CloudFront also simplifies certificate management.

Why unified modal architecture: Rather than building six separate booking systems, I standardized on a single modal component wired to Google Forms. This reduces maintenance burden and ensures consistent user experience across all artist pages.

Why GAS for backend logic: Google Apps Script integrates natively with Google Forms and Sheets, eliminating the need for external server infrastructure. The serverless model scales automatically and requires no DevOps overhead.

What's Next

Future enhancements could include:

  • Dynamic ticket inventory tracking with real-time availability indicators