Navigation
Standalone Crossword App - Deployment Guide

Deploy a separate crossword app that syncs with the main Snappy English platform

Architecture Overview

┌─────────────────┐         ┌──────────────────┐
│ Main Snappy App │◄────────┤ Standalone       │
│ (Base44)        │ postMsg │ Crossword App    │
│                 │────────►│ (Vercel/Netlify) │
└─────────────────┘         └──────────────────┘
        │                            │
        │ User Data                  │ Puzzle Logic
        │ Pearl Balance              │ Game State
        │                            │
        ▼                            ▼
    Base44 DB                  Local Storage

Step 1: Create Standalone App

Create Next.js App

npx create-next-app@latest crossword-app
cd crossword-app
npm install

Required Files

  • app/page.js
    Main crossword game UI
  • components/CrosswordGrid.js
    Grid rendering component
  • lib/postMessage.js
    Communication with parent app
  • lib/puzzleData.js
    Hardcoded puzzle data (no DB!)

Step 2: PostMessage Communication

lib/postMessage.js

export const sendToParent = (type, data) => {
  if (window.parent) {
    window.parent.postMessage({ type, data }, '*');
  }
};

export const listenFromParent = (callback) => {
  window.addEventListener('message', (event) => {
    // Verify origin for security
    if (event.origin.includes('snappyenglish')) {
      callback(event.data);
    }
  });
};

// On mount
useEffect(() => {
  sendToParent('CROSSWORD_READY', {});
  
  listenFromParent((message) => {
    if (message.type === 'AUTH_TOKEN') {
      const userData = JSON.parse(atob(message.token));
      setUser(userData);
    }
  });
}, []);

// On completion
const handlePuzzleComplete = (time) => {
  sendToParent('PUZZLE_COMPLETED', {
    pearlsEarned: 10,
    completionTime: time
  });
};

Step 3: Deploy to Vercel

Deploy Commands

npm install -g vercel
vercel login
vercel --prod

# Set custom domain
vercel domains add crossword.snappyenglish.com

Update StandaloneCrosswordHub

After deployment, update the CROSSWORD_APP_URL in pages/StandaloneCrosswordHub.js to your Vercel URL

Step 4: Testing Checklist

  • Iframe loads without errors
  • User data syncs from parent app
  • Crossword puzzle renders correctly
  • Completion triggers pearl sync
  • Works on mobile devices
  • No Base44 entity errors