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>

README.md

@@ -1,14 +1 @@
 # P2P Poll App
-
-P2P Poll - Minimal GUN-based Scaffolding
-
-What this is
-- A tiny peer-to-peer polling app implemented with vanilla JS and GUN (a decentralized, CRDT-friendly database).
-- No central server for poll data. Peers connect and synchronize the poll in real-time.
-
-Notes
-- This scaffold uses GUN’s browser-based peer-to-peer data replication.
-- You can extend with:
-  - Persistent storage on each peer
-  - Better conflict resolution UI
-  - Optional signaling server for explicit peer discovery

app.js

@@ -1,200 +0,0 @@
-// Minimal GUN-based P2P Poll scaffold (vanilla JS)
-
-(function() {
-  // Initialize GUN (no server needed; can optionally connect to a relay server)
-  // If you want a local-only node for prototyping: Gun()
-  // If you want to use a signaling server for discovery, pass a list of peers to Gun().opt({peers: [...]})
-  const gun = Gun();
-
-  // DOM helpers
-  const pollSection = document.getElementById('poll');
-  const pollIdInput = document.getElementById('pollId');
-  const loadPollBtn = document.getElementById('loadPollBtn');
-  const createPollBtn = document.getElementById('createPollBtn');
-  const pollTitleInput = document.getElementById('pollTitle');
-  const setTitleBtn = document.getElementById('setTitleBtn');
-  const optionsDiv = document.getElementById('options');
-  const newOptionInput = document.getElementById('newOption');
-  const addOptionBtn = document.getElementById('addOptionBtn');
-  const totalVotesSpan = document.getElementById('totalVotes');
-  const pollIdDisplay = document.getElementById('pollIdDisplay');
-
-  let currentPollId = null;
-  let pollsRef = null; // Gun node for /polls/{pollId}
-  let pollData = null; // local cache
-
-  // Helpers
-  function renderOptionList(options) {
-    optionsDiv.innerHTML = '';
-    const keys = Object.keys(options || {});
-    if (keys.length === 0) {
-      optionsDiv.innerHTML = '<p>No options yet. Add one below.</p>';
-      return;
-    }
-    keys.forEach((optId) => {
-      const opt = options[optId];
-      const el = document.createElement('div');
-      el.className = 'option';
-      el.innerHTML = `
-        <span class="text">${opt.text}</span>
-        <button data-optid="${optId}" class="voteBtn">Vote (${opt.votes || 0})</button>
-      `;
-      optionsDiv.appendChild(el);
-    });
-  }
-
-  function updateTotalVotes() {
-    const opts = pollData && pollData.options ? pollData.options : {};
-    const total = Object.values(opts).reduce((sum, o) => sum + (o.votes || 0), 0);
-    totalVotesSpan.textContent = total;
-  }
-
-  // Load existing poll and subscribe to changes
-  function loadPoll(pollId) {
-    if (!pollId) return;
-
-    currentPollId = pollId;
-    pollIdDisplay.textContent = pollId;
-    pollsRef = gun.get('polls').get(pollId);
-
-    // Initialize structure if new poll
-    pollsRef.get('title').put('Untitled Poll');
-    pollsRef.get('options').put({}); // ensure map exists
-
-    // Real-time updates: listen to changes
-    pollsRef.get('title').on((title) => {
-      pollTitleInput.value = title || '';
-    });
-
-    pollsRef.on((data) => {
-      // data is the entire poll node if subscribed; but we explore explicit fields
-    });
-
-    // For options map
-    pollsRef.get('options').on((opts) => {
-      // opts is the entire options map; convert to plain object
-      const optionsObj = toPlainObject(opts);
-      pollData = {
-        title: null,
-        options: optionsObj
-      };
-      renderOptionList(optionsObj);
-      updateTotalVotes();
-    });
-
-    // Also listen for title changes separately (in case some clients push via title path)
-    pollsRef.get('title').on((title) => {
-      pollTitleInput.value = title || '';
-    });
-
-    // Show UI
-    document.getElementById('setup').style.display = 'none';
-    pollSection.style.display = 'block';
-  }
-
-  // Create a new poll
-  function createPoll() {
-    const pollId = pollIdInput.value.trim();
-    if (!pollId) {
-      alert('Please enter a poll ID to create.');
-      return;
-    }
-    currentPollId = pollId;
-    // Initialize poll
-    pollsRef = gun.get('polls').get(pollId);
-    pollsRef.put({
-      title: 'New Poll',
-    });
-    pollsRef.get('options').put({}); // ensure map exists
-    // reflect in UI
-    pollIdDisplay.textContent = pollId;
-    pollTitleInput.value = 'New Poll';
-    pollSection.style.display = 'block';
-    document.getElementById('setup').style.display = 'none';
-  }
-
-  // Add option
-  function addOption() {
-    if (!pollsRef) {
-      alert('Load or create a poll first.');
-      return;
-    }
-    const text = newOptionInput.value.trim();
-    if (!text) return;
-    const optionId = 'opt_' + Date.now();
-    pollsRef.get('options').get(optionId).put({ text, votes: 0 });
-    newOptionInput.value = '';
-  }
-
-  // Set title
-  function setTitle() {
-    if (!pollsRef) return;
-    const title = pollTitleInput.value.trim() || 'Untitled';
-    pollsRef.get('title').put(title);
-  }
-
-  // Vote handler (delegated)
-  function handleVoteClick(e) {
-    if (e.target.classList.contains('voteBtn')) {
-      const optId = e.target.getAttribute('data-optid');
-      if (!optId || !pollsRef) return;
-      const optRef = pollsRef.get('options').get(optId);
-      // Increment votes locally
-      optRef.get('votes').once((v) => {
-        const current = v || 0;
-        optRef.put({ votes: current + 1 });
-      });
-      // UI will update via the on() listener on options map
-    }
-  }
-
-  // Utilities
-  function toPlainObject(obj) {
-    // Gun emits special proxy-like objects; convert to plain object
-    if (!obj) return {};
-    // If it's already a plain object, return
-    if (typeof obj !== 'object') return {};
-    // Gun events deliver object-like; attempt shallow copy
-    try {
-      const copy = JSON.parse(JSON.stringify(obj));
-      return copy;
-    } catch (e) {
-      // Fallback: return as-is if cannot stringify
-      return obj;
-    }
-  }
-
-  // Event bindings
-  loadPollBtn.addEventListener('click', () => {
-    const id = pollIdInput.value.trim();
-    if (!id) {
-      alert('Enter a Poll ID to load.');
-      return;
-    }
-    loadPoll(id);
-  });
-
-  createPollBtn.addEventListener('click', () => {
-    createPoll();
-  });
-
-  addOptionBtn.addEventListener('click', addOption);
-  newOptionInput.addEventListener('keydown', (ev) => {
-    if (ev.key === 'Enter') addOption();
-  });
-
-  setTitleBtn.addEventListener('click', setTitle);
-
-  // Delegate vote clicks
-  optionsDiv.addEventListener('click', handleVoteClick);
-
-  // Initialize: optionally auto-create a poll if URL param present
-  // Example: ?pollId=my-poll-123
-  const urlParams = new URLSearchParams(window.location.search);
-  const autoPoll = urlParams.get('pollId');
-  if (autoPoll) {
-    pollIdInput.value = autoPoll;
-    loadPoll(autoPoll);
-  }
-
-})();

index.html

@@ -1,55 +1,33 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>P2P Poll</title>
-  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="/src/style.css">
-  <!-- Gun.js via CDN for quick start -->
-  <script src="https://unpkg.com/gun/gun.js"></script>
 </head>
 <body>
-  <div class="container">
+  <div id="app">
+    <header>
       <h1>P2P Poll</h1>
-
+      <div id="status">
-    <section id="setup" class="card">
+        <span id="connection-status" class="connecting">Connecting...</span>
-      <h2>Start or Join Poll</h2>
+        <span id="peer-count">1 peer</span>
-      <div class="field">
-        <label for="pollId">Poll ID (share with peer):</label>
-        <input id="pollId" type="text" placeholder="e.g. my-poll-123" />
       </div>
-      <button id="loadPollBtn">Load Poll</button>
+    </header>
-      <button id="createPollBtn">Create New Poll</button>
-      <p class="note">Tip: You can run two instances and connect by using the same Poll ID.</p>
-    </section>
 
-    <section id="poll" class="card" style="display:none;">
+    <main>
-      <h2>Poll</h2>
+      <div id="add-option">
-      <div class="field">
+        <input type="text" id="option-input" placeholder="Add a poll option..." maxlength="100">
-        <label for="pollTitle">Poll Title</label>
+        <button id="add-btn">Add</button>
-        <input id="pollTitle" type="text" placeholder="Poll Title" />
-        <button id="setTitleBtn">Set Title</button>
       </div>
 
-      <div id="options" class="options">
+      <div id="poll-options"></div>
-        <!-- dynamic options will render here -->
+
+      <p id="empty-state">No options yet. Add one above!</p>
+    </main>
   </div>
 
-      <div class="field">
+  <script type="module" src="/src/main.js"></script>
-        <input id="newOption" type="text" placeholder="Add a new option" />
-        <button id="addOptionBtn">Add Option</button>
-      </div>
-
-      <div class="summary">
-        <p>Total votes: <span id="totalVotes">0</span></p>
-      </div>
-
-      <div class="share">
-        <p>Share Poll ID with peer: <code id="pollIdDisplay"></code></p>
-      </div>
-    </section>
-  </div>
-
-  <script src="app.js"></script>
 </body>
 </html>

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

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

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

styles.css

@@ -1,104 +0,0 @@
-:root {
-    --bg: #0f1220;
-    --card: #1a1740;
-    --text: #e8e3ff;
-    --muted: #b8a7d2;
-    --accent: #6bd3ff;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html,
-body {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
-    background: #0b0a14;
-    color: #fff;
-    height: 100%;
-}
-
-.container {
-    max-width: 700px;
-    margin: 40px auto;
-    padding: 0 16px;
-}
-
-.card {
-    background: #1f1740;
-    border-radius: 12px;
-    padding: 16px;
-    margin-bottom: 14px;
-    border: 1px solid #2a1950;
-}
-
-.field {
-    margin-bottom: 12px;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-label {
-    min-width: 180px;
-}
-
-input[type="text"] {
-    flex: 1;
-    padding: 8px;
-    border-radius: 6px;
-    border: 1px solid #5a2d8a;
-    background: #2a174f;
-    color: #fff;
-}
-
-button {
-    padding: 8px 12px;
-    border-radius: 6px;
-    border: none;
-    background: #6bd3ff;
-    color: #04152a;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-button:hover {
-    opacity: 0.95;
-}
-
-.options {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-top: 6px;
-}
-
-.option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px;
-    background: #2a174f;
-    border: 1px solid #40217a;
-    border-radius: 6px;
-}
-
-.option .text {
-    flex: 1;
-}
-
-.share {
-    font-size: 0.9em;
-    color: var(--muted);
-}
-
-.note {
-    color: #c8b5ff;
-    font-size: 0.9em;
-}
-
-.total {
-    font-weight: bold;
-}