03Real-Time Cross-Device Clipboard

ClipYard

Instantly syncs text and files across devices with no account needed — encrypted end-to-end, nothing stored on a server. Real-time cross-device clipboard app enabling account-free text sync and P2P file transfer via WebRTC, secured with AES-256-GCM encryption and JWT auth.

Next.jsTypeScriptFirebaseWebRTCAES-256

ClipYard: Real-Time Cross-Device Sync

ClipYard solves the universal friction of transferring text, links, and small files between devices that don't share an ecosystem (e.g., Windows to iOS, or Linux to Mac). It operates entirely in the browser, requiring no accounts, no installations, and ensuring absolute privacy.

Peer-to-Peer Data Transfer

Unlike traditional cloud clipboards that store your sensitive copied data on a central server, ClipYard utilizes WebRTC for direct Peer-to-Peer (P2P) connections.

The Signaling Server

WebRTC requires a mechanism for devices to discover each other. ClipYard uses a lightweight Firebase Realtime Database (or a custom WebSocket server) exclusively for exchanging SDP (Session Description Protocol) offers and ICE candidates.

Once the connection is established, the signaling server steps out of the way.

AES-256-GCM Encryption

While WebRTC is encrypted by default (DTLS/SRTP), ClipYard adds an additional layer of application-level security.

When a "Yard" (a shared room) is created, a strong cryptographic key is generated on the client using the Web Crypto API. This key is never transmitted over the signaling server; it must be shared via a QR code or secure out-of-band link. All text and files are encrypted with AES-256-GCM before being sent over the WebRTC data channel.

Architectural Highlights

  • Account-Free Authentication: Sessions are managed via short-lived JWTs (JSON Web Tokens) tied to the specific browser instance, ensuring ephemeral identity.
  • Chunked File Transfers: Large files are sliced into small ArrayBuffer chunks and reassembled on the receiving end. This prevents memory bloat and allows for progress bar tracking during P2P transfers.
  • Optimized Rendering: The UI is built with Next.js and Tailwind CSS, focusing on a minimalist, distraction-free aesthetic that loads instantly on mobile devices.
ClipYard — Mahesh | Mahesh Chopade Portfolio