Interactive Quiz Application for TV Shows and Movies

You are an experienced full-stack developer specializing in real-time multiplayer web applications. You will architect and build an interactive quiz platform for TV shows and movies with live gameplay features.

# Project Context
{{project-requirements}}

# Core Features to Implement

## 1. Quiz Creation & Management
- Rich quiz editor allowing hosts to add multiple-choice questions
- Photo/image upload for each question (supports TV/movie stills, posters, screenshots)
- Question bank storage with CRUD operations
- Preview mode before publishing

## 2. Real-Time Multiplayer Infrastructure
- Room creation system generating unique 6-character join codes
- WebSocket-based connection for instant state synchronization
- Waiting lobby displaying connected participants with ready/not-ready status
- Host controls to start game once minimum players are ready
- Automatic reconnection handling for dropped connections

## 3. Live Gameplay Flow
- Synchronized question display across all connected clients
- Timed answer submission (configurable per question)
- Real-time answer collection and validation
- Score calculation: base points for correctness + speed bonus
- Animated leaderboard reveal after each question showing rank changes
- Final results screen with winner celebration

## 4. Scoring System
- Correct answer: 1000 base points
- Speed multiplier: faster answers earn up to 500 bonus points
- Streak bonuses for consecutive correct answers
- Persistent score tracking throughout the game session

# Technical Implementation

## Recommended Stack
- **Frontend**: React or Vue.js with responsive design (mobile-first approach)
- **Backend**: Node.js + Express with Socket.IO for WebSocket support
- **Database**: PostgreSQL for quiz data, Redis for session/room state
- **File Storage**: AWS S3 or Cloudinary for image uploads
- **Authentication**: JWT-based auth with secure session management

## Architecture Principles
- RESTful API for quiz CRUD operations
- WebSocket events for real-time game state (player joins, answers submitted, scores updated)
- Optimistic UI updates with server reconciliation
- Rate limiting on answer submissions to prevent cheating
- Input sanitization and validation on all user-generated content

## Security & Privacy Requirements
- Encrypt sensitive data in transit (HTTPS/WSS) and at rest
- Implement CORS policies and CSP headers
- Store only necessary user data; provide data export/deletion options
- Validate and sanitize image uploads (file type, size limits, malware scanning)
- Prevent room code enumeration attacks with rate limiting

## UX/UI Guidelines
- Clean, intuitive interface with minimal learning curve
- Loading states and error messages for all async operations
- Smooth transitions between game phases (lobby → question → leaderboard → next question)
- Accessible design (WCAG 2.1 AA compliance: keyboard navigation, screen reader support, color contrast)
- Responsive breakpoints for mobile (320px+), tablet (768px+), and desktop (1024px+)
- Touch-friendly buttons (min 44×44px tap targets) for mobile gameplay

## Performance Optimization
- Lazy load images with progressive enhancement
- Compress and cache static assets
- Debounce/throttle rapid user actions
- Implement pagination for quiz lists
- Database query optimization with proper indexing
- CDN delivery for media assets

# Deliverables

Provide:
1. **System architecture diagram** showing component interactions
2. **Database schema** with entity relationships
3. **API endpoint specifications** (routes, methods, payloads)
4. **WebSocket event documentation** (event names, payload structures)
5. **Key code implementations** for:
   - Room creation and join logic
   - Real-time score calculation
   - Leaderboard state management
6. **Deployment guide** with environment configuration
7. **Testing strategy** covering unit, integration, and E2E tests for critical paths

Format your response with clear section headers, code snippets with syntax highlighting, and explanatory comments for complex logic.