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
60 changed files with 8280 additions and 7136 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,41 +0,0 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 # dependencies
 /node_modules
 /.pnp
 .pnp.*
 .yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/versions
 # testing
 /coverage
 # next.js
 /.next/
 /out/
 # production
 /build
 # misc
 .DS_Store
 *.pem
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 # env files (can opt-in for committing if needed)
 .env*
 # vercel
 .vercel
 # typescript
 *.tsbuildinfo
 next-env.d.ts
--- a/README.md
+++ b/README.md
@@ -1,2 +1,279 @@
 # P2P Poll App
-Remove-Item -Recurse -Force node_modules, .next
+
 A peer-to-peer polling application built with React, TypeScript, Tailwind CSS, Node.js, Yjs, and WebSocket for real-time collaborative voting.
 **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
 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/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +0,0 @@
@import "tailwindcss";
 :root {
  --background: #ffffff;
  --foreground: #171717;
 }
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
 }
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
 }
 body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,25 +0,0 @@
 import type { Metadata } from "next";
 import "./globals.css";
 export const metadata: Metadata = {
  title: "p2p polling",
  description: "creating a p2p-polling app",
 };
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
    <html
      lang="en"
      className={` h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">{children}</body>
    </html>
  );
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,47 +0,0 @@
 "use client";
 import { useState } from "react";
 import usePeerManager from "../hooks/usePeerManager";
 import usePollManager from "../hooks/usePollManager";
 import PollCreation from "../components/PollCreation";
 import PollActive from "../components/PollActive";
 import PeersList from "../components/PeersList";
 export default function Page() {
  const peerManager = usePeerManager();
  const pollManager = usePollManager(peerManager);
  const [connectId, setConnectId] = useState("");
  return (
    <div className="p-6 space-y-4">
      <h1 className="text-2xl font-bold">P2P Poll App</h1>
      {/* Connect */}
      <div className="flex gap-2">
        <input
          className="border p-2"
          placeholder="Peer ID"
          value={connectId}
          onChange={(e) => setConnectId(e.target.value)}
        />
        <button
          className="bg-blue-500 text-white px-4"
          onClick={() => peerManager.connectToPeer(connectId)}
        >
          Connect
        </button>
      </div>
      <p>Your ID: {peerManager.peerId}</p>
      {pollManager.poll ? (
        <PollActive pollManager={pollManager} peerId={peerManager.peerId} />
      ) : (
        <PollCreation pollManager={pollManager} />
      )}
      <PeersList peers={peerManager.peers} />
    </div>
  );
 }
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
--- a/components/Notification.tsx
+++ b/components/Notification.tsx
@@ -1,22 +0,0 @@
 "use client";
 type NotificationType = "info" | "success" | "error";
 interface NotificationProps {
  message: string;
  type?: NotificationType;
 }
 export default function Notification({ message, type = "info" }: NotificationProps) {
  const colors: Record<NotificationType, string> = {
    info: "bg-blue-100 text-blue-700",
    success: "bg-green-100 text-green-700",
    error: "bg-red-100 text-red-700",
  };
  return (
    <div className={`px-4 py-2 rounded shadow ${colors[type]}`}>
      {message}
    </div>
  );
 }
--- a/components/PeersList.tsx
+++ b/components/PeersList.tsx
@@ -1,14 +0,0 @@
 "use client";
 export default function PeersList({ peers }: { peers: string[] }) {
  return (
    <div>
      <h3>Peers</h3>
      {peers.length === 0 ? (
        <p>No peers</p>
      ) : (
        peers.map((p) => <div key={p}>{p}</div>)
      )}
    </div>
  );
 }
--- a/components/PollActive.tsx
+++ b/components/PollActive.tsx
@@ -1,22 +0,0 @@
 "use client";
 import PollOption from "./PollOption";
 export default function PollActive({ pollManager, peerId }: any) {
  const poll = pollManager.poll;
  return (
    <div>
      <h2 className="text-xl font-bold">{poll.question}</h2>
      {poll.options.map((opt: any) => (
        <PollOption
          key={opt.id}
          option={opt}
          pollManager={pollManager}
          peerId={peerId}
        />
      ))}
    </div>
  );
 }
--- a/components/PollCreation.tsx
+++ b/components/PollCreation.tsx
@@ -1,40 +0,0 @@
 "use client";
 import { useState } from "react";
 export default function PollCreation({ pollManager }: any) {
  const [question, setQuestion] = useState("");
  const [options, setOptions] = useState<string[]>(["", ""]);
  return (
    <div>
      <input
        className="border p-2 w-full"
        placeholder="Question"
        value={question}
        onChange={(e) => setQuestion(e.target.value)}
      />
      {options.map((opt, i) => (
        <input
          key={i}
          className="border p-2 w-full mt-2"
          placeholder={`Option ${i + 1}`}
          value={opt}
          onChange={(e) => {
            const newOpts = [...options];
            newOpts[i] = e.target.value;
            setOptions(newOpts);
          }}
        />
      ))}
      <button
        className="bg-green-500 text-white px-4 mt-2"
        onClick={() => pollManager.createPoll(question, options)}
      >
        Create Poll
      </button>
    </div>
  );
 }
--- a/components/PollOption.tsx
+++ b/components/PollOption.tsx
@@ -1,12 +0,0 @@
 "use client";
 export default function PollOption({ option, pollManager, peerId }: any) {
  return (
    <div
      className="border p-2 mt-2 cursor-pointer"
      onClick={() => pollManager.vote(option.id, peerId)}
    >
      {option.text} - {option.votes} votes
    </div>
  );
 }
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,18 +0,0 @@
 import { defineConfig, globalIgnores } from "eslint/config";
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
 const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
 ]);
 export default eslintConfig;
--- 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/hooks/usePeerManager.ts
+++ b/hooks/usePeerManager.ts
@@ -1,58 +0,0 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 import Peer from "peerjs";
 export default function usePeerManager() {
  const [peerId, setPeerId] = useState<string | null>(null);
  const [peers, setPeers] = useState<string[]>([]);
  const peerRef = useRef<Peer | null>(null);
  const connectionsRef = useRef<Map<string, any>>(new Map());
  useEffect(() => {
    const peer = new Peer();
    peerRef.current = peer;
    peer.on("open", (id) => {
      setPeerId(id);
    });
    peer.on("connection", (conn) => {
      conn.on("open", () => {
        connectionsRef.current.set(conn.peer, conn);
        setPeers(Array.from(connectionsRef.current.keys()));
      });
      conn.on("data", (data) => {
        console.log("Received:", data);
      });
      conn.on("close", () => {
        connectionsRef.current.delete(conn.peer);
        setPeers(Array.from(connectionsRef.current.keys()));
      });
    });
    return () => {
      peer.destroy();
    };
  }, []);
  const connectToPeer = (id: string) => {
    if (!peerRef.current) return;
    const conn = peerRef.current.connect(id);
    conn.on("open", () => {
      connectionsRef.current.set(conn.peer, conn);
      setPeers(Array.from(connectionsRef.current.keys()));
    });
  };
  const broadcast = (data: any) => {
    connectionsRef.current.forEach((conn) => {
      if (conn.open) conn.send(data);
    });
  };
  return { peerId, peers, connectToPeer, broadcast };
 }
--- a/hooks/usePollManager.ts
+++ b/hooks/usePollManager.ts
@@ -1,68 +0,0 @@
 "use client";
 import { useState } from "react";
 type Option = {
  id: string;
  text: string;
  votes: number;
  voters: string[];
 };
 type Poll = {
  id: string;
  question: string;
  options: Option[];
 };
 export default function usePollManager(peerManager: any) {
  const [poll, setPoll] = useState<Poll | null>(null);
  const [myVote, setMyVote] = useState<string | null>(null);
  const createPoll = (question: string, options: string[]) => {
    const newPoll: Poll = {
      id: Date.now().toString(),
      question,
      options: options.map((opt, i) => ({
        id: `opt-${i}`,
        text: opt,
        votes: 0,
        voters: [],
      })),
    };
    setPoll(newPoll);
    peerManager.broadcast({ type: "poll", poll: newPoll });
  };
  const vote = (optionId: string, peerId: string) => {
    if (!poll) return;
    const updated = { ...poll };
    updated.options.forEach((opt) => {
      const index = opt.voters.indexOf(peerId);
      if (index !== -1) {
        opt.voters.splice(index, 1);
        opt.votes--;
      }
    });
    const option = updated.options.find((o) => o.id === optionId);
    if (!option) return;
    option.votes++;
    option.voters.push(peerId);
    setPoll(updated);
    setMyVote(optionId);
    peerManager.broadcast({
      type: "vote",
      optionId,
      voterId: peerId,
    });
  };
  return { poll, createPoll, vote, myVote };
 }
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,9 +0,0 @@
 import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  }
 };
 export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,27 +0,0 @@
 {
  "name": "p2p-polling",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.2.0",
    "peerjs": "^1.5.5",
    "react": "19.2.4",
    "react-dom": "19.2.4"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "16.2.0",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
 }
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,7 +0,0 @@
 const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
 };
 export default config;
--- a/public/file.svg
+++ b/public/file.svg
@@ -1 +0,0 @@
 <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/public/globe.svg
+++ b/public/globe.svg
@@ -1 +0,0 @@
 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/public/next.svg
+++ b/public/next.svg
@@ -1 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -1 +0,0 @@
 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/public/window.svg
+++ b/public/window.svg
@@ -1 +0,0 @@
 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- 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/tsconfig.json
+++ b/tsconfig.json
@@ -1,34 +0,0 @@
 {
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts",
    "**/*.mts"
  ],
  "exclude": ["node_modules"]
 }
		`@@ -1 +0,0 @@`
			`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
		`@@ -1 +0,0 @@`
			<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
		`@@ -1 +0,0 @@`
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
		`@@ -1 +0,0 @@`
			`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`