Department of Computer Engineering

Title: Chatting Application

Submitted in partial fulfillment of the requirements

of the Diploma of
in
COMPUTER ENGINEERING
by

Name Roll. No
Yuvraj Dogra 22203B0009
Payal Gawade 22203B0019
Tejas Sawant 22203B0021
Anushree Chorghe 22203B0026

Under the guidance of

Mrs. Manisha

Department of Computer Engineering

Vidyalankar Polytechnic
Wadala (E), Mumbai -37

(Affiliated to MSBTE)
2024-2025
 Department of Computer Engineering

PART-A (About 2-3 Pages)

Part-A
Format for Micro-Project Proposal
For 5th Semester

Title of Micro Project: Chatting Application

1.0 Brief Introduction:
Our chat application, developed using React Tailwind and Node JS , provides a real-time
platform for users to communicate with each other. This app is designed to be both visually
appealing and user-friendly.The frontend uses React for creating interactive components like
chat windows and message lists, styled responsively with Tailwind’s utility-first CSS. The
backend, powered by Node.js and Express, manages HTTP requests, user sessions, and serves
data through RESTful APIs. Real-time messaging is enabled using Socket.io, which facilitates
instant, bi-directional communication between client and server
.
2.0 Aim of the Micro Project:
The aim of this chat application is to provide a simple, real-time platform for users to communicate
effectively, enabling instant messaging with a user-friendly and responsive design.

3.0 Action Plan (Sequence and time required for major activities for 8 weeks)
Sr. Details of Activity Planned Planned Name of
No. Start Date Finish Responsible Team
Date Members
1 Selection of topic 15-10-24 16-10-24 Yuvraj Dogra
Anushree Chorghe
2 Task allocated to group members 17-10-24 17-10-24 Tejas Sawant

3 Information Search 17-10-24 18-10-24 Anushree Chorghe

5 Building logic for code 19-10-24 20-10-24 Yuvraj Dogra,
Payal Gawade
7 Making report 20-10-24 21-10-24 Payal Gawade
8 Submission of project 22-10-24 22-10-24 All Members

4.0 Resources Required (Such as raw material, some machining facility, software etc.)
Sr. Name of Resource/Material Specifications Qty Remarks
No.
1 Visual Studio Code 1
2 Ms word 1
 Department of Computer Engineering

PART-B (Outcomes after Execution and Format for Micro-Project Report, About 6-10
Pages)
For 5th Semester

Title of Micro Project: Chatting Application

1.0 Brief Description:

Our chat application, developed using React Tailwind and Node JS , provides a real-time
platform for users to communicate with each other. This app is designed to be both visually
appealing and user-friendly.The frontend uses React for creating interactive components like
chat windows and message lists, styled responsively with Tailwind’s utility-first CSS. The
backend, powered by Node.js and Express, manages HTTP requests, user sessions, and serves
data through RESTful APIs. Real-time messaging is enabled using Socket.io, which facilitates
instant, bi-directional communication between client and server
Key Features:
User-Friendly Interface: The application has an intuitive design that makes it easy for users to start
conversations and interact. CSS is used extensively to create a modern and engaging look.
Real-Time Messaging: Enables instant, bi-directional communication using WebSockets (e.g.,
Socket.io), allowing users to send and receive messages instantly.
Responsive UI: Utilizes Tailwind CSS to provide a responsive and clean user interface that adapts
well to various screen sizes, making it mobile-friendly.
Chat Rooms or Direct Messaging: Supports multiple chat rooms or private one-on-one messaging,
letting users join group conversations or start individual chats.

2.0 Aim of Micro Project:

The aim of your chat application is to facilitate real-time, seamless communication between
users in an intuitive and accessible way. It provides a platform for instant messaging with a
focus on simplicity, responsiveness, and ease of use, making online communication
straightforward and efficient.

3.0 Course Outcomes Integrated (Add to the earlier list if more CO’s are addressed)
a. creates interactive web pages using program flow control structure.
b. create event based web forms using JavaScript .
c. Implement arrays and function in JavaScript.

4.0 Actual Procedure followed:

 Department of Computer Engineering

 Firstly, we had a group discussion and then we selected a topic.

 Then we allocated a specific task to group members.
 Then we searched about our micro project.
 After that we setup the environment of VS Code.
 Later, we have done coding .
 Lastly, we made a report of our project.

5.0 Actual Resources Used: (Mention the actual resources used)

Sr. Name of Resource/Material Specifications Qty Remarks

No.
1 Visual Studio Code 1
2 MS word 1

6.0 Outputs of the Micro Projects :

 Department of Computer Engineering

7.0 Skill Developed/Learning out of this Micro Project.

Frontend Development with React: Building modular, reusable components and managing
application state. Using hooks like useState, useEffect, and useContext to handle dynamic data and
user interactions. Integrating WebSocket events for real-time UI updates.

Styling with Tailwind CSS: Applying a utility-first approach to design responsive, mobile-friendly
layouts. Creating a consistent, modern UI with custom components and responsive styling.

Real-Time Communication with WebSockets: Utilizing Socket.io (or similar libraries) for bi-
directional, real-time communication between client and server. Handling events for message
sending, receiving, typing indicators, and user presence.

Communication and Collaboration: Practice clear and effective communication with teammates,
including explaining ideas, understanding feedback, and aligning on project goals.
 Department of Computer Engineering

Task Delegation and Management: Understand how to break down a project, delegate tasks based on
team strengths, and manage workloads effectively.
This project builds foundational skills for creating more complex, interactive applications and working
with backend technologies in the future.

Name of Student: Enrollment No:

 Department of Computer Engineering

Yuvraj Dogra 2205680078

Payal Gawade 2205680088
Tejas Sawant 2205680090
Anushree Chorghe 2205680095

Name of Programmed: CO Semester: 5th

Course Title: Client Side Scripting Code: 22519
Title of the Micro Project: Chatting Application

Course Outcomes Achieved:

a. creates interactive web pages using program flow control structure.
b. create event based web forms using JavaScript .
c. Implement arrays and function in JavaScript.

Micro Project Evaluation Sheet

Process Assessment Product Assessment Total Marks

10
Part-A Project Part-B Individual
Project Proposal Methodology Project Report/ Presentation/
(Mark-2) (Mark-2) Working Model Viva
(Marks-2) (Marks-4)

Comments/Suggestions about team work/leadership/inter-personal communication (if any)

------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------
Any other Comments:
--------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------

Name and Designation of Faculty Members

Signature: