Mobile System Design (iOS): Swiggy/Zomato App

In this article, I’m sharing insights on how to approach mobile system design with examples.

Photo by Marvin Meyer on Unsplash

Introduction:

For the past few days, I have been searching for resources on mobile system design, but I haven’t found much information on the topic. So, I just wanted to share my learning experience with you.

Also, Design and architecture do not have one correct answer, allowing individuals to solve design problems in their unique way and demonstrate that their solution is appropriate for the problem at hand. Additionally, solving design problems depends on various factors such as business requirements, scale, cost, time constraints, team members’ experiences, performance considerations, and reliability. Therefore, the design approach can vary from one problem to another.

Problem:

Design a simplified version of the Swiggy/Zomato app.

Given the breadth of the problem statement, it’s essential to ask the interviewers for the correct requirements and detail note down both the functional and non-functional requirements. This approach ensures that during the design process, you can systematically address each requirement one by one.

Solution:

- Requirements:

Functional Requirements:

• Select an Address (which are already in the list/or create new address)
• View a Restaurant List
• See Restaurant Menu
• Add dishes to the Cart
• Make an Order
• Track the Order Status

Not covered in the solution:

• Ignore Payments for now

Non-Functional Requirements:

• Performance Optimisation on Slow Internet
• Optimisation for the limited storage in the device
• Design for optimise backend

- UI:

The provided image is merely an example sourced from the internet.

- Data Model:

Models

- Rest Apis Needed:

1. login

Assuming the user is already logged in, we don’t need to worry about authorization.

GET /users/<userID>
Return: User

2. Restaurant

Since there are multiple restaurants available, we only want to display restaurant listings based on a specific address.

GET /restaurants/<addressID>
Returns: [Restaurants]

3. Dishes

GET /dishes/<restaurantID>
Returns: [Dish]

4. Cart

POST /cart/{userID, restaurantID, dishID, count}
Returns: Cart

GET /cart/<cartID>
Return: Cart

- High Level Solution:

• iOS Architecture:

Among various architectures available for iOS apps, such as VIPER, MVVM, MVP, etc., I have decided to opt for MVVM for the app. The choice is influenced by specific reasons or considerations, which may include factors like simplicity, scalability, or alignment with the project’s requirements and goals.

MVVM Architecture

View: It is responsible for handling UI-related tasks, such as displaying and retrieving information. It belongs to the view layer of the application.

View Model: It receives data from the View, processes and manages this data, and then sends it back to the View.

Model: This component represents the data model of the application and is independent of the view or controller. It is utilized by the View Model and updates its state when the View Model sends new updates.

• Modules:

App Modules

• Activity Diagram:

Activity Diagram

• Non-Functional Requirements:

1. Availability and Offline Mode: Implementing a suitable cache policy is crucial to optimize memory and disk usage. Stories in the app’s local cache should be flushed after their expiry time to manage space efficiently. Options for local data storage include SQLite, Core Data, Swift Data, Realm, and others.
2. Performance: Identify and optimize UI-intensive operations such as infinite list scrolling and animations. Consider implementing prefetching mechanisms and optimizing data loading to enhance performance.
3. Scalability: Design the UI with reusable components and modularize the app to facilitate scalability and maintainability. Breaking down the UI into smaller, manageable components can enhance flexibility and scalability.
4. Battery Life: Strategies to minimize battery and data usage should be employed. This may involve optimizing network requests, background tasks, and resource-intensive operations to reduce power consumption.
5. Response Time: Define acceptable response times for APIs and monitor their performance. Investigate any instances where response times exceed the defined thresholds to ensure optimal user experience.
6. Reducing Network Requests: Implement techniques such as data prefetching and buffering to minimize the number of network requests and improve app performance.
7. Security: Ensure robust authentication and authorization mechanisms are in place, and sensitive data is securely stored. Utilize secure communication protocols such as HTTPS and implement certificate pinning(SSL Pinning) for added security.
8. Monitoring: Implement crash reporting, data logging, and analytics to monitor app performance and user behavior. This allows for timely identification of issues and insights into user interactions.

Thank you for taking the time to read this article! If you have any questions or comments, please don’t hesitate to leave them below. Your feedback is valuable to me, so feel free to share any thoughts or suggestions you may have.

Additionally, if you have any specific thoughts or if you noticed any mistakes, I would greatly appreciate your input. Your insights can help improve the quality of future articles.

If you prefer, you can also reach out to me directly with any questions or feedback. I’m always here to help and open to discussion.

Sakshi Jaiswal: [LinkedIn]

[PS: I’m using draw.io for drawing above models.]