← Back to Projects
LiveCollab

LiveCollab

Real-Time Team Collaboration Platform

Live Code

Overview

A full-stack real-time Kanban collaboration platform where teams can create workspaces, invite members, and drag-and-drop cards with instant sync across all connected browsers.

Key Features

  • • JWT-based register / login with protected routes
  • • Workspaces — create teams, invite via code, manage members
  • • Real-Time Kanban Board — drag-and-drop with live sync via Socket.IO
  • • Live Presence — see who's online in your workspace in real time
  • • Timestamped Activity Log for every board action
  • • Zustand + React Query for efficient client-side state

Tech Stack

Frontend: React 18, Vite, Tailwind CSS, Zustand, React Query, @dnd-kit

Backend: Node.js, Express, Socket.IO

Database: MongoDB, Mongoose

Auth: JWT, bcrypt

Challenges

  • • Broadcasting card position changes with sub-100 ms latency
  • • Preventing conflicting updates when two users drag simultaneously
  • • Keeping presence state accurate when users disconnect unexpectedly

Solutions

  • • Socket.IO rooms scoped per workspace for minimal broadcast surface
  • • Optimistic UI updates with server reconciliation on conflict
  • • Heartbeat + disconnect events to clean up stale presence entries

Future Improvements

  • • Add card comments and file attachments
  • • Email notifications for @mentions
  • • Export board as CSV or PDF