feat: implement dynamic P2P polling app with real-time synchronization

- Add complete P2P polling application with React + TypeScript frontend - Implement Node.js backend with Yjs WebSocket and WebRTC signaling - Support dynamic poll creation, answer management, and voting - Add CRDT-based state synchronization using Yjs for conflict-free merging - Implement user tracking and vote prevention (one vote per user per option) - Create modern UI with Tailwind CSS and visual feedback - Add comprehensive documentation and setup instructions Features: - Users can create polls with custom questions - Anyone can add answer options to any poll - Real-time voting with instant cross-client synchronization - Smart vote tracking with visual feedback for voted options - User attribution showing who created polls and options - Connection status indicators for WebSocket and P2P connections Technical: - Hybrid P2P architecture (WebSocket + WebRTC) - CRDT-based state management with Yjs
2026-03-25 11:51:33 +01:00
42 changed files with 8281 additions and 711 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1 +0,0 @@
 node_modules/
--- a/README.md
+++ b/README.md
@@ -1,28 +1,279 @@
-# P2P Poll App
+# P2P Poll App
-
+
-## Install npm packages
+A peer-to-peer polling application built with React, TypeScript, Tailwind CSS, Node.js, Yjs, and WebSocket for real-time collaborative voting.
-```
+
-npm init -y
+**Users can create polls, add answers, and vote in real-time with automatic P2P synchronization across all connected clients.**
-npm install
+
-```
+## Architecture
-
+
-Note: the frontend obtains the packages `yjs` and `y-websocket` dynamically.
+**Hybrid P2P Approach:**
-
+- Backend serves as both a Yjs WebSocket provider (for state synchronization) and signaling server (for WebRTC peer discovery)
-## Run backend
+- Clients sync poll data via Yjs CRDT for conflict-free merging
-```
+- Direct P2P connections via WebRTC for real-time updates when possible
-node backend.js
+- Server fallback ensures reliability when P2P fails
-```
+
-
+## Tech Stack
-### Note on Yjs suggestion
+
-Note that the following server setup is suggested in the Yjs docs (https://docs.yjs.dev/ecosystem/connection-provider/y-websocket):
+**Backend:**
-```
+- Node.js + TypeScript
-npm install y-websocket-server
+- Express.js
-HOST=localhost PORT=1000 npx y-websocket
+- WebSocket (ws)
-```
+- y-websocket (Yjs WebSocket provider)
-
+- CORS support
-However, across a range of npm versions, this does not work.
+
-Nevertheless, the essential code from the `y-websocket-server` package is used here as provided in `utils.js`.
+**Frontend:**
-
+- React 18 + TypeScript
-## Run frontend
+- Vite (build tool)
-Open "frontend.html" in browser.
+- Tailwind CSS
-
+- Yjs (CRDT library)
 - y-websocket (server sync)
 - y-webrtc (P2P sync)
 - lucide-react (icons)
 ## Project Structure
 ```
 quicgroup/
 ├── server/                 # Backend Node.js server
 │   ├── src/
 │   │   ├── index.ts       # Main server entry
 │   │   ├── yjs-server.ts  # Yjs WebSocket provider
 │   │   ├── signaling-server.ts  # WebRTC signaling
 │   │   ├── types/         # TypeScript types
 │   │   └── utils/         # Utilities
 │   ├── package.json
 │   └── tsconfig.json
 │
 └── frontend/              # React frontend
    ├── src/
    │   ├── components/    # React components
    │   ├── hooks/         # Custom React hooks
    │   ├── lib/           # Yjs setup and utilities
    │   ├── types/         # TypeScript types
    │   └── styles/        # CSS styles
    ├── package.json
    └── vite.config.ts
 ```
 ## Setup Instructions
 ### Prerequisites
 - Node.js 18+ and npm
 ### Backend Setup
 1. Navigate to server directory:
 ```bash
 cd server
 ```
 2. Install dependencies:
 ```bash
 npm install
 ```
 3. Copy environment file:
 ```bash
 cp .env.example .env
 ```
 4. Start the development server:
 ```bash
 npm run dev
 ```
 The server will run on `http://localhost:3000` with:
 - Yjs WebSocket: `ws://localhost:3000/yjs`
 - Signaling WebSocket: `ws://localhost:3000/signal`
 ### Frontend Setup
 1. Navigate to frontend directory:
 ```bash
 cd frontend
 ```
 2. Install dependencies:
 ```bash
 npm install
 ```
 3. Copy environment file (optional):
 ```bash
 cp .env.example .env
 ```
 4. Start the development server:
 ```bash
 npm run dev
 ```
 The frontend will run on `http://localhost:5173`
 ## Running the Application
 1. **Start Backend** (Terminal 1):
 ```bash
 cd server
 npm run dev
 ```
 2. **Start Frontend** (Terminal 2):
 ```bash
 cd frontend
 npm run dev
 ```
 3. **Open Browser:**
   - Navigate to `http://localhost:5173`
   - Open multiple tabs/windows to test P2P synchronization
 ## Features
 ### Dynamic Poll Creation
 - **Create Polls** - Any user can create new polls with custom questions
 - **Add Answers** - Anyone can add answer options to any poll
 - **Real-time Voting** - Vote on options with instant updates across all clients
 - **Smart Vote Tracking** - One vote per user per option (prevents duplicate voting)
 - **Visual Feedback** - Green border and " Voted" indicator on voted options
 - **User Attribution** - See who created each poll and option
 - **Live Vote Counts** - See vote percentages and counts update in real-time
 - **P2P Synchronization** - Uses Yjs CRDT for conflict-free state merging
 - **Connection Status** - Visual indicator showing WebSocket and peer connections
 - **Hybrid Architecture** - Combines WebSocket server sync with WebRTC P2P
 - **Beautiful UI** - Modern gradient design with Tailwind CSS
 ## How to Use
 ### Create a Poll
 1. Enter your question in the "Create a New Poll" form at the top
 2. Click "Create Poll"
 3. Your poll appears instantly for all connected users
 ### Add Answer Options
 1. Find the poll you want to add an answer to
 2. Type your answer in the "Add a new option..." field
 3. Click "Add"
 4. Your answer appears instantly for all users
 ### Vote on Options
 1. Click the vote button (thumbs up icon) on any option
 2. You can only vote once per option
 3. Voted options show a green border and " Voted" indicator
 4. Vote counts update in real-time across all clients
 ### Multi-User Testing
 1. Open multiple browser tabs/windows
 2. Create polls from different tabs
 3. Add answers from different tabs
 4. Vote from different tabs
 5. Watch real-time synchronization in action!
 ## How It Works
 ### CRDT Synchronization
 The app uses Yjs (a CRDT library) to ensure all clients converge to the same state without conflicts:
 - Each client maintains a local Yjs document
 - Changes are automatically synced via WebSocket to the server
 - WebRTC provides direct P2P connections between clients
 - Yjs handles merge conflicts automatically
 - One vote per user per option is enforced via `votedBy` tracking
 ## Data Model
 ```typescript
 {
  polls: Array<{
    id: string,
    question: string,
    createdBy: string,
    timestamp: number,
    options: Array<{
      id: string,
      text: string,
      votes: number,
      votedBy: string[],  // Tracks which users have voted
      createdBy: string,
      timestamp: number
    }>
  }>
 }
 ```
 ## Testing P2P Functionality
 1. Open the app in multiple browser tabs/windows
 2. **Create polls** from different tabs - they appear everywhere instantly
 3. **Add answer options** from different tabs to the same poll
 4. **Vote** from different tabs - watch vote counts update in real-time
 5. Try voting twice on the same option - it won't let you!
 6. Check the connection status indicator for peer count
 7. Verify visual feedback (green border) on options you've voted on
 ## Development
 ### Backend Scripts
 - `npm run dev` - Start development server with hot reload
 - `npm run build` - Build for production
 - `npm start` - Run production build
 ### Frontend Scripts
 - `npm run dev` - Start Vite dev server
 - `npm run build` - Build for production
 - `npm run preview` - Preview production build
 ## Environment Variables
 ### Backend (.env)
 ```
 PORT=3000
 YJS_WS_PORT=1234
 NODE_ENV=development
 CORS_ORIGIN=http://localhost:5173
 ```
 ### Frontend (.env)
 ```
 VITE_WS_URL=ws://localhost:3000
 ```
 ## Components
 ### Frontend Components
 - **PollView** - Main view showing all polls and create poll form
 - **CreatePoll** - Form to create new polls
 - **PollCard** - Individual poll display with metadata
 - **OptionList** - List of answer options with vote tracking
 - **AddOption** - Form to add new answer options
 - **VoteButton** - Vote button with disabled state for voted options
 - **ConnectionStatus** - Shows WebSocket and P2P connection status
 ### Key Functions
 - `createPoll(question)` - Create a new poll
 - `addOption(pollId, text)` - Add an option to a specific poll
 - `vote(pollId, optionId)` - Vote on an option (one vote per user)
 - `hasVoted(option)` - Check if current user has voted on an option
 ## User Tracking
 Each user gets a unique ID stored in localStorage:
 - Format: `user-xxxxxxxxx`
 - Used to track poll/option creators
 - Used to prevent duplicate voting
 - Persists across browser sessions
 ## Future Enhancements
 - [ ] Edit/delete polls and options
 - [ ] User nicknames instead of IDs
 - [ ] Poll expiration/closing
 - [ ] Vote history and analytics
 - [ ] Export poll results
 - [ ] Persistent storage (database)
 - [ ] Dark mode toggle
 - [ ] Mobile responsive improvements
 - [ ] Poll categories/tags
 - [ ] Search/filter polls
 ## License
 MIT
--- a/backend.js
+++ b/backend.js
@@ -1,31 +0,0 @@
 import { WebSocketServer } from 'ws';
 import { setupWSConnection } from './utils.js'
 // Create a WebSocket server
 const WS_PORT = 8080;
 const wss = new WebSocketServer({ port: WS_PORT });
 console.log('WebSocket server is running on ws://localhost:' + String(WS_PORT));
 // Connection event handler
 wss.on('connection', setupWSConnection);
 /*
 wss.on('connection', (ws) => {
  console.log('Client connected');
  // Message event handler
  ws.on('message', (message) => {
    let msg_str = String(message);
    console.log("Received: " + msg_str);
    // If this is a text or state message (no Yjs logic) - echo the message back to the client
    if (msg_str.startsWith("TEXT_MESSAGE") | msg_str.startsWith("STATE_MESSAGE")) {
      ws.send(msg_str);
    }
  });
  // Close event handler
  ws.on('close', () => {
    console.log('Client disconnected');
  });
 });*/
--- a/frontend.html
+++ b/frontend.html
@@ -1,196 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
  <title>Poll Client</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    #messages {
      height: 300px;
      border: 1px solid #ccc;
      overflow-y: auto;
      padding: 10px;
      margin-bottom: 10px;
    }
    .message { margin: 5px 0; }
  </style>
 </head>
 <body>
  <h1>Poll Client</h1>
  <div id="status">Connecting to server...</div>
  <div id="status2">Connecting to server...</div>
  <div id="messages"></div>
  <div>
    <input type="text" id="messageInput" placeholder="Type your message">
    <!--button onclick="sendMessage()">Send</button-->
    <button id="sendBtn">Send</button>
    <input id="optionInput" placeholder="Add option">
    <button id="addBtn">Add</button>
    <ul id="options"></ul>
  </div>
  <script type="module">
    import * as Y from "https://esm.sh/yjs"
    import { WebsocketProvider } from "https://esm.sh/y-websocket"
    const WS_PORT = 8080;
    const ydoc = new Y.Doc();
    const status = document.getElementById('status');
    const status2 = document.getElementById('status2');
    const messages = document.getElementById('messages');
    const messageInput = document.getElementById('messageInput');
    // Connect to the backend (WebSocket server) via Yjs WebsocketProvider
    const wsp = new WebsocketProvider(
      'ws://localhost:' + String(WS_PORT), 'poll-room',
      ydoc
    )
    wsp.on('status', event => {
      //console.log("event.status =", event.status)
      if (event.status == "connected") {
        status.textContent = 'Yjs connected to WebSocket server';
        status.style.color = 'green';
      }
      else {
        status.textContent = 'Yjs disonnected from WebSocket server';
        status.style.color = 'red';
      }
    })
    wsp.onopen = () => {
      console.log('connected to y-websocket server');
    };
    ydoc.on('update', () => {
      console.log('Yjs document updated locally');
    });
    wsp.on('sync', isSynced => {
      console.log("isSynced =", isSynced)
    })
    // Connect to the backend (WebSocket server) via common WebSocket (only for informative messages)
    const ws = new WebSocket('ws://localhost:' + String(WS_PORT));
    ws.onopen = () => {
      status2.textContent = 'WebSocket client connected to WebSocket server';
      status2.style.color = 'green';
    };
    ws.onmessage = (event) => {
      const message = document.createElement('div');
      message.className = 'message';
      message.textContent = event.data;
      messages.appendChild(message);
      messages.scrollTop = messages.scrollHeight;
    };
    ws.onerror = (error) => {
      status2.textContent = 'Error: ' + error.message;
      status2.style.color = 'red';
    };
    ws.onclose = () => {
      status2.textContent = 'WebSocket client disconnected from WebSocket server';
      status2.style.color = 'red';
    };
    // Function to send a message
    function sendMessage(command, payload) {
        let message = "";
        if (command === "TEXT_MESSAGE") {
            message = command + ":" + messageInput.value.trim();
            messageInput.value = "";
        }
        else if (command.startsWith("STATE_MESSAGE--")) {
            message = command + ":" + payload;
        }
        else {
            console.log("Error: unknown command '" + command + "'")
        }
        if (message) {
            /* To make compatible with y-websocket-server API:
            const encoder = encoding.createEncoder()
            encoding.writeVarUint(encoder, messageTextMessage)
            syncProtocol.writeUpdate(encoder, update)
            enc_message = encoding.toUint8Array(encoder)*/
            ws.send(message);
        }
    }
     // Send message on button click
    document.getElementById("sendBtn").onclick = () => {
        sendMessage("TEXT_MESSAGE", "");
    };
    // Send message on Enter key
    messageInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        sendMessage("TEXT_MESSAGE", "");
      }
    });
    // Actual poll logic
    const optionsMap = ydoc.getMap("options");
    const optionsList = document.getElementById("options");
    const input = document.getElementById("optionInput");
    function render() {
        optionsList.innerHTML = ""
        optionsMap.forEach((vote, name) => {
            // List element for this option
            const li = document.createElement("li")
            // Label for this option
            const label = document.createElement("span")
            label.textContent = name + " — " + vote + " "
            // "Vote"/"Unvote" button
            const voteBtn = document.createElement("button")
            if (vote == false) {
                voteBtn.textContent = "Vote"
            }
            else {
                voteBtn.textContent = "Unvote"
            }
            voteBtn.onclick = () => {
                vote = !vote;
                optionsMap.set(name, vote);
                sendMessage("STATE_MESSAGE--" + (vote ? "VOTE" : "UNVOTE"), name);
            }
            // "Remove" button
            const removeBtn = document.createElement("button")
            removeBtn.textContent = "Remove"
            removeBtn.onclick = () => {
                optionsMap.delete(name);
                sendMessage("STATE_MESSAGE--REMOVE", name);
            }
            li.appendChild(label)
            li.appendChild(voteBtn)
            li.appendChild(removeBtn)
            optionsList.appendChild(li)
        })
    };
    document.getElementById("addBtn").onclick = () => {
        const name = input.value.trim()
        if (!name) return
        if (!optionsMap.has(name)) {
            optionsMap.set(name, false);
            sendMessage("STATE_MESSAGE--ADD_OPTION", name);
        }
        input.value = ""
    };
    optionsMap.observe(render);
    render();
  </script>
 </body>
 </html>
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -0,0 +1 @@
 VITE_WS_URL=ws://localhost:3000
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,6 @@
 node_modules
 dist
 dist-ssr
 *.local
 .env
 .DS_Store
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>P2P Poll App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,35 @@
 {
  "name": "p2p-poll-frontend",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "yjs": "^13.6.8",
    "y-websocket": "^1.5.0",
    "y-webrtc": "^10.2.5",
    "lucide-react": "^0.294.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react": "^4.2.0",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.53.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.0"
  }
 }
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,8 @@
 import { PollView } from './components/PollView';
 import './styles/index.css';
 function App() {
  return <PollView />;
 }
 export default App;
--- a/frontend/src/components/AddOption.tsx
+++ b/frontend/src/components/AddOption.tsx
@@ -0,0 +1,38 @@
 import { useState } from 'react';
 import { Plus } from 'lucide-react';
 interface AddOptionProps {
  onAdd: (text: string) => void;
 }
 export function AddOption({ onAdd }: AddOptionProps) {
  const [text, setText] = useState('');
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (text.trim()) {
      onAdd(text);
      setText('');
    }
  };
  return (
    <form onSubmit={handleSubmit} className="flex gap-2">
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add a new option..."
        className="flex-1 px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30"
      />
      <button
        type="submit"
        disabled={!text.trim()}
        className="px-6 py-3 bg-white text-purple-600 rounded-lg font-semibold hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2"
      >
        <Plus className="w-5 h-5" />
        Add
      </button>
    </form>
  );
 }
--- a/frontend/src/components/ConnectionStatus.tsx
+++ b/frontend/src/components/ConnectionStatus.tsx
@@ -0,0 +1,34 @@
 import { Wifi, WifiOff, Users } from 'lucide-react';
 interface ConnectionStatusProps {
  isConnected: boolean;
  wsProvider: any;
  webrtcProvider: any;
 }
 export function ConnectionStatus({ isConnected, wsProvider, webrtcProvider }: ConnectionStatusProps) {
  const peerCount = webrtcProvider?.room?.peers?.size || 0;
  return (
    <div className="flex items-center gap-4 text-white/90 text-sm">
      <div className="flex items-center gap-2">
        {isConnected ? (
          <>
            <Wifi className="w-4 h-4 text-green-400" />
            <span>Connected</span>
          </>
        ) : (
          <>
            <WifiOff className="w-4 h-4 text-red-400" />
            <span>Disconnected</span>
          </>
        )}
      </div>
      <div className="flex items-center gap-2">
        <Users className="w-4 h-4" />
        <span>{peerCount} peer{peerCount !== 1 ? 's' : ''}</span>
      </div>
    </div>
  );
 }
--- a/frontend/src/components/CreatePoll.tsx
+++ b/frontend/src/components/CreatePoll.tsx
@@ -0,0 +1,43 @@
 import { useState } from 'react';
 import { Plus } from 'lucide-react';
 interface CreatePollProps {
  onCreate: (question: string) => void;
 }
 export function CreatePoll({ onCreate }: CreatePollProps) {
  const [question, setQuestion] = useState('');
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (question.trim()) {
      onCreate(question);
      setQuestion('');
    }
  };
  return (
    <form onSubmit={handleSubmit} className="mb-8">
      <div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-6 border border-white/20">
        <h2 className="text-xl font-bold text-white mb-4">Create a New Poll</h2>
        <div className="flex gap-2">
          <input
            type="text"
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            placeholder="Enter your question..."
            className="flex-1 px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30"
          />
          <button
            type="submit"
            disabled={!question.trim()}
            className="px-6 py-3 bg-white text-purple-600 rounded-lg font-semibold hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2"
          >
            <Plus className="w-5 h-5" />
            Create Poll
          </button>
        </div>
      </div>
    </form>
  );
 }
--- a/frontend/src/components/OptionList.tsx
+++ b/frontend/src/components/OptionList.tsx
@@ -0,0 +1,60 @@
 import { PollOption } from '../types/poll.types';
 import { VoteButton } from './VoteButton';
 interface OptionListProps {
  options: PollOption[];
  onVote: (optionId: string) => void;
  hasVoted?: (option: PollOption) => boolean;
 }
 export function OptionList({ options, onVote, hasVoted }: OptionListProps) {
  const totalVotes = options.reduce((sum, opt) => sum + opt.votes, 0);
  const sortedOptions = [...options].sort((a, b) => b.votes - a.votes);
  return (
    <div className="space-y-3">
      {sortedOptions.length === 0 ? (
        <div className="text-center py-8 text-white/60">
          No options yet. Add one to get started!
        </div>
      ) : (
        sortedOptions.map((option) => {
          const percentage = totalVotes > 0 ? (option.votes / totalVotes) * 100 : 0;
          const userHasVoted = hasVoted ? hasVoted(option) : false;
          return (
            <div
              key={option.id}
              className={`bg-white/10 backdrop-blur-sm rounded-lg p-4 border transition-all duration-200 ${
                userHasVoted 
                  ? 'border-green-400/50 bg-green-400/10' 
                  : 'border-white/20 hover:border-white/30'
              }`}
            >
              <div className="flex items-center justify-between mb-2">
                <span className="text-white font-medium text-lg">
                  {option.text}
                  {userHasVoted && <span className="ml-2 text-green-400 text-sm">✓ Voted</span>}
                </span>
                <VoteButton optionId={option.id} votes={option.votes} onVote={onVote} disabled={userHasVoted} />
              </div>
              <div className="w-full bg-white/10 rounded-full h-2 overflow-hidden">
                <div
                  className="bg-gradient-to-r from-green-400 to-blue-500 h-full transition-all duration-500 ease-out"
                  style={{ width: `${percentage}%` }}
                />
              </div>
              <div className="mt-2 flex justify-between text-xs text-white/60">
                <span>by {option.createdBy}</span>
                <span>{percentage.toFixed(1)}%</span>
              </div>
            </div>
          );
        })
      )}
    </div>
  );
 }
--- a/frontend/src/components/PollCard.tsx
+++ b/frontend/src/components/PollCard.tsx
@@ -0,0 +1,50 @@
 import { Poll } from '../types/poll.types';
 import { AddOption } from './AddOption';
 import { OptionList } from './OptionList';
 import { User, Clock } from 'lucide-react';
 interface PollCardProps {
  poll: Poll;
  onAddOption: (pollId: string, text: string) => void;
  onVote: (pollId: string, optionId: string) => void;
  hasVoted: (option: any) => boolean;
 }
 export function PollCard({ poll, onAddOption, onVote, hasVoted }: PollCardProps) {
  const handleAddOption = (text: string) => {
    onAddOption(poll.id, text);
  };
  const handleVote = (optionId: string) => {
    onVote(poll.id, optionId);
  };
  const formatTime = (timestamp: number) => {
    const date = new Date(timestamp);
    return date.toLocaleString();
  };
  return (
    <div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-8 border border-white/20 mb-6">
      <div className="mb-6">
        <h2 className="text-3xl font-bold text-white mb-3">{poll.question}</h2>
        <div className="flex items-center gap-4 text-white/60 text-sm">
          <div className="flex items-center gap-1">
            <User className="w-4 h-4" />
            <span>{poll.createdBy}</span>
          </div>
          <div className="flex items-center gap-1">
            <Clock className="w-4 h-4" />
            <span>{formatTime(poll.timestamp)}</span>
          </div>
        </div>
      </div>
      <div className="mb-6">
        <AddOption onAdd={handleAddOption} />
      </div>
      <OptionList options={poll.options} onVote={handleVote} hasVoted={hasVoted} />
    </div>
  );
 }
--- a/frontend/src/components/PollView.tsx
+++ b/frontend/src/components/PollView.tsx
@@ -0,0 +1,57 @@
 import { RefreshCw } from 'lucide-react';
 import { usePoll } from '../hooks/usePoll';
 import { CreatePoll } from './CreatePoll';
 import { PollCard } from './PollCard';
 import { ConnectionStatus } from './ConnectionStatus';
 export function PollView() {
  const { polls, createPoll, addOption, vote, hasVoted, isConnected, wsProvider, webrtcProvider } = usePoll();
  return (
    <div className="min-h-screen p-4 py-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <h1 className="text-4xl font-bold text-white mb-2">P2P Polling App</h1>
            <p className="text-white/70">Create polls, add answers, and vote in real-time</p>
          </div>
          <ConnectionStatus 
            isConnected={isConnected} 
            wsProvider={wsProvider}
            webrtcProvider={webrtcProvider}
          />
        </div>
        <CreatePoll onCreate={createPoll} />
        {polls.length === 0 ? (
          <div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-12 border border-white/20 text-center">
            <p className="text-white/60 text-lg mb-2">No polls yet!</p>
            <p className="text-white/40">Create the first poll to get started.</p>
          </div>
        ) : (
          <div className="space-y-6">
            {polls.map((poll) => (
              <PollCard
                key={poll.id}
                poll={poll}
                onAddOption={addOption}
                onVote={vote}
                hasVoted={hasVoted}
              />
            ))}
          </div>
        )}
        <div className="mt-8 text-center text-white/50 text-sm">
          <p>QUIC P2P Experiment !</p>
          <p className="flex items-center justify-center gap-2 mt-1">
            <RefreshCw className="w-4 h-4" />
            Real-time P2P synchronization with Yjs
          </p>
          <p className="mt-1">Open multiple tabs to see live updates!</p>
        </div>
      </div>
    </div>
  );
 }
--- a/frontend/src/components/VoteButton.tsx
+++ b/frontend/src/components/VoteButton.tsx
@@ -0,0 +1,25 @@
 import { ThumbsUp } from 'lucide-react';
 interface VoteButtonProps {
  optionId: string;
  votes: number;
  onVote: (optionId: string) => void;
  disabled?: boolean;
 }
 export function VoteButton({ optionId, votes, onVote, disabled = false }: VoteButtonProps) {
  return (
    <button
      onClick={() => !disabled && onVote(optionId)}
      disabled={disabled}
      className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 text-white font-medium ${
        disabled 
          ? 'bg-white/10 cursor-not-allowed opacity-60' 
          : 'bg-white/20 hover:bg-white/30'
      }`}
    >
      <ThumbsUp className="w-4 h-4" />
      <span>{votes}</span>
    </button>
  );
 }
--- a/frontend/src/hooks/usePoll.ts
+++ b/frontend/src/hooks/usePoll.ts
@@ -0,0 +1,37 @@
 import { useCallback } from 'react';
 import { pollManager } from '../lib/poll-manager';
 import { useYjsSync } from './useYjsSync';
 export function usePoll() {
  const { polls, isConnected, wsProvider, webrtcProvider } = useYjsSync();
  const createPoll = useCallback((question: string) => {
    return pollManager.createPoll(question);
  }, []);
  const addOption = useCallback((pollId: string, text: string) => {
    pollManager.addOption(pollId, text);
  }, []);
  const vote = useCallback((pollId: string, optionId: string) => {
    pollManager.vote(pollId, optionId);
  }, []);
  const hasVoted = useCallback((option: any) => {
    return pollManager.hasVoted(option);
  }, []);
  const userId = pollManager.getUserId();
  return {
    polls,
    createPoll,
    addOption,
    vote,
    hasVoted,
    userId,
    isConnected,
    wsProvider,
    webrtcProvider
  };
 }
--- a/frontend/src/hooks/useYjsSync.ts
+++ b/frontend/src/hooks/useYjsSync.ts
@@ -0,0 +1,44 @@
 import { useEffect, useState } from 'react';
 import { Poll } from '../types/poll.types';
 import { 
  initializeProviders, 
  destroyProviders, 
  yPolls,
  wsProvider,
  webrtcProvider 
 } from '../lib/yjs-setup';
 export function useYjsSync() {
  const [polls, setPolls] = useState<Poll[]>([]);
  const [isConnected, setIsConnected] = useState(false);
  useEffect(() => {
    const { wsProvider: ws } = initializeProviders();
    const updatePolls = () => {
      setPolls([...yPolls.toArray()]);
    };
    yPolls.observe(updatePolls);
    updatePolls();
    const handleStatus = (event: { status: string }) => {
      setIsConnected(event.status === 'connected');
    };
    ws?.on('status', handleStatus);
    return () => {
      yPolls.unobserve(updatePolls);
      ws?.off('status', handleStatus);
      destroyProviders();
    };
  }, []);
  return { 
    polls, 
    isConnected,
    wsProvider,
    webrtcProvider
  };
 }
--- a/frontend/src/lib/poll-manager.ts
+++ b/frontend/src/lib/poll-manager.ts
@@ -0,0 +1,43 @@
 import { PollOption } from '../types/poll.types';
 import { createPoll as yjsCreatePoll, addOption as yjsAddOption, voteForOption as yjsVoteForOption } from './yjs-setup';
 export class PollManager {
  private userId: string;
  constructor() {
    this.userId = this.generateUserId();
  }
  private generateUserId(): string {
    const stored = localStorage.getItem('p2p-poll-user-id');
    if (stored) return stored;
    const newId = 'user-' + Math.random().toString(36).substr(2, 9);
    localStorage.setItem('p2p-poll-user-id', newId);
    return newId;
  }
  getUserId(): string {
    return this.userId;
  }
  createPoll(question: string): string {
    if (!question.trim()) return '';
    return yjsCreatePoll(question.trim(), this.userId);
  }
  addOption(pollId: string, text: string): void {
    if (!text.trim()) return;
    yjsAddOption(pollId, text.trim(), this.userId);
  }
  vote(pollId: string, optionId: string): void {
    yjsVoteForOption(pollId, optionId, this.userId);
  }
  hasVoted(option: PollOption): boolean {
    return option.votedBy.includes(this.userId);
  }
 }
 export const pollManager = new PollManager();
--- a/frontend/src/lib/yjs-setup.ts
+++ b/frontend/src/lib/yjs-setup.ts
@@ -0,0 +1,133 @@
 import * as Y from 'yjs';
 import { WebsocketProvider } from 'y-websocket';
 import { WebrtcProvider } from 'y-webrtc';
 import { Poll, PollOption } from '../types/poll.types';
 const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:3000';
 const ROOM_NAME = 'default-poll';
 export const ydoc = new Y.Doc();
 export const yPolls = ydoc.getArray<Poll>('polls');
 export let wsProvider: WebsocketProvider | null = null;
 export let webrtcProvider: WebrtcProvider | null = null;
 export function initializeProviders() {
  wsProvider = new WebsocketProvider(
    WS_URL + '/yjs',
    ROOM_NAME,
    ydoc,
    { connect: true }
  );
  webrtcProvider = new WebrtcProvider(
    ROOM_NAME,
    ydoc,
    { 
      signaling: [WS_URL.replace('ws://', 'wss://').replace('http://', 'https://') + '/signal'],
      password: null,
      awareness: wsProvider.awareness,
      maxConns: 20,
      filterBcConns: true,
      peerOpts: {}
    }
  );
  wsProvider.on('status', (event: { status: string }) => {
    console.log('WebSocket status:', event.status);
  });
  webrtcProvider.on('synced', (synced: boolean) => {
    console.log('WebRTC synced:', synced);
  });
  return { wsProvider, webrtcProvider };
 }
 export function destroyProviders() {
  wsProvider?.destroy();
  webrtcProvider?.destroy();
 }
 export function createPoll(question: string, createdBy: string): string {
  const pollId = Math.random().toString(36).substr(2, 9);
  const poll: Poll = {
    id: pollId,
    question,
    createdBy,
    timestamp: Date.now(),
    options: []
  };
  yPolls.push([poll]);
  return pollId;
 }
 export function addOption(pollId: string, text: string, createdBy: string): void {
  const polls = yPolls.toArray();
  const pollIndex = polls.findIndex(p => p.id === pollId);
  if (pollIndex !== -1) {
    const poll = polls[pollIndex];
    const option: PollOption = {
      id: Math.random().toString(36).substr(2, 9),
      text,
      votes: 0,
      votedBy: [],
      createdBy,
      timestamp: Date.now()
    };
    const updatedPoll = {
      ...poll,
      options: [...poll.options, option]
    };
    yPolls.delete(pollIndex, 1);
    yPolls.insert(pollIndex, [updatedPoll]);
  }
 }
 export function voteForOption(pollId: string, optionId: string, userId: string): void {
  const polls = yPolls.toArray();
  const pollIndex = polls.findIndex(p => p.id === pollId);
  if (pollIndex !== -1) {
    const poll = polls[pollIndex];
    const optionIndex = poll.options.findIndex(opt => opt.id === optionId);
    if (optionIndex !== -1) {
      const option = poll.options[optionIndex];
      if (option.votedBy.includes(userId)) {
        return;
      }
      const updatedOption = {
        ...option,
        votes: option.votes + 1,
        votedBy: [...option.votedBy, userId]
      };
      const updatedOptions = [...poll.options];
      updatedOptions[optionIndex] = updatedOption;
      const updatedPoll = {
        ...poll,
        options: updatedOptions
      };
      yPolls.delete(pollIndex, 1);
      yPolls.insert(pollIndex, [updatedPoll]);
    }
  }
 }
 export function getPolls(): Poll[] {
  return yPolls.toArray();
 }
 export function getPoll(pollId: string): Poll | undefined {
  return yPolls.toArray().find(p => p.id === pollId);
 }
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
 );
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -0,0 +1,17 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 #root {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
--- a/frontend/src/types/poll.types.ts
+++ b/frontend/src/types/poll.types.ts
@@ -0,0 +1,22 @@
 export interface PollOption {
  id: string;
  text: string;
  votes: number;
  votedBy: string[];
  createdBy: string;
  timestamp: number;
 }
 export interface Poll {
  id: string;
  question: string;
  createdBy: string;
  timestamp: number;
  options: PollOption[];
 }
 export interface ConnectionStatus {
  websocket: boolean;
  webrtc: boolean;
  peers: number;
 }
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
 }
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,21 @@
 {
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
 {
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    host: true
  }
 })
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,144 +0,0 @@
 {
  "name": "yjs-poll",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "yjs-poll",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "@y/protocols": "^1.0.6-1",
        "lib0": "^0.2.102",
        "ws": "^8.19.0",
        "yjs": "^14.0.0-7"
      }
    },
    "node_modules/@y/protocols": {
      "version": "1.0.6-rc.1",
      "resolved": "https://registry.npmjs.org/@y/protocols/-/protocols-1.0.6-rc.1.tgz",
      "integrity": "sha512-e/qs7hXcLk/SeNitxMXv2ymozyWFTULwbJEi7cAf/K/iXw9nGwGXHrR5TNluQ/bMwOX1cwuUT0hjEojkfH0gsA==",
      "license": "MIT",
      "dependencies": {
        "lib0": "^1.0.0-rc.1"
      },
      "engines": {
        "node": ">=16.0.0",
        "npm": ">=8.0.0"
      },
      "funding": {
        "type": "GitHub Sponsors ❤",
        "url": "https://github.com/sponsors/dmonad"
      },
      "peerDependencies": {
        "@y/y": "*"
      }
    },
    "node_modules/@y/protocols/node_modules/lib0": {
      "version": "1.0.0-rc.4",
      "resolved": "https://registry.npmjs.org/lib0/-/lib0-1.0.0-rc.4.tgz",
      "integrity": "sha512-mESL4089ji2HbS19DwAsYJRrtxZDjzMjEzjNR5kpzFBqlhvV0b7F9+SlA2SHOQU1Puu2A9xejKXtElK77swxLA==",
      "license": "MIT",
      "bin": {
        "0ecdsa-generate-keypair": "src/bin/0ecdsa-generate-keypair.js",
        "0gentesthtml": "src/bin/gentesthtml.js",
        "0serve": "src/bin/0serve.js"
      },
      "engines": {
        "node": ">=16"
      },
      "funding": {
        "type": "GitHub Sponsors ❤",
        "url": "https://github.com/sponsors/dmonad"
      }
    },
    "node_modules/@y/y": {
      "version": "14.0.0-16",
      "resolved": "https://registry.npmjs.org/@y/y/-/y-14.0.0-16.tgz",
      "integrity": "sha512-4zwbLnLannzUiEdJn9r3IS2FCVdHqADZHLqAivzAuKeoCGZ55JUFebp/YUtrYuTE2ZaBgctxpzulqAAHaahtIA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "lib0": "^0.2.115-6"
      },
      "engines": {
        "node": ">=16.0.0",
        "npm": ">=8.0.0"
      },
      "funding": {
        "type": "GitHub Sponsors ❤",
        "url": "https://github.com/sponsors/dmonad"
      }
    },
    "node_modules/isomorphic.js": {
      "version": "0.2.5",
      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
      "license": "MIT",
      "funding": {
        "type": "GitHub Sponsors ❤",
        "url": "https://github.com/sponsors/dmonad"
      }
    },
    "node_modules/lib0": {
      "version": "0.2.117",
      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.117.tgz",
      "integrity": "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==",
      "license": "MIT",
      "dependencies": {
        "isomorphic.js": "^0.2.4"
      },
      "bin": {
        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
        "0gentesthtml": "bin/gentesthtml.js",
        "0serve": "bin/0serve.js"
      },
      "engines": {
        "node": ">=16"
      },
      "funding": {
        "type": "GitHub Sponsors ❤",
        "url": "https://github.com/sponsors/dmonad"
      }
    },
    "node_modules/ws": {
      "version": "8.19.0",
      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
      "license": "MIT",
      "engines": {
        "node": ">=10.0.0"
      },
      "peerDependencies": {
        "bufferutil": "^4.0.1",
        "utf-8-validate": ">=5.0.2"
      },
      "peerDependenciesMeta": {
        "bufferutil": {
          "optional": true
        },
        "utf-8-validate": {
          "optional": true
        }
      }
    },
    "node_modules/yjs": {
      "version": "14.0.0-16",
      "resolved": "https://registry.npmjs.org/yjs/-/yjs-14.0.0-16.tgz",
      "integrity": "sha512-n7jMrQz4pgU/NFnf4qY53K2adR/fu6ViQ79qVIw6Og+BtuDs1hx3DjOi3iREVnA6tsxQXXVG3gvG0I2kpmAwoQ==",
      "license": "MIT",
      "dependencies": {
        "lib0": "^0.2.115-6"
      },
      "engines": {
        "node": ">=16.0.0",
        "npm": ">=8.0.0"
      },
      "funding": {
        "type": "GitHub Sponsors ❤",
        "url": "https://github.com/sponsors/dmonad"
      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -1,20 +0,0 @@
 {
  "name": "yjs-poll",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "y-websocket": "y-websocket"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "ws": "^8.19.0",
    "@y/protocols": "^1.0.6-1",
    "lib0": "^0.2.102",
    "yjs": "^14.0.0-7"
  }
 }
--- a/server/.env.example
+++ b/server/.env.example
@@ -0,0 +1,4 @@
 PORT=3000
 YJS_WS_PORT=1234
 NODE_ENV=development
 CORS_ORIGIN=http://localhost:5173
--- a/server/.gitignore
+++ b/server/.gitignore
@@ -0,0 +1,5 @@
 node_modules/
 dist/
 .env
 *.log
 .DS_Store
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
@@ -0,0 +1,30 @@
 {
  "name": "p2p-poll-server",
  "version": "1.0.0",
  "description": "Backend server for P2P polling app with Yjs and WebRTC signaling",
  "main": "dist/index.js",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js"
  },
  "keywords": ["yjs", "websocket", "webrtc", "p2p"],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.2",
    "ws": "^8.14.2",
    "y-websocket": "^1.5.0",
    "yjs": "^13.6.8",
    "cors": "^2.8.5",
    "dotenv": "^16.3.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.20",
    "@types/ws": "^8.5.8",
    "@types/cors": "^2.8.15",
    "@types/node": "^20.9.0",
    "tsx": "^4.6.2",
    "typescript": "^5.2.2"
  }
 }
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -0,0 +1,59 @@
 import express from 'express';
 import http from 'http';
 import cors from 'cors';
 import dotenv from 'dotenv';
 import { createYjsServer } from './yjs-server';
 import { createSignalingServer } from './signaling-server';
 import { logger } from './utils/logger';
 dotenv.config();
 const app = express();
 const PORT = process.env.PORT || 3000;
 app.use(cors({
  origin: process.env.CORS_ORIGIN || 'http://localhost:5173',
  credentials: true
 }));
 app.use(express.json());
 app.get('/health', (req, res) => {
  res.json({ 
    status: 'ok', 
    timestamp: new Date().toISOString(),
    services: {
      yjs: 'running',
      signaling: 'running'
    }
  });
 });
 app.get('/', (req, res) => {
  res.json({ 
    message: 'P2P Poll Server',
    endpoints: {
      health: '/health',
      yjs: 'ws://localhost:' + PORT + '/yjs',
      signaling: 'ws://localhost:' + PORT + '/signal'
    }
  });
 });
 const server = http.createServer(app);
 createYjsServer(server, PORT as number);
 createSignalingServer(server);
 server.listen(PORT, () => {
  logger.info(`Server running on port ${PORT}`);
  logger.info(`Yjs WebSocket: ws://localhost:${PORT}/yjs`);
  logger.info(`Signaling WebSocket: ws://localhost:${PORT}/signal`);
 });
 process.on('SIGTERM', () => {
  logger.info('SIGTERM signal received: closing HTTP server');
  server.close(() => {
    logger.info('HTTP server closed');
  });
 });
--- a/server/src/signaling-server.ts
+++ b/server/src/signaling-server.ts
@@ -0,0 +1,126 @@
 import { WebSocketServer, WebSocket } from 'ws';
 import http from 'http';
 import { SignalingMessage } from './types/poll.types';
 import { logger } from './utils/logger';
 interface Client {
  id: string;
  ws: WebSocket;
  roomId: string;
 }
 export function createSignalingServer(server: http.Server) {
  const wss = new WebSocketServer({ 
    server,
    path: '/signal'
  });
  const clients = new Map<string, Client>();
  const rooms = new Map<string, Set<string>>();
  wss.on('connection', (ws: WebSocket) => {
    let clientId: string | null = null;
    ws.on('message', (data: Buffer) => {
      try {
        const message: SignalingMessage = JSON.parse(data.toString());
        switch (message.type) {
          case 'join':
            clientId = message.from;
            const roomId = message.roomId || 'default-room';
            clients.set(clientId, { id: clientId, ws, roomId });
            if (!rooms.has(roomId)) {
              rooms.set(roomId, new Set());
            }
            rooms.get(roomId)!.add(clientId);
            logger.info(`Client ${clientId} joined room ${roomId}`);
            const roomClients = Array.from(rooms.get(roomId)!).filter(id => id !== clientId);
            ws.send(JSON.stringify({
              type: 'peers',
              peers: roomClients
            }));
            roomClients.forEach(peerId => {
              const peer = clients.get(peerId);
              if (peer && peer.ws.readyState === WebSocket.OPEN) {
                peer.ws.send(JSON.stringify({
                  type: 'peer-joined',
                  peerId: clientId
                }));
              }
            });
            break;
          case 'offer':
          case 'answer':
          case 'ice-candidate':
            if (message.to) {
              const targetClient = clients.get(message.to);
              if (targetClient && targetClient.ws.readyState === WebSocket.OPEN) {
                targetClient.ws.send(JSON.stringify({
                  type: message.type,
                  from: message.from,
                  data: message.data
                }));
              }
            }
            break;
          case 'leave':
            handleClientLeave(message.from);
            break;
        }
      } catch (error) {
        logger.error('Error processing signaling message:', error);
      }
    });
    ws.on('close', () => {
      if (clientId) {
        handleClientLeave(clientId);
      }
    });
    ws.on('error', (error) => {
      logger.error('WebSocket error:', error);
    });
  });
  function handleClientLeave(clientId: string) {
    const client = clients.get(clientId);
    if (client) {
      const roomId = client.roomId;
      const room = rooms.get(roomId);
      if (room) {
        room.delete(clientId);
        room.forEach(peerId => {
          const peer = clients.get(peerId);
          if (peer && peer.ws.readyState === WebSocket.OPEN) {
            peer.ws.send(JSON.stringify({
              type: 'peer-left',
              peerId: clientId
            }));
          }
        });
        if (room.size === 0) {
          rooms.delete(roomId);
        }
      }
      clients.delete(clientId);
      logger.info(`Client ${clientId} left room ${roomId}`);
    }
  }
  logger.info('Signaling server running at path /signal');
  return wss;
 }
--- a/server/src/types/poll.types.ts
+++ b/server/src/types/poll.types.ts
@@ -0,0 +1,24 @@
 export interface PollOption {
  id: string;
  text: string;
  votes: number;
  votedBy: string[];
  createdBy: string;
  timestamp: number;
 }
 export interface Poll {
  id: string;
  question: string;
  createdBy: string;
  timestamp: number;
  options: PollOption[];
 }
 export interface SignalingMessage {
  type: 'offer' | 'answer' | 'ice-candidate' | 'join' | 'leave';
  from: string;
  to?: string;
  data?: any;
  roomId?: string;
 }
--- a/server/src/utils/logger.ts
+++ b/server/src/utils/logger.ts
@@ -0,0 +1,16 @@
 export const logger = {
  info: (message: string, ...args: any[]) => {
    console.log(`[INFO] ${new Date().toISOString()} - ${message}`, ...args);
  },
  error: (message: string, ...args: any[]) => {
    console.error(`[ERROR] ${new Date().toISOString()} - ${message}`, ...args);
  },
  warn: (message: string, ...args: any[]) => {
    console.warn(`[WARN] ${new Date().toISOString()} - ${message}`, ...args);
  },
  debug: (message: string, ...args: any[]) => {
    if (process.env.NODE_ENV === 'development') {
      console.debug(`[DEBUG] ${new Date().toISOString()} - ${message}`, ...args);
    }
  }
 };
--- a/server/src/yjs-server.ts
+++ b/server/src/yjs-server.ts
@@ -0,0 +1,26 @@
 import { WebSocketServer } from 'ws';
 import { setupWSConnection } from 'y-websocket/bin/utils';
 import http from 'http';
 import { logger } from './utils/logger';
 export function createYjsServer(server: http.Server, port: number) {
  const wss = new WebSocketServer({ 
    server,
    path: '/yjs'
  });
  wss.on('connection', (ws, req) => {
    const docName = req.url?.split('?')[1]?.split('=')[1] || 'default-poll';
    logger.info(`New Yjs connection for document: ${docName}`);
    setupWSConnection(ws, req, { docName });
  });
  wss.on('error', (error) => {
    logger.error('Yjs WebSocket server error:', error);
  });
  logger.info(`Yjs WebSocket server running on port ${port} at path /yjs`);
  return wss;
 }
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -0,0 +1,20 @@
 {
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
 }
--- a/utils.js
+++ b/utils.js
@@ -1,291 +0,0 @@
 /* Adapted from https://github.com/yjs/y-websocket-server/blob/main/src/server.js, version of 2025-04-02
   (author: dmonad/Kevin Jahns, MIT license) */
 import * as Y from 'yjs'
 import * as syncProtocol from '@y/protocols/sync'
 import * as awarenessProtocol from '@y/protocols/awareness'
 import * as encoding from 'lib0/encoding'
 import * as decoding from 'lib0/decoding'
 import * as map from 'lib0/map'
 import * as eventloop from 'lib0/eventloop'
 /*import { callbackHandler, isCallbackSet } from './callback.js'
 const CALLBACK_DEBOUNCE_WAIT = parseInt(process.env.CALLBACK_DEBOUNCE_WAIT || '2000')
 const CALLBACK_DEBOUNCE_MAXWAIT = parseInt(process.env.CALLBACK_DEBOUNCE_MAXWAIT || '10000')
 const debouncer = eventloop.createDebouncer(CALLBACK_DEBOUNCE_WAIT, CALLBACK_DEBOUNCE_MAXWAIT)*/
 const wsReadyStateConnecting = 0
 const wsReadyStateOpen = 1
 const wsReadyStateClosing = 2 // eslint-disable-line
 const wsReadyStateClosed = 3 // eslint-disable-line
 // disable gc when using snapshots!
 const gcEnabled = process.env.GC !== 'false' && process.env.GC !== '0'
 // const persistenceDir = process.env.YPERSISTENCE
 /**
 * @type {{bindState: function(string,WSSharedDoc):void, writeState:function(string,WSSharedDoc):Promise<any>, provider: any}|null}
 */
 let persistence = null
 /**
 * @param {{bindState: function(string,WSSharedDoc):void,
 * writeState:function(string,WSSharedDoc):Promise<any>,provider:any}|null} persistence_
 */
 export const setPersistence = persistence_ => {
  persistence = persistence_
 }
 /**
 * @return {null|{bindState: function(string,WSSharedDoc):void,
  * writeState:function(string,WSSharedDoc):Promise<any>}|null} used persistence layer
  */
 export const getPersistence = () => persistence
 /**
 * @type {Map<string,WSSharedDoc>}
 */
 export const docs = new Map()
 const messageSync = 0
 const messageAwareness = 1
 // const messageAuth = 2
 //const messageTextMessage = 3
 //const messageStateMessage = 4
 /**
 * @param {Uint8Array} update
 * @param {any} _origin
 * @param {WSSharedDoc} doc
 * @param {any} _tr
 */
 const updateHandler = (update, _origin, doc, _tr) => {
  const encoder = encoding.createEncoder()
  encoding.writeVarUint(encoder, messageSync)
  syncProtocol.writeUpdate(encoder, update)
  const message = encoding.toUint8Array(encoder)
  doc.conns.forEach((_, conn) => send(doc, conn, message))
 }
 /**
 * @type {(ydoc: Y.Doc) => Promise<void>}
 */
 let contentInitializor = _ydoc => Promise.resolve()
 /**
 * This function is called once every time a Yjs document is created. You can
 * use it to pull data from an external source or initialize content.
 *
 * @param {(ydoc: Y.Doc) => Promise<void>} f
 */
 export const setContentInitializor = (f) => {
  contentInitializor = f
 }
 export class WSSharedDoc extends Y.Doc {
  /**
   * @param {string} name
   */
  constructor (name) {
    super({ gc: gcEnabled })
    this.name = name
    /**
     * Maps from conn to set of controlled user ids. Delete all user ids from awareness when this conn is closed
     * @type {Map<Object, Set<number>>}
     */
    this.conns = new Map()
    /**
     * @type {awarenessProtocol.Awareness}
     */
    this.awareness = new awarenessProtocol.Awareness(this)
    this.awareness.setLocalState(null)
    /**
     * @param {{ added: Array<number>, updated: Array<number>, removed: Array<number> }} changes
     * @param {Object | null} conn Origin is the connection that made the change
     */
    const awarenessChangeHandler = ({ added, updated, removed }, conn) => {
      const changedClients = added.concat(updated, removed)
      if (conn !== null) {
        const connControlledIDs = /** @type {Set<number>} */ (this.conns.get(conn))
        if (connControlledIDs !== undefined) {
          added.forEach(clientID => { connControlledIDs.add(clientID) })
          removed.forEach(clientID => { connControlledIDs.delete(clientID) })
        }
      }
      // broadcast awareness update
      const encoder = encoding.createEncoder()
      encoding.writeVarUint(encoder, messageAwareness)
      encoding.writeVarUint8Array(encoder, awarenessProtocol.encodeAwarenessUpdate(this.awareness, changedClients))
      const buff = encoding.toUint8Array(encoder)
      this.conns.forEach((_, c) => {
        send(this, c, buff)
      })
    }
    this.awareness.on('update', awarenessChangeHandler)
    this.on('update', /** @type {any} */ (updateHandler))
    //if (isCallbackSet) {
    //  this.on('update', (_update, _origin, doc) => {
    //    debouncer(() => callbackHandler(/** @type {WSSharedDoc} */ (doc)))
    //  })
    //}
    this.whenInitialized = contentInitializor(this)
  }
 }
 /**
 * Gets a Y.Doc by name, whether in memory or on disk
 *
 * @param {string} docname - the name of the Y.Doc to find or create
 * @param {boolean} gc - whether to allow gc on the doc (applies only when created)
 * @return {WSSharedDoc}
 */
 export const getYDoc = (docname, gc = true) => map.setIfUndefined(docs, docname, () => {
  const doc = new WSSharedDoc(docname)
  doc.gc = gc
  if (persistence !== null) {
    persistence.bindState(docname, doc)
  }
  docs.set(docname, doc)
  return doc
 })
 /**
 * @param {any} conn
 * @param {WSSharedDoc} doc
 * @param {Uint8Array} message
 */
 const messageListener = (conn, doc, message) => {
  try {
    const encoder = encoding.createEncoder()
    const decoder = decoding.createDecoder(new Uint8Array(message))
    const messageType = decoding.readVarUint(decoder)
    switch (messageType) {
      case messageSync:
        encoding.writeVarUint(encoder, messageSync)
        syncProtocol.readSyncMessage(decoder, encoder, doc, conn)
        // If the `encoder` only contains the type of reply message and no
        // message, there is no need to send the message. When `encoder` only
        // contains the type of reply, its length is 1.
        if (encoding.length(encoder) > 1) {
          send(doc, conn, encoding.toUint8Array(encoder))
        }
        break
      case messageAwareness: {
        awarenessProtocol.applyAwarenessUpdate(doc.awareness, decoding.readVarUint8Array(decoder), conn)
        break
      }
      // If this is a text or a message (no Yjs logic) - echo the message back to the client
      default: {
        conn.send(String(message))
        console.log(String(message))
        break
      }
    }
  } catch (err) {
    console.error(err)
    // @ts-ignore
    doc.emit('error', [err])
  }
 }
 /**
 * @param {WSSharedDoc} doc
 * @param {any} conn
 */
 const closeConn = (doc, conn) => {
  if (doc.conns.has(conn)) {
    /**
     * @type {Set<number>}
     */
    // @ts-ignore
    const controlledIds = doc.conns.get(conn)
    doc.conns.delete(conn)
    awarenessProtocol.removeAwarenessStates(doc.awareness, Array.from(controlledIds), null)
    if (doc.conns.size === 0 && persistence !== null) {
      // if persisted, we store state and destroy ydocument
      persistence.writeState(doc.name, doc).then(() => {
        doc.destroy()
      })
      docs.delete(doc.name)
    }
  }
  conn.close()
 }
 /**
 * @param {WSSharedDoc} doc
 * @param {import('ws').WebSocket} conn
 * @param {Uint8Array} m
 */
 const send = (doc, conn, m) => {
  if (conn.readyState !== wsReadyStateConnecting && conn.readyState !== wsReadyStateOpen) {
    closeConn(doc, conn)
  }
  try {
    conn.send(m, {}, err => { err != null && closeConn(doc, conn) })
  } catch (e) {
    closeConn(doc, conn)
  }
 }
 const pingTimeout = 30000
 /**
 * @param {import('ws').WebSocket} conn
 * @param {import('http').IncomingMessage} req
 * @param {any} opts
 */
 export const setupWSConnection = (conn, req, { docName = (req.url || '').slice(1).split('?')[0], gc = true } = {}) => {
  conn.binaryType = 'arraybuffer'
  // get doc, initialize if it does not exist yet
  const doc = getYDoc(docName, gc)
  doc.conns.set(conn, new Set())
  // listen and reply to events
  conn.on('message', /** @param {ArrayBuffer} message */ message => messageListener(conn, doc, message))
  // Check if connection is still alive
  let pongReceived = true
  const pingInterval = setInterval(() => {
    if (!pongReceived) {
      if (doc.conns.has(conn)) {
        closeConn(doc, conn)
      }
      clearInterval(pingInterval)
    } else if (doc.conns.has(conn)) {
      pongReceived = false
      try {
        conn.ping()
      } catch (e) {
        closeConn(doc, conn)
        clearInterval(pingInterval)
      }
    }
  }, pingTimeout)
  conn.on('close', () => {
    closeConn(doc, conn)
    clearInterval(pingInterval)
  })
  conn.on('pong', () => {
    pongReceived = true
  })
  // put the following in a variables in a block so the interval handlers don't keep in in
  // scope
  {
    // send sync step 1
    const encoder = encoding.createEncoder()
    encoding.writeVarUint(encoder, messageSync)
    syncProtocol.writeSyncStep1(encoder, doc)
    send(doc, conn, encoding.toUint8Array(encoder))
    const awarenessStates = doc.awareness.getStates()
    if (awarenessStates.size > 0) {
      const encoder = encoding.createEncoder()
      encoding.writeVarUint(encoder, messageAwareness)
      encoding.writeVarUint8Array(encoder, awarenessProtocol.encodeAwarenessUpdate(doc.awareness, Array.from(awarenessStates.keys())))
      send(doc, conn, encoding.toUint8Array(encoder))
    }
  }
 }