Architecture Specification
System Architecture & Component Topology
Technical specification of the frontend components, signaling broker API, WebRTC state engine, and deployment infrastructure.
1. Component Architecture Overview
ShareOnline is built with modern, performant web technologies structured into modular subsystems:
┌────────────────────────────────────────────────────────┐
│ Client Web Browser │
│ ┌──────────────────────┐ ┌─────────────────────────┐ │
│ │ P2PUploadZone (Host) │ │ P2PReceiveCard (Peer) │ │
│ └──────────┬───────────┘ └────────────┬────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ PeerJS & WebRTC RTCDataChannel (SCTP / DTLS) │ │
│ └──────────────────────────┬───────────────────────┘ │
└─────────────────────────────┼──────────────────────────┘
│ Direct P2P Binary Stream
┌─────────────────────────────┼──────────────────────────┐
│ Server / Edge │ │
│ ┌──────────────────────────▼───────────────────────┐ │
│ │ Signaling API Route (/api/signal) │ │
│ │ - Session Handshake (SDP Offer / Answer) │ │
│ │ - Ephemeral Room Store (In-Memory Map / Redis) │ │
│ │ - Sliding-Window IP Rate Limiter │ │
│ └──────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Next.js App Router (SSG / SSR / Metadata Engine) │ │
│ └──────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
│ Client Web Browser │
│ ┌──────────────────────┐ ┌─────────────────────────┐ │
│ │ P2PUploadZone (Host) │ │ P2PReceiveCard (Peer) │ │
│ └──────────┬───────────┘ └────────────┬────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ PeerJS & WebRTC RTCDataChannel (SCTP / DTLS) │ │
│ └──────────────────────────┬───────────────────────┘ │
└─────────────────────────────┼──────────────────────────┘
│ Direct P2P Binary Stream
┌─────────────────────────────┼──────────────────────────┐
│ Server / Edge │ │
│ ┌──────────────────────────▼───────────────────────┐ │
│ │ Signaling API Route (/api/signal) │ │
│ │ - Session Handshake (SDP Offer / Answer) │ │
│ │ - Ephemeral Room Store (In-Memory Map / Redis) │ │
│ │ - Sliding-Window IP Rate Limiter │ │
│ └──────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Next.js App Router (SSG / SSR / Metadata Engine) │ │
│ └──────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
2. Frontend Subsystems
- Next.js App Router: Implements Server-Side Rendering (SSR) and Static Site Generation (SSG) for all SEO content, ensuring zero-client-overhead search indexing.
- P2PUploadZone: Interactive React client component managing file selection, room generation, vector QR rendering, PeerJS host instance initialization, and chunk streaming with backpressure.
- P2PReceiveCard: Receiver component handling room join verification, binary chunk accumulation in memory, progress calculation, and
Blobdownload dispatch.
3. Signaling Broker API (/api/signal)
The signaling route handles JSON-based WebRTC signaling actions:
create-room:Registers a new session with initial file metadata and returns a unique 6-digit room code.join-room:Verifies session existence, updates room state toconnected, and returns file metadata.send-signal:Queues WebRTC offers, answers, and ICE candidates between host and peer.poll-signals:Retrieves queued messages for the calling role with low-latency polling fallback.leave-room:Discards session state upon peer disconnection.
4. Storage Layer: Truly Database-Free
ShareOnline operates with zero persistent file databases:
- File data is never written to disk or sent to cloud storage buckets.
- Signaling state is stored in an ephemeral in-memory
Map(or optional edge Redis KV for distributed multi-region deployments) with a 15-minute automatic TTL.