A

Training Report
On

MERN STACK
Submitted for partial fulfillment of the award of degree of Bachelor of Technology
(B.Tech)
in
Computer Science & Engineering

Submitted By:
SHIVAM 1222370

Submitted to:

Er. Ikshita Bansal

Department of Computer Science & Engineering

Seth Jai Parkash Mukand Lal Institute of Engineering &

Technology (JMIT), Radaur

1222370

SHIVAM

1
2
 CANDIDATE’S DECLARATION

I hereby certify that the work which is being presented in the Summer
Internship/Training entitled “Chat Application” in partial fulfilment for the
award of the Degree of Bachelor of Technology in Computer Science and
Engineering / Information Technology affiliated to Kurukshetra university ,
Kurukshetra (Hrayana) and submitted to the Department of Computer
Science and Engineering Seth Jai Parkash Mukand Lal Institute of Engineering
& Technology, Radaur, is an authentic record of my own work. The matter
represented in this report has not been submitted by me for award of any other
degree of this or any other institute/university.

(name of all participants )

This is to certify that the above statement made by the candidate is correct to the
best of our knowledge.

Signature of Supervisor
Date - (name of teacher

3
 Preface

Objectives of the Training:

This curriculum-based summer training program is providing an understanding about building
GUIs for web-based applications and web services and to learn how to develop computer
applications under Visual Environment, with an emphasis on the correct application of object-
oriented methods. The program also imparts learning for the usage of high-end processes in
problem solving and to get introduced with the current-age industry standards.

The end objectives of the training are to obtain an In-depth knowledge to:
• Learn the fundamentals and significance of the MERN stack for full-stack web
development.
• Build dynamic, responsive user interfaces using React with components, props, and
state.
• Implement advanced React features like hooks, context, and state management with
Redux.
• Create and manage RESTful APIs with Express.js and Node.js for backend development.
• Master asynchronous programming in Node.js using Promises and async/await.
• Design, query, and manage NoSQL databases with MongoDB and Mongoose.
• Perform CRUD operations and handle database relationships effectively.
• Integrate the front-end and back-end, ensuring seamless data flow via RESTful APIs.
• Implement user authentication and authorization using JWT and session management.
• Optimize React applications with lazy loading, code splitting, and performance tuning. •
Debug and handle errors across the full stack using tools like Chrome DevTools and
Postman.
• Deploy MERN stack applications on platforms like Heroku, Vercel, or AWS.
• Learn Git and GitHub for version control, branching, and team collaboration.
• Build a feature-rich, real-world MERN stack project as a capstone assignment.
• Learn how to implement server-side rendering (SSR) and static site generation (SSG)
using Next.js.
• Master the use of middleware in Express.js to handle requests, responses, and custom
logic.
• Understand how to secure web applications by preventing common vulnerabilities like XSS and
CSRF.
• Explore real-time communication using WebSockets and libraries like Socket.IO.
• Gain proficiency in testing MERN stack applications using tools like Jest, Mocha, and
Postman. • Follow best practices for organizing and structuring MERN stack
projects for scalability.

4
 Company Profile
Webotech Solutions Private Limited is a Private company incorporated on 16 June 2020. It is
classified as Non-government company and is registered at Registrar of Companies, Delhi. Its
authorized share capital is Rs. 100,000 and its paid up capital is Rs. 100,000. It's NIC code is 725
(which is part of its CIN). As per the NIC code, it is inolved in Maintenance and repair of office,
accounting and computing machinery.

Core Services
• Web Development: Creating dynamic and responsive websites.

• Mobile App Development: Building user-friendly mobile apps across Android and
iOS.

• Software Development: Developing bespoke software solutions to address specific

business requirements.

• E-Commerce Solutions: Designing and developing scalable e-commerce platforms.

• Digital Marketing: Implementing effective digital marketing strategies to enhance

online presence.

Skill Development and Training

The company also prioritizes nurturing talent through its professional training programs. These
courses cover web development, mobile app development, web designing, CMS platforms,
digital marketing, quality assurance, and management. The focus is on equipping trainees with
practical knowledge and industry-relevant skills to excel in the competitive IT landscape.

Leadership and Vision

Webotech Solutions' Annual General Meeting (AGM) was last held on N/A and as per records
from Ministry of Corporate Affairs (MCA), its balance sheet was last filed on 31 March 2023.

Global Presence
Webotech Solutions' Corporate Identification Number (CIN) is U72501HR2020PTC086815
and its registration number is 86815. Users may contact Webotech Solutions on its Email
address - [email protected]. Registered address of Webotech Solutions is
SCO. A-58, GROUND FLOOR SCHOOL CUM CANAL AREA, NILOKHERI , KARNAL,
Haryana, India - 132117.

5
 Training Schedule
w.e.f. July 8, 2024
Time Duration Contents
Introduction to MERN Stack and Web Development Basics:
Introductory The first week introduces the MERN stack (MongoDB, Express,
Week React, Node.js) and covers web development basics like HTML,
(08-07-2024 to CSS, and JavaScript. Participants are introduced to React,
14-07-2024) learning about components, JSX, props, and state management.
React Basics and Component Design:
WEEK-1
Participants dive deeper into React, exploring hooks (useState,
useEffect) and state management. They learn to design dynamic
(14-07-2024
user interfaces, work with forms, and navigate between pages
to 20-07-
2024) using React Router.

WEEK-2 Advanced React and Frontend Design:

This week focuses on advanced React features such as Redux or
(20-07-2024 Context API for state management. Participants learn responsive
to 30-07- design using Bootstrap/Tailwind CSS and implement user
2024) authentication features like login and signup forms.
Backend Development with Node.js and Express:
WEEK-3
In this week, participants learn backend development with
(10-08-2024 Node.js and Express. They set up servers, handle routing and
to 26-08- middleware, and build RESTful APIs. They also connect the
2024) backend to MongoDB using Mongoose for CRUD operations.
Database Management and Authentication:
WEEK-4 Participants focus on MongoDB for database management,
learning to design schemas and perform CRUD operations. They
(26-08-2024 implement user authentication and secure login using JWT and
to 02-09-
bcrypt.
2024)

Integrating Frontend and Backend:

WEEK-5 This week covers integrating React with the Node.js backend
using Axios or Fetch API for data exchange. Participants also
(10-09-2024
explore real-time communication with Socket.IO and work with
to 09-08-
2024) file uploads. Basic SEO and deployment strategies are also
covered.
Project Development, Testing, and Deployment:
WEEK-6
The final week is dedicated to group projects, where participants
(14-09-2024 build, test, and deploy a MERN stack application. They handle
to 24-09- front-end and back-end integration, debugging, and deploy their
2024) projects on platforms like Heroku or AWS.

6
 List of Figures
Figure Title of the figure
Figure 3.1 Components of a full stack development
Figure 3.2 A Full Stack Development Workflow
Figure 4.1 Illustration of MERN stack logo
Figure 4.2 Example of how to use Component
Figure 4.3 Example of how to use hook
Figure 4.4 Architectural representation of MERN stack
Figure 6.1 Screenshot of MongoDB Compass
Figure 6.2 Folder and file structure of the application
Figure 9.1 Login Page
Figure 9.2 Register Page
Figure 9.3 Home Page
Figure 9.4 Create Post Page
Figure 9.5 Home Screen
Figure 9.6 Your Profile Page

7
 TABLE OF CONTENTS

CHAPTER NO. TITLE PAGE NO.

1) Title Page 1
2) Candidate Declaration 2
3) List of Figures 5
4) Acknowledgement 6
5) Abstract 7

Chapter 1. INTRODUCTION 8-9

1.1) Problem Statement 9
1.2) Objectives 9

Chapter 2. TECHNOLOGIES USED 10 - 12

2.1) What is MongoDB? 10
2.2) What is Express.js 10
2.3) What is React.js 11
2.4) What is Node.js 12

Chapter 3. SYSTEM DESIGN 13 - 18

3.1) GUI Interface 13
3.2) Implementation 14
3.2.1) Chat App or Client Side 15
3.2.2) Chat Server Engine 16
3.2.3) Web Socket 17

Chapter 4. RESULTS 19 - 21
4.1) Screenshots 19
4.1.1) Setting up the Connection 19
4.1.2) Entering Interface 20
4.1.3) Chatting Demo 21

8
Chapter 5. CONCLUSION 22

Chapter 6. REFERENCES 23

9
 LIST OF FIGURES

 Figure 1 - MERN Stack ............................................................ 8

 Figure 2 - GUI Interface ........................................................... 13
 Figure 3 - GUI Code & Styling.................................................14
 Figure 4 - Client Side Structure Tree ........................................ 15
 Figure 5 - Package.json file of Client Side................................. 16
 Figure 6 - Dependencies of Server ..............................................17
 Figure 7 - Socket Code ............................................................... 18
 Figure 8 - Activating the Port...................................................... 19
 Figure 9 - localhost ..................................................................... 20
 Figure 10 - Input your Name....................................................... 20
 Figure 11 - Chatting Demo .......................................................... 21

10
 List of Abbreviations
Abbreviation Full Form
MERN Technology stack: MongoDB, NodeJS, Express JS, and React JS
DBMS Database Management System
API Application Programming Interface
UI User Interface
SPA Single Page Application
HTML Hyper Text Markup Language
CSS Cascading Style Sheets
HTTP Hypertext Transfer Protocol
JSON JavaScript Object Notation
JSX JavaScript XML
NPM Node Package Manager

11
 ACKNOWLEDGEMENT

I would like to express our gratitude towards our mentor (name of teacher) for
exposing me to this topic and moreover for being the guiding light all this while.
Furthermore I would like to thank other teachers for their valuable suggestions
and to our principal for presenting me with this golden opportunity of making this
project. Finally, I would like to thank my friends and family for being the constant
support system and encouraging force all this while.

12
CHAPTER-1

INTRODUCTION

Today Developers around the world are making efforts to enhance user experience of using
application as well as to enhance the developer’s workflow of designing applications to deliver
projects and rollout change requests under strict timeline. Stacks can be used to build web
applications in the shortest span of time. The stacks used in web development are basically the
response of software engineers to current demands. They have essentially adopted pre-existing
frameworks (including JavaScript) to make their lives easier.

While there are many, MEAN and MERN are just two of the popular stacks that have evolved
out of JavaScript. Both stacks are made up of open source components and offer an end-to-end
framework for building comprehensive web apps that enable browsers to connect with
databases. The common theme between the two is JavaScript and this is also the key benefit of
using either stack. One can basically avoid any syntax errors or any confusion by just coding
in one programming language, JavaScript. Another advantage of building web projects with
MERN is the fact that one can benefit from its enhanced flexibility.

In order to understand MERN stack, we need to understand the four components that make up
the MERN stack(fig.1), namely – MongoDB, Express.js, React and Node.js.

Figure 1 : MERN Stack

13
1.1) Problem Statement
 This project is to create a chat application with a server and users to enable the users to
chat with each other’s.
 To develop an instant messaging solution to enable users to seamlessly communicate
with each other.
 The project should be very easy to use enabling even a novice person to use it.
 This project can play an important role in organizational field where employees can
connect through LAN.

1.2 ) Objectives

 GUI: Easy to use GUI (Graphical User Interface), hence any user with minimal
knowledge of operating a system can use the software.

Platform independence: The messenger operates on any system irrelevant of the
underlying operating system.
 Unlimited clients: “N” number of users can be connected without any performance
degradation of the server.

Objective is to develop an instant messaging solution to enable users to seamlessly

communicate with each other. Furthermore, it needs to be user-friendly, i.e., the project should
be very easy to use enabling even a novice person to use it.

14
CHAPTER-2

TECHNOLOGIES USED

2.1) What is MongoDB? [1]

 MongoDB is a cross-platform document-oriented NoSQL database used for high

volume data storage that provides high performance, high availability and easy
scalability.
 MongoDB stores data in flexible, JSON-like documents, meaning fields can vary from
document to document and data structure can be changed over time. The document
model maps to the objects in the application code, making data easy to work with.
 The data model available within MongoDB allows users to represent hierarchical
relationships, to store arrays, and other more complex structures more easily.
 MongoDB works on concept of collections and documents. Each database contains
collections which in turn contains documents. Each document can have varying number
of fields. The size and content of each document can also be different from each other.

2.2) What is Express.js ? [2]

 Express is a minimal and flexible Node.js web application framework that provides a
robust set of features for web and mobile applications. It is an open source framework
developed and maintained by the Node.js foundation.
 Express provides us the tools that are required to build our app, be it single-page, multi-
page or hybrid web applications. It is flexible as there are numerous modules available
on npm(Node Package Manager), which can be directly plugged into Express.

15
  Unlike its competitors like Rails and Django, which have an opinionated way of
building applications, Express has no "best way" to do something. It is very flexible
and pluggable.
 Pug (earlier known as Jade) is a terse language for writing HTML templates. It produces
HTML, supports dynamic code and code reusability (DRY). It is one of the most
popular template languages used with Express.
 Express can be thought of as a layer built on the top of the Node.js that helps manage a
server and routes. It allows users to setup middleware to respond to HTTP Requests
and defines a routing table which is used to perform different actions based on HTTP
method and URL.
 Express allows to dynamically render HTML Pages based on passing arguments to
templates.
 Express is asynchronous and single threaded and performs I/O operations quickly.

2.3) What is React ? [3]

 ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable
UI components. It is an open-source, component-based front-end library which is
responsible only for the view layer of the application. It was initially developed and
maintained by Facebook and later used in its products like WhatsApp & Instagram.
 A ReactJS application is made up of multiple components, each component responsible
for outputting a small, reusable piece of HTML code. The components are the heart of
all React applications. These Components can be nested with other components to allow
complex applications to be built of simple building blocks. ReactJS uses virtual DOM
based mechanism to fill data in HTML DOM. The virtual DOM works fast as it only
changes individual DOM elements instead of reloading complete DOM every time.
 Instead of using regular JavaScript, React codes are written in something called JSX
(JavaScript Syntax Extension). JSX is basically a syntax extension of regular JavaScript
and is used to create React elements. These elements are then rendered to the React
DOM. JSX is faster than normal JavaScript as it performs optimizations while
translating to regular JavaScript.

16
 2.3.1) Why use React? [4]
 Uses virtual DOM which is a JavaScript object. This will improve apps performance,
since JavaScript virtual DOM is faster than the regular DOM.
 Can be used on client and server side as well as with other frameworks.
 Component and data patterns improve readability, which helps to maintain larger apps.

2.4) What is Node.js? [5]

 Node.js is a very powerful JavaScript-based platform built on Google Chrome's

JavaScript V8 Engine. It is used to develop I/O intensive web applications like video
streaming sites, single- page applications, and other web applications. Node.js is open
source, completely free, and used by thousands of developers around the world.
 Node.js is a server-side platform built on Google Chrome's JavaScript Engine (V8
Engine). Node.js was developed by Ryan Dahl in 2009.
 Node.js applications are written in JavaScript and can be run within the Node.js runtime
on OS X, Microsoft Windows, and Linux.
 Node.js also provides a rich library of various JavaScript modules which simplifies the
development of web applications using Node.js to a great extent.

2.4.1) Features of Node.js

1. Extremely fast: Node.js is built on Google Chrome's V8 JavaScript Engine, so its

library is very fast in code execution.
2. I/O is Asynchronous and Event Driven: All APIs of Node.js library are asynchronous
i.e. non-blocking. So, a Node.js based server never waits for an API to return data. The
server moves to the next API after calling it and a notification mechanism of Events of
Node.js helps the server to get a response from the previous API call. It is also a reason
that it is very fast.
3. Single threaded: Node.js follows a single threaded model with event looping.
4. Highly Scalable: Node.js is highly scalable because event mechanism helps the server
to respond in a non-blocking way.
5. Open source: Node.js has an open source community which has produced many
excellent modules to add additional capabilities to Node.js application.

17
CHAPTER-3

SYSTEM DESIGN & IMPLEMENTATION

This is a very basic web based chat application and it is in its primary state. I have
provided with a very easy to use GUI Interface.

3.1) GUI Interface

This is the GUI interface made using React.js etc

Figure 2 : GUI Interface

18
 CODE : -

Figure 3 : GUI Code & Styling

3.2) Implementation

A chat consists of two major parts:

 Chat App or client part, which is a Web chat application. Build on React
 Chat Server Engine or server part, which is a pool of external servers responsible for
the chat operation. This is the place where all the chat magic happens.
Both parts contain various components that communicate to each other and bring the
chat into action

19
3.2.1) Chat App or Client Side
Chat App is the other major part of the chat architecture, the one that users directly interact
with. It's split into two separate root components:

 Chat Client Engine handles all the communication with the Chat Server Engine via its
internal components: Chat REST API Client Library and Chat WebSocket Client
Library.
 Chat UI displays data to users: Chat Contact List UI, Chat Dialog UI

Figure 4 : Client-Side Structure Tree

Component:

client.js is the starting point of our React app.

A package.json file :

 lists the packages your project depends on

20
  specifies versions of a package that your project can use.
 makes your build reproducible, and therefore easier to share with other
developers.

A package.json file may look similar to this:

CODE :-

Figure 5 : Package.json file of Client-side

3.2.2) Chat Server Engine

This is a core of the chat architecture that handles message delivery and dispatch. In our version
of chat architecture, it includes the following components:

 Chat REST API handles the tasks that are not connected directly to message dispatch
and delivery, such as user authentication, changing of user settings, friends invitation,
downloading sticker packs, etc. The Chat App (the chat client part) communicates with
the Chat REST API via the Chat REST API Client Library.
 Chat WebSocket Server is responsible for transmitting messages between users. The
Chat App communicates with the Chat WebSocket Server via the Chat WebSocket
Client Library. This connection is open two ways; that means users don’t have to make
requests to the server if there are any messages for them, they just get them right away.

21
 CODE :-

Figure 6 : Dependencies for Server

3.2.3) Web Socket

WebSocket is a popular communication protocol (TCP) that enables seamless full-duplex

communication (two-way communication) between client and server. In other words, it allows
websites send and receive data without delay. WebSockets do not use
the http:// or https:// scheme (because they do not follow the HTTP protocol). Instead,
WebSocket URIs use a new scheme ws: or wss: (recommended) for a secure WebSocket. Web
developers use WebSocket to build chat applications, multiplayer games, SDKs, or user
interfaces exposing server-side services in real-time and so much more.[6]

22
CODE :-

Figure 7 : Socket Code

23
CHAPTER-4

RESULTS

4.1) Screenshots
Below are the screenshots of our web based chat application that demonstrate its functioning
:-

4.1.1) Setting up the Connection

This images displays how the connection is build and Port 3000 is active.

Figure 8 : Activating the Port

24
4.1.2) Entering Interface

This image display that when to visit the localhost at Port 3000, you have to give input your
name.

Figure 9 : localhost

Figure 10 : Input your Name

25
4.1.3) Chatting Demo

Here is a depiction how your send and received messages will appear on the
respective screens.

Figure 11 : Chatting Sample

26
CHAPTER-5

CONCLUSION

There is always a room for improvements in any apps and this being in its primary phase needs
a loads of it. But I will keep working on it and improving it with technological advancements
in coming times. Right now, we are just dealing with text communication. There are several
chat apps which serve similar purpose as this project, but these apps were rather difficult to use
and provide confusing interfaces. I have built this application keeping in mind that even the
very beginner with technology can operate this application with ease. A positive first
impression is essential in human relationship as well as in human computer interaction. This
project hopes to develop a chat service Web app with high quality user interface. In future we
may be extended to include features such as file transfer, video message, voice message, audio
and video calls etc.

27
CHAPTER-6

REFERENCES

1. https://www.guru99.com/what-is-mongodb.html
2. https://www.javatpoint.com/expressjs-tutorial
3. https://www.javatpoint.com/reactjs-tutorial
4. https://www.tutorialspoint.com/reactjs/reactjs_overview.htm
5. https://www.javatpoint.com/nodejs-tutorial
6. https://www.cometchat.com/tutorials/how-to-build-a-chat-app-
with-websockets-and-node-js

28