Introduction

When you have Apple devices, like an iPhone, iPad, or a Mac, you can share files, photos, links, and much more from your iPhone to your iPad or vice-versa using a sharing protocol exclusively made for Apple called AirDrop.

AirDrop is Apple's seamless file-sharing solution, but what if you want to share content between your Apple device and a Windows or Linux machine?

I introduce CLIP (Convenient Local Interface for Peer-to-peer transfer). While the full acronym would be 'CLIPT', I opted for 'CLIP' as it's more concise and memorable.

Quick Links

Before we dive in, here are the resources mentioned in this post:

CLIP Server - Core Node.js server implementation

CLIP Client - React-based web client

Receive Content From Computer shortcut

Send Content To Computer shortcut

The Problem and Motivation

I wanted to share a link with my girlfriend through iMessage, but the link was on my PC. I had to put the link in my Google Keep, go to my iPhone, open the Google Keep there, copy the link, and then send it to my girlfriend. I had gone through several steps just to share the link I found with my girlfriend.

From there, it made me think: what if I made an application that sends the data coming from my PC to my iPhone and vice-versa?

While sharing content between Apple devices is seamless with AirDrop, I encountered a common frustration when trying to share content between my Windows PC and iPhone.

Exploring Solutions

Before diving into implementation, I explored several potential solutions to this cross-platform sharing challenge:

1. A mobile application that acts like a mobile client for sending and receiving data.

   • I want to run and test this application on my iPhone, but I'm not coding on a Mac.

2. Buy a mac and use that as my main driver.

   • I wish I had money. Also, I want this to be universal; regardless of what OS I'm using, I should be able to transfer data from my phone to the PC.

3. Use messenger or other messaging apps with desktop versions instead

   • We're already using iMessage, and I don't want to switch to another messaging platform again.

The Implementation

The project architecture consists of three components:

1. A Node.js API server that handles data transfer
2. An iPhone client using Apple Shortcuts
3. A web application client for sending data

I will divide this section under three parts: The API server, my iPhone, and web client. Let’s start with the API server.

The API server: The Bridge

The API server, built with Node.js, acts as the central hub for all data transfer between devices. It provides several REST endpoints and utilities to handle different types of content and ensure proper delivery between clients.

Core Features

1. REST Endpoints

   • /poll - Handles connection requests from mobile devices
   • /content - Receives and processes content from the web client
   • /text - Manages text and URL content transfers
   • /image - Handles image file uploads (currently in development)

2. File Processing

   • Uses multer library for handling file uploads
   • Currently supports image file storage
   • Planned support for additional file types in future updates

3. URL Processing

   • Implements smart URL detection and transformation
   • Converts web URLs to mobile URI schemes for supported apps (as of now are YouTube and Reddit)
   • Enables automatic app launching on iOS for supported platforms
   • Examples:

     Web URL: https://reddit.com/r/programming
      → URI Scheme: reddit://r/programming
     
     Web URL: https://youtube.com/watch?v=...
     → URI Scheme: youtube://watch?v=...

Technical Implementation

The server uses Express.js for handling HTTP requests and implements middleware for:

• Request validation
• File type verification
• Error handling

Future Enhancements

• Support for additional file types beyond images
• Real-time status updates using WebSockets
• Extended URI scheme support for more applications

The Mobile Client: Leveraging iOS Shortcuts

The iOS implementation leverages Apple's built-in Shortcuts app, which provides automation capabilities without requiring custom app development. The solution consists of two main shortcuts:

Receive Content From Computer shortcut

As the name suggests, it's a shortcut that receives content from the computer. Done.

Just kidding! This shortcut establishes a connection with the computer and receives content through the following steps:

1. Connection Phase

   • Prompts user from API server IP address
   • Initiates connection via /poll endpoint
   • Triggers web application launch on computer

2. Content Handling

   • Receives content from the web application

   • Processes content based on type:

     • YouTube links -> Opens YouTube app
     • Reddit links -> Opens Reddit app
     • Other content -> Handles appropriately

3. User Experience

   • Automatic app launching for supported links (for now, YouTube and Reddit)
   • Seamless content transfer without manual copying
   • Demo video link

Send Content To Computer shortcut

So, this shortcut enables sending content from iPhone to computer with the following workflow:

1. Setup

   • Requests server IP address
   • Presents content type selection (Text/Link or Image)

2. Content Processing

   • Receives content from the web application

   • For Text/Link:

     • Sends to /text endpoint
     • Computer stores in clipboard or opens browser

   • For Images (WIP):

     • Sends to /image endpoint
     • Computer saves to specified directory

3. Demos

   • General usage
   • Link Sending

The Web Client: Simple yet Effective

The web client consists of a simple React application built with Vite, designed for sending content to mobile devices. While minimalist in appearance, it employs several modern web development tools to ensure reliability and maintainability:

Tech Stack

• Frontend Framework: React
• UI Components: Material UI for a clean, modern interface
• Form Management: react-hook-form for form state handling
• Validation: Zod schema validation library
• API Communication: Axios for server requests

Features & Implementation

The application consists of a single page with two main components:

1. A text input field for content entry
2. A submit button that triggers the POST /content endpoint

When a mobile device initiates a content request, the user is automatically redirected to this interface. The form submission process follows these steps:

1. User enters content in the text field
2. Zod validates the input
3. On successful validation, the content is sent to the API server
4. The server forwards the content to the requesting mobile device

Future Enhancements

• Add support for drag-and-drop file uploads
• Implement progress indicators for file transfers
• Add real-time connection status monitoring
• Expand the UI to support different content types

The deliberate simplicity of the interface helps maintain focus on the primary task: quick and efficient content transfer between devices.

The challenges

Throughout the development process, I encountered and overcame several key challenges:

Technical Challenges

1. Cross-Platform IP Address Detection: Implementing reliable device discovery across different operating systems and network configurations.
2. File Type Handling: Ensuring proper handling and validation of various file formats while maintaining security.
3. Network Communication: Managing reliable data transfer between devices on local networks with different configurations.

Platform Specific Challenges

1. iOS Implementation Considerations: Working within the constraints of iOS Shortcuts while maintaining functionality.
2. Android Support Planning: Designing the architecture to eventually support Android without major refactoring.
3. Windows/Linux Compatibility: Ensuring consistent behavior across different desktop operating systems.

Additional Observations

During the initial development stages, I made several interesting discoveries:

1. Cross-Apple Device Compatibility: Since Shortcuts is available across Apple devices, the solution works seamlessly between iPhones, iPads, and Macs. This means you can send photos and texts between any Apple device and a PC running the server.
2. Network Considerations: The solution currently requires devices to be on the same local network, which provides both security benefits and some limitations.
3. Shortcut Flexibility: The modular nature of Apple Shortcuts allows for easy customization and extension of functionality.

Future Work

Looking ahead, there are several exciting improvements planned:

1. Enhanced File Support:

   • Expand beyond images to support various file types
   • Implement proper file type detection and handling

2. Android Support:

   • Develop a companion Android app
   • Ensure cross-platform compatibility

3. User Interface Improvements:

   • Create a more polished web interface
   • Add progress indicators and dropzone for file transfers
   • Implement better error handling and user feedback

Conclusion

This project demonstrates how relatively simple tools can be combined to create practical solutions for everyday problems. While AirDrop provides seamless file sharing within the Apple ecosystem, CLIP aims to bridge the gap between Apple devices and other platforms.

The current implementation, while basic, provides a foundation for more advanced features. The use of Apple Shortcuts proves to be a powerful approach, eliminating the need for a dedicated iOS app while maintaining flexibility and ease of use.

Stay tuned for Part 2 of this dev journal, where I'll detail the implementation of Android support and additional file sharing capabilities. Your feedback and suggestions for new features are always welcome!

Peace!