Back to App
M

EXPLYRA P2P

Complete A-to-Z Guide — Every Feature's Workflow, Technology & Security Explained

WebRTC Encrypted Peer-to-Peer No Server Storage

How Does P2P Work?

This app uses WebRTC technology — your data goes directly to the other person's browser. No server stores or reads your data in between.

1
PeerJS ID Generated
As soon as you open the app, a unique ID is created — this is your digital identity
2
Share Your ID
Send your ID or Share Link to the other person
3
Direct Connection
A WebRTC tunnel is established — everything is now P2P encrypted
Browser A (You)
  │
  ├─ PeerJS Signal Server (handshake only)
  │      │
  │      └─ ICE/STUN/TURN (NAT traversal)
  │
  └─ ═══ WebRTC Encrypted Tunnel ═══
                  │
Browser B (Peer)

⚠ Signal Server = ONLY for ID exchange
✓ All data flows DIRECTLY between peers
✓ DTLS + SRTP encryption in transit

Dashboard

Connection Hub & Control Center

What does the Dashboard do?

The Dashboard is your main control panel. This is where you establish connections and access all features. As soon as the page opens, PeerJS generates a unique ID — this is your "Digital Identity".

How does the connection workflow work?

1
Page loads → new Peer() connects to the PeerJS signaling server
2
Server assigns a random unique ID (e.g., abc-xyz-123)
3
"Share Link" button copies a URL with your ID embedded in it
4
When the other person opens the link, ?peer=ID auto-connects them to you
5
Connection established → header shows ONLINE → all features are now active!

How does it work on mobile?

On mobile, tap the hamburger menu (☰) on the top-left to open the navigation drawer with all tabs. On desktop, the left sidebar is always visible.

Secure Chat

End-to-End Encrypted Messaging

How is the chat secure?

Chat uses the WebRTC DataChannel. Your messages go directly to the peer's browser — no server can read or store them. WebRTC's DTLS encryption is enabled by default.

Workflow

1
Type a message and press Enter or click the Send button
2
App sends { type: 'CHAT', msg: '...' } over the DataChannel
3
Peer's browser renders it instantly
4
No message is saved on any server — close the tab and the chat is gone!

How do voice messages work?

The chat has a mic button — hold to record, release to send. It uses the MediaRecorder API to capture audio, convert it to a blob, and send it over the DataChannel.

You: Type "Hello" → Enter
  │
  ├─ DataChannel.send({ type:'CHAT', msg:'Hello' })
  │
  └─ ══ DTLS Encrypted ══ Peer Browser Render instantly

✗ No server stores messages
✗ No chat history after disconnect
✓ Truly private conversation

Video Call & Screen Share

Real-time Audio/Video Communication

How does it work?

1
Click the Video button → browser asks for camera/mic permission
2
getUserMedia() captures your local video/audio stream
3
PeerJS initiates a media call via peer.call(peerId, stream)
4
The other peer auto-answers — both videos are displayed with SRTP encryption

Screen Share

Click the purple screen button → getDisplayMedia() lets you select a screen/window → your peer sees it live. Encrypted with SRTP.

Mic Mute & Call End

Toggle mic with the mic button. Red phone button ends the call — all streams are stopped and resources freed.

Live GPS Map

Real-time Location Sharing

Workflow

1
Click "Broadcast Live GPS" button
2
Browser requests location permission (via GPS/WiFi/Cell tower)
3
Sends { type: 'GPS', lat, lng } to peer
4
Peer's map updates with a live marker — powered by Leaflet.js

Privacy

Location data is sent only to the connected peer — no third-party server stores it. Your location is never shared unless you explicitly broadcast it.

Swarm File Transfer

BitTorrent-Style Decentralized Sharing

How does the Swarm Engine work?

Instead of a simple sender-to-receiver model, this app uses a Swarm Engine. When a file is shared, the initial sender "seeds" different parts of the file to different peers in the mesh. These peers then help distribute those parts to each other.

1
File is split into 16KB Chunks locally using the ArrayBuffer API.
2
Sender uses Round-Robin to send Chunk 0 to Peer B, Chunk 1 to Peer C, etc.
3
Peers broadcast SWARM_HAVE signals for chunks they possess.
4
If a peer needs a chunk, it sends a SWARM_REQ directly to another peer holding it.

Benefits of Swarming

  • Redundancy: Original sender disconnected hone par bhi baki peers se file mil jayegi.
  • Efficiency: Bandwidth load pure mesh network par spread hota hai.
  • Speed: Multiple sources se parallel download.
  • Save All: Ek click mein saari received files download karein.
Swarm Protocol Protocol:
  START: Metadata (Name, Size, Total Chunks)
  CHUNK: Binary Data + Index
  HAVE: "I have Chunk #45" (Broadcast)
  REQ: "Send me Chunk #45" (P2P Request)

✓ Truly Decentralized File Sharing

Code Studio

Real-time Collaborative Coding + Execution

How does it work?

1
Write code in the ACE Editor — full syntax highlighting and autocomplete
2
Every keystroke sends { type: 'CODE', val, lang } to the peer
3
Peer's editor syncs in real-time — true collaborative coding!
4
Click RUN to execute code locally in your browser

Supported Languages

Python
via Pyodide (WASM)
HTML
iframe Preview
SQL
AlaSQL Engine

Gaming Hub

5 P2P Games — All Real-time Synced

All games use { type: 'GAME', game: '...', action: '...' } message format. No server involved — everything is P2P!

⚡ Reaction Duel

Reflex test — when the button turns GREEN, tap as fast as you can!

1
Host starts a round → a random delay is set (anti-cheat)
2
After the delay, button turns GREEN → phone vibrates
3
Both players tap → reaction times (ms) are exchanged
4
Lower time WINS! 🏆

❌⭕ Zero Katta (Tic-Tac-Toe)

Classic 3×3 grid game — Peer IDs determine who plays X and O.

  • The peer with the alphabetically smaller ID becomes X (moves first)
  • Each move syncs via { game:'ttt', action:'MOVE', index }
  • Win/Draw is checked locally on both browsers

✊✋✌ Stone Paper Scissors

Anti-Cheat: Blind Pick system — both players choose first, then results are revealed simultaneously!

  • Pick Stone, Paper, or Scissors
  • Neither player sees the other's choice until both have picked
  • Standard rules: Stone > Scissors > Paper > Stone

🔥 Tap War

Tug of War style — the faster you tap, the more the bar moves to your side!

  • Progress bar starts at 50-50
  • Each tap shifts the bar toward you
  • Pull it to 100% to WIN! 💪
  • Synced in real-time — every tap is visible to both players

♚ Chess — Full Rules Engine

Complete chess game with ALL standard rules!

1
Color assignment: smaller Peer ID = White (moves first)
2
Click a piece → valid moves shown (green dots) → click destination
3
Moves sync via { game:'chess', action:'MOVE', from, to }
4
Check detection → king glows red. Checkmate → game over!

Supported Rules:

✓ Castling ✓ En Passant ✓ Pawn Promotion ✓ Check & Checkmate ✓ Captured Pieces

Browse Share

Link Exchange & Co-Browsing

Link Share

  • Paste a URL and click "Send" → peer gets a confirmation prompt
  • If peer accepts, the link opens in their browser in a new tab
  • Both peers must ENABLE the feature (toggle switch) for it to work

Shared Preview (Co-Browsing)

  • Enter a public URL → both peers see the same page in a live iframe
  • For local servers, use ngrok to get a public URL!
  • Great for code reviews, website previews, and presentations

Workspace

Whiteboard, Watch Party, Task Board

Infinite Whiteboard

  • Real-time drawing canvas that is perfectly synchronized across peers.
  • Actions: Draw with Pen, erase, pick dynamic colors, clear board.
  • Payload uses { type: 'BOARD' } with coordinates.

Media Sync (Watch Party)

  • Load an .mp4 video URL or local file, and playback is synced for everyone.
  • When someone plays, pauses, or seeks, the exact timestamp propagates instantly.
  • If someone falls behind, the app seeks their video forward automatically to catch up.

Kanban Task Board

  • Lightweight task management for collaborative work.
  • Add new to-do items, mark them as done, or trash them. State syncs everywhere.
  • Perfect for meeting agendas, project planning, or software development checklists.

Mesh Connectivity

Full-Mesh Multi-User Architecture

How do multiple users connect?

This application uses a Full Mesh Network topology. Unlike a central server (Star Topology) where everyone connects to one point, in Explyra P2P, every peer connects to every other peer directly.

Full Mesh Topology (3 Peers):
A ════ B (Link 1)
║      ║
A ════ C (Link 2)
B ════ C (Link 3)

Scalability:
Connections = N(N-1)/2
- 2 Users = 1 Connect
- 4 Users = 6 Connects
- 10 Users = 45 Connects

This ensures that if one person leaves, the rest of the group remains connected without any downtime or data loss.

The Multi-User Handshake

1

Auto-Propagation: When Peer A connects to Peer B, A notifies everyone in their own network about B's existence.

2

Broadcast Mechanism: Every action (chat, move, fire) is "Broadcasted". The app iterates through all connected peers and sends the signal to each one individually via their private DataChannel.

3

Conflict Resolution: Since there's no server "clock", we use Peer IDs and high-resolution timestamps to decide whose action happened first if two players collide.

Deep-Dive Security

Hardened P2P Protocols

Is WebRTC really safe?

Yes, WebRTC is the world standard for secure browser communication. It enforces two mandatory layers:

Data Encryption (DTLS)

Secure Datagram Transport Layer Security. Prevents tampering with chat messages, files, and game data.

Media Encryption (SRTP)

Secure Real-time Transport Protocol. Encrypts audio and video streams with unique keys for every session.

What about my IP address?

To connect directly, browsers exchange IP addresses via ICE Candidates. This is how they find each other's "door" on the internet. While this handshake is visible to the signaling server, your data never goes through the server once the connection is made.

Engine Internals

Under the hood of Explyra P2P

🔗

PeerJS

Wraps WebRTC complex APIs into simple event-driven P2P.

📦

Binary Serialization

Efficiently packs large files into small chunks for fast mesh transfer.

🎮

Canvas 2D

High-performance rendering for 60FPS multiplayer games.

🏗️

Full State Sync

Propagates UI states (tabs, inputs) across all peers instantly.

👨‍💻 Developed by Explyra Bhasin ❤️