Poll Widget Component

Design a poll widget that allows users to vote and see results in real-time.

R - Requirements

Key Questions:

• Single or multiple choice? (single typically)
• Real-time results? (yes, for live polls)
• Can users change vote? (yes/no)
• Show results before voting? (usually no)
• Anonymous or authenticated? (both supported)

Common Answers:

• Single choice
• Real-time results updates
• Can change vote
• Hide results until voted
• Support both anonymous and authenticated

A - Architecture

Voting Flow:

Poll Architecture:

Architecture Decisions:

• Real-time updates (WebSocket/SSE for live results) - Show live vote counts
• Optimistic UI (show vote immediately) - Instant feedback, sync in background
• State management (voted state, results) - Track user vote + aggregate results

Relevant Content:

• Real-Time Architecture - WebSocket patterns
• Optimistic Updates - Instant feedback

D - Data Model

State Management:

• Poll question and options
• User's vote (if voted)
• Results (counts, percentages)
• Loading/error states

Real-Time:

• WebSocket/SSE for live results
• Optimistic updates (show vote before server confirms)

Relevant Content:

• Caching Patterns - Results cache
• WebSocket Management - Real-time connection

I - Interface

Features:

• Poll question
• Option buttons/radio buttons
• Vote button
• Results display (bars, percentages)
• Real-time updates indicator
• Loading states

Accessibility:

• Keyboard navigation
• Screen reader support
• ARIA labels
• Focus management

Relevant Content:

• Accessible Forms - Radio buttons
• ARIA Live Regions - Results announcements

O - Optimizations

Performance:

• Optimistic UI (show vote immediately)
• Throttle real-time updates (don't update on every vote)
• Result caching (avoid refetch)

Real-Time:

• WebSocket connection pooling (reuse connections)
• Batch updates (aggregate multiple votes)

Relevant Content:

• Optimistic Updates - Instant feedback
• WebSocket Management - Connection handling

Implementation Checklist

• Option selection (radio buttons)
• Vote submission
• Optimistic UI (show vote immediately)
• Real-time results (WebSocket/SSE)
• Results visualization (bars, percentages)
• Change vote functionality
• Loading states
• Error handling
• Accessibility (keyboard, screen readers)
• Throttle real-time updates

Common Pitfalls

❌ No optimistic UI → Slow, unresponsive
✅ Show vote immediately, sync in background

❌ Update on every vote → Too many updates
✅ Throttle real-time updates (1-5s)

❌ No error handling → Lost votes
✅ Retry on failure, show error state

❌ Poor accessibility → Not usable with keyboard
✅ Keyboard navigation, screen reader support