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
This commit is contained in:
2026-03-25 11:51:33 +01:00
parent 4275cbd795
commit e14bb6d425
36 changed files with 8281 additions and 1 deletions

View File

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