Serverless Relay Architecture

SyncingBoard is engineered as a stateless, zero-retention relay. It acts purely as a real-time communications conduit between design applications and whiteboards - never storing user design files, canvas assets, or personal data on a persistent database server.

1. System Architecture Topology

+------------------------------------+             +------------------------------------+
|   Design Source (Figma / Penpot)   |             |   Whiteboard Target (Miro/FigJam)  |
|   - REST API / Companion Extension |             |   - Web SDK v2 / Plugin API        |
+------------------------------------+             +------------------------------------+
                   \                                     /
                    \                                   /
                     v                                 v
            +---------------------------------------------------+
            |  Vercel Edge Relay (Next.js Node 24 Serverless)   |
            |  - /api/relay/* Vector Sanitization Pipeline      |
            +---------------------------------------------------+
                                      |
                      +---------------+---------------+
                      |                               |
           +---------------------+         +---------------------+
           |   Ably WebSockets   |         |    Upstash Redis    |
           | (Real-time Channels)|         | (5-Min Session TTL) |
           +---------------------+         +---------------------+

2. Infrastructure Stack Breakdown

1. Vercel Serverless Compute

Built on Next.js App Router (Node 24 runtime), SyncingBoard’s API routes (/api/relay/*, /api/figma/*, /api/oauth/*) execute statelessly on Vercel’s global edge network. Functions spin up instantly on HTTP triggers and scale to zero when idle, guaranteeing zero baseline infrastructure cost and sub-second response times.

2. Ably Realtime WebSockets

To avoid the latency, memory overhead, and battery drain of traditional HTTP polling, SyncingBoard uses Ably WebSocket channels (relayAbly.ts).

When a user initiates a sync session, token-cached WebSockets pair the design editor tab and whiteboard plugin in milliseconds, streaming SVG vector payloads across encrypted real-time channels:

// Ably realtime session pairing in relayAbly.ts
export async function createRelayChannel(sessionId: string) {
  const ably = new Ably.Realtime({ key: process.env.ABLY_API_KEY });
  const channel = ably.channels.get(`syncingboard:${sessionId}`);
  
  // Real-time sub-second payload dispatch
  await channel.publish('frame-payload', { payload, timestamp: Date.now() });
}

3. Upstash Serverless Redis

Session handshakes, pairing tokens, and active session keys are managed in Upstash Redis (relayRedis.ts) with a strict 5-minute time-to-live (SET EX 300):

// Session handshake in relayRedis.ts with strict 5-min TTL
export async function setSessionToken(sessionId: string, data: SessionData) {
  await redis.set(`session:${sessionId}`, JSON.stringify(data), 'EX', 300);
}

Once a sync operation finishes or 5 minutes elapse, session keys vanish automatically from Redis. Zero design pixels or user assets persist on cloud storage.

3. Cryptography, Privacy & Security Stack

• AES-256-GCM Encryption: OAuth tokens and relay session payloads are encrypted in transit using AES-256-GCM authenticated encryption.
• Sliding Window Rate Limiting: Built-in sliding window rate limiting in rate-limit.ts prevents backend abuse and protects free-tier API quotas.
• Zero-Retention Guarantee: Assets stream strictly in-memory between browser contexts. No cloud databases, S3 buckets, or disk volumes are ever used for user design screens.

Continue exploring: In-Place Engine or return to SyncingBoard Overview.