PROJECT FILE 03 / Real-time file sharing / Live test preview
File2File
One file. Two browsers. A deliberate handoff.
Send a file between two browsers using a temporary link and a separately shared PIN. Clear transfer progress and verified completion make the handoff understandable.
The problem
A quick file handoff should not need another account or a permanent upload folder. The challenge is coordinating two browsers while making connection limits, progress, and completion clear.
What I built
- Built reusable sender and receiver interfaces with link creation, PIN entry, progress, cancellation, and an explicit save action.
- Implemented WebRTC data-channel transfers coordinated through WebSocket signaling, with application-layer encryption in the browser.
- Added authenticated file metadata, ordered chunks, and completion checks before offering a download.
- Bounded transfers to one receiver, a 50 MiB file, and a 15-minute session, with cleanup on cancellation, expiry, or disconnection.
Inside the engineering
Separate coordination from file transfer
WebSocket signaling exchanges connection setup messages. File metadata and content are encrypted in the browser and travel through the WebRTC data channel; the signaling service does not store transfer files.
Keep memory and queues bounded
The sender encrypts chunks and pauses when the transport buffer fills. The receiver checks sequence and size before assembling a capped file for download.
Make the session lifecycle visible
Waiting, connecting, transferring, verifying, expiry, and failure have explicit states. Cancellation and disconnect close the connection and release retained transfer state.
Exercise the transport and its failure paths
Playwright transfer tests and a configurable coturn setup cover browser and relay-mode testing in the repository. ESLint, Prettier, and typed contracts support maintenance; Wrangler builds and deploys the Cloudflare service. The hosted preview currently uses direct connections only.
What this demonstrates
Demonstrates real-time communication, browser cryptography, bounded streaming, and clear failure handling in a small working product.
- Next.js
- TypeScript
- React
- WebRTC
- Web Crypto API
- WebSockets
- Cloudflare Workers
- Wrangler
- ESLint
- Prettier
- Playwright
- coturn
Live test preview: direct connections only; a hosted TURN relay is not enabled, so some networks cannot connect. Keep both tabs open. The PIN is an extra barrier, not strong identity verification; this preview is not intended for sensitive production transfers.
LATEST GITHUB PUSH /