Realtime Collaboration Board

Project roadmap

1. 01

   Design the model and messages

   ~2.5h

   Write DESIGN.md: boards, columns and cards (title, description, column, position, version); the commands a client sends (create, edit, move and delete card) each including the version it's based on; and the events the server broadcasts. Store positions as fractional values (a card dropped between 1.0 and 2.0 gets 1.5), so a move changes only one card. Define the message types as C# records serialized with System.Text.Json. Done when: DESIGN.md covers every command, event and conflict case.

2. 02

   Build the storage and REST API

   ~2.5h

   Store boards, columns and cards with EF Core (SQLite or PostgreSQL), using the card version as a concurrency token. Add REST endpoints to load a board with all its columns and cards in order. Add a way to rebalance positions in a column when the fractional values get too close together. Done when: a board loads in the correct order through the API.

3. 03

   Add live updates with SignalR

   ~2.5h

   Create a BoardHub where clients join a group per board. Commands are sent to the hub, validated, saved, and then broadcast as events to everyone in that board's group, including the sender, whose screen updates from the event. Show who is viewing the board. Done when: two browsers on the same board see each other's changes instantly.

4. 04

   Detect and resolve conflicts

   ~3h

   When a command's version doesn't match the stored version, reject it with a conflict event containing the current card, and don't change anything. In the browser, show the conflict clearly (your change and the current version) and let the user reapply or discard. A move that conflicts with a delete must fail cleanly. Done when: two users editing the same card at once never lose an edit without being told.

5. 05

   Build the board page

   ~3h

   Build the board with columns and cards, drag and drop (with SortableJS or native drag events), inline editing and new card forms. After a drag, calculate the new position from the neighboring cards and send the move. Apply incoming events to the page without reloading, and reload the whole board after a reconnect so nothing is missed. Done when: dragging and editing work smoothly, and reconnecting catches up.

6. 06

   Add limits and logging

   ~1.5h

   Validate lengths (title up to 200 characters), limit commands per connection (for example 20 per second) and limit the number of cards per board. Log every command with the user, card, result and duration using structured logging. Done when: invalid and excessive commands are rejected, and the logs show every change.

7. 07

   Test concurrency

   ~2.5h

   Write tests: unit tests for position calculation and rebalancing, and integration tests using WebApplicationFactory with two SignalR clients that edit the same card at once (exactly one succeeds, the other gets a conflict), move cards at the same time (the final order is consistent), and edit a deleted card. Done when: dotnet test passes reliably when run several times.

Resources

• DocsASP.NET Core SignalR overview
• DocsEF Core: handling concurrency conflicts
• DocsSystem.Text.Json overview
• DocsSortableJS
• ArticleFigma: how multiplayer technology works