Real-time Collaboration

Difficulty: Intermediate

Overview

Gone are the days of refreshing your browser to see if teammates made changes. Real-time collaboration means you see updates the instant they happen—tasks moving across columns, new comments appearing, assignees changing—all without hitting refresh. It's like having the entire team working on the same whiteboard, no matter where they're located.

Waymaker taskboards use real-time synchronization to keep everyone in sync. When a team member drags a task to "Done," you see it move immediately. When someone adds a comment, it appears in your activity feed instantly. This guide teaches you how to leverage real-time features, handle concurrent editing, resolve conflicts, and collaborate seamlessly with your team.

What You'll Learn

• How real-time synchronization works in taskboards
• Understanding presence indicators (who's viewing the board)
• Managing concurrent editing scenarios
• Resolving edit conflicts when they occur
• Using the live activity feed
• Connection status monitoring
• Offline behavior and automatic sync
• Best practices for real-time team collaboration

Prerequisites

• A Waymaker account with a taskboard
• Team members collaborating on the same board (see Inviting Team Members)
• Basic understanding of task management (see Basic Task Management)
• Stable internet connection

How Real-time Sync Works

Real-time Subscriptions

Waymaker uses real-time synchronization for instant updates:

When you open a taskboard:

1. Browser connects to the real-time sync service
2. Subscribes to board's data channel
3. Receives all changes from other users instantly
4. Connection stays open in background

When you make a change:

1. Your change saves to database (optimistic update in UI)
2. Database broadcasts change to all connected clients
3. Other users' browsers receive update within milliseconds
4. Their UI updates automatically

No polling, no refresh needed. This is true real-time, not "check every 5 seconds."

What Updates in Real-Time

Immediate updates you'll see:

Tasks:

• ✅ Task created (appears instantly)
• ✅ Task edited (title, description, dates, etc.)
• ✅ Task moved between sections (drag-and-drop)
• ✅ Task assignee changed
• ✅ Task priority or status updated
• ✅ Task deleted (disappears from board)

Comments & Activity:

• ✅ New comment added
• ✅ Comment edited or deleted
• ✅ @mention added
• ✅ Activity feed entry created

Board Structure:

• ✅ Layer created, edited, or deleted
• ✅ Section created or reordered
• ✅ Board settings changed
• ✅ Member added or removed

All updates happen within 100-500ms depending on network speed.

Presence Indicators

Who's on This Board?

Top-right corner of taskboard:

You'll see member avatars of everyone currently viewing the board:

[📊 Board Name]                    [Sarah] [Tom] [Jane] [You]
                                      ●       ●      ●      ●

Presence indicators:

• Avatar with green dot (●): Currently active on this board
• Avatar faded: Viewed recently, but not active right now
• Hover over avatar: See "Sarah Smith - Active now" or "Last seen 5m ago"

Real-time Presence Updates

• When someone opens the board → Avatar appears
• When someone switches to different board → Avatar disappears
• When someone closes browser → Avatar disappears after 30 seconds
• When someone's connection drops → Avatar shows "Reconnecting..."

Privacy Note: Presence only shows on board level, not "who's editing which task." That's intentional to avoid distraction.

Future: Live Cursors (Planned)

Roadmap feature (Q2 2026):

• See teammates' cursors moving on board
• View who's editing which task (live indicator)
• Collaborative editing with live selection highlights
• Google Docs-style real-time collaboration

Current workaround: Use comments to coordinate. "I'm working on task #123, don't edit!"

Concurrent Editing

Optimistic UI Updates

When you make a change, you see it immediately (optimistic update):

1. You drag task from "To Do" to "In Progress"
2. Task moves instantly in your view (before server confirms)
3. Request sent to server in background
4. Server confirms or rejects
5. If confirmed: Your view stays as-is
6. If rejected: Your view reverts with error message

This makes the UI feel fast, even on slow connections.

Concurrent Editing Scenarios

Scenario 1: Two people edit different tasks

• Tom edits Task A (changes title)
• Sarah edits Task B (changes assignee)
• Both changes save successfully
• Both people see each other's updates instantly
• No conflict (different tasks)

Scenario 2: Two people edit same task, different fields

• Tom edits Task A title: "Design homepage" → "Design homepage mockup"
• Sarah edits Task A assignee: Unassigned → Sarah
• Both changes save successfully
• Tom sees assignee update, Sarah sees title update
• No conflict (different fields)

Scenario 3: Two people edit same task, same field (CONFLICT)

• Tom edits Task A title: "Design homepage" → "Design homepage mockup"
• Sarah edits Task A title: "Design homepage" → "Build homepage design"
• Both save at nearly the same time
• Conflict resolution logic triggers (see below)

Conflict Resolution

How Waymaker handles simultaneous edits:

Last-Write-Wins Strategy (current implementation):

1. Both Tom and Sarah submit title changes
2. Server receives Tom's change first (by 50ms)
3. Tom's change saves: "Design homepage mockup"
4. Server receives Sarah's change
5. Sarah's change overwrites Tom's: "Build homepage design"
6. Sarah's edit wins (last write)
7. Tom sees his change revert to Sarah's
8. Tom gets notification: "Task updated by Sarah Smith"

Potential data loss: Tom's change is lost unless he notices and re-applies.

Avoiding conflicts (best practices):

• Communicate: "@team I'm editing the sprint plan"
• Coordinate: "I'll handle task descriptions, you handle estimates"
• Use comments: Add info via comments instead of editing description simultaneously
• Refresh before major edits: Make sure you see latest version
• Work on different layers/tasks: Divide work to minimize overlap

Future improvement (planned):

• Conflict detection with merge UI
• "Someone else edited this. Review changes before saving."
• Field-level conflict resolution (keep both changes)

Live Activity Feed

Real-time Activity Updates

Activity feed (right sidebar or Activity tab) shows live updates:

• Task created by Tom (appears immediately)
• Task moved to In Progress by Sarah (appears within 1 second)
• Comment added by Jane (appears as she types)
• Assignee changed from Tom → Sarah (instant)
• File uploaded by guest (shows immediately)

No need to refresh. Activity feed is a live stream of all board events.

Activity Filtering

Filter activity to reduce noise:

1. Click Activity tab or sidebar icon
2. Click Filter button (funnel icon)
3. Select activity types:
   • ☑ Task changes (created, edited, moved)
   • ☑ Comments and @mentions
   • ☑ Assignee changes
   • ☐ Status changes (hide if too noisy)
   • ☐ Layer changes
4. Click "By user" to see only specific person's activity
5. Activity feed updates to show filtered view

Use case: During sprint review, filter to "Comments only" to see discussion without task edit noise.

Connection Status

Monitoring Your Connection

Top-right corner, next to member avatars:

Connection indicator:

• Green dot (●): Connected (real-time sync active)
• Yellow dot (⚠): Reconnecting (brief network issue)
• Red dot (●): Disconnected (changes won't sync)

Hover over indicator for details:

• "Connected to Waymaker"
• "Reconnecting... Attempt 2 of 5"
• "Disconnected - Check your internet connection"

What Happens When Disconnected

If your connection drops:

1. Indicator turns red: "Disconnected"
2. You can still work: View tasks, read comments (cached data)
3. Edits queue locally: Changes saved to browser, not server
4. Warning banner: "You're offline. Changes will sync when reconnected."
5. Automatic reconnection: Browser tries to reconnect every 5 seconds
6. When reconnected: Queued changes upload, board syncs

Data safety:

• Your edits are preserved in browser storage
• When back online, changes sync automatically
• If conflict detected, last-write-wins applies

Forced Refresh

If you suspect you're out of sync:

Hard Refresh:

• Windows/Linux: Ctrl + Shift + R
• Mac: Cmd + Shift + R

Reloads page and clears cache. You'll see the latest server state.

When to hard refresh:

• Changes not appearing for teammates
• Board looks "frozen" (no updates)
• Connection indicator stuck on yellow
• After long offline period

Offline Behavior

Offline Mode Capabilities

What works offline:

• ✅ View cached tasks (last loaded state)
• ✅ Read task details, comments, descriptions
• ✅ Browse board structure (sections, layers)
• ✅ Search cached tasks
• ✅ Switch views (Kanban, List)

What doesn't work offline:

• ❌ Create new tasks (queued until online)
• ❌ Edit tasks (queued until online)
• ❌ Add comments (queued until online)
• ❌ Upload files (queued until online)
• ❌ See others' real-time updates

Queue behavior:

Your edits are stored locally and uploaded when connection returns. If someone else edited the same task while you were offline, last-write-wins applies (your change may overwrite theirs or vice versa).

Sync After Reconnection

When you come back online:

1. Connection indicator turns green
2. Queued changes upload: Spinner shows "Syncing..."
3. Board refreshes: Latest data loads
4. Conflicts detected: If edits overlap, last-write-wins
5. Sync complete: "All changes synced" confirmation

Time to sync: Usually 1-5 seconds, depending on queued changes.

If sync fails:

• Error message: "Some changes failed to sync. Retry?"
• Click Retry button
• Or hard refresh to reload from server (loses queued edits)

Collaborative Workflows

Daily Standup with Real-time Board

Team uses board during standup call:

1. Facilitator shares screen showing taskboard
2. Each team member speaks:
   • "Yesterday I completed [task]" → Drags task to Done (everyone sees instantly)
   • "Today I'm working on [task]" → Assigns task to self (assignment appears live)
   • "I'm blocked on [task]" → Adds comment with blocker (comment appears in activity feed)
3. Team watches updates happen live on shared screen
4. No post-meeting cleanup (board already updated)

Sprint Planning with Distributed Team

Team members on video call, each viewing board:

1. Product Owner drags tasks from Backlog to Sprint
   • Everyone sees tasks appear in Sprint layer instantly
2. Team members self-assign tasks
   • "I'll take the login task" → Assigns to self
   • Others see assignment immediately
   • No confusion about who's taking what
3. Estimates added concurrently
   • Tom adds estimate to Task A
   • Sarah adds estimate to Task B
   • Jane adds estimate to Task C
   • All estimates appear without conflicts
4. Sprint ready in 30 minutes (vs 60 minutes with manual updates)

Pair Programming Task Updates

Two developers working together:

1. Developer A shares code
2. Developer B has taskboard open
3. As work progresses:
   • Developer B updates task progress: 25% → 50% → 75%
   • Developer A sees progress bar update live
   • Developer B adds comment: "Login endpoint complete"
   • Developer A sees comment appear immediately
4. When done:
   • Developer B moves task to Review
   • Both see task change sections instantly
   • QA team sees task appear in Review (if watching board)

Cross-Team Coordination

Marketing team watching Development board:

1. Developer moves "New landing page" to Done
2. Marketing team (watching board) sees update instantly
3. Marketing immediately starts campaign prep (no waiting for status email)
4. Real-time visibility enables faster handoffs

Network Requirements

Minimum Connection Speed

For smooth real-time sync:

• Minimum: 1 Mbps download, 512 Kbps upload
• Recommended: 5 Mbps download, 1 Mbps upload
• Optimal: 10+ Mbps (low latency)

Mobile/Cellular:

• 4G LTE: Works well (average 20-50ms latency)
• 3G: May experience lag (500ms-1s delays)
• 2G: Not recommended (very slow, frequent disconnects)

Latency Impact

Low latency (<50ms):

• Changes appear nearly instant
• Feels like local editing
• Collaborative workflows seamless

Medium latency (100-300ms):

• Slight delay noticeable
• Still usable for most workflows
• May see optimistic UI revert occasionally

High latency (>500ms):

• Noticeable delays
• Optimistic updates may revert
• Consider reducing activity (fewer edits)

Firewall and Corporate Networks

Real-time sync requires a WebSocket connection:

• Port: 443 (HTTPS)
• Protocol: WSS (WebSocket Secure)
• Domain: *.waymakerone.com

If blocked by corporate firewall:

1. Request IT whitelist *.supabase.co on port 443 with WSS protocol
2. Fallback: Board still works, but no real-time updates (manual refresh needed)
3. Alternative: Use mobile hotspot if permitted

Troubleshooting

"Changes not appearing for teammates"

Possible causes:

• Connection issue (check indicator)
• Browser cache stale
• Teammate's view filtered (they filtered out your task)
• Firewall blocking WebSocket

Solution:

1. Check connection indicator (should be green)
2. Ask teammate to hard refresh (Cmd/Ctrl + Shift + R)
3. Verify you're both on same board
4. Check if filters hiding tasks

"Connection keeps dropping"

Possible causes:

• Unstable internet (WiFi interference)
• VPN disconnecting
• Corporate firewall intermittently blocking
• Browser extension interfering

Solution:

1. Switch to wired connection if possible
2. Disable VPN temporarily to test
3. Disable browser extensions (especially ad blockers)
4. Try different browser
5. Contact IT about firewall rules

"My edit was overwritten"

Problem: You edited a task, but someone else's change replaced yours.

Explanation: This is last-write-wins conflict resolution. Both of you edited the same field at nearly the same time. Their save happened after yours.

Solution:

1. Check activity feed to see who edited
2. @mention them: "@sarah My edit was overwritten, let's coordinate"
3. Agree who's editing what
4. Re-apply your change with updated context
5. Use comments to add info instead of editing description simultaneously

Common Mistakes to Avoid

❌ Mistake 1: Not checking connection status before major edits

Problem: You make 20 edits while disconnected. When reconnected, half conflict with teammate's changes. Data loss.

Solution: Check connection indicator (green dot) before starting work. If red/yellow, wait for reconnection or hard refresh.

❌ Mistake 2: Ignoring activity feed during collaboration

Problem: You and teammate both updating task list simultaneously. Duplicate or conflicting work.

Solution: Keep activity feed visible (right sidebar). Watch for teammates' updates. Coordinate via comments.

❌ Mistake 3: Assuming your view is always current

Problem: Board loaded 2 hours ago. Tasks have moved, but you don't realize (no hard refresh). You make decisions based on stale data.

Solution: Hard refresh periodically (especially after long idle). Check "Last updated" timestamps on tasks.

❌ Mistake 4: Working on same task simultaneously without communicating

Problem: Two people editing same task description. One person's work gets overwritten.

Solution: @mention in comment: "@team I'm updating acceptance criteria, don't edit description." Or use checklist for parallel work.

Quick Reference

Connection Status:

• Green dot (●): Connected, real-time sync active
• Yellow dot (⚠): Reconnecting
• Red dot (●): Disconnected, offline mode

Real-time Updates:

• Tasks: Create, edit, move, delete (instant)
• Comments: Add, edit (instant)
• Activity feed: Live stream of changes

Presence Indicators:

• Top-right: See who's viewing board
• Green dot on avatar: Active now
• Hover: "Last seen X minutes ago"

Offline Mode:

• Can view cached data
• Edits queue locally
• Auto-sync when reconnected

Conflict Resolution:

• Last-write-wins (current implementation)
• Avoid by communicating before editing
• Use comments for collaborative input

Hard Refresh:

• Windows/Linux: Ctrl + Shift + R
• Mac: Cmd + Shift + R

Collaborative Workflows:

• Daily standup: Update board live during meeting
• Sprint planning: Team assigns tasks concurrently
• Pair programming: Update progress in real-time

Network Requirements:

• Recommended: 5 Mbps download, 1 Mbps upload
• Requires WebSocket (WSS) on port 443
• Domain: *.supabase.co

---

Related Articles

• Inviting Team Members - Add teammates to collaborate with
• Task Assignment and Ownership - Assign tasks in real-time
• Notifications and Mentions - Get notified of real-time changes
• Basic Task Management - Edit tasks collaboratively
• Interface Overview - Understand activity feed and presence

Next Steps

You now understand how real-time collaboration works! Ready to continue?

1. Notifications and Mentions - Configure notifications for real-time updates
2. Guest Collaboration - Collaborate with external guests in real-time
3. Permissions and Access Control - Control who can make real-time changes

---

Check your connection status → Look for green dot (●) next to member avatars