Multi-Device Synchronization

​

How Multi-Device Sync Works

​

Architecture Overview

1. Session Creation: First device generates a unique 5-character alphanumeric code
2. Session Joining: Other devices join using the same code
3. Real-time Sync: All changes propagate instantly via Supabase Real-time
4. Persistent Storage: Content persists in the database until manually deleted

​

Complete Sync Workflow

​

Starting a New Session

// Session code generation algorithm
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let newCode = "";
for (let i = 0; i < 5; i++) {
  newCode += characters.charAt(Math.floor(Math.random() * characters.length));
}

​

Joining from Another Device

​

Adding More Devices

• Desktop computers (Windows, Mac, Linux)
• Mobile phones (iOS, Android)
• Tablets
• Multiple browsers on the same device

​

Real-Time Synchronization

​

How Real-Time Updates Work

const channel = supabase
  .channel("clipboard")
  .on("postgres_changes", 
    { event: "*", schema: "public", table: "clipboard" }, 
    (payload) => {
      if (payload.new.session_code === sessionCode && payload.eventType === "INSERT") {
        setHistory((prev) => [payload.new, ...prev]);
      }
      if (payload.eventType === "DELETE") {
        setHistory((prev) => prev.filter((item) => item.id !== payload.old.id));
      }
    }
  )
  .subscribe();

​

What Gets Synced

​

Sync Speed

• Text content: Instant (< 100ms typically)
• Small files (< 1MB): 1-2 seconds
• Large files (up to 10MB): 5-10 seconds depending on connection
• Image compression: Adds 1-3 seconds before upload

​

Common Use Cases

​

1. Desktop to Mobile Transfer

• Long URLs or links
• Addresses and contact info
• Confirmation codes and passwords
• Text you’re composing on desktop but need on mobile

​

2. Team Collaboration

​

3. Cross-Platform Development

​

4. Temporary File Transfer

​

Session Management

​

Staying in a Session

localStorage.setItem("sessionCode", inputCode.toUpperCase());

• You remain in the session after closing the browser
• You can close and reopen ClipSync without rejoining
• Clearing browser data will remove your session

​

Leaving a Session

​

Deleting Session Content

​

Clear All Clipboard Items

​

Edit or Delete Individual Items

1. Click the green edit icon (✏️) next to an item
2. Content loads into the editor
3. Make changes and click “Send to Clipboard”
4. Original item is deleted, new one is created

​

Best Practices

​

Security and Privacy

• Use unique sessions: Create a new session for each use case or project
• Don’t share session codes publicly: Anyone with the code can access all content
• Mark sensitive content: Use the sensitive flag for passwords, API keys, credentials
• Clean up regularly: Delete old content you no longer need
• Leave sessions: Exit sessions you’re no longer using

​

Performance Optimization

• Compress images before upload (automatic for images)
• Stay under 10MB file size limit
• Use file sharing services for larger files

• Use search to find specific content (search box available in history)
• Delete old items to keep history manageable
• Consider creating separate sessions for different projects

​

Network Considerations

You are offline. Please connect to the internet to sync clipboard content.

• Can view existing clipboard history
• Can type in the editor (saved to session storage)
• Cannot send or receive new content
• Cannot upload files
• Real-time sync pauses

• Reconnects automatically
• Fetches latest clipboard history
• Resumes real-time sync

​

Session Organization Tips

1. Personal vs. Shared Sessions
   • Keep a personal session for your own devices
   • Create separate sessions for collaboration
2. Project-Based Sessions
   • One session per project or client
   • Easier to track and clean up
3. Temporary Sessions
   • Create throw-away sessions for one-time transfers
   • Leave and forget after use
4. Long-Term Sessions
   • Use for ongoing personal sync
   • Regularly clean up old content
   • Save the session code somewhere safe

​

Troubleshooting Multi-Device Sync

​

Content Not Appearing on Other Devices

1. Both devices are using the exact same session code (case-insensitive)
2. Both devices are online (check for offline warning banner)
3. Browser console shows no errors
4. Real-time subscription is active (visible in Network tab > WS)

• Refresh the page on the device not receiving updates
• Leave and rejoin the session
• Check your internet connection

​

Session Code Not Working

• Typo in session code (double-check all 5 characters)
• Session was never created (ensure first device sent content)
• Database connectivity issue

• Verify the exact session code from the first device
• Ensure the first device successfully created the session
• Try creating a new session

​

Slow Sync Performance

1. Check file size: Large files (> 5MB) take longer
2. Check internet speed: Slow connections affect sync speed
3. Check device performance: Old devices may process slower
4. Image compression: Large images need compression time

​

Files Not Uploading

• File exceeds 10MB limit (see error: “File size exceeds 10MB”)
• Unsupported file type
• Storage bucket not configured in Supabase
• No internet connection

• Compress files before upload
• Verify file type is supported
• Check Supabase storage configuration

​

Advanced Features

​

Search Clipboard History

const results = history.filter((item) => 
  item.content.toLowerCase().includes(searchKeyword.toLowerCase())
);

​

Link Detection

const urlRegex = /(https?:\/\/[^\s]+|www\.[^\s]+)/g;
return text.replace(urlRegex, (url) => {
  let hyperlink = url.startsWith("www.") ? `https://${url}` : url;
  return `<a href="${hyperlink}" target="_blank">${url}</a>`;
});

​

Dark Mode Sync

localStorage.setItem('darkMode', JSON.stringify(newMode));

​

Next Steps