Skip to content

Design a photo sharing app (frontend)

Design the web client for a photo sharing app: a feed of photos, a page for one photo, and uploading your own.

System designFrontend and full stackSocial feed and timelineMid-levelSenior

What to work through

Work through a photo sharing app as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Scroll a feed of photos from followed accounts, more loading as the reader goes
  • Open one photo on its own page with its caption, likes and comments
  • Upload a photo with a caption, seeing progress and then the post
  • Like a photo and comment on it

Constraints to discuss

  • The first photo shows within 2.5 seconds on a phone
  • Images never push the page around as they load: layout shift of 0.1 or less
  • A phone never downloads a desktop-size image
  • An upload survives a dropped connection without starting over
  • A tap answers within 200 milliseconds
Need a starting point?

Watch for these common gaps as you prepare:

  • Lazy-loading the first photo on screen
  • Images with no width and height, so the feed jumps as they load
  • One large file sent to every screen
  • An upload in one request that starts over after a drop
  • Ignoring the rotation stored in a phone photo, so it shows sideways
  • Keeping location data from the photo after upload
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

AI systemsDesign a ChatGPT-style chat (frontend)Search and autocompleteDesign an autocomplete search box (frontend)CollaborationDesign a calendar (frontend)Messaging and notificationsDesign a chat app (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.