Project 6: Infinite Scroll Image Gallery

📋 Project Brief

Build a media-rich image gallery that fetches high-resolution photos from an external API (like Unsplash) as the user scrolls. This project is a masterclass in lazy loading, modern layout techniques, and API integration. You will use the Intersection Observer API for zero-lag infinite scrolling and implement polished loading states like skeleton screens and blur-up patterns.

🎯 Learning Objectives

• Use the Intersection Observer API for performant scroll detection
• Build a Masonry layout using CSS Grid or JavaScript calculations
• Implement skeleton loading states and blur-up image transitions
• Handle API pagination, rate limiting, and error states gracefully
• Build an accessible lightbox modal with touch-swipe support

✅ Feature Requirements

Feature 1: Intersection Observer Infinite Scroll

Acceptance Criteria:

• A sentinel element at the bottom of the gallery triggers the next API fetch when it enters the viewport
• No use of onscroll event listeners
• A loading spinner appears while new images are being fetched
• If the API returns no more results, show "You've reached the end" and stop observing
• The observer must be properly cleaned up when the component unmounts

Feature 2: Skeleton Loading

Acceptance Criteria:

• Before images load, show animated placeholder boxes that match the expected image dimensions
• Skeleton colors must use CSS shimmer animation (a gradient that moves left to right)
• Once an image loads, it fades in smoothly (opacity transition, ~300ms)
• The skeleton must respect the Masonry layout (varying heights)

Feature 3: Masonry Layout

Acceptance Criteria:

• Images of varying aspect ratios are laid out without gaps in a Pinterest-style grid
• The layout must be responsive: 1 column on mobile, 2-3 on tablet, 4+ on desktop
• Images must not be cropped or distorted
• The layout must recalculate when the browser window is resized (debounced)

Feature 4: Lightbox Modal

Acceptance Criteria:

• Clicking an image opens it in a full-screen overlay with a dark backdrop
• Left/Right arrow keys navigate between images
• Escape closes the lightbox
• On mobile, swipe left/right to navigate
• The lightbox must trap focus (Tab cycles only within the modal)
• Background scroll must be locked when the lightbox is open

Feature 5: Rate-Limit Handling

Acceptance Criteria:

• If the API returns a 429 (Too Many Requests), show a friendly message: "We're loading too fast. Retrying in X seconds..."
• Implement exponential backoff: retry after 2s, then 4s, then 8s
• After 3 failed retries, show a "Try Again" button
• Display the remaining rate limit in the footer (from API response headers)

📊 Performance Benchmarks

Metric	Target
Initial page load (first 20 images)	< 2 seconds
Largest Contentful Paint	< 2.5 seconds
Cumulative Layout Shift	< 0.1
Lightbox open animation	< 300ms

🧪 Testing Checklist

• Unit test API service layer (mock responses, error handling)
• Unit test exponential backoff logic
• Integration test: scrolling to bottom triggers new images
• A11y: lightbox has correct focus management and keyboard nav
• Lighthouse Performance score ≥ 90

🚀 Stretch Goals

• Add a search bar to search images by keyword
• Implement a "Save to Favorites" feature using localStorage
• Add image download functionality
• Support video content in the gallery