Case Study: Realtime Cloud Clipboard

Problem

Moving snippets of text, code, or links between devices quickly often involves sending emails to oneself or using bloated messaging apps. A frictionless, instantly syncing clipboard was needed.

Constraints

The application needed to have sub-second latency for synchronization across multiple devices simultaneously. It also needed to handle potential conflict resolution if edited concurrently.

Architecture

[React Client] ↔ [Supabase Realtime (WebSockets)] ↔ [PostgreSQL Database]

      ↓

[Next.js API (Auth & Validation)]

Trade-offs & Engineering Decisions

  • Supabase vs Firebase: Chosen for raw PostgreSQL capabilities and robust Row Level Security (RLS), avoiding vendor lock-in with NoSQL document stores.
  • Optimistic Updates: Debated waiting for server confirmation vs optimistic UI. Opted for a hybrid where edits show instantly, but a subtle sync state indicator provides feedback.

Challenges

Managing WebSocket connection lifecycle in a React Strict Mode environment caused connection thrashing. Implemented a robust singleton pattern for the Supabase client to ensure stable, single-instance connections.

Outcome

A highly responsive clipboard tool syncing data in under 100ms globally, providing a seamless user experience across mobile and desktop.

Future Improvements

If this system needed to support 10x traffic or millions of users, I'd introduce Redis for in-memory pub/sub caching, rate limiting at the API Gateway level, and implement conflict-free replicated data types (CRDTs) for robust concurrent editing.

← Back to Projects