Design google photos mobile frontend

April 24, 2022 7:00 PM PDT

---

This document summarizes the design discussion for the Google Photos mobile frontend, focusing on functional and non-functional requirements, system design, and technical considerations.

Requirements

Functional Requirements

• Design the Google Photos mobile frontend.
• List photos in alphabetical or date order, with a preference for sorting by date and time.
• Implement pagination (indexing, separate thread).
• Support infinite scroll.
• Album sharing is out of scope.

Non-Functional Requirements

• Considerations for emerging vs. developed markets, particularly regarding bandwidth.
• Assume high bandwidth for the design.

System Design

External APIs

• Resource provider.
• HTTP API design.

System Design Considerations

• Android View/API: Use RecyclerView based on GridLayout, with rows and columns.
• GridLayoutManager: Yes, it should be used.
• Row vs. Column Management: Set 3-4 columns; rows will be dynamically created.

Architecture

• MVC/MVx Architecture.

Fetching Photos

• Protocols:

  • HTTP
  • GraphQL
  • WebSocket
  • SSE (Server Sent Events)

• Network Request:

  • GET HTTP with headers including a token.
  • Base URL + Path URL + Parameters.
  • Return value includes image details such as timestamp, resolution, and URL.

Infinite Scroll

• Use a receptor to determine the size of the current view and the starting index for fetching from the server.
• Utilize libraries like Picasso or Android Worker for loading image URLs.

Image Loading

• HTTP Requests: Should be handled on a separate thread, with UI updates on the main thread.
• Image Downloading: Triggered once the response is received from the server, informing the RecyclerView of the available results.

Handling Scroll Events

• Implement callbacks for new photos from the server.
• Use a new holder in RecyclerView to wait for data to arrive.

Feedback

Interviewer Feedback

• Emphasized the need for a clear framework and trade-offs.
• Suggested focusing on API design for fetching photos.
• Recommended breaking down the flow into three steps: HTTP call, data retrieval, and image download.

Audience Feedback

• Highlighted the importance of authentication modules.
• Discussed the significance of requirement gathering and testability.
• Suggested that the interviewee should have considered loading images ahead of time when scrolling down.

Additional Considerations

• Discussed the use of WebSocket and the implications of long polling.
• Addressed how to manage broken connections and the importance of handling different resolutions of photos.
• Explored the differences between mobile and web development, including release cycles and user experience.

Conclusion

The discussion provided insights into the design of the Google Photos mobile frontend, highlighting key technical aspects, potential pitfalls, and areas for improvement in the design process.