CIE-3
3.1 INTRODUCTION AND OBJECTIVE OF THE PROJECT
ChatBox App is an innovative group chat application built on the MERN stack - MongoDB,
Express.js, React.js, and Node.js, offering a seamless platform for real-time communication
in group settings. With a focus on simplicity and functionality, our application provides a
user-friendly interface for effortless group chatting, while also offering robust features for
administrators to manage chat rooms effectively.
Objectives:
ChatBox App: The primary objective of the ChatBox application is to provide a seamless
platform for real-time group communication. This includes enabling users to engage in dynamic
conversations, exchange messages effortlessly within designated chat rooms. The application
aims to foster collaboration, connection, and community engagement by offering a user-friendly
interface and robust features for managing group conversations effectively.
3.2 TOOLS/PLATFORMFORM, HARDWARE, AND SOFTWARE
SPECIFICATION
Software Requirements
Operating System Microsoft Windows 11
Higher Frontend HTML, React, Material UI
Server-side Scripting Nodejs
Platform React
Webserver NodeJS, WebServer, Express, Socket.io
IDE interface used VS Code
Hardware Requirements
Processor Intel(R) Core (TM) i5-8350U CPU @ 1.70GHz 1.90 GHz
RAM 8 GB
Solid State Drive 256 GB space
3.3 Report on: On Job Training-2(OJT2)
User Authentication: The ChatBox application features a robust user authentication system,
requiring users to register and log in securely before accessing chat rooms. OTP authentication
adds an extra layer of security, ensuring secure access to user accounts.
Room Access: Upon successful login, users can access designated chat rooms based on their
interests or preferences. The application allows for seamless room access, enabling users to join
ongoing conversations effortlessly.
Message Exchange: Users can exchange messages with other participants within chat rooms,
facilitating real-time communication and interaction. The application supports the sending and
receiving of text messages, emojis, and media files.
ChatBox Application
3.3.1 Technology Stack
This application was built on MERN stack, using react as frontend and express and socket.io as
backend and MongoDB to store credentials data and student data are store in MongoDB.
Front-end:
React: React is a JavaScript Library used in web development to build interactive
elements on website user interface (UI) components. Its component-based
architecture and virtual DOM make it easy to build reusable UI elements and manage
complex user interface. It is used in both front-end and backend, this means it can we
used to develop full-stack web application.
CSS: CSS is used to style and layout pages for example, to alter the font, color, size,
and spacing of your content, solit it into multiple columns or add animations and
other decorative features.
Material UI: Material-UI is a set of react components that follows Google’s material
design guidelines, providing developers with pre-designed UI elements to create
modern and visually appealing web applications. Overall, Material-UI is popular
choice for developers looking to create modern, responsive, and visually appealing
web applications with React.
Back-end:
Express: Express.js is a minimalist web application framework for Node.js. Express.js
is utilized as the backend web application framework for handling HTTP requests and
defining API routes. It simplifies the process of building scalable and maintainable
web applications by providing a minimalist and flexible approach to server-side
development.
API: The frontend communicates with backend through API. In the case of web and
mobile frontends, the API is often based on Http request/response. The API is
sometimes designed using the “backend for fronted” pattern, that serves responses to
ease the processing on frontend side.
Node.js: Node.js forms the backbone of the project's server-side logic, allowing for the
execution of JavaScript code outside the browser. It provides a non-blocking, event-
driven architecture that enables the creation of high-performance and scalable web
applications.
Socket.io: Socket.IO is a versatile tool for building real-time applications, offering reliability,
scalability, and simplicity for developers looking to enhance their projects with seamless
communication capabilities.
Database:
MongoDB: MongoDB serves as the project's database management system, providing
a flexible and scalable solution for storing and managing data. Its NoSQL architecture
allows for the storage of diverse data types and facilitates efficient querying and
retrieval of information.
3.3.2 Testing The application:
Run the application using the npm start command.
We should be able to use the application.
User Registration:
User can create new accounts by providing necessary information such as username,
email and password.
After Registration it will redirect to welcome page.
ChatBox Registration Page
R
Welcome page
User Loging in the ChatBox:
User can login to the room safely and experience the safe chatting
User Login page
Participants bar:
Here User Can See the Users:
Participants bar
Chatting with User in the Room:
Users can send the message to the Room. send message will show in right side
Users can see message from that Room. received message will show in left side white
User can leave the Chat Room by clicking logout button
ChatBox Chatting page
Use Case Diagram
Use Case Diagram for ChatBox Application
