PROTOTYPE OF VIDEO CALLING

CHAT APP WITH CALCULATOR

A report submitted in partial fulfilment of the requirements for

CM1610: Prototype Work, [Link]. (ECM) 6th Semester
By
Prajakta Gorakshnath Shidore (2023UGCM005)

Under the supervision of

Dr. V. K. Dalla

Department of Mechanical Engineering

National Institute of Technology, Jamshedpur
 CERTIFICATE
This is to certify that Prajakta Gorakshnath Shidore, student of
Engineering and Computational Mechanics VI semester, National
Institute of Technology, Jamshedpur, has successfully completed the
prototype work entitled 'Video Calling Chat-App with Calculator' under
the guidance of respected Dr. V. K. Dalla during the period of January
2026 to March 2026. The work completed reflects her sincere effort,
technical understanding, and commitment toward the project objectives.

Dr. V. K. Dalla
Supervisor
 ACKNOWLEDGEMENT
I would like to express my heartfelt gratitude to my project supervisor,
Dr. V. K. Dalla, for his constant support, guidance, and encouragement
throughout the development of this project. His invaluable suggestions
helped me refine the idea and enhance the technical quality of this work.
I would also like to thank the Department of Mechanical Engineering,
National Institute of Technology Jamshedpur, for providing the
resources and academic environment necessary for successful
completion of this project prototype.
Abstract- This project presents the design and development of a comprehensive real-time
communication web application that integrates video calling, instant messaging, and an
embedded scientific calculator within a single unified platform. The system is built using the
MERN stack—MongoDB, [Link], [Link], and [Link]—ensuring modularity, scalability,
and efficient data handling across the client and server layers. [Link] is employed for real-
time, bidirectional communication between users, while WebRTC enables smooth peer-to-peer
video and audio streaming. Cloudinary is integrated for handling multimedia uploads, providing
secure, fast, and reliable access to shared content. The application’s front-end, developed with
[Link] and styled using Tailwind CSS, ensures a clean, intuitive, and fully responsive user
interface that adapts seamlessly to different screen sizes and devices. To guarantee user privacy
and data security, JSON Web Tokens (JWT) are utilized for authentication and session
management.
The integrated calculator feature distinguishes this project from conventional communication
systems by introducing a productivity-oriented tool that allows users to perform calculations
without leaving the chat or video call interface. This design caters to the needs of modern
users—students, professionals, and remote collaborators—who often multitask and require
instant computational support during discussions. The calculator supports both basic arithmetic
and advanced scientific functions, enhancing the platform’s versatility and practicality.
Ultimately, this project demonstrates how communication and computation can be seamlessly
merged into a single web-based environment, thereby promoting productivity, convenience, and
user engagement. It serves as a testament to the power of full-stack development and real-time
synchronization frameworks in delivering innovative, user-centric digital solutions.
I. INTRODUCTION

In today’s interconnected digital world, communication technology plays a vital role in bringing
people together across the globe. With the advent of high-speed internet and advanced
computing devices, real-time communication has become an essential part of daily life. Video
conferencing, chat applications, and collaborative tools have revolutionized the way individuals
and organizations interact. However, despite these advancements, most applications are still
limited to communication functions only, lacking built-in tools for quick tasks such as
calculations or data sharing.
The Video Calling Chat App with Calculator aims to fill this gap by integrating communication
and productivity tools into a single platform. It allows users to chat, make video calls, and
perform quick calculations seamlessly without switching between multiple applications. This
feature-rich web application is designed using the MERN stack—MongoDB, [Link],
[Link], and [Link]—offering a robust and scalable architecture. Real-time functionalities are
powered by [Link] and WebRTC, ensuring instant communication with minimal delay.
Moreover, this project emphasizes user experience and interface design by incorporating
Tailwind CSS for responsive layouts and Cloudinary for efficient media management. Security is
maintained through JWT-based authentication, ensuring safe user data handling. The integrated
calculator serves as a productivity booster for scenarios such as study discussions, collaborative
planning, and remote meetings where quick computations are needed on the fly.
The application not only demonstrates technical proficiency in full-stack web development but
also showcases innovation by combining essential communication and computation
functionalities in one environment. This integration leads to enhanced user convenience, reduced
task-switching time, and improved digital collaboration efficiency.
II. OBJECTIVES
The primary objective of this project is to develop a web-based communication system that
combines the functionalities of a video calling and chat application with an integrated calculator.
The major goals are as follows:

1. To design and implement a real-time chat and video calling platform using the MERN
stack.
2. To integrate a scientific calculator to facilitate quick computations within the same
environment.
3. To ensure secure user authentication and session management using JWT.
4. To implement real-time data transfer using [Link] and WebRTC.
5. To provide a responsive, user-friendly, and cross-platform interface using Tailwind CSS.
6. To manage data, images, and video efficiently using MongoDB Atlas and Cloudinary.
7. To ensure scalability and performance optimization for multi-user communication.

III. LITERATURE REVIEW

Real-time communication systems have experienced remarkable evolution in recent years due to
the increasing demand for instantaneous connectivity, collaboration, and data sharing across
digital platforms. Applications such as Zoom, Google Meet, Microsoft Teams, and WhatsApp
have transformed the landscape of digital communication by enabling seamless interaction
through video conferencing, voice calls, and instant messaging. These platforms have proven
invaluable in professional, educational, and personal settings, particularly during the global shift
toward remote collaboration. Despite their widespread adoption, most of these systems remain
limited in scope when it comes to integrating computational and productivity tools within the
same user interface. This limitation often forces users to switch between multiple applications—
such as a chat platform and a separate calculator—resulting in reduced workflow efficiency and
productivity interruptions.
The integration of communication tools with computational modules is a relatively unexplored
domain within web application development. Traditional communication applications prioritize
speed, security, and clarity of transmission but overlook features that could enhance real-time
collaboration, such as data analysis or numerical computation during active discussions. By
embedding a scientific calculator directly into the chat and video interface, this project addresses
an existing gap in digital communication systems. It enables users to perform calculations
instantly during ongoing interactions, thereby improving decision-making and discussion flow in
collaborative environments such as virtual classrooms, remote business meetings, and online
study groups.

From a technical perspective, the foundations of modern communication systems rely heavily on
Web Real-Time Communication (WebRTC) and [Link]. WebRTC provides an open-source
framework that facilitates peer-to-peer data sharing, including audio and video transmission,
without requiring intermediate servers. This reduces latency and enhances communication
quality. In parallel, [Link] offers event-driven, bidirectional communication between the
client and server, making it ideal for real-time chat applications where instantaneous message
delivery is essential. The combination of these technologies ensures low-latency data transfer,
synchronization across multiple devices, and a consistent user experience under varying network
conditions.

Numerous research studies and open-source implementations have demonstrated the

effectiveness of combining WebRTC and [Link] with full-stack web development
frameworks like [Link], [Link], and [Link]. These technologies collectively enable
efficient client-server interaction, modularity, and scalability—features that are crucial for multi-
user communication environments. [Link] enhances the user interface by enabling component-
based design and real-time rendering, while [Link], as a non-blocking, event-driven backend
runtime, ensures high concurrency and responsiveness.
Another critical aspect of modern communication systems is data security. The adoption of
JSON Web Tokens (JWT) for authentication provides a lightweight and secure mechanism for
session management and user validation. JWT eliminates the need for server-side session storage
and allows stateless communication, which aligns perfectly with the principles of distributed web
systems. Simultaneously, managing multimedia content through Cloudinary offers a robust
cloud-based solution for image and video storage, compression, and delivery, ensuring that the
application remains efficient and scalable even as data volume grows.

Academic and industrial literature indicates a clear movement toward integrated platforms that
merge communication with additional productivity tools. While platforms like Slack and
Microsoft Teams have incorporated some integrations such as reminders or simple
computational bots, these features typically rely on external APIs rather than native
functionalities. The approach proposed in this project—embedding a fully functional calculator
within a communication interface—introduces a unique edge that merges usability, functionality,
and performance within a single application.

Therefore, this study builds upon existing research in web-based real-time communication and
expands its boundaries by incorporating computational capabilities directly into the system’s
architecture. The literature suggests that such an approach not only improves user productivity
but also promotes innovation in human-computer interaction by reducing cognitive load and
task-switching overhead. This project contributes to the growing body of research on integrated
web solutions, setting a foundation for future applications that combine collaboration,
communication, and computation into one cohesive platform.
IV. SYSTEM ARCHITECTURE AND DESIGN
The Video Calling Chat App with Calculator follows a modular client-server architecture. The
frontend, developed using [Link], manages user interfaces, state transitions, and real-time
communication events through [Link]. The backend, powered by [Link] and [Link],
handles user authentication, routing, and socket connections. MongoDB Atlas serves as the cloud
database for storing user information, chat history, and media URLs.
Figure 1: System Architecture Diagram (Placeholder)

The system components include:

•User Interface Layer: Built using [Link] and Tailwind CSS for responsiveness.

•Application Layer: Handles authentication, API requests, and socket management.

•Database Layer: Manages user data, messages, and session tokens.

•Media Layer: Integrates Cloudinary for storing and retrieving multimedia content.

•Real-Time Communication Layer: Implements WebRTC and [Link] for messaging.

V. TECHNOLOGY USED

The proposed system, Video Calling Chat App with Calculator, is developed using a
combination of modern, scalable, and open-source web technologies. The MERN stack
(MongoDB, [Link], [Link], [Link]) forms the core architecture, supported by several
complementary libraries and services to enable real-time communication, secure authentication,
and an interactive user interface. Each component of this technology stack plays a specific and
essential role in ensuring system performance, modularity, and user experience.

1. [Link] (Frontend Framework)

[Link] is a JavaScript library developed by Meta (Facebook) for building highly interactive and
dynamic user interfaces. It follows a component-based architecture, allowing developers to break
down the UI into reusable elements such as buttons, chat containers, or [Link] uses a
Virtual DOM (Document Object Model) that updates only the parts of a webpage that change,
improving rendering efficiency and reducing computational load. This makes it ideal for
applications that require real-time data updates, such as chat or video conferencing [Link]
use of React Hooks and Context API further simplifies state management, enabling seamless
communication between components. In this project, React handles front-end routing, user
interaction, and real-time UI rendering for chat messages, video streams, and calculator inputs.

2. [Link] and [Link] (Backend Development)

[Link] serves as the runtime environment for executing JavaScript code on the server side. It
uses an event-driven, non-blocking I/O model, which allows for efficient handling of concurrent
user requests. This is particularly advantageous for real-time applications that involve multiple
simultaneous [Link], a minimal and flexible [Link] framework, is used to build
the RESTful APIs that facilitate communication between the frontend and the backend. It
handles routing, middleware integration, and error management. Together, [Link] and
[Link] enable rapid server response, scalability, and maintainability of the application.
3. MongoDB Atlas (Database Service)

MongoDB Atlas is a cloud-based NoSQL database that stores information in JSON-like

documents rather than traditional table structures. It provides flexibility in handling unstructured
or semi-structured data such as chat messages, user profiles, and session logs. The choice of
MongoDB Atlas ensures high scalability, automatic backups, and real-time synchronisation with
the application. It supports indexing, aggregation, and query optimisation for efficient data
retrieval. Moreover, its cloud infrastructure allows seamless integration with [Link] through the
Mongoose ODM (Object Data Modelling) library, simplifying schema creation and validation.

4. [Link] (Real-Time Communication Engine)

[Link] is a JavaScript library for real-time, bidirectional event-based communication between

web clients and servers. It establishes a persistent WebSocket connection, ensuring instant
message delivery without the need for frequent HTTP requests.

In this project, [Link] is responsible for real-time chat messaging, user typing status updates,
and call signalling during video communication. It automatically handles reconnections, event
broadcasting, and latency management. This ensures smooth and uninterrupted interaction even
in fluctuating network conditions.

5. WebRTC (Web Real-Time Communication API)

WebRTC is an open-source protocol that enables peer-to-peer (P2P) audio, video, and data
sharing directly between users’ browsers. Unlike traditional systems that route data through
central servers, WebRTC minimizes latency by connecting peers directly through STUN/TURN
servers for network traversal. In this application, WebRTC facilitates video calling functionality,
managing session negotiation, stream capture, and rendering. It also handles audio and video
codecs to ensure efficient bandwidth usage and high-quality transmission. This makes it an
essential component for the project’s real-time communication objectives

6. Tailwind CSS (Frontend Styling Framework)

Tailwind CSS is a utility-first CSS framework that simplifies the process of designing modern
and responsive user interfaces. Instead of writing long CSS files, developers can apply pre-
defined utility classes directly in HTML or JSX.

This project uses Tailwind to ensure that the interface adapts seamlessly to various devices
(desktop, tablet, and mobile). It helps maintain design consistency while allowing for fast
prototyping and customisation. Components such as the chat window, calculator panel, and
video interface benefit from Tailwind’s flexbox and grid utilities, resulting in a clean and
minimalistic design.

7. Cloudinary (Media Management Platform)

Cloudinary provides a cloud-based solution for uploading, storing, and optimising multimedia
content. It supports automatic image and video transformations, adaptive streaming, and content
delivery via a global CDN (Content Delivery Network).

In this project, Cloudinary handles the upload and retrieval of profile images, chat attachments,
and screenshots. It ensures optimised delivery through compression and caching, significantly
improving application performance and reducing server load.

8. JSON Web Token (JWT) – Authentication and Security

JWT is a compact and self-contained method for securely transmitting information between
parties as a JSON object. It is widely used for authentication and authorization in web
applications. In this project, JWT ensures that only verified users can access chat rooms or
initiate video calls. The token, once issued after login, is attached to each request header and
verified by the backend. This eliminates the need for server-side session storage, ensuring a
stateless and scalable authentication system.

JWT also helps protect against common vulnerabilities such as unauthorized access and token
forgery.
9. Axios (HTTP Client Library)

Axios is a promise-based HTTP client for making asynchronous requests from the frontend to
the backend. It simplifies API calls for fetching, posting, and updating data and handles
responses and errors efficiently. In this project, Axios is primarily used for communicating with
the [Link] backend APIs, handling user authentication requests, chat message retrieval, and
data synchronisation. Its built-in features for interceptors, error handling, and JSON
transformation make it an optimal choice for seamless data flow between client and server.

10. [Link] (Build Tool)

[Link] is a next-generation frontend build tool that offers lightning-fast development and hot
module replacement (HMR). It is used in this project to bundle and serve the React application
efficiently. Vite significantly reduces startup time and improves developer productivity by
optimising dependency pre-bundling using esbuild. It ensures rapid rebuilds during code
changes, which enhances the overall development experience.

VI. IMPLEMENTATION DETAILS

The application is divided into multiple modules, each responsible for a specific functionality:

1. Authentication Module – Handles registration, login, token-based authentication using

JWT.
2. Chat Module – Manages one-to-one chat using [Link] with real-time updates.
3. Video Calling Module – Utilizes WebRTC for peer-to-peer media streaming.
4. Calculator Module – Provides arithmetic and scientific computation.
5. UI Module – Uses Tailwind CSS for aesthetic design and component responsiveness.
 Figure 2: Use Case Diagram

The Use Case Diagram represents the functional behaviour of the Video Calling Chat App with
Calculator, showcasing how different user actions interact with the system to achieve specific
goals. It visually maps out the communication between the actor (User) and the system through
various use cases that define the application’s functionality. The primary actor in this system is
the User, who interacts with the application to perform activities such as registration,
authentication, messaging, video calling, performing calculations, media sharing, and profile
management. The system boundary encapsulates all internal processes, ensuring that the user
only interacts with exposed interfaces while the underlying logic and data handling remain
abstracted within the [Link] Use Case Diagram effectively captures the user-system
interaction and ensures that all functional requirements are mapped before implementation. It
helps in validating the system design and confirming that the features align with user
expectations. From a software engineering perspective, this diagram serves as a bridge between
requirement analysis and system design, ensuring clarity for developers, testers, and
[Link], by modeling the system behavior at an abstract level, the diagram
enhances traceability throughout the development cycle. Each use case directly corresponds to a
feature in the codebase, ensuring consistency between design documents and implementation.
The visual simplicity of the diagram also aids in identifying dependencies between modules.
Figure 3: Flowchart of Application Logic
VII. RESULTS AND DISCUSSION

The developed system successfully integrates chatting, video calling, and calculator features
within a unified web platform. Testing was conducted on multiple devices and browsers to
ensure compatibility and responsiveness. The results indicate stable real-time
performance with minimal latency having better user experience and live status updates.
Evaluation:
•Real-time chat updates under 200ms delay.
•Stable video communication between peers using WebRTC ICE servers.
•Smooth calculator operation during video sessions.
•Scalable user management with secure authentication.
The UI adapts effectively across various screen sizes, confirming full responsiveness. Overall,
the system demonstrates efficient merge of communication and computational features.

Figure 4: Chat Interface Screenshot

Figure 5: Video Call Interface Screenshot

 Figure 6: Integrated Calculator Interface

VIII. CHALLENGES AND SOLUTIONS

Throughout the development phase, several technical and integration challenges were
encountered:
[Link] Lag during Real-Time Events – Optimized by [Link] event listeners
efficiently.
[Link]-Browser WebRTC Compatibility – Achieved by configuring STUN/TURN servers and
ICE candidate management.

[Link] UI Integration – Adjusted CSS grid layout for seamless embedding within interface.

[Link] Expiration Issues – Implemented JWT refresh token mechanism to maintain user
sessions.
[Link] Challenges – Resolved through .env configuration in Vite and secure
management.
These challenges strengthened the technical robustness of the system and improved overall
reliability.
[Link]
The project can be expanded in several ways to enhance user experience and functionality:

•Introduction of group video calls and conference features.

•Integration of AI-powered chatbots for automated responses.

•Addition of multilingual translation support using external APIs.

•Implementation of end-to-end encryption for video calls.

•Development of a mobile app version using React Native.

•Advanced analytics dashboard for user activity and system performance.• Integration of cloud-
based storage for file sharing and collaborative document editing.

• Incorporation of augmented reality (AR) filters and background effects to improve visual
interaction during video calls.

X. CONCLUSION

The Video Calling Chat App with Calculator successfully demonstrates how real-time
communication and productivity tools can coexist on a single web platform. By leveraging the
MERN stack and integrating real-time technologies like WebRTC and [Link], the system
achieves secure, efficient, and user-friendly communication. The inclusion of the calculator
module enhances multitasking capabilities and provides a unique advantage over conventional
chat or video calling applications.

This project showcases practical implementation of full-stack development principles and real-
time system design, providing a strong foundation for future enhancements and advanced
features.
REFERENCES
[1]MERN Stack Documentation, MongoDB Inc., 2024.
[2][Link] Official Docs – Real-time Engine, 2024.
[3]WebRTC API Reference, Mozilla Developer Network (MDN), 2024.
[4]Tailwind CSS Framework Documentation, 2024.
[5]JSON Web Token (JWT) Guide, Auth0, 2024.
[6]Cloudinary API and Media Optimization Tools, 2024.
[7]Axios HTTP Client for JavaScript – GitHub Repository, 2024.
[8][Link] Official Documentation, Meta Platforms, 2024.
[9][Link] Official Docs, Node Foundation, 2024.
[10][Link] Framework Documentation, 2024.