⚡ ConnectX Web Client

A modern, real-time cross-platform web application powering peer-to-peer WebRTC file transfers.

Overview • Demo • Features • Tech Stack • Getting Started

---

📖 Overview

ConnectX is a beautifully crafted web application designed to instantly send and receive files across platforms using WebRTC-based peer-to-peer (P2P) file transfer.

No cloud storage, no intermediaries, and no waiting. Simply create a session, scan the QR code from your Android device, and establish a secure, direct connection for blistering-fast data transfer. Built using React and Vite, ConnectX acts as the fast and intuitive frontend to our high-performance Spring Boot signaling backend.

---

🎥 Demo

Experience the seamless connection process and lightning-fast transfer across platforms:

Web View	Mobile View

Sharing files instantly and wirelessly via WebRTC data channel from both perspectives.

---

✨ Features

🔒 Direct & Secure Peer-to-Peer Transfer: End-to-end encrypted transfer using WebRTC Data Channels. Zero Cloud Storage: Files move directly between Web and Mobile, ensuring total privacy. QR Code Connection: Secure authorization by scanning on the mobile app.	⚡ Lightning Fast Local Network Speed: Bypasses the internet entirely if both devices share the same WiFi. Real-Time Signaling: Instantly negotiated sessions using WebSocket and STUN/TURN relays.
🎨 Modern Web UI React & Framer Motion: Fluid animations and responsive, state-driven interface. Premium Design: Beautiful aesthetic that feels modern and intuitive. Cross-Platform: Runs flawlessly in any modern web browser.	🏗️ Robust Architecture Efficient Chunking: Handles large files without crashing the browser memory. Error Resiliency: Keep-alive pings and automatic reconnections for stable transfers.

---

🛠️ Tech Stack

Component	Technology	Description
Frontend Framework	React 18	Declarative component-based UI.
Build Tool	Vite	Next-generation fast bundler.
P2P Engine	WebRTC	Google's WebRTC library for raw P2P data channels.
Styling	Tailwind CSS	Utility-first styling for rapid UI development.
Networking	WebSockets	Persistent duplex connection to the Signaling Server.
Animations	Framer Motion	Production-ready motion library for React.

---

🧠 Application Flow

The ConnectX Web app communicates seamlessly with the Android Client and Backend Infrastructure:

1. Create Session: User clicks "Start Sharing" to generate a unique receiving QR code.
2. Scan on Android: The companion Android app scans the QR code containing the SessionId.
3. WebSocket Handshake: The Web App and Android App connect via the Spring Boot Signaling service.
4. WebRTC Negotiation: The devices exchange OFFER, ANSWER, and ICE_CANDIDATES.
5. P2P Transfer: A direct DataChannel opens, and binary file chunks stream directly between devices.

---

🚀 Getting Started

Follow these steps to run the Web project locally.

Running the Project

1. Clone the Repository:

   git clone https://github.com/Mahir-Agarwal/ConnectX-Web-Client.git
   cd ConnectX-Web-Client

2. Install Dependencies:

   npm install

3. Configure Environment: Create a .env file pointing to your backend signaling server.

   VITE_API_BASE_URL=http://192.168.x.x:8080/api
   VITE_MOBILE_URL=http://192.168.x.x:5173

4. Start Development Server:

   npm run dev

---

📂 Project Structure

ConnectX-WebApp/
├── Demo/                    # Application Demo GIFs
├── src/
│   ├── api/                 # API integration (Session Management)
│   ├── components/          # Reusable React UI components
│   ├── context/             # React Context (Session State)
│   ├── services/            # Core logic (Signaling & WebRTC)
│   ├── App.jsx              # Application Entry Point
│   └── main.jsx             # React DOM Mount
└── package.json             # Project dependencies

---

_{Engineered and Developed by Mahir Agarwal}