Chat App
Real-time communication systems are deceptively complex. What starts as a simple “send and receive messages” problem quickly expands into challenges around scalability, data consistency, authentication, latency, and fault tolerance. In this article, we will walk through how I designed and built a production-ready, real-time chat application, covering architectural decisions, backend and frontend design, and the technology stack used.
Project Description
This project implements a one-on-one chat system where each conversation is uniquely identified using a hash-based chat room identifier. Message routing is handled by a dedicated router that leverages the chat hash and authenticated user context to ensure accurate and secure message delivery. The backend is implemented in Golang to take advantage of its concurrency model and low-latency networking capabilities. PostgreSQL is used as the primary datastore to ensure reliable message persistence and fast retrieval through optimized schema design.
Architecture
The system follows a client-server architecture where clients communicate with the backend via REST APIs for authentication and WebSockets for real-time messaging. Each chat session is mapped to a unique hash that acts as a logical room identifier.
Message Flow
- User authenticates and receives a JWT token
- Client establishes a WebSocket connection
- Messages are routed using the chat hash and user identity
- Messages are delivered in real time and persisted to PostgreSQL
Data Storage
PostgreSQL serves as the source of truth for users, chat rooms, and messages, with indexing and query optimizations applied to improve read and write efficiency.
Problem Statement
The objective was to design and build a two-user real-time chat system that delivers low-latency messaging while maintaining strong guarantees around security, scalability, and reliability. The system needed to support secure authentication and session management, reliably persist chat history, scale beyond a single server instance, and remain easy to monitor and maintain in production environments.
High-Level Architecture
The system is designed using a client–server real-time architecture that cleanly separates responsibilities between the frontend, backend, and data stores to ensure scalability, performance, and maintainability.
High-Level Architecture
At a high level, the system follows a client–server real-time architecture designed to support low-latency communication and horizontal scalability.
Clients (Web Browsers)
⬇
API & WebSocket Gateway (Go Backend)
⬇
Data Stores (PostgreSQL + Redis)
The backend serves a dual role within the system:
- Acts as a REST API server for authentication, authorization, and metadata management
- Functions as a WebSocket server to enable persistent, bi-directional communication for real-time message exchange
This architectural separation ensures clear boundaries between concerns, allowing the system to scale efficiently while remaining easy to extend and maintain.
Frontend Design
The frontend is built with a mobile-first philosophy to deliver a consistent, responsive, and performant user experience across devices.
Responsive UI
The frontend was designed using a mobile-first approach, ensuring a seamless experience across different screen sizes and devices.
Key considerations included:
- Clean and consistent layouts across mobile, tablet, and desktop views
- Efficient rendering of long message lists to maintain performance
- Smooth scrolling and responsive interactions for real-time messaging
Bootstrap was used to accelerate layout consistency and responsive styling, while React handled component-based rendering, state management, and efficient UI updates.
Connection Health Monitoring
A lightweight connection health monitoring mechanism was implemented to ensure reliability and graceful handling of unstable network conditions.
Connection Health Monitoring
To ensure reliable communication and improve fault tolerance, a polling-based ping–pong mechanism was implemented between the client and backend services.
The mechanism works as follows:
- Clients periodically send ping requests to the backend
- The server responds with the current connection and service status
- The UI updates in real time to reflect degraded or lost connections gracefully
This approach improves application resilience in unstable network environments and enhances the overall user experience by providing clear connection feedback.
Scalability & Maintainability
The system was designed with long-term scalability and maintainability as core priorities, enabling smooth feature expansion and horizontal growth.
Scalability & Maintainability
Several architectural and implementation decisions were made with future growth and operational simplicity in mind:
- Stateless authentication using JWT, enabling horizontal scaling without session affinity
- Clear separation between REST API and WebSocket logic to reduce coupling
- Optimized database schema and queries to support read/write-heavy workloads
- Redis-backed ephemeral state for fast access to transient data such as presence and session metadata
- A modular backend structure in Go, improving code maintainability and extensibility
These design choices make it straightforward to:
- Introduce additional chat features such as typing indicators and read receipts
- Scale the system horizontally behind a load balancer
- Extend the platform to support group chats, notifications, or additional real-time services
Explore More
Built a smart search system that retrieves and ranks data based on user search queries, incorporating vector-based matching, spelling correction, and optimized query execution to deliver fast and relevant results. The system is powered by Typesense for high-performance indexing, storage, and retrieval, achieving millisecond-level query latency. Designed and implemented a fully featured backend with complete API support, enabling seamless data ingestion, search, and response delivery in structured JSON format.
Patching and Unpatching are a set of tools that are used for image processing. The patching tool is used to cut small square sections of the input image known as patches. The unpatching tool takes those patches and combines them back together to make the final image.
Patching and Unpatching are a set of tools that are used for image processing. The patching tool is used to cut small square sections of the input image known as patches. The unpatching tool takes those patches and combines them back together to make the final image.
The Tiny-URL Generator is a URL shortening service developed as a web application using the Flask framework. This project aims to simplify the process of sharing long URLs by generating shorter, more manageable links. The backend leverages Redis for efficient data storage and retrieval, ensuring quick access and collision-free management of shortened URLs.
Patching and Unpatching are a set of tools that are used for image processing. The patching tool is used to cut small square sections of the input image known as patches. The unpatching tool takes those patches and combines them back together to make the final image.
Static Academic website made to showcase the profile and works, made using HTML, CSS, Media Query (for the responsive optimization for mobile, tablet and different size devices). The website is consist of 8 pages that shows the different aspects from main page to contact page. Google Maps API is used to display the map. CSS flex boxes are also used for more size responsive optmizatrions
Federated Learning is a decentralized learning paradigm where models are trained on various devices, and their parameters are combined to create a global model. Initially introduced by Google in 2017, it allows for effective model training without transferring sensitive data from devices
The neural style transfer is implemented as per paper that came in 2015 title A Neural Algorithm of Artistic Style. The paper talks about combing the two images to create a new style image by using the style and feature transfer technique from both the images and tries to minimize the loss of the generated Gaussian image by using the custom loss function that can be tweaked by using the hyper-parameter alpha and beta. The implementation is done using pytorch
Real-time communication systems are deceptively complex. What starts as a simple “send and receive messages” problem quickly expands into challenges around scalability, data consistency, authentication, latency, and fault tolerance. In this article, we will walk through how I designed and built a production-ready, real-time chat application, covering architectural decisions, backend and frontend design, and the technology stack used.