Engineering Logs

The Solution: Deep Linking Architecture

• Parameter Construction: App 1 constructs a target URL with encoded query parameters (?action=create&title=...).
• State Hydration: App 6 intercepts these parameters on mount, formats the raw strings, and instantly hydrates the local React state.
• URL Sanitization: Implemented window.history.replaceState to immediately clear the URL parameters after import. This prevents data duplication if the user refreshes the page.

useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    
    if (params.get('action') === 'create') {
        const importedText = formatIncomingData(params);
        setSermonText(importedText);
        
        // UX Critical: Clean URL so refresh doesn't duplicate data
        window.history.replaceState({}, document.title, window.location.pathname);
    }
}, []);

1. Dynamic Client-Side Loading

I refactored the component to use next/dynamic with ssr: false. This forces Next.js to bypass the server-render step for the heavy PDF component, loading it only once the browser environment is active.

2. Webpack & Turbopack Config

Updated next.config.ts to explicitly externalize heavy dependencies (pdfjs-dist) and ignore canvas modules during the build process, preventing server-side bundling errors.

const DownloadReportButton = dynamic(
  () => import('../components/DownloadReportButton'),
  { 
    ssr: false, 
    loading: () => <LoadingSpinner /> 
  }
);

1. Asynchronous "Factory" Pipeline

• Decoupled Uploads: Frontend uploads directly to Cloud Storage via signed URLs, bypassing the backend to avoid bandwidth bottlenecks.
• Eventarc Triggers: File upload events automatically trigger a lightweight Cloud Run submitter service, which queues a BatchRecognize job and returns immediately.

2. Robust "Tier-Aware" Logic

I implemented a custom "Gatekeeper" pattern to handle Stripe subscriptions dynamically:

• Free Users: Jobs submitted with processing_strategy=DYNAMIC_BATCH (24hr turnaround, ~80% cheaper).
• Paid Users: Jobs submitted with DEFAULT strategy (instant) and trigger extra "Premium" LLM prompts for SEO and Social Media.

Phase 1: Auth & Permissions Architecture

Problem: Service Account hit storage quotas and permission errors when trying to transfer file ownership.

Fix: Re-architected to a "Share & Clone" model. The Service Account now temporarily shares the Master Template with the User, and uses the User's token to create the copy, bypassing Service Account storage limits.

Phase 2: API Schema Debugging

Problem: "Layout Not Found" errors despite matching names.

Fix: Implemented a verbose "Layout Dumper" logging utility. Discovered the Google Slides API nests names under layoutProperties.displayName rather than the root. Updated traversal logic.

Phase 4: DNS & SSL Resolution

Problem: Persistent "Not Secure" warning on deployment.

Fix: identified conflicting CAA records blocking Google's pki.goog. Purged conflicts and explicitly authorized the wildcard certificate.

State Logic Refinement

I separated the revealed state from isGameOver. I implemented a conditional "Finish Round" button that only renders after the solution is revealed. This allows the presenter to facilitate discussion before manually triggering the next round generation.

Native Fullscreen Integration

To support live projection without relying on browser shortcuts, I implemented the document.documentElement.requestFullscreen() API wrapped in a useEffect hook to sync React state with native browser events (like pressing ESC).

1. Auth State Disconnect

Problem: AuthContext initialized with a null user on subdomains because localStorage does not share state across origins/ports.

Fix: Implemented a "SSO Bridge" architecture using a custom Cloud Function to mint tokens and securely pass authentication state between the apps.

2. The "Phantom" 404 Error

Problem: Backend logs showed a persistent 404 Not Found for the Vertex AI model despite correct IAM permissions.

Fix: Discovered the issue was actually "Region Availability." The model was temporarily restricted in us-central1. Configured the Vertex client to target us-east1 while keeping the Compute infrastructure in central, bypassing the restriction.