- Back End -

Interactive demo: A shared pixel grid synced in real-time via WebSocket. Click to toggle pixels, or drag to select multiple at once.

Connecting...

How It Works

🏗 Architecture

  • Frontend: Next.js 16 + React 19 (S3 + CloudFront)
  • State: Zustand with WebSocket sync
  • Backend: FastAPI on ECS Fargate
  • Protocol: WebSocket for real-time
  • API: api.stacktoprod.com

🔄 Real-Time Flow

  1. Client connects via WebSocket
  2. Draw to select multiple pixels
  3. Release sends batch toggle
  4. Server broadcasts to all clients
  5. Cursors shared in real-time

🛡 Security

  • Client throttle: 1 click/second
  • Server rate limit: 60/min per IP
  • Input validation: Pydantic schemas
  • CORS: Origin whitelist

💡 Why This Demo?

Demonstrates full-stack real-time capabilities: WebSocket connections, state synchronization, and presence awareness. A minimal but complete example of collaborative application architecture.

🔬 Under the Hood

Zustand + WebSocket

Lightweight state container managing WebSocket connection lifecycle and real-time state updates from server broadcasts.

FastAPI WebSocket

Connection manager tracks all clients, broadcasts pixel changes and cursor positions to all connected users.

Batch Updates

Draw to select multiple pixels, toggle all with a single WebSocket message. Efficient batch processing.

State persists until backend restarts. See other users' cursors in real-time.