Collaboration - BLACKICE Portal

Overview

BLACKICE Portal provides powerful real-time collaboration features that enable teams to work together seamlessly. All collaboration happens in your browser with instant synchronization.

Shared workspaces

Create team rooms for projects and collaboration

Real-time sync

See changes from all users instantly

Live chat

Communicate with team members in-app

Collaborative docs

Edit documents together in real-time

Real-time collaboration

How it works

BLACKICE Portal uses Firebase Realtime Database for instant synchronization across all connected users.

Firebase provides sub-100ms latency for collaboration, ensuring smooth real-time experiences.

Architecture:

// Firebase real-time sync
{
  "rooms": {
    "room-name": {
      "code": {
        "html": "...",
        "css": "...",
        "js": "..."
      },
      "users": {
        "user-id-1": {
          "name": "Alice",
          "role": "creator",
          "status": "online",
          "lastActive": "2026-03-03T15:32:00Z"
        }
      },
      "metadata": {
        "created": "2026-03-03T14:00:00Z",
        "readOnly": false
      }
    }
  }
}

Creating collaboration rooms

Step-by-step:

Click 🤝 Collaborate button (available in CodeZap and other tools)
Enter your full name (3-30 characters)
Choose room creation method:
- 🎆 Create New Room: Generates unique room ID
- 🚪 Join Existing Room: Enter existing room name

Room naming:

Max 20 characters
Alphanumeric and hyphens only
Case-sensitive
Share exact name with team

Create room
Join room

// Creating a new room
const roomName = generateRoomId();
// Returns: "collab-a3f9-b2c1"

// Set yourself as creator
{
  "role": "creator",
  "permissions": ["edit", "kick", "admin"]
}

Room creators have full control:

Edit permissions
Kick users
Toggle read-only mode
Delete room

// Joining existing room
const roomName = "team-project-2026";

// Join as regular user
{
  "role": "user",
  "permissions": ["edit", "chat"]
}

Regular users can:

Edit content (if not read-only)
Send chat messages
View all activity
Leave room anytime

Workspace features

User presence

See who’s currently in the room and what they’re doing. User information displayed:

Avatar

Auto-generated with user’s initials

Name

User’s full name

Status

Online, typing, or idle

Role

Creator, admin, or user

User list example:

<!-- User item display -->
<div class="user-item">
  <div class="user-avatar">AB</div>
  <div class="user-details">
    <div class="user-name">Alice Brown</div>
    <div class="user-role">Creator</div>
  </div>
  <div class="status-online">ONLINE</div>
</div>

Typing indicators

See when others are actively editing.

// Typing detection
{
  "user": "Alice",
  "isTyping": true,
  "lastKeystroke": "2026-03-03T15:32:45Z"
}

Typing status:

Appears next to user count
Shows “Alice is typing…”
Clears after 2 seconds of inactivity
Real-time across all users

Activity logs

Track all room activities in real-time. Logged events:

User events

User joined room
User left room
User was kicked
User promoted to admin
User status changed

Content events

Code modified (HTML/CSS/JS)
Document edited
Canvas updated
File uploaded
Filter applied

Room events

Room created
Read-only mode toggled
Snapshot saved
Room settings changed

Log format:

{
  "timestamp": "15:32:45",
  "user": "Alice",
  "action": "Modified CSS",
  "type": "code_edit",
  "details": "Updated background color"
}

Room management

Read-only mode

Prevent editing while maintaining visibility. When to use:

Presenting work to team
Final review before deployment
Protecting completed work
Demo sessions

Toggling read-only:

// Creator only
function toggleReadOnly() {
  room.readOnly = !room.readOnly;
  notifyAllUsers("Room is now " + (room.readOnly ? "read-only" : "editable"));
}

Only room creators can toggle read-only mode. Regular users will see a notification.

Version snapshots

Save snapshots of your work for version history. Creating snapshots:

Click 📸 Snapshot button
Enter description (optional)
Snapshot saved with timestamp
Appears in version history

Snapshot structure:

{
  "id": "snapshot-1709481600",
  "timestamp": "2026-03-03T15:33:20Z",
  "creator": "Alice",
  "description": "Added responsive layout",
  "content": {
    "html": "...",
    "css": "...",
    "js": "..."
  }
}

Version history

Browse and restore previous versions. Features:

View all snapshots chronologically
Preview snapshot content
Restore to any snapshot
Compare with current version
Delete old snapshots

Browsing history
Restoring

Click 📚 History button
See list of all snapshots
Click snapshot to preview
Compare with current state

User management

Kicking users (creator only):

// Kick user from room
function kickUser(userId) {
  removeUserFromRoom(userId);
  notifyUser(userId, "You have been removed from the room");
  logActivity("User kicked", userId);
}

Promoting users:

Creators can promote users to admin
Admins have same permissions as creator
Multiple admins supported
Admins cannot kick creator

Kicked users see a notification and are redirected. They can rejoin with a new room link if they have it.

Live chat

Using chat

Built-in chat for team communication. Chat interface:

<!-- Chat toggle button (bottom right) -->
<button class="chat-toggle">💬</button>

<!-- Chat panel -->
<div class="chat-panel">
  <div class="chat-header">💬 Live Chat</div>
  <div class="chat-messages">...</div>
  <input class="chat-input" placeholder="Type a message..." />
</div>

Sending messages:

Click 💬 button to open chat
Type message (max 100 characters)
Press Enter or click ➤
Message syncs to all users instantly

Message format:

{
  "id": "msg-1709481645",
  "user": "Alice",
  "message": "Looking good! Ready to deploy?",
  "timestamp": "15:34:05",
  "type": "text"
}

Message features

Real-time sync

Messages appear instantly for all users

Timestamps

Each message shows send time

User identification

See who sent each message

Unread alerts

Badge shows unread message count

Message styling:

Your messages: Blue background, right-aligned
Others’ messages: Gray background, left-aligned
System messages: Italic, centered
Auto-scroll: Scrolls to latest message

Collaborative documents

Shared editing

Multiple people can edit the same document simultaneously. Supported in:

CodeZap web compiler (HTML/CSS/JS)
Collaborative docs creator
Shared whiteboards
Drawing canvas (collaborative mode)

Conflict resolution:

// Last write wins strategy
{
  "strategy": "last-write-wins",
  "timestamp": "2026-03-03T15:34:20Z",
  "author": "Alice",
  "changes": { /* diff */ }
}

Document types

Code documents
Rich text docs
Whiteboards

CodeZap collaboration:

HTML, CSS, JavaScript editing
Real-time preview sync
Shared console output
Live error detection

// All editors sync instantly
htmlEditor.on('change', () => {
  syncToFirebase(htmlEditor.getValue());
});

Room links

Share collaboration rooms via URL. Generating share links:

// Copy room link
function copyRoomLink() {
  const url = `${window.location.origin}?room=${roomName}`;
  navigator.clipboard.writeText(url);
  showNotification("Room link copied!");
}

Link features:

Auto-join when clicked
Prompts for user name
Works for all room types
No expiration (unless room deleted)

Inviting users

Invitation methods:

Share room link: Copy URL and send
Share room name: Tell users the exact room name
QR code: Generate QR code for mobile users (coming soon)

For secure rooms, share the room name via private channel. Links can be shared publicly.

Cloud embed manager

Managing cloud embeds

Admins can view and manage all cloud-saved embeds. Admin panel access:

// Admin-only feature
if (isAdmin()) {
  showCloudManagerButton();
}

Manager features:

View all cloud embeds
Copy embed URLs
Delete old embeds
See creation dates
Monitor storage usage

Embed item:

<div class="cloud-item">
  <div class="cloud-item-info">
    <div class="cloud-item-id">embed-a3f9b2c1</div>
    <div class="cloud-item-date">Created: Mar 3, 2026</div>
  </div>
  <div class="cloud-item-actions">
    <button class="copy-btn">📋 Copy</button>
    <button class="delete-btn">🗑️ Delete</button>
  </div>
</div>

Performance and limits

Connection limits

Firebase limits:
  concurrent_connections: 100 per room
  message_size: 10 KB max
  total_room_size: 1 MB max
  
Recommended:
  users_per_room: 10-20
  message_length: 100 characters
  snapshot_frequency: Every 30 minutes

Optimization tips

Keep rooms small: 10-20 users optimal
Archive old rooms: Delete unused rooms
Limit snapshots: Keep last 10-20 versions
Clear chat history: Periodically clear old messages
Use read-only: Enable when not actively editing

Privacy and security

Collaboration rooms are not end-to-end encrypted. Don’t share sensitive information.

Security features:

Room names are required (no anonymous joining)
Creators can kick users
Read-only mode prevents unauthorized edits
Activity logs track all changes
Admins can delete rooms

Data retention:

Active rooms: Indefinite
Inactive rooms (30+ days): May be archived
Deleted rooms: Permanent deletion
User data: Removed when leaving room

Troubleshooting

Can't join room

Check room name: Must match exactly (case-sensitive)Internet connection: Firebase requires active connectionBrowser compatibility: Use modern browsers (Chrome, Firefox, Safari)Room may be full: Max 100 concurrent users

Changes not syncing

Check connection: Look for online indicatorRefresh page: Reload if sync stopsCheck read-only: You may not have edit permissionsFirebase status: Check Firebase status page

Kicked from room

Contact room creator: Ask why you were removedRejoin: Get new invite link if neededNetwork issues: May appear as kick if connection drops

Best practices

Name rooms clearly: Use descriptive names like “team-project-2026”
Set expectations: Communicate read-only times
Save snapshots: Before major changes
Use chat: Communicate before big edits
Leave cleanly: Click “Leave Room” instead of closing tab
Review logs: Check activity if something goes wrong

Get Started

Features

Components

Pages

​Overview

Shared workspaces

Real-time sync

Live chat

Collaborative docs

​Real-time collaboration

​How it works

​Creating collaboration rooms

​Workspace features

​User presence

Avatar

Name

Status

Role

​Typing indicators

​Activity logs

​Room management

​Read-only mode

​Version snapshots

​Version history

​User management

​Live chat

​Using chat

​Message features

Real-time sync

Timestamps

User identification

Unread alerts

​Collaborative documents

​Shared editing

​Document types

​Sharing and invites

​Room links

​Inviting users

​Cloud embed manager

​Managing cloud embeds

​Performance and limits

​Connection limits

​Optimization tips

​Privacy and security

​Troubleshooting

​Best practices

​Next steps

Productivity apps

Drawing tools

Build docs developers (and LLMs) love

Overview

Real-time collaboration

How it works

Creating collaboration rooms

Workspace features

User presence

Typing indicators

Activity logs

Room management

Read-only mode

Version snapshots

Version history

User management

Live chat

Using chat

Message features

Collaborative documents

Shared editing

Document types

Sharing and invites

Room links

Inviting users

Cloud embed manager

Managing cloud embeds

Performance and limits

Connection limits

Optimization tips

Privacy and security

Troubleshooting

Best practices

Next steps