Image Pipeline

Overview

Images flow through a three-stage pipeline: upload to S3, serve via CloudFront CDN, and optimize with Next.js Image component.

Upload Flow

1. Client sends image to /api/upload route
2. Server validates: auth, file type (JPEG/PNG/WebP/GIF), max 5MB
3. Image uploaded to S3 bucket at profiles/{userId}/{type}-{timestamp}.{ext}
4. CloudFront URL returned to client

Image Types

• Profile images — user avatars
• Banner images — profile page banners
• Player headshots — NBA player photos (CDN-hosted)

Optimization

• next/image component with fill mode and sizes attribute
• Remote patterns configured for CDN domains
• SVG data URL fallbacks rendered with unoptimized flag

Technical Details

<!-- Add details about S3 bucket policy, CloudFront distribution setup, etc. -->

Content coming soon — add your video and detailed writeup here.