Mobile System Design and API Design of Newsfeed
Understand API design, data models, and mobile System Design of the newsfeed app.
As we shift from the design considerations toward System Design, it becomes essential to understand how these back-end structures guide our frontend implementation. Previously established decisions, such as choosing MVVM for architecture, coordinator patterns for navigation management, dependency injection for improved modularity, and caching for performance optimization, now form the foundation for designing the mobile app.
In this lesson, we’ll explore the newsfeed’s System Design in detail, based on the design decision we made in the previous lesson. We’ll also cover different APIs and their endpoints for efficient, low-latency communication with the backend.
System Design of newsfeed
A well-defined architecture is crucial in mobile System Design. Layered patterns like MVVM-C help organize responsibilities, but their real strength lies in how they coordinate with local cache for instant responsiveness and with back-end services for fresh, reliable data. This balance ensures the app feels fast, handles offline use gracefully, and stays in sync without overwhelming the user or the system.
In System Design for a newsfeed application, we’ll start with a high-level design that helps outline the core building blocks of the system, how users interact with the app, how the mobile frontend connects to back-end layers, and how data flows end-to-end. Once this foundation is clear, we move into the detailed design, which breaks down internal components, communication flows, data handling, and performance optimizations within each part of the system. This layered approach is especially important in interviews, as it shows clarity in structuring complex systems and the ability to scale your explanation based on the depth of questioning.
Let’s first discuss a high-level System Design to establish a solid architectural overview.
High-level mobile System Design of newsfeed
At a high-level design, as illustrated below, when a user opens the mobile newsfeed app, the interaction begins directly with the View. Upon a user action, for example, refreshing the feed, the View delegates this interaction to the corresponding ViewModel, which processes this request by triggering a call to the Repository, abstracting away all data-fetching complexities. The Repository first checks the local data source for cached data; if unavailable or stale, it fetches fresh data from the server via the Backend for Frontend (BFF).
The BFF aggregates multiple back-end calls into a tailored, mobile-friendly response, performing client-specific transformations to ensure data efficiency. Next, the BFF forwards these requests to the centralized API gateway, which handles critical cross-cutting concerns like authentication, security checks, rate limiting, and request routing. The API gateway finally directs these requests to the appropriate back-end servers or microservices. The response from the server routes back and renders into the View.
Note: An API gateway provides a centralized entry point handling authentication, routing, and security for all clients, whereas a Backend for Frontend (BFF) offers tailored, optimized APIs specifically designed for individual frontend clients like mobile apps.
Now that the high-level structure is clear, let’s explore the detailed design.