Mobile System Design and API Design of Chat Application

Designing a real-time communication system for mobile is about ensuring message delivery feels instantaneous, consistent, and resilient despite battery constraints, flaky networks, and diverse device capabilities. In the previous lesson, we explored the foundational design considerations essential for building a robust mobile chat experience. With that groundwork in place, we’re now ready to architect the mobile System Design in more depth, focusing on real-time connectivity and the API layer that ties everything together.

In this lesson, we’ll look into the mobile System Design of the chat application and will explore API endpoints, especially focusing on real-time WebSocket-oriented communication.

Let’s first discuss a high-level System Design to establish a solid architectural overview.

High-level mobile System Design of a chat application

A mobile chat application’s frontend architecture needs to be clean, modular, and resilient to handle the complexity of real-time communication. As decided in the previous lesson, we adopt a layered architectural pattern like MVVM-C, combined with dependency injection (DI) to promote testability and separation of concerns.

In the chat application’s high-level design, the message flow begins with the user’s interaction and extends to back-end services, as underlined below.

• When a user opens the app, the View layer presents the chat list UI, which is driven by a ViewModel that holds the current state (ChatItems), triggers data loads (fetchChats()), and handles user actions like selecting a conversation (onChatSelected()). It also manages UI flags such as loading and error states.

• The ViewModel interacts with the Repository, which acts as a bridge between the UI and external or local data sources. The Repository retrieves the chat list from the local cache (getChatList(userId)), listens for updates via sockets or polling (ChatListUpdates()), and manages unread badge counts (UnreadCount(map)). It also handles actions like chat deletion.

• These responsibilities are fulfilled by integrating with the WebSocket service for real-time updates, the API service for on-demand fetches or syncing, and local storage for fast access and offline support.

This architecture ensures a smooth and resilient user experience, even in variable network conditions, while maintaining clear separation of concerns across layers, as illustrated below:

Now that we have a high-level overview, let’s expand our design further to include coordinators, DI, and an overview of back-end systems enabling a real-time chat experience.

Detailed mobile System Design of a chat application

As real-time communication scales across diverse devices and networks, a layered architecture ensures clarity, separation of concerns, and adaptability. In this section, we unpack the detailed mobile System Design for a chat application ...