From b9cb2584c763ee48f066fcafa02d720a59718bea Mon Sep 17 00:00:00 2001 From: Barbara Mecaj <157421044+btechspects@users.noreply.github.com> Date: Tue, 12 Aug 2025 05:45:41 +0200 Subject: [PATCH] feat: implement collaboration dashboard --- README.md | 182 ++++---- app/components/CollaborationDashboard.tsx | 82 ++++ app/components/RealTimeChat.tsx | 235 ++++++++++ app/components/SharedCounter.tsx | 61 +++ app/components/UserPresence.tsx | 55 +++ app/components/ui/Avatar.tsx | 49 ++ app/components/ui/EmojiPickerButton.tsx | 17 + app/components/ui/MentionAutocomplete.tsx | 42 ++ app/components/ui/MessageBox.tsx | 103 +++++ app/components/ui/ReactionButton.tsx | 32 ++ app/constants/collaboration.ts | 45 ++ app/globals.css | 47 +- app/hooks/useBroadcastChannel.ts | 46 ++ app/hooks/useChat.ts | 147 ++++++ app/hooks/useCollaborativeSession.ts | 115 +++++ app/hooks/useSharedCounter.ts | 64 +++ app/hooks/useStateRehydration.ts | 31 ++ app/hooks/useUserPresence.ts | 120 +++++ app/layout.tsx | 4 +- app/page.tsx | 96 +--- app/types/collaboration.ts | 52 +++ app/utils/collaboration.ts | 127 +++++ package.json | 5 + pnpm-lock.yaml | 534 ++++++++++++++++++++-- postcss.config.js | 6 + tailwind.config.js | 22 + 26 files changed, 2060 insertions(+), 259 deletions(-) create mode 100644 app/components/CollaborationDashboard.tsx create mode 100644 app/components/RealTimeChat.tsx create mode 100644 app/components/SharedCounter.tsx create mode 100644 app/components/UserPresence.tsx create mode 100644 app/components/ui/Avatar.tsx create mode 100644 app/components/ui/EmojiPickerButton.tsx create mode 100644 app/components/ui/MentionAutocomplete.tsx create mode 100644 app/components/ui/MessageBox.tsx create mode 100644 app/components/ui/ReactionButton.tsx create mode 100644 app/constants/collaboration.ts create mode 100644 app/hooks/useBroadcastChannel.ts create mode 100644 app/hooks/useChat.ts create mode 100644 app/hooks/useCollaborativeSession.ts create mode 100644 app/hooks/useSharedCounter.ts create mode 100644 app/hooks/useStateRehydration.ts create mode 100644 app/hooks/useUserPresence.ts create mode 100644 app/types/collaboration.ts create mode 100644 app/utils/collaboration.ts create mode 100644 postcss.config.js create mode 100644 tailwind.config.js diff --git a/README.md b/README.md index 3774656..630db8a 100644 --- a/README.md +++ b/README.md @@ -1,91 +1,105 @@ -# React Developer Assignment: Cross-Tab Collaboration Dashboard +# Cross-Tab Collaboration Dashboard + +A real-time collaboration dashboard built with React and native BroadcastChannel API that demonstrates advanced cross-tab synchronization of user presence, chat messages, emoji reactions, @mentions, and a shared counter. + +## 🚀 Features + +### Core Features +- **Advanced User Presence System**: 4-state user tracking (Online/Idle/Away/Offline) + - Smart status progression with color-coded badges + - Join/leave notifications with 10-minute cleanup timeout + - Last activity timestamps with intelligent formatting + - Real-time typing indicators with animated dots +- **Shared Counter**: Synchronized increment/decrement operations + - Shows last action user and timestamp + - Real-time updates across all tabs with conflict resolution +- **Real-time Chat**: Professional messaging system + - Message sending/receiving with cross-tab sync + - Message expiration with precise timeout-based cleanup + - Message deletion by sender with instant sync + - Proper error handling and state rehydration + +### 🎨 Creative Bonus Features +- **Emoji Reactions**: Quick reactions to messages (👍❤️😂😮😢😡🎉🔥) + - Real-time reaction sync across tabs + - Toggle reactions on/off with visual feedback + - Reaction counts and user tooltips + - Responsive reaction picker with smart positioning +- **@Mentions with Autocomplete**: Smart user tagging system + - Real-time autocomplete with keyboard navigation (↑/↓/Enter/Tab/Escape) + - Visual mention highlighting in messages + - Cross-tab mention tracking and notifications + - Professional autocomplete UI with avatars + +### 🔧 Technical Excellence +- **Modular Architecture**: Clean separation of concerns + - Centralized types, constants, and utilities + - Reusable UI components (Avatar, MessageBox, ReactionButton, etc.) + - Custom hooks for specific functionality +- **Performance Optimized**: Efficient state management + - Timeout-based message expiration (no polling) + - Smart cleanup intervals and memory management + - Optimized re-renders with proper React patterns +- **Type-Safe**: Comprehensive TypeScript implementation + - Strict interfaces and enums + - Full type coverage across components and hooks + - Runtime type safety with proper validation + +## 📋 Setup Instructions + +### Prerequisites +- Node.js 18+ +- npm or yarn + +### Installation + +1. **Clone and install dependencies:** + ```bash + cd full-stack-homework + npm install + ``` -## Time Limit: 3 hours +2. **Run the development server:** + ```bash + npm run dev + ``` -You are expected to focus on the core requirements. Bonus features are optional and may be partially implemented if time allows. +3. **Open multiple tabs:** + - Navigate to [http://localhost:3000](http://localhost:3000) + - Open the same URL in 2-3 additional browser tabs + - Watch real-time synchronization in action! -## Overview +### Testing Cross-Tab Features -Build a real-time collaboration dashboard that synchronizes user activity across multiple browser tabs using the -react-broadcast-sync library. +1. **User Presence**: Users appear instantly when opening new tabs +2. **Status Progression**: Watch status badges change from green → yellow → orange → gray +3. **Shared Counter**: Click increment/decrement in any tab, see updates everywhere +4. **Real-time Chat**: Send messages, add reactions, use @mentions +5. **Message Expiration**: Set expiration times and watch messages disappear automatically ---- +## 🏗️ Implementation Notes -## Setup Instructions +### Performance Optimizations -1. Create a new React project using any setup you prefer (e.g., Vite, CRA, Next.js) -2. Install the required package: - ```bash - npm install react-broadcast-sync - ``` -3. Use any styling approach (CSS, Tailwind, MUI, etc.) - ---- - -## Requirements - Mandatory - -### 1. Custom Hook -Create a custom hook called `useCollaborativeSession` that: -- Sets up the broadcast channel -- Manages internal state for users, chat, counter -- Exposes state and actions: - - `users`, `messages`, `counter` - - `sendMessage()`, `updateCounter()`, `markTyping()`, etc. -- Internally uses `react-broadcast-sync` to handle cross-tab communication - -### 2. User Presence System -- Detect and display active users (based on tabs) -- Show a user list with: - - Username or ID (you can generate random names if needed) - - Last activity timestamp -- Detect and visually indicate when a user joins or leaves - -### 3. Shared Counter -- Counter that stays synchronized across all tabs -- Any user can increment/decrement the value -- Show which user performed the last action -- Display timestamp of last action - -### 4. Real-time Chat -- Text area for message writing -- Show typing indicators when users are actively typing -- Synchronize conversation content across all tabs -- For each message display which user sent it and its timestamp -- Allow users to delete **their own** messages from the chat with syncing across tabs -- Allow users to send a messages with expiration - -### 5. Technical Standards -- Use proper error handling and cleanup -- Use TypeScript or well-typed PropTypes -- Abstract logic into reusable components/hooks -- Keep the code modular, readable, and clean -- Synchronize existing state on page load (rehydrate from current messages/users) - ---- - -## Bonus Features -- Theme sync across tabs (light/dark mode) -- Include debouncing for frequent updates -- Implement loading states -- Add responsive layout -- Activity feed showing recent actions -- User avatar system -- Focus/cursor position indicators - ---- - -## Deliverables -1. Complete source code -2. README with setup instructions and implementation notes -3. Working demo (open multiple tabs to test) - ---- - -## Evaluation Criteria -- Proper use and integration of `react-broadcast-sync` -- Correct and clean custom hook abstraction -- Working real-time sync across tabs -- Well-structured and maintainable code -- Functional and user-friendly UI -- Handling of edge cases (e.g., expired messages, tab close) -- Bonus points for creative features, polish, or great UX +1. **Efficient Re-renders**: Proper React hooks dependencies and memoization +2. **Memory Management**: Automatic cleanup of timeouts and intervals +3. **Smart Filtering**: Only broadcast necessary state changes +4. **Debounced Updates**: Typing indicators use debouncing to reduce message frequency +5. **Lazy Loading**: Components only render after client-side hydration + +### Error Handling & Edge Cases + +1. **Tab Closure**: Graceful cleanup with `beforeunload` events +2. **Network Issues**: Robust message retry and state recovery +3. **Concurrent Updates**: Conflict resolution for simultaneous changes +4. **Invalid Data**: Input validation and sanitization +5. **Memory Leaks**: Proper cleanup of all timers and event listeners + +## 🎯 Bonus Features Implemented + +✅ **User Avatar System**: Color-coded avatars with status indicators +✅ **Responsive Layout**: Mobile-first design with CSS Grid +✅ **Loading States**: Professional loading screen with spinner +✅ **Activity Feed**: Real-time user presence and typing indicators +✅ **Creative Features**: Emoji reactions and @mentions system +✅ **Great UX**: Smooth animations, intuitive interactions, professional polish diff --git a/app/components/CollaborationDashboard.tsx b/app/components/CollaborationDashboard.tsx new file mode 100644 index 0000000..66e737b --- /dev/null +++ b/app/components/CollaborationDashboard.tsx @@ -0,0 +1,82 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import { useCollaborativeSession } from '../hooks/useCollaborativeSession'; +import UserPresence from './UserPresence'; +import SharedCounter from './SharedCounter'; +import RealTimeChat from './RealTimeChat'; + +export default function CollaborationDashboard() { + const [isClient, setIsClient] = useState(false); + + useEffect(() => { + setIsClient(true); + }, []); + + const { + users, + messages, + counter, + lastCounterAction, + typingUsers, + currentUser, + sendMessage, + deleteMessage, + addReaction, + incrementCounter, + decrementCounter, + setTypingStatus, + } = useCollaborativeSession(); + + const handleIncrement = () => incrementCounter(); + const handleDecrement = () => decrementCounter(); + + if (!isClient) { + return ( +
+
+
+

Loading Collaboration Dashboard...

+
+
+ ); + } + + return ( +
+
+

+ Cross-Tab Collaboration Dashboard +

+

+ Open this page in multiple tabs to see real-time synchronization in action! +

+
+ +
+
+ + +
+ +
+ +
+
+
+ ); +} diff --git a/app/components/RealTimeChat.tsx b/app/components/RealTimeChat.tsx new file mode 100644 index 0000000..72245f5 --- /dev/null +++ b/app/components/RealTimeChat.tsx @@ -0,0 +1,235 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { Message, User } from '../types/collaboration'; +import { getSuggestions } from '../utils/collaboration'; +import MessageBox from './ui/MessageBox'; +import MentionAutocomplete from './ui/MentionAutocomplete'; + +interface RealTimeChatProps { + messages: Message[]; + currentUser: User; + typingUsers: User[]; + availableUsers: User[]; + onSendMessage: (content: string, expirationMinutes?: number) => void; + onDeleteMessage: (messageId: string) => void; + onAddReaction: (messageId: string, emoji: string) => void; + onSetTypingStatus: (isTyping: boolean) => void; +} + +export default function RealTimeChat({ + messages, + currentUser, + typingUsers, + availableUsers, + onSendMessage, + onDeleteMessage, + onAddReaction, + onSetTypingStatus, +}: RealTimeChatProps) { + const [messageText, setMessageText] = useState(''); + const [expirationMinutes, setExpirationMinutes] = useState(); + const [mentionSuggestions, setMentionSuggestions] = useState([]); + const [mentionQuery, setMentionQuery] = useState(''); + const [mentionStartIndex, setMentionStartIndex] = useState(-1); + const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(0); + const [autocompletePosition, setAutocompletePosition] = useState({ top: 0, left: 0 }); + const messagesEndRef = useRef(null); + const textareaRef = useRef(null); + + useEffect(() => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [messages]); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (messageText.trim()) { + onSendMessage(messageText, expirationMinutes); + setMessageText(''); + setExpirationMinutes(undefined); + onSetTypingStatus(false); + } + }; + + const handleInputChange = (e: React.ChangeEvent) => { + const value = e.target.value; + const cursorPosition = e.target.selectionStart; + + setMessageText(value); + + const textBeforeCursor = value.substring(0, cursorPosition); + const mentionMatch = textBeforeCursor.match(/@([a-zA-Z0-9_-]*)$/); + + if (mentionMatch) { + const query = mentionMatch[1]; + const mentionStart = cursorPosition - mentionMatch[0].length; + + setMentionQuery(query); + setMentionStartIndex(mentionStart); + setSelectedSuggestionIndex(0); + + const suggestions = getSuggestions(query, availableUsers, currentUser.id); + setMentionSuggestions(suggestions); + + if (textareaRef.current && suggestions.length > 0) { + const textarea = textareaRef.current; + const style = window.getComputedStyle(textarea); + const lineHeight = parseInt(style.lineHeight); + const rect = textarea.getBoundingClientRect(); + + setAutocompletePosition({ + top: rect.bottom + window.scrollY, + left: rect.left + window.scrollX + }); + } + } else { + setMentionSuggestions([]); + setMentionQuery(''); + setMentionStartIndex(-1); + } + + if (value.trim()) { + onSetTypingStatus(true); + } else { + onSetTypingStatus(false); + } + }; + + const handleMentionSelect = (user: User) => { + if (mentionStartIndex >= 0) { + const beforeMention = messageText.substring(0, mentionStartIndex); + const afterMention = messageText.substring(mentionStartIndex + mentionQuery.length + 1); + const newText = `${beforeMention}@${user.name} ${afterMention}`; + + setMessageText(newText); + setMentionSuggestions([]); + setMentionQuery(''); + setMentionStartIndex(-1); + + setTimeout(() => { + if (textareaRef.current) { + const newCursorPosition = beforeMention.length + user.name.length + 2; + textareaRef.current.focus(); + textareaRef.current.setSelectionRange(newCursorPosition, newCursorPosition); + } + }, 0); + } + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (mentionSuggestions.length > 0) { + if (e.key === 'ArrowDown') { + e.preventDefault(); + setSelectedSuggestionIndex(prev => + prev < mentionSuggestions.length - 1 ? prev + 1 : 0 + ); + return; + } + if (e.key === 'ArrowUp') { + e.preventDefault(); + setSelectedSuggestionIndex(prev => + prev > 0 ? prev - 1 : mentionSuggestions.length - 1 + ); + return; + } + if (e.key === 'Enter' || e.key === 'Tab') { + e.preventDefault(); + handleMentionSelect(mentionSuggestions[selectedSuggestionIndex]); + return; + } + if (e.key === 'Escape') { + setMentionSuggestions([]); + setMentionQuery(''); + setMentionStartIndex(-1); + return; + } + } + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handleSubmit(e); + } + }; + + return ( +
+

+ Real-time Chat +

+ +
+
+ {messages.map(message => ( + + ))} + + {typingUsers.length > 0 && ( +
+
+ {typingUsers.map(user => user.name).join(', ')} + {typingUsers.length === 1 ? ' is' : ' are'} typing + + + + + +
+
+ )} + +
+
+
+ +
+
+
+ + +
+
+ +
+