✈️ DropCast

한국어 버전 (Korean Version)

A premium local bridging service that instantly shares files bidirectionally between mobile and Windows PC inside the same network environment—wire-free, account-free, and setup-free.

---

✨ Key Features

1. Zero Setup & QR Code Connection: No need to install any dedicated apps on your smartphone. Just point your default camera at the QR code on the PC screen to connect instantly.
2. Real-time Bidirectional Transfer: Drag and drop files onto the PC browser to send them to your smartphone, or select photos/videos from your smartphone gallery to send them immediately to your PC.
3. Automated Tunnel Mode: Solves double router (Double NAT/firewall) or different subnet communication limitations. Start the server with a single command to automatically establish a secure external proxy tunnel and auto-sync the QR code connection link.
4. Mobile Security Checkpoint Guidance: Automatically displays the host PC's public IP address on the dashboard to easily bypass the localtunnel security checkpoint on mobile devices.
5. Real-time Progress Indicator: Shows a sleek, animated progress bar from 0% to 100% on the mobile device during upload.
6. Premium Glassmorphism UI: High-end user experience with smooth glass-like acrylic textures, deep space dark themes, and subtle micro-animations.
7. Strong Privacy & Security: Files are never uploaded to third-party commercial cloud servers. They travel directly and securely inside your local network or via point-to-point encrypted tunnels.
8. Automatic Disk Cleanup: Shared temporary files are automatically deleted after 15 minutes to preserve your PC disk space.

---

🛠️ Tech Stack

• Backend: Node.js, Express
• Real-time Protocol: Socket.io (real-time sockets for device pairing and upload state synchronization)
• File Stream: Multer (handles large file uploads and ensures flawless Unicode filename decoding)
• Tunneling: Localtunnel (programmatic integration for Double NAT bypassing)
• Frontend: HTML5 (Semantic elements), JavaScript (ES6+), Vanilla CSS (Glassmorphic design system)
• Visual Assets: Dynamic QR code generator (qrcode), Google Fonts (Outfit, Plus Jakarta Sans)

---

🚀 Getting Started

1. Prerequisites

• Node.js (version 16 or above recommended) installed on your PC.

2. Install Dependencies

Open a terminal in the project directory and run the following command to download dependencies:

npm install

3. Running the Server

Option A: Normal Mode (Recommended for same Wi-Fi subnet)

Run the standard local server:

npm start

Option B: Tunnel Mode (Recommended for Double NAT / Different Subnets)

If your PC is connected to a sub-router (Double NAT) and your phone is connected to the main Wi-Fi router, start the server in tunnel mode:

npm run tunnel

Once running, the terminal will elegantly print the access details:

----------------------------------------------------
DropCast Local Server is active!
PC Access:     http://localhost:3000
Mobile Access: http://192.168.x.x:3000/mobile.html

Initializing local tunnel...
Tunnel Status: ACTIVE 🌐
Tunnel URL:    https://xxxx.loca.lt
Mobile Tunnel: https://xxxx.loca.lt/mobile.html
----------------------------------------------------

---

📱 Detailed Usage Guide

Step 1: Access on PC

• Open a browser on your PC and navigate to http://localhost:3000.

Step 2: Connect Mobile Device

• Turn on the camera app on your smartphone (iPhone or Android) and scan the QR Code displayed on the left side of the PC screen.
• Once connected, the status indicator in the top right corner of the PC screen changes to a green dot showing Mobile Connected.
• Note: In Normal Mode, PC and mobile must be connected to the exact same Wi-Fi router. In Tunnel Mode, they can be on different networks or cellular data.
• Bypass Warning: If Localtunnel asks for a developer IP address on your mobile screen during first access, enter the PC Public IP displayed in the blue info box on your PC dashboard to bypass.

Step 3: Send Files

• PC ➔ Mobile: Drag files from your PC file explorer and drop them onto the dragzone area in your PC browser. A download button will instantly appear on your mobile screen.
• Mobile ➔ PC: Tap the large Upload Files button in the center of the mobile screen, choose photos/videos/documents, and watch the real-time progress bar fill up. Once completed, the file will appear on the PC screen accompanied by a sweet notification chime.

---

📁 File Structure

dropcast/
├── package.json               # Project metadata & npm dependencies
├── server.js                  # Express web server, local/public IP detection, localtunnel & cleanup task
└── public/
    ├── index.html             # [PC Client] Dashboard and dragzone layout
    ├── mobile.html            # [Mobile Client] Touch-optimized upload/download page
    ├── style.css              # Central premium Glassmorphic design stylesheet
    ├── app.js                 # PC frontend file drop & socket synchronization
    └── mobile.js              # Mobile frontend touch upload, XHR progress & polling fallbacks

---

📝 License

This project is licensed under the MIT License.