realtimecursor/FIXED_README.md

Real-time collaboration system with cursor tracking and approval workflow

# RealtimeCursor SDK - Fixed Version

This repository contains a fixed version of the RealtimeCursor SDK that resolves the infinite loop issue and other problems.

## What's Fixed

1. **Infinite Loop Issue**: Prevents the infinite loop of `room-users` events by tracking project join status
2. **User Duplication**: Prevents duplicate users in the collaborators list
3. **Cursor Tracking**: Improves cursor position tracking and updates
4. **Connection Stability**: Better connection handling and reconnection logic

## Directory Structure

- `/fixed-sdk` - The fixed version of the SDK
- `/react-example` - A React example using the fixed SDK
- `/test-fixed` - A simple HTML test page for the fixed SDK

## Getting Started

### 1. Start the Backend Server

```bash
# From the project root
cd api
npm install
node server.js
```

### 2. Build and Use the Fixed SDK

```bash
# From the project root
cd fixed-sdk
npm install
npm run build
```

### 3. Run the React Example

```bash
# From the project root
cd react-example
./start.sh
```

Or manually:

```bash
cd react-example
npm install
npm run dev
```

### 4. Test with the HTML Test Page

```bash
# From the project root
cd test-fixed
./start-test.sh
```

## Using the Fixed SDK in Your Project

### Install from Local

```bash
# From your project
npm install /path/to/realtimecursor/fixed-sdk
```

### React Usage

```jsx
import React, { useState, useRef, useEffect } from 'react';
import { useRealtimeCursor, CursorOverlay } from 'realtimecursor-sdk-fixed';
import 'realtimecursor-sdk-fixed/dist/cursor.css';

function CollaborativeEditor() {
  const [content, setContent] = useState('');
  const editorRef = useRef(null);
  
  const { 
    cursors, 
    updateCursor, 
    updateContent,
    collaborators,
    connect,
    disconnect
  } = useRealtimeCursor({
    apiUrl: 'http://localhost:3001',
    projectId: 'your-project-id',
    user: {
      id: 'user-123',
      name: 'John Doe',
      color: '#3b82f6' // Optional
    }
  });

  // Connect on mount
  useEffect(() => {
    connect();
    return () => disconnect();
  }, [connect, disconnect]);

  // Your component code...
}
```

### Vanilla JavaScript Usage

```javascript
import { RealtimeCursor } from 'realtimecursor-sdk-fixed';
import 'realtimecursor-sdk-fixed/dist/cursor.css';

// Initialize the cursor client
const cursorClient = new RealtimeCursor({
  apiUrl: 'http://localhost:3001',
  projectId: 'your-project-id',
  user: {
    id: 'user-123',
    name: 'John Doe'
  }
});

// Connect to the real-time service
cursorClient.connect();

// Your code...
```

## Publishing to npm

To publish the fixed SDK to npm:

```bash
cd fixed-sdk
npm login
npm publish
```

After publishing, users can install it with:

```bash
npm install realtimecursor-sdk-fixed
```