Design Google Photos – Frontend System Design

We’ll walk through the frontend system design for a Google Photos-style library: tens of thousands of photos in a date-grouped grid that scrolls at 60fps, uploads that survive a crash on a train, search, albums, and a People tab built on face clusters you did not compute in the browser. You’ll see why the grid is justified rather than masonry, how a slim layout index plus a virtualizer keeps the DOM small, why decoded RGBA is the scarce resource, and how an IndexedDB job queue makes the network optional.

This is not Pinterest (masonry discovery) and not Instagram (square feed). It is also not Photoshop on the web. You are not editing pixels. You are fetching the right variant of the right photo at the right time, and not decoding the other 49,999.

Problem Statement

Design the frontend for a personal photo library like Google Photos.

Requirements:

• An infinite, date-grouped photo grid that stays smooth with 50,000+ items
• Thumbnails that keep their aspect ratio and fill each row
• A full-screen... premium content.