Real-Time Chat Application: Building a WhatsApp-Style "Who's Online" Feature with Advanced Docker Implementation

Author: Vinayak Uttam Killedar
Date: October 30, 2025
Course: Cloud Computing
Project: Real-Time Chat Application with Docker
PROJECT OVERVIEW

This project demonstrates the development and deployment of a real-time chat application similar to WhatsApp's "Who's Online" feature using Docker containerization. The application enables multiple users to communicate in real-time, track online presence, view typing indicators, and access message history. The entire stack is containerized using Docker with advanced features including multi-stage builds, health checks, named volumes, custom networks, and Redis for session management.


Objective Part 1 — Local Development & Basic Functionality

  • Design and develop a real-time chat backend using Node.js, Express, and Socket.IO

  • Build a React-based frontend for chat interface and user interactions

  • Implement basic “Who’s Online” tracking and message broadcast functionality

  • Test the entire app on localhost ensuring real-time communication between multiple browser clients

  • Maintain dependencies with a package.json file and document setup in README.md


Objective Part 2 — Containerization with Docker

  • Create individual Dockerfiles for backend, frontend, and Redis services

  • Implement multi-stage Docker builds for efficient image creation

  • Set up Docker Compose for orchestrating multiple containers

  • Establish custom Docker networks for inter-container communication

  • Configure environment variables and volume mounts for persistent data

  • Validate real-time chat performance within containerized environments

Objective Part 3 — Advanced Deployment & Cloud Integration

  • Implement Nginx reverse proxy for routing and load balancing

  • Add Docker health checks and custom named volumes for better fault tolerance

  • Push finalized images to Docker Hub for global accessibility

  • Provision an AWS EC2 instance (Ubuntu 22.04 LTS) and install Docker & Docker Compose

  • Pull and run the multi-container setup using docker-compose up -d

  • Verify live application access using the EC2 public IP mapped to port 80

  • Enable secure remote connections (SSH) and configure AWS Security Groups

Name of Containers Involved and Download Links :-


Container NameDownload LinkPurpose
node:18-alpinehttps://hub.docker.com/_/nodeBase image for backend chat server
redis:7.4-alpinehttps://hub.docker.com/_/redisIn-memory data store for sessions and presence tracking
nginx:alpinehttps://hub.docker.com/_/nginxReverse proxy and load balancer
vinay/chat-backend:v1(Example: https://hub.docker.com/r/vinay/chat-backend)Custom Node.js chat backend image
vinay/chat-frontend:v1(Example: https://hub.docker.com/r/vinay/chat-frontend)Custom React frontend image
Ubuntu 22.04 LTS (EC2 AMI)AWS make this into proper table so that i can post it on MarketplaceCloud host for container deployment


Other Software Involved Along With Purpose:-


SoftwarePurpose
Node.js / Express.jsBackend REST API and Socket.IO server
React.jsDynamic front-end UI
Socket.IOReal-time event-based communication
RedisPresence tracking and message caching
NginxReverse proxy and static file serving
Docker & Docker ComposeContainer management and orchestration
AWS EC2 (Ubuntu 22.04)Cloud hosting of production containers
VS Code / PowerShellDevelopment and deployment tools
SSH (.pem key)Secure access to cloud servers
Docker HubPublic registry for image sharing

Overall Architecture of All Three DAs:-

Here’s the text and layout that will appear visually in the diagram:



Line Diagram: “Real-Time Chat App Architecture (Who’s Online)”

Inputs:

  • User connections & chat messages (users)

  • Source code & Dockerfiles (developer)

  • Docker images (container registry)

Outputs:

  • Live chat interface in browser (user)

  • Deployed multi-container setup (cloud)

  • Public IP access to chat app (EC2)


Architecture Flow:

1️⃣ Local Development (Node.js + React + Redis)
→ Input: Local codebase, dependencies, environment variables
→ Output: Working chat app (real-time “Who’s Online” tested locally)

2️⃣ Docker Containerization (Multi-Container Setup)
→ Input: Backend, Frontend, Redis Dockerfiles
→ Output: Custom Docker images pushed to Docker Hub
→ Tools: Multi-stage builds, Docker Compose, custom network

3️⃣ AWS Cloud Deployment (EC2 + Nginx)
→ Input: Pulled Docker images from Docker Hub
→ Output: Running containers on EC2 (via docker-compose up -d)
→ Access: Public IP on port 80 (via Nginx reverse proxy)

End Result:
Accessible real-time chat web app with global user reach & live online status tracking.


Two-Page Description About the Architecture

Page 1: Overview & Local Development

The Real-Time Chat Application (“Who’s Online”) project showcases a complete, cloud-native workflow integrating local development, Docker containerization, and AWS deployment. The system is designed to handle real-time communication between multiple users with instant updates, online presence indicators, and message persistence—all in a modular, portable architecture.

Local Development Layer

In the local phase, the backend (Node.js + Express + Socket.IO) manages user sessions and real-time events such as messages, typing notifications, and online status. The frontend, built with React.js, provides a responsive chat interface that updates instantly when a new user joins or sends a message.

Redis is employed as an in-memory data store for presence tracking and caching chat sessions. During development, Docker Compose can optionally be used for simulating containerized microservices locally. Dependencies are tracked through package.json, and real-time performance is tested across multiple browsers on localhost.

Page 2: Containerization & AWS Cloud Deployment

Docker Containerization Layer

Docker provides consistent, reproducible environments for each component of the stack. Three Dockerfiles are maintained:

  • Backend (Node.js) — multi-stage build for small, secure runtime images

  • Frontend (React) — static asset build served through Nginx

  • Redis — lightweight in-memory store via the official redis:alpine image

These are orchestrated using Docker Compose, which defines inter-container networking, environment variables, and volume mounts. Once tested, the finalized images are tagged and pushed to Docker Hub (e.g., vinay/chat-backend:v1).

AWS Cloud Deployment Layer

The final deployment is hosted on an AWS EC2 (Ubuntu 22.04 LTS) instance configured with Docker and Docker Compose. The container images are pulled directly from Docker Hub, and the app stack is brought online via docker-compose up -d. An Nginx reverse proxy manages routing, load balancing, and exposure through port 80.

AWS Security Groups ensure only HTTP (80) and SSH (22) traffic is allowed. The result is a fully accessible, scalable, and secure real-time chat web app available globally via the EC2 public IP.


End-to-End Data Flow

User (browser) → Socket.IO connection to EC2 → Nginx routes to Node.js backend →
Backend updates Redis presence → Broadcasts real-time status to all clients →
Frontend updates chat interface instantly →
User sees “Who’s Online” updates live.



Procedure - Part 1

Steps involved in the process with screenshots (insert your own screenshots for each step)

Step 1
Create a main folder named chat-app



Step 2
Inside chat-app create three subfolders: backend, frontend, and nginx


Step 3
Add files .env, docker-compose.yml, and setup.bat in the main chat-app folder








Step 4
Inside the backend folder, create files: server.js, Dockerfile, package.json, and .dockerignore
Then install dependencies so that a node_modules folder is created





Step 5
Inside the frontend folder, create two subfolders: public and src







Step 6
Add index.html inside the public folder



Step 7
Add App.js, index.js, and CSS files inside the src folder



Step 8
Add Dockerfile, .dockerignore, nginx.conf, and package.json inside the frontend folder

Step 9
Create docker-compose.yml in the root folder to define backend, frontend, and nginx services

Step 10
Create a .env file for environment variables such as API URLs and port numbers

Step 11
Open the terminal inside the main project folder and run:
docker-compose up --build

Step 12
Once the build is complete, open your browser and go to:
http://localhost:3000

Step 13
Verify that your Who-Is-Online app loads correctly and displays the frontend interface






Procedure - Part 2

Docker build and image upload

Step 1
Install Docker Desktop and check that it’s working using:
docker --version

Step 2
Write Dockerfiles for backend and frontend
Use Node.js base image, copy files, install dependencies, expose ports, and start the app

Step 3
Build Docker images:
docker build -t who-is-online-backend ./backend
docker build -t who-is-online-frontend ./frontend

Step 4
Run the containers locally to test:
docker run -p 5000:5000 who-is-online-backend
docker run -p 3000:3000 who-is-online-frontend

Step 5
Login to Docker Hub:
docker login

Step 6
Tag the images for upload:
docker tag who-is-online-backend yourdockerhubid/who-is-online-backend:v1
docker tag who-is-online-frontend yourdockerhubid/who-is-online-frontend:v1

Step 7
Push the images to Docker Hub:
docker push yourdockerhubid/who-is-online-backend:v1
docker push yourdockerhubid/who-is-online-frontend:v1

Step 8
Check your Docker Hub account to confirm both images have been uploaded






Procedure - Part 3

AWS EC2 deployment

Step 1
Launch an AWS EC2 instance using Ubuntu 22.04 LTS (t3.micro type)

Step 2
In the EC2 security group, allow inbound rules for ports 22 (SSH), 80 (HTTP), and 3000 (frontend)

Step 3
Download your .pem key and set permissions using icacls command (Windows)

Step 4
SSH into your EC2 instance:
ssh -i yourkey.pem ubuntu@your-ec2-public-ip

Step 5
Install Docker on EC2:

sudo apt update  
sudo apt install docker.io -y  
sudo systemctl enable docker  
sudo systemctl start docker

Step 6
Pull your images from Docker Hub:

sudo docker pull yourdockerhubid/who-is-online-backend:v1  
sudo docker pull yourdockerhubid/who-is-online-frontend:v1

Step 7
Run your containers:

sudo docker run -d -p 3000:3000 --restart always --name who-online-frontend yourdockerhubid/who-is-online-frontend:v1  
sudo docker run -d -p 5000:5000 --restart always --name who-online-backend yourdockerhubid/who-is-online-backend:v1

Step 8
Copy your EC2 instance’s public IP and open it in a browser:
http://<your-ec2-public-ip>:3000

Step 9
Verify that your Who-Is-Online web app loads successfully and can be accessed from any device























What Modification is Done in the Containers After Downloading

No changes were made to the official node:18-alpine base image.
A custom container asha/who-is-online:v1 was built using the project’s frontend and backend source code.
The Dockerfile defines the working directory, copies app files, installs dependencies with npm install, exposes port 3000, and runs the application using npm start.
On the AWS EC2 instance, the container is launched with the --restart always policy and exposed publicly via port 80, mapping internally to 3000 for web access.

Docker Hub Link of Modified Container

Docker Hub: https://hub.docker.com/r/asha/who-is-online

What are the Outcomes of Your DA?

  • Successfully designed and deployed a real-time “Who-Is-Online” web application.

  • Demonstrated end-to-end DevOps workflow: local development → Docker containerization → AWS deployment.

  • Achieved seamless integration between frontend (React/HTML) and backend (Node.js/Express + Socket.io) for live user tracking.

  • Validated container portability—same image runs identically on any host.

  • Learned practical Docker, AWS EC2, and networking skills for modern cloud apps.

  • Delivered a publicly accessible live service, showing user presence updates in real time.

Conclusion

This Digital Assignment illustrates how a locally developed Node.js application can be containerized and deployed globally using modern DevOps tools.
By leveraging Docker for reproducibility and AWS EC2 for scalable hosting, the project highlights how microservices and containers streamline deployment while maintaining high availability.
The workflow demonstrates how to transform simple code into a production-ready, cloud-hosted, interactive web app—bridging development, infrastructure, and live service delivery.

References and Acknowledgement

  • Docker Hub – official Node.js base image and documentation.

  • AWS Free Tier – EC2 hosting environment and setup guides.

  • Socket.io Documentation – real-time event communication.

  • VIT SCOPE Cloud Computing Course – conceptual framework for cloud deployment.

  • Faculty, friends, and family – for continuous feedback and testing support.



THANK YOU

 

















Comments

Post a Comment