Image Feed: Build a React Infinite-Scroll Image Feed with Lazy Loading

Question

## Round 1 - Frontend

Build a React image feed component that:
1. Fetches images from a paginated API `GET /images?page=N&limit=20`.
2. Displays images in a responsive masonry or grid layout.
3. Loads more images automatically when the user scrolls near the bottom (infinite scroll).
4. Shows a loading spinner during fetch and an error message on failure.

```jsx
function ImageFeed() {
  // Use IntersectionObserver or scroll event for infinite scroll trigger
  // State: images[], page, loading, error, hasMore
}
```

**Example interaction:**
```
Page loads -> fetch page 1 -> render 20 images
User scrolls to 80% -> fetch page 2 -> append 20 more
API returns empty array -> set hasMore=false, stop fetching
```

## Round 2 - System Design

Design the image serving backend:
- CDN strategy for image delivery
- Thumbnail generation pipeline
- Handling 10K concurrent users loading feeds

## Follow-ups

1. How do you prevent duplicate API calls when the user scrolls rapidly?
2. How would you implement virtual scrolling to avoid rendering thousands of DOM nodes?
3. What accessibility considerations apply to a lazy-loaded image feed?
4. How would you cache the first 2 pages of results so the feed loads instantly on revisit?

Image Feed: Build a React Infinite-Scroll Image Feed with Lazy Loading

Question Details

Full Details

Topics

More from Roblox