A React and TypeScript frontend application that synchronizes user preferences (theme, language, and font size) across multiple browser tabs in real-time.
- Prerequisites: Ensure Node.js is installed on your system.
- Clone the repository:
git clone <YOUR_GITHUB_REPOSITORY_URL> cd multi-tab-sync
Install dependencies:
Bash npm install Run the development server:
Bash npm run dev Execution: Open the provided local URL (e.g., http://localhost:5173) in multiple browser tabs side-by-side to test the real-time synchronization.
Technical Architecture & Strategies Synchronization Strategy To achieve real-time cross-tab synchronization with sub-100ms latency without relying on a backend server, this application utilizes the native browser BroadcastChannel API combined with the storage event as a secondary fallback.
When a user updates a setting in one tab, the new state is immediately saved to localStorage (handling the persistence requirement) and a message payload containing the updated settings is posted to the shared BroadcastChannel.
All other open tabs listen to this channel and the storage event. Upon receiving a payload, they update their own local React state, causing an immediate, synchronized re-render across the entire browser matrix.
Conflict Resolution & Consistency To handle simultaneous edits deterministically (e.g., a user modifying settings in two different tabs at the exact same millisecond), the application implements a Last-Write-Wins (LWW) strategy using Unix timestamps.
Every settings payload includes a lastUpdated timestamp.
When a tab receives an incoming broadcast, it compares the timestamp of the incoming settings against its current local settings.
The tab only accepts and applies the incoming state if its timestamp is strictly greater than the local timestamp. This guarantees that all tabs eventually converge on the most recent state, dropping delayed or older updates.