Improve README with usage instructions and tech overview

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Restore original README
2026-03-15 04:56:40 +01:00 · 2026-03-15 04:55:52 +01:00 · 2026-03-15 04:55:11 +01:00 · 2026-03-10 03:11:54 +01:00
41 changed files with 1792 additions and 8265 deletions
--- a/README.md
+++ b/README.md
@@ -1,279 +1,40 @@
 # P2P Poll App
-A peer-to-peer polling application built with React, TypeScript, Tailwind CSS, Node.js, Yjs, and WebSocket for real-time collaborative voting.
+A peer-to-peer polling app where users can add options and vote on them. All data syncs directly between browsers using WebRTC — no central server stores any poll data.
 **Users can create polls, add answers, and vote in real-time with automatic P2P synchronization across all connected clients.**
 ## Architecture
 **Hybrid P2P Approach:**
 - Backend serves as both a Yjs WebSocket provider (for state synchronization) and signaling server (for WebRTC peer discovery)
 - Clients sync poll data via Yjs CRDT for conflict-free merging
 - Direct P2P connections via WebRTC for real-time updates when possible
 - Server fallback ensures reliability when P2P fails
 ## Tech Stack
 **Backend:**
 - Node.js + TypeScript
 - Express.js
 - WebSocket (ws)
 - y-websocket (Yjs WebSocket provider)
 - CORS support
 **Frontend:**
 - React 18 + TypeScript
 - Vite (build tool)
 - 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
+- **Yjs CRDTs** handle shared state — concurrent edits from different peers merge automatically without conflicts
-The app uses Yjs (a CRDT library) to ensure all clients converge to the same state without conflicts:
+- **y-webrtc** establishes direct WebRTC connections between browsers (a public signaling server is used only for peer discovery)
- Each client maintains a local Yjs document
+- Each user gets a stable random ID (stored in localStorage) ensuring one vote per user per option
- Changes are automatically synced via WebSocket to the server
+- Polls are identified by room name, shareable via URL
 - 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
+## Getting Started
-```typescript
+
-{
+```bash
-  polls: Array<{
+npm install
-    id: string,
+npm run dev
    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
+Open `http://localhost:5173` in your browser. To share a specific poll, use the `?room=` query parameter:
 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
+http://localhost:5173/?room=my-poll
 YJS_WS_PORT=1234
 NODE_ENV=development
 CORS_ORIGIN=http://localhost:5173
 ```
-### Frontend (.env)
+Share this URL with others to join the same poll.
-```
+
-VITE_WS_URL=ws://localhost:3000
+## Cross-Device Testing
 ```bash
 npm run dev -- --host
 ```
-## Components
+Then open `http://<your-local-ip>:5173/?room=test` on another device on the same network.
-### Frontend Components
+## Tech Stack
 - **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
+- [Yjs](https://yjs.dev/) — CRDT library for conflict-free shared state
- `createPoll(question)` - Create a new poll
+- [y-webrtc](https://github.com/yjs/y-webrtc) — WebRTC provider for P2P connectivity
- `addOption(pollId, text)` - Add an option to a specific poll
+- [Vite](https://vite.dev/) — Dev server and bundler
- `vote(pollId, optionId)` - Vote on an option (one vote per user)
+- Vanilla JS — No framework dependencies
 - `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/frontend/.env.example
+++ b/frontend/.env.example
@@ -1 +0,0 @@
 VITE_WS_URL=ws://localhost:3000
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,6 +0,0 @@
 node_modules
 dist
 dist-ssr
 *.local
 .env
 .DS_Store
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,13 +0,0 @@
 <!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
@@ -1,35 +0,0 @@
 {
  "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
@@ -1,6 +0,0 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,8 +0,0 @@
 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
@@ -1,38 +0,0 @@
 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
@@ -1,34 +0,0 @@
 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
@@ -1,43 +0,0 @@
 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
@@ -1,60 +0,0 @@
 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
@@ -1,50 +0,0 @@
 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
@@ -1,57 +0,0 @@
 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
@@ -1,25 +0,0 @@
 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
@@ -1,37 +0,0 @@
 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
@@ -1,44 +0,0 @@
 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
@@ -1,43 +0,0 @@
 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
@@ -1,133 +0,0 @@
 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
@@ -1,9 +0,0 @@
 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
@@ -1,17 +0,0 @@
@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
@@ -1,22 +0,0 @@
 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
@@ -1,11 +0,0 @@
 /** @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
@@ -1,21 +0,0 @@
 {
  "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
@@ -1,10 +0,0 @@
 {
  "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
@@ -1,10 +0,0 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    host: true
  }
 })
--- a/index.html
+++ b/index.html
@@ -0,0 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>P2P Poll</title>
  <link rel="stylesheet" href="/src/style.css">
 </head>
 <body>
  <div id="app">
    <header>
      <h1>P2P Poll</h1>
      <div id="status">
        <span id="connection-status" class="connecting">Connecting...</span>
        <span id="peer-count">1 peer</span>
      </div>
    </header>
    <main>
      <div id="add-option">
        <input type="text" id="option-input" placeholder="Add a poll option..." maxlength="100">
        <button id="add-btn">Add</button>
      </div>
      <div id="poll-options"></div>
      <p id="empty-state">No options yet. Add one above!</p>
    </main>
  </div>
  <script type="module" src="/src/main.js"></script>
 </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,18 @@
 {
  "name": "p2p-poll",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "yjs": "^13.6.0",
    "y-webrtc": "^10.3.0"
  },
  "devDependencies": {
    "vite": "^6.0.0"
  }
 }
--- a/server/.env.example
+++ b/server/.env.example
@@ -1,4 +0,0 @@
 PORT=3000
 YJS_WS_PORT=1234
 NODE_ENV=development
 CORS_ORIGIN=http://localhost:5173
--- a/server/.gitignore
+++ b/server/.gitignore
@@ -1,5 +0,0 @@
 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
@@ -1,30 +0,0 @@
 {
  "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
@@ -1,59 +0,0 @@
 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
@@ -1,126 +0,0 @@
 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
@@ -1,24 +0,0 @@
 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
@@ -1,16 +0,0 @@
 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
@@ -1,26 +0,0 @@
 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
@@ -1,20 +0,0 @@
 {
  "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/src/main.js
+++ b/src/main.js
@@ -0,0 +1,136 @@
 import * as Y from 'yjs';
 import { WebrtcProvider } from 'y-webrtc';
 // --- Peer ID (stable across reloads) ---
 function getOrCreatePeerId() {
  let id = localStorage.getItem('peer-id');
  if (!id) {
    id = crypto.randomUUID();
    localStorage.setItem('peer-id', id);
  }
  return id;
 }
 const peerId = getOrCreatePeerId();
 // --- Room name from URL ---
 function getRoomName() {
  const params = new URLSearchParams(window.location.search);
  return params.get('room') || 'default-poll';
 }
 const roomName = getRoomName();
 // --- Yjs setup ---
 const ydoc = new Y.Doc();
 const provider = new WebrtcProvider(roomName, ydoc);
 const yOptions = ydoc.getMap('poll-options');
 // --- Data operations ---
 function addOption(name) {
  const id = crypto.randomUUID();
  const optionMap = new Y.Map();
  optionMap.set('name', name);
  optionMap.set('votes', new Y.Map());
  yOptions.set(id, optionMap);
 }
 function toggleVote(optionId) {
  const optionMap = yOptions.get(optionId);
  if (!optionMap) return;
  const votes = optionMap.get('votes');
  if (votes.has(peerId)) {
    votes.delete(peerId);
  } else {
    votes.set(peerId, true);
  }
 }
 // --- UI rendering ---
 const container = document.getElementById('poll-options');
 const emptyState = document.getElementById('empty-state');
 function render() {
  container.innerHTML = '';
  const entries = [];
  yOptions.forEach((optionMap, id) => {
    entries.push({
      id,
      name: optionMap.get('name'),
      votes: optionMap.get('votes').size,
      voted: optionMap.get('votes').has(peerId),
    });
  });
  entries.sort((a, b) => b.votes - a.votes || a.name.localeCompare(b.name));
  emptyState.className = entries.length > 0 ? 'hidden' : '';
  for (const entry of entries) {
    const div = document.createElement('div');
    div.className = 'poll-option';
    const nameSpan = document.createElement('span');
    nameSpan.className = 'option-name';
    nameSpan.textContent = entry.name;
    const voteCount = document.createElement('span');
    voteCount.className = 'vote-count';
    voteCount.textContent = entry.votes;
    const voteBtn = document.createElement('button');
    voteBtn.className = entry.voted ? 'vote-btn voted' : 'vote-btn';
    voteBtn.textContent = entry.voted ? 'Unvote' : 'Vote';
    voteBtn.addEventListener('click', () => toggleVote(entry.id));
    div.append(nameSpan, voteCount, voteBtn);
    container.appendChild(div);
  }
 }
 // Re-render on any change in the shared state
 yOptions.observeDeep(() => render());
 // --- Add option handlers ---
 const input = document.getElementById('option-input');
 const addBtn = document.getElementById('add-btn');
 addBtn.addEventListener('click', () => {
  const name = input.value.trim();
  if (name) {
    addOption(name);
    input.value = '';
  }
 });
 input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') addBtn.click();
 });
 // --- Connection status & peer count ---
 const statusEl = document.getElementById('connection-status');
 const peerCountEl = document.getElementById('peer-count');
 provider.on('synced', ({ synced }) => {
  statusEl.textContent = synced ? 'Connected' : 'Connecting...';
  statusEl.className = synced ? 'connected' : 'connecting';
 });
 function updatePeerCount() {
  const count = provider.awareness.getStates().size;
  peerCountEl.textContent = `${count} peer${count !== 1 ? 's' : ''}`;
 }
 provider.awareness.on('change', updatePeerCount);
 updatePeerCount();
 // --- Initial render ---
 render();
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,144 @@
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f5f5;
  color: #333;
  min-height: 100vh;
 }
 #app {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1rem;
 }
 header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
 }
 h1 {
  font-size: 1.5rem;
 }
 #status {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: #666;
 }
 #connection-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
 }
 #connection-status.connected::before {
  background: #4caf50;
 }
 #connection-status.connecting::before {
  background: #ff9800;
 }
 #add-option {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
 }
 #option-input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  outline: none;
 }
 #option-input:focus {
  border-color: #2196f3;
 }
 #add-btn {
  padding: 0.6rem 1.2rem;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
 }
 #add-btn:hover {
  background: #1976d2;
 }
 .poll-option {
  display: flex;
  align-items: center;
  background: white;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 .option-name {
  flex: 1;
  font-size: 1rem;
 }
 .vote-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
  margin-right: 0.75rem;
  min-width: 1.5rem;
  text-align: center;
 }
 .vote-btn {
  padding: 0.4rem 1rem;
  border: 2px solid #2196f3;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  background: white;
  color: #2196f3;
 }
 .vote-btn:hover {
  background: #e3f2fd;
 }
 .vote-btn.voted {
  background: #2196f3;
  color: white;
 }
 .vote-btn.voted:hover {
  background: #1976d2;
 }
 #empty-state {
  text-align: center;
  color: #999;
  padding: 2rem;
 }
 #empty-state.hidden {
  display: none;
 }
Author	SHA1	Message	Date
Patrick Charrier	e30de01c86	Improve README with usage instructions and tech overview Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-15 04:56:40 +01:00
Patrick Charrier	2490a267ee	Restore original README Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-15 04:55:52 +01:00
Patrick Charrier	2af5da59c4	Implement P2P polling app with Yjs and WebRTC Uses Yjs CRDTs for conflict-free shared state and y-webrtc for peer-to-peer data exchange. Users can add poll options and vote/unvote, with all changes syncing in real-time across connected peers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-15 04:55:11 +01:00
Patrick Charrier	4a208ba05b	feat: add comment	2026-03-10 03:11:54 +01:00