System Design Overview
Problems We Aim to Solve
Our Objective
In a rapidly globalizing world, effective communication across language barriers remains a persistent challenge. Individuals and businesses often face difficulties in expressing themselves in unfamiliar languages, hindering collaboration, understanding, and connection. To address this, we aim to develop a SaaS translation app that leverages cutting-edge technologies and enhance global communication. The app's distinctive feature lies in its real-time, two-way translation capability, ensuring that users can communicate effortlessly in their preferred language while seamlessly understanding and responding to messages in other languages.
Application Requirements
User Interface (Next and Typescript)
Authentication Service (Firebase Authentication)
Backend API Server
Messaging Service
Language Translation Service (Google Cloud Translation AI)
Payment Gateway Integration (Stripe)
Cloud Storage (Firebase Storage)
Deployment Service (Vercel)
Glocal High Level Design
High-level design refers to the preliminary stage of system or software architecture where the overall structure and components of a system are outlined without going into detailed specifics. It provides a broad view of the system, focusing on major components, their relationships, and interactions.
Application Workflow
Upon registering or logging in, users are assigned unique identifiers by Firebase Authentication, ensuring secure access to their account information. This user data, encompassing details like display names and profile pictures, is stored in Firebase Realtime Database or Firestore, maintaining a personalized experience for each user. The app offers flexibility with a choice between a free plan and a paid plan. The free plan, while providing access to essential features, may impose constraints on factors like message limits , storage capacity, number of supported languages and group size. Firebase's pricing plans, tailored to usage, enable users to seamlessly transition to a paid plan for enhanced scalability and access to additional functionalities. This strategic approach to user plans not only allows users to tailor their experience based on their needs but also provides a scalable infrastructure, making the chat app adaptable to varying usage patterns. The seamless integration of Firebase services facilitates a smooth user journey while ensuring the app's sustainability and growth. Users can effectively manage their subscription plans through stripe payment interface and can cancel their subscription at anytime.
Polling, Long Polling & Websockets
Polling
Polling is a technique that the client periodically asks the server if there are messages available. Depending on polling frequency, polling could be costly. It could consume precious server resources to answer a question that offers no as an answer most of the time.
Long Polling
In long polling, a client holds the connection open until there are actually new messages available or a timeout threshold has been reached. Once the client receives new messages, it immediately sends another request to the server, restarting the process.
Web Sockets
WebSocket is the most common solution for sending asynchronous updates from server to client. WebSocket connection is initiated by the client. It is bi-directional and persistent. It starts its life as a HTTP connection and could be “upgraded” via some well-defined handshake to a WebSocket connection.
Database Design
Data Models
In our case, it is obvious that the database is used primarily as a key-value store. No complex relational ops such as join are needed. In our case, we could use NoSQL databases such as Firebase Firestore. In firebase, records are sharded by the partition keys. A key observation here is that the message ID is used to determine the ordering. The message Id is not globally unique, as its scope is determined by the partition key. The system will never retrieve an item by its message ID alone.
The firebaseRole in subscription_id is used to determine pro and non pro user, if firebaseRole is equals "pro", this means user with "user_id" is pro member.
The language_to_id and language_from _id is used for translation purpose by Google Cloud Artificial Intelligence Service.
We need two tables to capture the relationship between users and groups. The Group Membership table is used for message broadcasting, we need to figure out who gets the message.
Final High Level Design
Architecture Design
Finally, time for architecture design! By now we’ve laid down a solid foundation for the application — the database schema, the RPC calls. With all these in mind, we can proceed to write down the list of components in the system.
- Chat Service: each online user maintains a WebSocket connection with a WebSocket server in the Chat Service. Outgoing and incoming chat messages are exchanged here.
- Web Service: It handles all RPC calls except send_message(). Users talk to this service for authentication, join/leave groups, etc. No WebSocket is needed here since all calls are client-initiated and HTTP-based.
- User Mapping Service: Our chat service is globally distributed. We need to keep track of the server ID of the user's session host.
- Translation Service: The messages stored inside the database get automatically translated into the receiver's preferred language for two-way translation.
- Subscription Management Service: This service allows users to choose between free and paid plans for our application. Based on the plan, users are provided with features corresponding to their plans.
Sequence Diagram
The Role of Sequence Diagrams in System Design and Interaction Analysis
Sequence diagrams are a powerful tool in system design, offering a visual representation of how different objects or components interact over time. Lifelines, depicted as vertical dashed lines, represent the lifespan of objects involved in the interaction. Activation boxes on lifelines show when an object is active or processing a message, emphasizing the temporal aspect of interactions. Arrows denote messages exchanged between objects, indicating the flow and direction of communication. Return messages signify an object's response to a received message, illustrating the flow of control during the interaction. Sequence diagrams can showcase parallel execution, revealing concurrent activities among objects. Incorporating loop and conditional statements allows representation of repetitive or decision-based interactions.
Scalability & Load Balancing
Need of Scalabale System
Scalability is a critical aspect of system design that addresses the capacity of a system to handle increased loads or growing demands. It ensures that as user traffic, data, or processing requirements increase, the system can effectively expand to meet these demands without compromising performance or user experience. There are two primary approaches to scalability : vertical scaling (scaling up) involves increasing the resources of an individual server, such as adding more CPU or RAM, but is limited by hardware constraints; horizontal scaling (scaling out) involves distributing the load across multiple servers, offering a more flexible and scalable solution.
Need of Load Balancers
Load balancing is a crucial strategy employed to distribute incoming network traffic across multiple servers or resources, preventing any single server from being overwhelmed. The goal is to optimize resource utilization, enhance system reliability, and avoid downtime. Load balancers can be hardware or software-based, employing various algorithms to distribute traffic, such as round-robin, least connections, or IP hash. They play a pivotal role in facilitating horizontal scaling by evenly distributing requests among multiple servers.
Glocal Interface Design
Interface design refers to the process of creating visual and interactive elements that facilitate communication between users and a system, typically a software application or a website. The goal of interface design is to enhance the user experience by presenting information in an organized, aesthetically pleasing, and intuitive manner.
Understanding Application Layers
Navigating the Design Process
The design process is a structured journey that starts by defining a problem and setting clear objectives. Through user research and competitor analysis, we gain insights and identify unique elements. Ideation leads to prototyping and user testing, refining the design. Visual design includes creating a cohesive look and feel, followed by collaboration with developers for implementation. Iterative testing and a continuous feedback loop refine the design further. The final stages involve launch, post-launch monitoring, and ongoing optimization based on user feedback and analytics. This cyclical process ensures that the design aligns with user needs and business goals effectively.
Understanding User Persona
The Vital Role of User Personas
User personas play a pivotal role in the design and development process by providing a human-centric perspective on user data. These fictional characters, representing the target audience, guide decision-making, prioritize features, and enhance communication strategies. They contribute to proactive problem-solving by identifying user pain points, ensuring solutions align with user preferences. User personas continuously inform the design process, leading to an improved user experience and mitigating risks associated with misguided decisions. Regular updates based on user feedback keep personas relevant and adaptive to changing needs and trends, making them an essential tool for creating products that resonate with users.
Users Data Flow
User Interaction and Input
Translation and Processing.
Secure Transmission and User Interface
Understanding Wireframes
The Role of Mid-Fidelity Wireframes in Visualization and Iterative Refinement
Mid-fidelity wireframes serve as a crucial step in the design process, offering a more detailed representation of a digital product than low-fidelity sketches while maintaining the flexibility needed for iterative refinement. These wireframes provide a visual blueprint of the user interface, incorporating placeholder images, basic styling, and precise layout details. They convey the intended look and feel of the product, outlining key elements such as buttons, navigation bars, and content areas. Additionally, mid-fidelity wireframes illustrate user flow, navigation paths, and how users interact with the interface. While not as detailed as high-fidelity designs, they hint at interaction states and provide a clearer understanding of expected user behavior. This level of detail facilitates collaboration, allowing team members and stakeholders to engage in discussions and provide feedback. Moreover, mid-fidelity wireframes serve as a foundation for iterative prototyping, enabling designers to test and refine the user experience before advancing to high-fidelity visuals. Balancing detail and speed, mid-fidelity wireframes play a pivotal role in efficiently progressing through the design process, from concept to a more refined and user-centric interface.