Collaborative Whiteboard

Project roadmap

1. 01

   Design the sync model

   ~2.5h

   Write DESIGN.md: a stroke has a UUID, an author device id, color, width, points and a timestamp; a board is a list of events (add stroke and remove stroke) applied in a fixed order (timestamp, then id), so every device ends up the same. Describe the relay server (it stores each board's events with a sequence number, broadcasts new ones, and sends missed events when a client reconnects), the local outbox of unsent events, and what happens on reconnect. Done when: DESIGN.md explains events, ordering and offline behavior.

2. 02

   Draw with SwiftUI

   ~2.5h

   Build a drawing view with Canvas and a DragGesture: collect points while dragging, draw the current stroke live and smooth it with quadratic curves, and simplify long strokes to fewer points. Add a color and width picker and undo for your own last stroke. Support Apple Pencil pressure on iPad as an extra. Done when: drawing is smooth, and undo removes your last stroke.

3. 03

   Save strokes with SwiftData

   ~1.5h

   Create SwiftData models for boards and stroke events (with the points encoded compactly), save each finished stroke immediately, and rebuild the board from its events when opened. Done when: drawings survive closing and reopening the app.

4. 04

   Build the relay server

   ~2h

   Write a small WebSocket server (for example with Vapor in Swift, or Node.js) that keeps events per board with sequence numbers, ignores events it has already seen (by id), broadcasts new ones to everyone on the board, and sends events after a client's last sequence number when it connects. Limit event size and board size. Done when: two test clients on the same board exchange events and catch up after reconnecting.

5. 05

   Sync strokes

   ~2.5h

   Connect with URLSessionWebSocketTask, send events from a local outbox (stored in SwiftData alongside each stroke) and remove them once the server confirms, and apply incoming events from others, ignoring ones already stored. Reconnect with increasing waits, requesting events after the last sequence number received, and pause while the app is in the background. Done when: two devices drawing at the same time end up with identical boards.

6. 06

   Handle offline drawing

   ~1.5h

   Show the connection state and how many strokes are waiting to be sent. Test drawing on both devices while one is offline, then reconnecting: both must end up with the same strokes in the same order, with nothing lost or duplicated. Done when: offline drawing merges correctly on both devices.

7. 07

   Test it

   ~2h

   Write unit tests for applying events and ordering (including duplicates and events arriving out of order) as pure functions, the outbox with an in-memory SwiftData container, and the sync client with a fake socket that drops and reconnects. Add a test simulating two devices with random events that checks both end up identical. Done when: all tests pass.

Resources

• DocsSwiftUI Canvas documentation
• DocsSwiftUI DragGesture
• DocsSwiftData documentation
• DocsURLSessionWebSocketTask documentation
• DocsVapor: WebSockets