QuickDrop

Peer-to-peer file and text transfer for any device, anywhere. Like AirDrop, but global and in your browser.

Features

• Global device-to-device transfer - Send files and text to any connected device worldwide
• No authentication - Just name your device and start sharing
• No database - Files stored on disk, zero configuration
• Real-time device discovery - See online devices automatically
• Inbox system - Received items wait for you in your inbox
• Mobile-friendly - Works great on phones and tablets

Quick Start

# Clone the repository
git clone https://github.com/YOUR_USERNAME/quickdrop.git
cd quickdrop

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 on multiple devices to start sharing.

How It Works

1. Register your device - On first visit, enter a name for your device (e.g., "John's Laptop")
2. See online devices - Other connected devices appear in the "Nearby Devices" list
3. Send files or text - Click on a device to open the send panel
4. Check your inbox - Received items appear in your inbox with download/copy options

Production Deployment

# Build the application
npm run build

# Start the production server
npm start

For persistent deployment, consider using:

• PM2 for process management
• A reverse proxy like Nginx for HTTPS
• Deploy to a cloud provider (Vercel, Railway, etc.) for global access

Configuration

QuickDrop works out of the box with sensible defaults:

Setting	Default	Description
Port	3000	Change with -p flag or PORT env var
Max file size	100MB	Hardcoded in send handler
Storage location	./uploads/	Created automatically
Max inbox items	50 per device	Older items auto-cleanup
Device timeout	30 seconds	Devices go offline after no heartbeat

Tech Stack

• Next.js 16 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS 4 - Styling

Project Structure

src/
├── app/
│   ├── page.tsx              # Main UI (device list + inbox)
│   ├── layout.tsx            # Root layout
│   └── api/
│       ├── devices/          # Device registration & discovery
│       ├── inbox/            # Inbox management
│       └── send/             # Send file/text to devices
├── components/
│   ├── DeviceNameModal.tsx   # Initial device registration
│   ├── DeviceSettings.tsx    # Device settings dropdown
│   ├── DeviceList.tsx        # Online devices list
│   ├── DeviceCard.tsx        # Individual device card
│   ├── SendPanel.tsx         # Send file/text modal
│   └── Inbox.tsx             # Received items inbox
└── lib/
    └── storage.ts            # Filesystem operations

Development

# Run development server with hot reload
npm run dev

# Type checking
npx tsc --noEmit

# Linting
npm run lint

# Build for production
npm run build

License

MIT License - see LICENSE for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request