CollabBoard is a Jira-style, real-time collaborative Kanban board built for teams that need to plan and track work together without lag or stale state. Boards, cards, and columns update live for every connected member, with fine-grained roles controlling who can view, edit, or own each board.
Key Features
Next.js 16 Frontend: Built on the App Router with Redux Toolkit and TanStack Query for predictable state management and efficient server-state caching.
Real-Time Sync: Powered by Socket.IO on an Express backend, so board changes, card moves, and column updates propagate instantly to every connected user.
Authenticated Sockets: Every Socket.IO connection is authenticated at the handshake via a custom middleware that verifies the JWT stored in an httpOnly cookie and attaches the resolved user to the socket session — no real-time event is processed for an unauthenticated or invalid session.
Drag-and-Drop Boards: Implemented with @dnd-kit, giving a smooth, native-feeling card and column reordering experience.
Role-Based Membership: Fine-grained access control across owner, editor, and viewer roles, enforced at both the API and query level.
Secure Board Invites: Invite codes are generated and verified using AES-256-GCM encryption, keeping board access secure and shareable without exposing sensitive tokens.
Paginated, Role-Scoped Queries: The MongoDB/Mongoose data layer returns paginated results scoped to each user's role, keeping board and membership listings fast as data grows.
Centralized Error Handling: A single Express error-handling middleware and a matching Axios response interceptor normalize every API response into a consistent { success, data } / { success, error } shape across the whole stack. The interceptor distinguishes network failures from backend errors, silently handles session expiry (401) by clearing auth state, disconnecting the live socket, and redirecting to login, and drives deduplicated toast notifications so a burst of failed requests never spams the user with repeat alerts.
Server-State Layer with TanStack Query: All reads and writes to the backend go through useQuery/useMutation, giving automatic caching, retry control (with smart rules — never retrying on 401/403/404 or genuine network errors), background refetching, and cache invalidation on mutation success (e.g. deleting a board invalidates the owner and member board lists in place, no manual refetch wiring required).
Responsive, Mobile-Friendly UI: The board view, navigation, dashboards, and interactive elements like the invite panel and card detail modal all adapt cleanly across breakpoints — from full desktop layouts down to mobile, with touch-friendly drag-and-drop and collapsing layouts where needed.
Technologies Used
Next.js 16 + Redux Toolkit + TanStack Query: For a responsive, state-driven frontend — Redux Toolkit for client/UI state (auth session, live board state from sockets), TanStack Query for all server state (boards, members, invites) with built-in caching and mutation handling.
Tailwind CSS: For a clean, consistent, fully responsive UI across board and dashboard views, from desktop down to mobile breakpoints.
Socket.IO + Express: Real-time backend powering live board updates, presence, and an authenticated socket handshake layer.
MongoDB + Mongoose: Data layer with paginated, role-scoped queries for boards and memberships.
@dnd-kit: Drag-and-drop interactions for cards and columns.
Axios: Centralized HTTP client with a custom response interceptor handling auth expiry, error normalization, and toast notifications in one place.
Node.js + TypeScript: End-to-end type safety across frontend and backend.
Challenges and Learnings
Keeping real-time updates consistent across multiple connected clients required careful handling of Socket.IO event flows alongside Redux state, especially around avoiding race conditions when multiple users edited the same board simultaneously. Securing the real-time layer itself was its own challenge — extending JWT cookie-based authentication from the REST API into the Socket.IO handshake, so every socket connection is verified against the same auth system before a single event is processed. Resolving SSR and hydration mismatches in the Next.js App Router while integrating a Redux-based client store also required rethinking how server-rendered and client-side state were reconciled on first load. Designing the encrypted invite-code system pushed into new territory around balancing security (AES-256-GCM) with a smooth, shareable invite experience. Building a single Axios interceptor to handle every failure mode consistently — expired sessions, unauthorized page access, backend validation errors, and raw network failures — while keeping React Query's own retry logic from triggering redundant duplicate toasts, took a few iterations to get right, but the payoff was a data layer where no individual component or hook has to reimplement error handling on its own.
Outcome
CollabBoard is under active development as a flagship portfolio project, with core features — real-time boards, drag-and-drop, role-based permissions, authenticated sockets, and secure invites — implemented and working end-to-end. Its modular architecture is designed to support future features like activity feeds and presence indicators with minimal rework.
