Remix

Make your own version of Dude File Sharing

Edit the prompt below and generate a customized version in seconds.

Original by Salem Payan

Describe your app

It addresses key technical edge cases that break large-file transfers (such as browser memory limits, ICE candidate failures, and backpressure handling) while enforcing clear architectural patterns for your LLM or development team.
### Copy/Paste Optimized Prompt:
```markdown
# Comprehensive System Specification: "DUDE FILE SHARING"

## 1. Executive Summary & Core Objective
Build a production-grade, full-stack, cross-platform file-sharing Progressive Web Application (PWA) named **DUDE FILE SHARING** ("DUDE").

The application must deliver seamless, zero-compression, end-to-end encrypted file transfers for payloads up to **50GB**. It must dynamically route transfers between direct Peer-to-Peer (WebRTC) and temporary Cloud Relay (AWS S3/Cloudflare R2), automatically choosing the fastest and most reliable path.

---

## 2. System Architecture & Technical Constraints

### A. Memory Management & 5000GB Scale Strategy
* **Zero RAM Buffering:** Never load entire files into browser RAM (`ArrayBuffer`).
* **Sender Pipeline:** Stream files directly from the file system using the File / Blob API in chunked buffers (16KB to 64KB per chunk).
* **Receiver Pipeline:** Stream incoming chunk streams directly to disk using the File System Access API (`showSaveFilePicker` + `FileSystemWritableFileStream`). Fall back to Service Worker-based stream downloading (`StreamsSaver.js` pattern) for non-supporting browsers.
* **Backpressure Control:** Implement active flow control on WebRTC data channels by monitoring `RTCDataChannel.bufferedAmount`. Pause chunk reading when `bufferedAmount > 16MB`, and resume via the `bufferedamountlow` event (`bufferedAmountLowThreshold = 1MB`).

### B. Security & Cryptographic Operations
* **Client-Side E2EE:** Encrypt files exclusively on the client device before network transit using Web Crypto API (`AES-GCM 256-bit`).
* **Key Derivation & Handling:** 
  * Generate a unique 256-bit symmetric AES key per session.
  * Encrypt each file chunk with `AES-GCM` using incremental Initialization Vectors (IVs) to prevent replay attacks and pattern analysis.
  * The decryption key must be embedded in the shareable link fragment (`https://dude.share/#key=...`) or derived via the 6-digit pairing code via a secure server handshake. Plaintext keys must never hit application logs or databases.
* **Integrity Validation:** Compute a cryptographic SHA-256 hash of the complete file on the sender side; recalculate and verify on the receiver side before finalizing the file.

### C. Transfer Protocols & Fallbacks
1. **P2P Mode (Primary):**
   * Use WebSockets (Socket.io / Native WS) for signaling (SDP offer/answer exchange, ICE candidates).
   * Transfer raw encrypted chunks across `RTCDataChannel` (`ordered: true`).
   * **NAT Traversal:** Integrate STUN servers and a dynamic TURN server fallback (e.g., Coturn or Cloudflare Calls) for strict symmetric NATs and enterprise firewalls.
2. **Cloud Relay Mode (Fallback / Offline):**
   * Trigger fallback if WebRTC connection fails (ICE state `failed`/`disconnected`) OR if sender/receiver are asynchronous.
   * Upload encrypted chunks via Multi-part S3/R2 Uploads using pre-signed URLs.
   * Implement automated background cleanup (AWS S3 Lifecycle rules / Cloudflare Workers Cron) to purge expired chunks strictly after 10 minutes (or user setting).

---

## 3. Tech Stack Requirements

* **Frontend Framework:** Next.js (App Router, TypeScript).
* **Styling & Motion:** Tailwind CSS, Framer Motion (for fluid tab switches, modal transitions, and progress animations).
* **Icons:** Lucide-React.
* **PWA & Offline Capability:** `next-pwa` with a dedicated Service Worker handling offline fallback states and direct stream-to-disk pipelines.
* **Backend / Real-time:** Node.js with Socket.io (or Supabase Realtime) for room management and signaling.
* **Storage Infrastructure:** AWS S3 or Cloudflare R2 (for fallback temporary storage).
* **State Management:** Zustand or React Context API (lightweight local client state).

---

## 4. Detailed UI/UX & Layout Specs

### A. Global Layout & Theme
* **Theme:** Default Dark Mode (`#0D1117` base palette, modern subtle glassmorphism) with an accessible Light Mode toggle.
* **Responsive Design:** Optimized for touch devices (iOS/Android PWA) and high-density desktop browsers (Windows/macOS/Linux).
* **Header Bar:**
  * Logo: "DUDE FILE SHARING" with a status indicator (Green = WebSocket/Signaling Connected, Red/Yellow = Reconnecting/Offline).
  * Tab Switcher: "Send", "Receive", "History".
  * Quick Settings modal trigger (Gear icon).

### B. Component Breakdown & Functional Workflows

#### Module 1: Send Section (`/send` or Tab 1)
* **File Dropzone:** Multi-file and folder selector (`webkitdirectory` support) with drag-and-drop visuals. Display explicit total payload size warning if > 50GB.
* **Key Generation Panel:** Once files are queued, display:
  1. **6-Digit Numerical Code:** Prominent, monospaced, click-to-copy (e.g., `839 - 201`).
  2. **QR Code Generator:** Clean SVG QR code embedding the full direct connection URL.
  3. **Direct Link Button:** Copies `https://dude.share/receive?code=839201#key=...`.
* **Live Visual Countdown:** SVG circular progress timer showing key time-to-live (TTL, default: 10 minutes).
* **Transfer Dashboard:**
  * Active progress bar (percentage, dynamic gradients).
  * Real-time transfer rate indicator (MB/s or GB/s).
  * ETA calculation (dynamic based on rolling throughput average).
  * Protocol Indicator Badge (e.g., `P2P Direct`, `TURN Relay`, or `Cloud Encrypted`).
  * Cancel / Abort button.

#### Module 2: Receive Section (`/receive` or Tab 2)
* **Input Interface:** Large, high-contrast 6-digit PIN input with auto-tabbing and clipboard paste detection.
* **Pre-Download Verification Card:** Upon valid key entry, display file metadata (File name, Total size, Ext, AES-256 E2EE Verified Badge) before starting stream.
* **Action Trigger:** "Receive File" button initiating the WebRTC handshake or Cloud chunk download stream.
* **Download Progress Panel:** Displays matching speed metrics, progress bar, chunk verification checks, and auto-trigger file save picker on completion.

#### Module 3: History & Settings
* **History Log (IndexedDB / LocalStorage):**
  * Local-only log of sent/received items.
  * Details: File name, file size, timestamp, status (`Completed`, `Failed`, `Expired`), and protocol used.
  * Option to clear history log anytime.
* **Settings Panel:**
  * Adjust default expiration time (5 mins, 10 mins, 1 hour, 24 hours).
  * Force Transfer Method toggle (Auto, Always P2P, Always Cloud).
  * Maximum bandwidth throttler slider.

---

## 5. Architectural Diagram / Data Flow

```
[SENDER BROWSER]                                              [RECEIVER BROWSER]
│                                                               │
│ ── 1. Encrypt Chunk (AES-256-GCM) ──────────────────────────► │
│                                                               │
│ ── 2. Check WebRTC Connection ──────────────────────────────► │
│                                                               │
[P2P SUCCESS]                                                  [P2P SUCCESS]
│ ── 3a. Stream Encrypted Chunks via DataChannel ─────────────► │
│        (Flow control via bufferedAmount)                      │
│                                                               │
[P2P FAIL / OFFLINE]                                           [P2P FAIL / OFFLINE]
│ ── 3b. Upload Encrypted Chunks ──► [S3/R2 Cloud]               │
│                                          │                    │
│                                          └─ Stream Chunks ──► │
│                                                               │
▼                                                               ▼
[SHA-256 Hash]                                                [SHA-256 Check & Decrypt]
[Write to Disk via File API]
```

---

## 6. Implementation Checklist & Quality Standards
- [ ] No `out of memory` crashes when transferring files over 4GB in Chrome/Safari.
- [ ] Zero unencrypted data passed over WebSockets, WebRTC data channels, or Cloud storage buckets.
- [ ] Responsive PWA manifest fully configured with offline fallback page and install prompt.
- [ ] Unit & integration test suites verifying chunk encryption/decryption consistency.

```
### What Makes This Optimized Prompt Better?
 1. **Solves Memory Issues:** Explains *how* to handle 50GB payloads without crashing the browser (File Access API + backpressure throttling).
 2. **Hardens Security:** Clarifies where encryption keys live (in the link hash # fragment so they never touch the server) and specifies chunk-level AES-GCM IV handling.
 3. **Improves WebRTC Realities:** Accounted for TURN servers and WebRTC network failures—ensuring the application falls back gracefully to S3/R2 temporary storage.
 4. **Clarifies PWA Requirements:** Added PWA manifest specs and Service Worker setup for stream downloading.

Free to use. No credit card required.