🎉 Give it a Star. Read more →
App Architecture
High Level Design

High-Level Design

Overview

The high-level design of the application involves multiple services working together to provide real-time messaging, translation, and subscription management. The system is built using a microservices architecture to ensure scalability, flexibility, and ease of maintenance.

High-Level Architecture Diagram

+-----------------------------------------+
|                 Frontend                |
|  React.js, Next.js, TypeScript, Framer  |
+---------------------+-------------------+
                      |
                      v
+---------------------+-------------------+
|                Web Service              |
|            RESTful API Server           |
+---------+---------------+---------------+
          |               | 
          v               v
+---------+-------+  +----+-----------------+
|  User Mapping   |  |  Subscription Service |
|   Service       |  |      Stripe API       |
|  Firestore      |  +-----------------------+
+---------+-------+
          |
          v
+---------+-----------------------------------+
|                Chat Service                |
|               WebSocket Server             |
+---------+---------------+-------------------+
          |               | 
          v               v
+---------+-------+  +----+-------------------+
| Translation     |  |   Firebase Database    |
|   Service       |  | (Firestore & Realtime) |
|  Google Cloud   |  +------------------------+
| Translation API |
+-----------------+

Components

1. Chat Service

  • Functionality: Manages real-time communication between users.
  • Technology: WebSocket server.
  • Responsibilities:
    • Maintain WebSocket connections with users.
    • Handle incoming and outgoing messages.
    • Ensure message delivery and receipt acknowledgments.

2. Web Service

  • Functionality: Handles HTTP-based RPC calls.
  • Technology: RESTful API server.
  • Responsibilities:
    • User authentication.
    • User management (registration, profile updates).
    • Group management (create, join, leave groups).
    • Serve as a gateway for non-chat functionalities.

3. User Mapping Service

  • Functionality: Tracks the server ID of the user's session host.
  • Technology: NoSQL database (Firebase Firestore).
  • Responsibilities:
    • Map users to their respective WebSocket servers.
    • Maintain session information for users.

4. Translation Service

  • Functionality: Provides language translation for messages.
  • Technology: Google Cloud Translation API, AutoML.
  • Responsibilities:
    • Translate incoming messages to the receiver's preferred language.
    • Support multiple languages for seamless communication.

5. Subscription Management Service

  • Functionality: Manages user subscriptions.
  • Technology: Stripe API.
  • Responsibilities:
    • Handle subscription plans (free, pro).
    • Process payments and manage billing cycles.
    • Update user privileges based on their subscription status.

Data Flow

  1. User Registration and Authentication:

    • Users register or log in via the Web Service.
    • User details are stored in the Firestore database.
    • On successful authentication, users receive a session token.

  2. Real-Time Messaging:

    • Users connect to the Chat Service via WebSocket.
    • Messages sent by users are received by the Chat Service.
    • The Chat Service forwards messages to the Translation Service.
    • Translated messages are delivered to the intended recipients.

  3. User and Group Management:

    • Users create or join groups via the Web Service.
    • Group membership details are stored in the Firestore database.
    • The Web Service communicates with the User Mapping Service to track user sessions.

  4. Translation:

    • Messages are sent to the Translation Service.
    • The service uses Google Cloud Translation API to translate messages.
    • Translated messages are returned to the Chat Service for delivery.

  5. Subscription Management:

    • Users manage their subscription plans via the Web Service.
    • Subscription details are handled by the Subscription Management Service using Stripe API.
    • User privileges are updated based on their subscription status.

Technology Stack

  • Frontend: React.js, Next.js, TypeScript, Framer Motion.
  • Backend: Node.js, Express.js.
  • Database: Firebase Firestore, Firebase Realtime Database.
  • Real-Time Communication: WebSocket.
  • Translation: Google Cloud Translation API, AutoML.
  • Subscription Management: Stripe API.
  • Deployment: Docker, Vercel.
Data ModelsAccurate Translation