Real-time Collaborative Kanban Board

Project roadmap

1. 01

   Build the board with Eloquent

   ~3h

   Create a Laravel app with authentication (for example Breeze). Model boards (with members), lists and cards with a position column for ordering and a version number. Build the board page with lists and cards, forms to create and edit cards, and drag and drop (with SortableJS) that saves the new list and position through a controller in a transaction. Only board members can see or change a board (use policies). Done when: a single user can manage cards, and the order is kept after reloading.

2. 02

   Set up broadcasting

   ~2h

   Run Redis and Soketi (or Laravel Reverb) with Docker, set the broadcasting driver, and install Laravel Echo with pusher-js in the front end. Queue broadcast events with a queue worker using Redis. Define a private channel board.{id} with an authorization callback checking board membership. Done when: a test event sent from Tinker reaches a browser subscribed to the board's channel.

3. 03

   Broadcast card changes

   ~2.5h

   Create events CardCreated, CardUpdated, CardMoved and CardDeleted implementing ShouldBroadcast, sent after the database transaction commits and carrying only what the page needs. Use toOthers() so the sender's page isn't updated twice. In the browser, listen with Echo and update the board in place. Done when: changes made in one browser appear in another within a second, without reloading.

4. 04

   Handle simultaneous edits

   ~2h

   Send each card's version with every edit and move. On save, update only if the version still matches (with a WHERE on the version, then increase it); otherwise return 409 with the current card, and show the user the latest version with a choice to reapply their change. Keep positions consistent when two people move cards at once, by recalculating the list's positions in the transaction. Done when: two users editing the same card at once never lose a change silently.

5. 05

   Show who's viewing

   ~1.5h

   Use a presence channel for each board, returning each user's id, name and a color from the authorization callback. Show avatars of the people currently on the board, updating when they join and leave. Optionally show which card someone is editing using client events (whisper). Done when: opening the board in two browsers shows both users, and closing one removes it.

6. 06

   Test it

   ~2h

   Write Pest or PHPUnit tests: policies (non-members are refused), moving cards and positions, version conflicts returning 409, events dispatched after changes (with Event::fake), and channel authorization. Test the live behavior by hand with two browsers and note the checks in TESTING.md. Done when: the tests pass, and the manual checklist is complete.

Resources

• DocsLaravel: broadcasting
• DocsLaravel: events
• DocsSoketi documentation
• DocsLaravel Reverb
• DocsSortableJS