Shared Whiteboard Client

Project roadmap

1. 01

   Design the sync model

   ~2.5h

   Write DESIGN.md: a stroke has a UUID, the author's device id, color, width, a list of points, and a timestamp; boards are append-only lists of stroke events (add stroke, and remove stroke for undo); every device applies the same events and orders strokes by timestamp then id, so all devices end up identical. Describe the server (a relay that stores events per board and sends new ones, and missed ones after reconnecting) and the local outbox. Done when: DESIGN.md explains the events, ordering and offline behavior.

2. 02

   Draw with Compose

   ~2.5h

   Build a drawing screen with Compose Canvas and pointerInput: capture points while dragging, draw the current stroke live, and smooth it (for example with quadratic curves between points). Add a color and width picker and undo for your own last stroke. Reduce the number of points on long strokes to keep them small. Done when: drawing feels smooth, and undo removes your last stroke.

3. 03

   Save locally with Room

   ~2h

   Store boards and stroke events in Room (with the points encoded as JSON or a compact binary), write each finished stroke immediately, and rebuild the board from the database when it opens. Keep the canvas in sync with a Flow from Room, so the screen always shows what's stored. Done when: strokes survive closing and reopening the app.

4. 04

   Build the relay server

   ~2h

   Write a small WebSocket server (for example with Ktor) that keeps each board's events in order, assigns each a sequence number, broadcasts new events to everyone on the board, ignores events it has already seen (by id), and on connect sends events after the client's last sequence number. Limit event and board size. Done when: two test clients on the same board receive each other's events and catch up after reconnecting.

5. 05

   Sync strokes

   ~2.5h

   Add each local event to an outbox table in the same Room transaction. A sync component sends the outbox when connected and removes entries once the server confirms them, and applies incoming events to Room (ignoring ones already stored). Reconnect with increasing waits, and request missed events from the last sequence number seen. Done when: two emulators drawing at the same time end up with identical boards.

6. 06

   Handle offline drawing

   ~1.5h

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

7. 07

   Test it

   ~2h

   Write tests: stroke ordering and applying events as pure functions (including duplicates and events arriving out of order), Room outbox transactions, the sync component against a fake socket that drops and reconnects, and the relay server's catch-up logic. Add a test simulating two devices with random events that checks both end up identical. Done when: all tests pass.

Resources

• DocsJetpack Compose: graphics and Canvas
• DocsJetpack Compose: pointer input
• DocsRoom documentation
• DocsKtor: WebSockets (server)
• DocsAndroid: build an offline-first app