End-to-End Encrypted Messaging App: High-Level Design and Architecture

A brief introduction to myself: I have been a freelance web developer for approximately 1.5 years. I have never considered writing a HLD or a LLD. Instead, I have focused on developing applications based on the specific requirements of my clients. As I aspire to transition into a corporate environment, I am eager to enhance my skills and acquire new knowledge.

So, here is my attempt at writing a HLD

Client Requirements : A E2EE Web Based Chat App. Scalable up to 1000 Concurrent users at any given time.

System Architecture

The app majorly consists of a Frontend(react), Backend(Node), Database(Redis and SQL).

1. FrontEnd:

   • This Manages what a user sees
   • Handling User Login, User Register.
   • Handling Sending and Receiving messages.
   • Responsive Design.

2. BackEnd:

   • This Manages what and how the messages and login is done
   • Responsible for managing Login/ Register
   • Responsible for Storing Messages and User Data
   • Handles Page Routes

3. DataBase:

   • This Stores the Encrypted Messages and User Data/Login Information

4. WebSocket Server:

   • A dedicated service for real-time bidirectional communication between users.

5. Caching Layer (Optional):

   • Use Redis for temporarily caching active users, message queues, or online statuses to improve performance.

High Level Flow

1. User logs in through the frontend → Backend authenticates the user.
2. Frontend establishes a WebSocket connection to the backend for real-time communication.
3. When a user sends a message:
   • The WebSocket server receives it.
   • It processes and routes the message to the intended recipient(s).
   • The backend stores the message in the database.
4. The recipient receives the message in real-time through the WebSocket connection.

Architecture Diagram

Data Flow

1. Register Flow

   • User Creates a Account
   • A Public and a Private Hash is generated Public is stored in Data bases along with user Information.
   • Upon Success:
     • A Success Message
     • Redirect to Login

2. Login Flow

   • User is prompted to Login with email and password.
   • The backed authenticates data upon enter.
   • Upon Success:
     • User to redirected to chats
   • Upon Reject:
     • A popup is initiated notifying what is wrong.

3. Room Message Flow

   • User joins a room:
     • Frontend sends the room ID to backend.
     • joinRoom event is edited to the specific room.
   • Messages in the room :
     • Global Room messages are not Encrypted as of now they are just shared and stored In data base.
     • Delivered to all participants in the room in real-time.

4. User - User Message Flow

   1. Front End :
      • The frontend encrypts the message using the recipient’s public key.
      • The Encrypted Message is shared via socket to backend.
   2. Back End :
      • Stores the Message in PSQL
      • Routes the message to the user using the userID
   3. Recipients front end decrypts the message

Detailed Example Flows

Real-Time Direct Message Flow

• Frontend:
  • User sends a message to another user via WebSocket.
  • Message is encrypted with the recipient's public key before transmission.
• Backend:
  • The WebSocket server receives the encrypted message.
  • The message is stored in PostgreSQL with metadata (e.g., sender, recipient, timestamp).
  • The backend routes the encrypted message to the recipient's WebSocket connection.
• Recipients Frontend :
  • The encrypted message is received via WebSocket.
  • The private key is used to decrypt the message.
  • The plaintext message is displayed in the chat.

Tech Stack

1. Frontend:

   • React: To build the user interface (chat windows, buttons, input boxes).
   • Context API or Redux: To manage the app state (e.g., current user, active chats).
   • GSAP: For animations (e.g., chat bubbles sliding in smoothly).
   • WebSocket Client: To establish a real-time connection with the backend.

2. Backend:Node.js + Express.js:

   • To handle REST APIs (for login, registration, fetching messages).
   • JWT (JSON Web Tokens): To secure communication with token-based authentication.
   • Passport.js: To implement authentication strategies (e.g., Google or Facebook login).
   • Socket.IO: To handle WebSocket connections for real-time messaging.

3. Database :

   • PostgreSQL: To store persistent data like user profiles, messages, and chat room details.
   • Redis (Optional): To cache real-time data (e.g., active user statuses, recently sent messages).

4. Hosting and Deployment:

   • AWS (EC2, S3, RDS): To host the backend, store static files, and manage databases.
   • Nginx or AWS ELB (Load Balancer): To distribute traffic across backend servers.

Non-Functional Requirements (NFRs)

• Performance:
  • Target real-time message latency under 100ms.
  • Ensure consistent read/write operations for 1,000+ users.
• Scalability:
  • Backend should handle a growing number of users by scaling horizontally (e.g., use Redis and AWS ELB).
  • Support 10,000 active WebSocket connections per server.
• Availability:
  • Ensure 99.9% uptime with backups and disaster recovery.
• Security:
  • Use E2EE for private messaging.
  • Employ HTTPS for all data in transit.
  • Ensure data at rest is encrypted in PostgresSQL.

Wrapping Up

Building a scalable and secure End-to-End Encrypted Messaging Application requires a thoughtful balance between performance, usability, and security. Through this High-Level Design, I aimed to demonstrate the architecture and flow of a modern messaging system capable of handling real-time communication while ensuring user privacy.

This project not only showcases key technical skills like React for frontend, Node.js for backend, and PostgreSQL/Redis for data management, but also highlights the importance of designing for scalability and reliability.

If you’re a developer or enthusiast interested in creating robust systems or exploring more about real-time communication architectures, I hope this article provided valuable insights.

I’d love to hear your thoughts or feedback! Feel free to connect, share your ideas, or ask questions in the comments section. Let’s keep learning and building!

Stay Tuned for my LLD as well !

Every project is a step closer to mastering the craft of software development. This one taught me the importance of balancing functionality with scalability, and I look forward to building even more complex systems in the future!