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

frontend/src/App.tsx

@@ -0,0 +1,8 @@
+import { PollView } from './components/PollView';
+import './styles/index.css';
+
+function App() {
+  return <PollView />;
+}
+
+export default App;

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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
+  };
+}

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
+  };
+}

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();

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);
+}

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>,
+);

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%);
+}

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;
+}