javascriptadvanced60 minutes

Advanced Real-Time Collaborative To-Do List with Optimistic UI

Build a sophisticated real-time collaborative to-do list application that supports multiple users adding, updating, and deleting tasks simultaneously, while maintaining a responsive optimistic UI and conflict resolution.

Challenge prompt

Create a JavaScript function that manages a real-time collaborative to-do list. The function should handle the following features: - Real-time synchronization of tasks across multiple users via a simulated WebSocket or event emitter. - Optimistic UI updates that immediately reflect changes locally before confirmation from the server. - Conflict resolution when two users modify the same task simultaneously (latest timestamp wins). - Support for adding new tasks, editing task descriptions, marking tasks as complete/incomplete, and deleting tasks. - Efficient updates to minimize re-renders or full list re-fetches. You should design the architecture and state management of this to-do list so it can be integrated into a front-end application, but the core focus is building the state handler and synchronization logic purely in JavaScript. Write a function `createCollaborativeTodoManager()` that returns an object exposing methods: - `addTask(description)` - `editTask(id, newDescription)` - `toggleComplete(id)` - `deleteTask(id)` - `onRemoteUpdate(update)` - to be called when receiving remote update events. Each task should have a unique ID, description, completed status, and a lastModified timestamp. Simulate remote updates by calling `onRemoteUpdate` with task changes from other users. Implement logic to merge them while preserving user experience and data integrity.

Guidance

• Use an appropriate data structure to store tasks by their unique ID for efficient lookup and updates.
• Implement optimistic updates by applying changes locally and then validating or merging them with remote updates received.
• For conflict resolution, compare the lastModified timestamps to determine the winning update.
• Keep the API methods pure and side-effect free, except for internal state changes, and design for easy integration with UI event handlers.

Hints

• Consider using a Map to manage tasks keyed by their unique IDs.
• Use `Date.now()` to generate timestamps for modification tracking.
• For optimistic UI, update the local state immediately, then reconcile with any incoming remote updates in `onRemoteUpdate`.

Starter code

function createCollaborativeTodoManager() {
  const tasks = new Map();

  function addTask(description) {
    // TODO: Implement
  }

  function editTask(id, newDescription) {
    // TODO: Implement
  }

  function toggleComplete(id) {
    // TODO: Implement
  }

  function deleteTask(id) {
    // TODO: Implement
  }

  function onRemoteUpdate(update) {
    // update: { id, description?, completed?, lastModified }
    // TODO: Merge update with current task state
  }

  return { addTask, editTask, toggleComplete, deleteTask, onRemoteUpdate };
}

Expected output

After calling addTask('Test task') and then toggleComplete on that task's ID, the local task state should immediately reflect the new completed status. If a remote update arrives with an edited description and newer lastModified timestamp, the local state should update accordingly, overriding the local state if conflict resolution decides the remote is newer.

Core concepts

Real-time synchronizationOptimistic UIConflict resolutionState management

Challenge a Friend

Send this duel to someone else and see if they can solve it.