134Design Instagram/Pinterest Explore: infinite masonry grid, caching, and image optimization
hardAbout 60 minutesSystem designimagesmasonryvirtualizationcachingsystem-design
Problem
Design an Explore page like Pinterest or Instagram Explore:
- an endless masonry grid of images of different heights, loading more as the user scrolls;
- tapping an image opens a detail view (as a modal over the grid on desktop, a full page on mobile) and going back returns to the same scroll position;
- the grid works on phones and large screens, and stays fast after thousands of items;
- images load fast without wasting mobile data.
Cover data loading and caching, layout, virtualisation, image delivery, and the user experience on slow networks.
Step-by-step
Mobile-first, thousands of items per session, images up to 2048 px. The main risks are memory, image bytes and layout stability.
Unlock the full solution
What's inside
- Step-by-step
- Requirements
- Architecture
- Data model and state
- Key flows and trade-offs
- Performance and reliability
- Follow-up questions
Includes 2 code listings, 5 follow-up questions.
One-time payment by UPI, card or net banking. Launch price.