A

SYNOPSIS
on
“Chat Application Using MERN Stack”

Submitted by
Sudhanshu Kumar 3519217
Shivam Pradhan 3519216
Sudhanshu Pandey 3519218

Under the supervision of

Rakhi Sharma,
Assistant Professor
Computer Science Engineering

in partial fulfillment for project-2 of the seventh semester of

BACHELOR OF TECHNOLOGY
Computer Science

Technology Education & Research Integrated Institute

KURUKSHETRA UNIVERSITY, KURUKSHETRA, HARYANA 136119
October, 2022
 TECHNOLOGY EDUCATION & RESEARCH INTEGRATED
INSTITUTE, KURUKSHETRA
CANDIDATE’S DECLARATION

I hereby declare that the proposed work presented in the synopsis entitled “Chat
Application Using MERN Stack” in partial fulfillment for project-2 of the 7 th
semester Bachelor of Technology in the Department of Computer Science &
Engineering / Information Technology of TERII, Kurukshetra University
Kurukshetra, Haryana will be an authentic work carried out by me during 7th
semester and will be submitted in the stipulated time period.
I further declare that no material of this synopsis has been copied from any known
source and submitted before, for the award of any certificate.

Date:

Signature of student
Sudhanshu Kumar
3519217
Signature of the Supervisor
Rakhi Sharma
Assistant professor
Computer Science Engineering

Sharma
Assistant professo
 TECHNOLOGY EDUCATION & RESEARCH INTEGRATED
INSTITUTE, KURUKSHETRA
CANDIDATE’S DECLARATION

I hereby declare that the proposed work presented in the synopsis entitled “Tourist
Website” in partial fulfillment for project-1 of the 7th semester Bachelor of
Technology in the Department of Computer Science & Engineering /
Information Technology of TERII, Kurukshetra University Kurukshetra,
Haryana will be an authentic work carried out by me during 7th semester and will
be submitted in the stipulated time period.
I further declare that no material of this synopsis has been copied from any known
source and submitted before, for the award of any certificate.

Date:

Signature of student
Shivam Pradhan
3519216

Signature of the Supervisor

Rakhi Sharma
Assistant professor
 TECHNOLOGY EDUCATION & RESEARCH INTEGRATED
INSTITUTE, KURUKSHETRA
CANDIDATE’S DECLARATION

I hereby declare that the proposed work presented in the synopsis entitled
“Tourism Website” in partial fulfillment for project-1 of the 7th semester
Bachelor of Technology in the Department of Computer Science &
Engineering / Information Technology of TERII, Kurukshetra University
Kurukshetra, Haryana will be an authentic work carried out by me during 7th
semester and will be submitted in the stipulated time period.
I further declare that no material of this synopsis has been copied from any known
source and submitted before, for the award of any certificate.
Date:

Signature of student
Sudhanhsu Pandey
3519218

Signature of the Supervisor

Rakhi Sharma
Assistant professor
Computer Science Engineering
 TABLE OF CONTENTS

Sr. No. TOPIC PAGE NO.

1. CHAPTER 1
INTRODUCTION
1-4
1.1 MERN Stack
1.2 HTML
1.3 CSS
1.4 JavaScript
1.5 ReactJS
1.6 MongoDB
1.7 NodeJS
2. CHAPTER 2
FEASIBILITY STUDY 5-6
2.1 Technical Feasibility
2.2 Operational Feasibility
2.3 Economic Feasibility
2.4 Schedule Feasibility

3. CHAPTER 3
METHODOLOGY
7
Front-end
Back-end
Database
4. CHAPTER 4 8
REQUIREMENTS
4.1 Hardware Requirements
4.2 Software Requirements

BIBLIOGRAPHY
 Chapter 1 INTRODUCTION 1.1 MERN Stack

A stack is the mixture of technologies used to create Web applications. Any web application
will be made utilizing various technologies like (frameworks, libraries, databases).

The MERN stack is a JavaScript stack that is intended to make Application Development process
smoother.

1.2 HTML

HTML stands for HyperText Markup Language. It is used to design web pages using a markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages. A markup language is used to define the text document within tag
which defines the structure of web pages.

Elements and Tags

HTML uses predefined tags and elements which tell the browser how to properly display the
content. Remember to include closing tags. If omitted, the browser applies the effect of the
opening tag until the end of the page.
1.3 CSS

CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to
make it attractive. The reason for using this is to simplify the process of making web
pages presentable. It allows you to apply styles to web pages. More importantly, it
enables you to do this independent of the HTML that makes up each web page.
There are three types of CSS which are given below:
• Inline
• Internal or Embedded  External

1.4 JavaScript

JavaScript is the world most popular lightweight, interpreted compiled programming language.
It is also known as scripting language for web pages. It is well-known for the development of
web pages, many non-browser environments also use it. JavaScript can be used for Clientside
developments as well as Server-side developments.

JavaScript can be added to your HTML file in two ways:

• Internal JS: We can add JavaScript directly to our HTML file by writing the code inside
the <script> tag. The <script> tag can either be placed inside the <head> or the <body>
tag according to the requirement.

• External JS: We can write JavaScript code in other file having an extension .js and then
link this file inside the <head> tag of the HTML file in which we want to add this code.

1.5 ReactJS

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’
in MVC. ReactJS is an open-source, component-based front-end library responsible only for the
view layer of the application.
React uses a declarative paradigm that makes it easier to reason about your application and
aims to be both efficient and flexible. It designs simple views for each state in your application,
and React will efficiently update and render just the right component when your data changes.
The declarative view makes your code more predictable and easier to debug.

Features of React.js

Use JSX: It is faster than normal JavaScript as it performs optimizations while translating to
regular JavaScript. It makes it easier for us to create templates.

Virtual DOM: Virtual DOM exists which is like a lightweight copy of the actual DOM. So for
every object that exists in the original DOM, there is an object for that in React Virtual DOM. It
is exactly the same, but it does not have the power to directly change the layout of the
document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets
drawn on the screen.

One-way Data Binding: This feature gives you better control over your application.

Component: A Component is one of the core building blocks of React. In other words, we can
say that every application you will develop in React will be made up of pieces called
components. Components make the task of building UIs much easier. You can see a UI broken
down into multiple individual pieces called components and work on them independently and
merge them all in a parent component which will be your final UI.

Performance: React.js use JSX, which is faster compared to normal JavaScript and HTML. Virtual
DOM is a less time taking procedure to update webpages content.

1.6 MongoDB

MongoDB is an open-source, document-oriented, and one of the most popular NoSQL

database. NoSQL simply means a non-relational database i.e. there is no table-like relational
database structure instead there is a totally different mechanism for storing and retrieving
data. This format of storage is called BSON and is very much similar to JSON.

1.7 NodeJS
Node.js is an open-source and cross-platform runtime environment for executing JavaScript
code outside a browser. NodeJS is not a framework and it’s not a programming language.
 CHAPTER 2

FEASIBILITY STUDY
Feasibility study is made to see if the project/training on completion will serve the
purpose of the organization for the amount of work, effort and the time that spend on it.
Feasibility study lets the developer foresee the future of the project/training and the
usefulness. A feasibility study of a system proposal is according to its workability, which is
the impact on the organization, ability to meet their user needs and effective use of
resources. Thus when a new application is proposed it normally goes through a feasibility
study before it is approved for development.

• 2.1 Technical Feasibility: Evaluating the technical feasibility is the trickiest part of
feasibility study. A number of issues have to be considered while doing a technical
analysis; understanding the different types of technologies involved in the project.
This project is technically feasible since all the required tools like VSCode,
JavaScript, ReactJS etc are easily available and handled.

• 2.2 Operational Feasibility: The project/training is beneficial only if it can be

turned into information systems that will meet the operating requirements. The
operational feasibility asks if there are some major barriers to the implementation
i.e. if the project works properly when it is developed. It is simple to implement
and understand. It is free to operate on any system.

• 2.3 Economic Feasibility: Economic feasibility attempts to weight the costs of

making the project against the benefits that would accrue from the project. A
simple economic analysis which gives the actual comparison of costs and benefits
are much meaningful in this case. This project/training includes the MERN Stack. It
is economically feasible since all the tools required (VSCode, Web Browser etc.)
are available free of cost.
2.4 Schedule Feasibility: A project/training will fail if it takes too long to be
completed before it is useful. Schedule feasibility is a measure how
reasonable the project/training timetable is.
 CHAPTER 3
METHODOLOGY

MERN Stack: MERN Stack is a JavaScript Stack that is used for easier and faster deployment of
full-stack web applications.

MERN Stack comprises of 4 technologies namely: MongoDB, Express, React and Node.js. It is
designed to make the development process smoother and easier.

Each of these 4 powerful technologies provides an end-to-end framework for the developers to
work in and each of these technologies play a big part in the development of web applications .
 CHAPTER 4

Facilities required for proposed work

HARDWARE REQUIREMENTS

• Laptop/Computer

• Minimum 4 GB RAM,

• Processor 1.4 GHz 32/64-bit,

• Hard Disk of size 6 GB or more,

• Internet

SOFTWARE REQUIREMENTS

• Operating System (Windows/Linux),

• VSCode,

• ReactJS,

• NodeJS.

• Web browser
Bibliography

[1] MERN Stack Methodology.

[2] HTML

[3] CSS

[4] JavaScript

[5] ReactJS

[6] NodeJS

MongoDB