FULL STACK DEVELOPMENT (MERN)

A Internship report submitted to

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY, GURAJADA
VIZIANAGARAM
In partial fulfilment of the requirements for the award of the degree of
BACHELOR OF TECHNOLOGY

In

ELECTRONICS AND COMMUNICATION ENGINEERING

Submitted by

K. TEJASWINI (20NR1A0433)

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

BABA INSTITUTE OF TECHNOLOGY AND SCIENCES

(Approved by AICTE, New Delhi, NAAC-A credited, & Affiliated to JNTU-GV, A.P)
Bakkannapalem(V),Madhurawada, Visakhapatnam – 530048
 DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING
BABA INSTITUTE OF TECHNOLOGY AND SCIENCES
(Approved by AICTE, New Delhi, NAAC-A credited & Affiliated
to JNTU-GV, A.P) Bakkannapalem(V), Madhurawada,
Visakhapatnam – 530048

CERTIFICATE
This is to certify that the internship work entitled
“FULL STACK DEVELOPMENT (MERN)”
is a bonafide record of work done by
K. TEJASWINI (Regd. No. 20NR1A0433) under the supervision of Mr. T. VISHNU
MURTHY, M.Tech, Assistant Professor, Dept. of ECE in association with Skill Dzire
(APSCHE) for the partial fulfilment for the award of the degree of BACHELOR OF
TECHNOLOGY in Electronics and Communication Engineering at Jawaharlal Nehru
Technological University, Gurajada Vizianagaram during the academic years 2020-2024.

Internship Coordinator Head of The Department

Mr. T. VISHNU MURTHY Dr. B. KIRANMAI
M.Tech, Ph.D M.Tech, Ph.D

Assistant Professor Professor

External Examiner
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

LEARNING OBJECTIVE/INTERNSHIP OBJECTIVE

To secure a MERN stack internship position where I can leverage my passion for web development
and my foundational knowledge in computer science to gain hands-on experience in building modern web
applications. My goal is to deepen my understanding of each component of the MERN stack – MongoDB,
Express.js, React.js, and Node.js – while contributing to meaningful projects under the guidance of
experienced mentors. Through this internship, I aim to enhance my technical skills, collaborate effectively
in a team environment, and make a valuable contribution to innovative web development initiatives.
Ultimately, I aspire to leverage this experience to advance my career in full-stack development and become
a proficient and versatile developer in the dynamic field of web technologies.

This MERN stack internship gives opportunity to immerse myself in a dynamic and fast-paced
development environment, where I can apply my theoretical knowledge and passion for coding to real-
world projects. My objective is to gain practical experience in utilizing MongoDB for efficient data
storage, Express.js for building robust backend APIs, React.js for creating dynamic and interactive user
interfaces, and Node.js for server-side JavaScript execution. Through hands-on experience and
mentorship, I aim to refine my technical skills, develop a deep understanding of industry best practices,
and cultivate a strong foundation in full-stack development. By actively contributing to impactful projects,
I aspire to not only enhance my professional capabilities but also make a meaningful contribution to the
advancement of innovative web solutions. This internship represents an invaluable opportunity for me to
grow personally and professionally, paving the way for a successful career in the ever-evolving field of
web development.

Department Of ECE, BITS Vizag

I
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

CONTENTS

S.NO CHAPTERS PAGE NO

1 INTRODUCTION TO FULL STACK (MERN STACK) 1

2 MERN STACK DEVELOPMENT BASICS 3

2.1 HTML (HYPER TEXT MARKUP LANGUAGE) 3

2.2 CASCADING STYLE SHEET 9

2.3 JAVASCRIPT BASICS 12

3 OOPS ASPECTS IN JAVASCRIPT 16

4 AJAX FOR DATA EXCHANGE WITH SERVER JQUERY 18

FRAMEWORK

5 JQUERY EVENTS 20

6 REACT INTRODUCTION 21

7 JAVA WEB DEVELOPMENT 25

8 RESTful API USING SPRING FRAMEWORK 28

9 DATABASES & DEPLOYMENT 30

CONCLUSION
CERTIFICATE

Department Of ECE, BITS Vizag

II
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

1.INTRODUCTION TO FULL STACK (MERN STACK)

Full Stack development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It is the
creation of an application that works over the internet i.e. websites. The word Web Development is made
up of two words, that is:

Full Stack Development can be classified into two ways:

➢ Frontend Development
➢ Backend Development

Let’s see a brief overview of what each part of the Full Stack Development looks like:

➢ Frontend (Client-side): ReactJS is used to build the user interface (UI) of the application. It enables
users to create interactive and dynamic user interfaces with reusable components.
➢ Backend (Server-side): NodeJS with ExpressJS is employed to build the server-side logic of the
application. It handles tasks such as routing, middleware management, and interfacing with the
database.
➢ Database: MongoDB serves as the application’s database layer, providing a flexible and scalable
solution for storing and retrieving data.

FULL STACK DEVELOPMENT (MERN STACK)

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

applications. MERN Stack comprises 4 technologies namely: MongoDB, Express, React, and NodeJS. It

is designed to make the development process smoother and easier.The MERN stack is a popular JavaScript

stack used for building modern web applications. MERN is a pre-built technology stack based on

JavaScript technologies. MERN stands for MongoDB, Express, React, Node, after the four key

technologies that make up the stack.

➢ MongoDB — document database

1
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

➢ Express(.js) — Node.js web framework

➢ React(.js) — a client-side JavaScript framework

➢ Node(.js) — the premier JavaScript web server (runtime)

Express and Node make up the middle (application) tier. Express.js is a server-side web framework, and

Node.js is the popular and powerful JavaScript server platform. Regardless of which variant you choose,

ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through.It comprises

four main technologies: MongoDB, Express.js, React.js, and Node.js. Let's delve into each component in

detail:

2
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

2. MERN STACK DEVELOPMENT BASICS

2.1 HTML (HYPER TEXT MARKUP LANGUAGE):

HTML is an acronym which stands for Hyper Text Markup Language which is used for creating
web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.

➢ Hyper Text: Hyper Text simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
Hyper Text is a way to link two or more web pages (HTML documents) with each other.
➢ Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.
➢ Web Page: A web page is a document which is commonly written in HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic
type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the help of
styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML
tags and each HTML tag contains different content.

Simple example of HTML.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>

3
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

Description of HTML Example

<!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.

<html > :This tag informs the browser that it is an HTML document. Text between html tag describes the
web document. It is a container for all other elements of HTML except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the
browser window. It must be placed inside the head tag and should close immediately. (Optional)

<body>: Text between body tag describes the body content of the page that is visible to the
♦ Tags come in pairs: an opening tag and a closing tag. The opening tag denotes the beginning of an
element, while the closing tag denotes its end. For example, <p> is the opening tag for a paragraph
element, and </p> is its closing tag.
♦ Some tags, like <img> for images or <br> for line breaks, don't require closing tags and are called
self-closing or void elements.

♦ HTML Element
An HTML Tag with attributes and content is called HTML Element. Element include start tag, end tag,

attributes and content inside.Basically all HTML Elements are build using html tags.

The basic elements of an HTML page are:

♦ A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.

♦ A paragraph, denoted using the <p> tag.

♦ A horizontal ruler, denoted using the <hr> tag.

♦ A link, denoted using the <a> (anchor) tag.

♦ A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.

♦ An image, denoted using the <img> tag

4
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

♦ A divider, denoted using the <div> tag

♦ A text span, denoted using the <span> tag

➢ Semantic Elements:
♦ HTML5 introduced semantic elements, which provide meaning to the content they contain and
help search engines and assistive technologies better understand the structure of a web page.
♦ Semantic elements include <header>, <footer>, <nav>, <article>, <section>, <aside>, <main>,
and <figure>, among others.

➢ Lists and Tables:

♦ HTML provides elements for creating lists (`<ul>` for unordered lists, `<ol>` for ordered lists) and
tables (`<table>` for defining tables, `<tr>` for table rows, `<th>` for table headers, `<td>` for table
data cells).

5
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

➢ Forms:
♦ HTML includes elements for creating interactive forms, allowing users to input data and interact
with web pages.
♦ Form elements include <form> for creating a form, <input> for various types of input fields (text,
password, checkbox, radio button, etc.), <textarea> for multiline text input, <select> for
dropdown menus, and <button> for form submission buttons.

➢ Multimedia:
♦ HTML supports embedding multimedia content such as images, audio, and video.
♦ Multimedia elements include <img> for images, <audio> for audio files, <video> for video files,
and <iframe> for embedding external content (such as maps or other web pages).

• GIT

6
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

Git is a modern and widely used distributed version control system in the world. It is developed
to manage projects with high speed and efficiency. The version control system allows us to monitor and
work together with our team members at the same workspace.

This tutorial will help you to understand the distributed version control system Git via the
command line as well as with GitHub. The examples in this tutorial are performed on Windows, but we
can also perform same operations on other operating systems like Linux (Ubuntu) and MacOS.

Git is an open-source distributed version control system. It is designed to handle minor to major
projects with high speed and efficiency. It is developed to co-ordinate the work among the developers.
The version control allows us to track and work together with our team members at the same workspace.

Create a New Repository

Start by signing in to GitHub. GitHub pages need a special name and setup to work, so we start by
creating a new repository:

This repository needs a special name to function as a GitHub page. It needs to be your GitHub username,
followed by .github.io:

Push Local Repository to GitHub Pages

We add this new repository as a remote for our local repository, we are calling it gh-page (for GitHub
Pages).

Copy the URL from here:

And add it as a new remote:

Example
git remote addgh-page https://github.com/w3schools-test/w3schools-test.github.io.git

Make sure you are on the masterbranch, then push the masterbranch to the new remote:

Example
git push gh-page master Enumerating objects: 33, done.
Counting objects: 100% (33/33), done. Delta compression using up to 16 threads Compressing objects:
100% (33/33), done.
Writing objects: 100% (33/33), 94.79 KiB | 15.80 MiB/s, done.
Total 33 (delta 18), reused 0 (delta 0), pack-reused 0 remote: Resolving deltas: 100% (18/18), done.
To https://github.com/w3schools-test/w3schools-test.github.io.git
* [new branch] master -> master

Note: If this is the first time you are connecting to GitHub, you will get some kind of notification to
authenticate this connection.

Check that the new repository has received all the files:

7
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

Check Out Your Own GitHub Page

That looks good, now click the Settings menu and navigate to the Pages tab:

2.2 CASCADING STYLE SHEET

CSS stands for Cascading Style Sheet.

1. CSS is used to design HTML tags.

2. CSS is a widely used language on the web.
3. HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style on
HTML tags.
CSS Example with CSS Editor
In this tutorial, you will get a lot of CSS examples, you can edit and run these examples with
our online CSS editor tool.
1. <!DOCTYPE>
2. <html>
3. <head>
4. <style>
5. h1{
6. color:white;
7. background-color:red;
8. padding:5px;
9. }
10. p{
11. color:blue;
12. }
13. </style>
14. </head>
15. <body>
16. <h1>Write Your First CSS Example</h1>
17. <p>This is Paragraph.</p>
18. </body>
19. </html>

8
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

Three ways to apply CSS

To use CSS with HTML document, there are three ways:

• Inline CSS: Define CSS properties using style attribute in the HTML elements.
• Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
• External CSS: Define all CSS property in a separate .css file, and then include the file with HTML
file using tag in section

Inline CSS:

Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.To
apply inline CSS, you need to use style attribute within HTML element. We can use as many properties as
we want, but each property should be separated by a semicolon (;).

Example:

1. <h3 style="color: red;

2. font-style: italic;
3. text-align: center;
4. font-size: 50px;
5. padding-top: 25px;">Learning HTML using Inline CSS</h3>

Output:
..................Column Break..................

Learning HTML using Inline CSS

Internal CSS:

An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML
document. To use Internal CSS, we can use class and id attributes.

External CSS:

An external CSS contains a separate CSS file which only contains style code using the class name,
id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using
<link> tag.

If we have multiple HTML pages for an application and which use similar CSS, then we can use external
CSS.

There are two files need to create to apply external CSS

• First, create the HTML file

9
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

• Create a CSS file and save it using the .css extension (This file only will only contain the styling code.)
• Link the CSS file in your HTML file using tag in header section of HTML document.

CSS Syntax

A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations separated by a semicolon.
For the above example, there are two declarations:

1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color
property.

Selector{Property1: value1; Property2: val ue2; ..........;} CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of CSS
Unable to load the shaperule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc. There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

10
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

CSS Border

The CSS border is a shorthand property used to set the border on an element.

The CSS border properties are use to specify the style, color and size of the border of an element. The CSS
border properties are given below

• border-style
• border-color
• border-width
• border-radius

OOPs (Object Oriented Programming System)

Object-oriented programming is a way of solving a complex problem by breaking them into a

small sub-problem. An object is a real-world entity. It is easier to develop a program by using an object.
In OOPs, we create programs using class and object in a structured manner.

Class: A class is a template or blueprint or prototype that defines data members and methods of an object.
An object is the instance of the class. We can define a class by using the class keyword.

Object: An object is a real-world entity that can be identified distinctly. For example, a desk, a circle can
be considered as objects. An object has a unique behavior, identity, and state.
Data fields with their current values represent the state of an object (also known as its properties or
attributes).

Abstraction: An abstraction is a method of hiding irrelevant information from the user. For example, the
driver only knows how to drive a car; there is no need to know how does the car run. We can make a class
abstract by using the keyword abstract. In Java, we use abstract class and interface to achieve abstraction.

Encapsulation: An encapsulation is the process of binding data and functions into a single unit. A class
is an example of encapsulation. In Java, Java bean is a fully encapsulate.

2.3 Javascript basics

Our JavaScript Tutorial is designed for beginners and professionals both. JavaScript is used to
create client-side dynamic pages.JavaScript is an object-based scripting language which is lightweight
and cross-platform.

JavaScript is not a compiled language, but it is a translated language. The JavaScript Translator
(embedded in the browser) is responsible for translating the JavaScript code for the web browser.
JavaScript (js) is a light-weight object-oriented programming language which is used by several websites
for scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document. It was introduced in the year 1995 for
adding programs to the webpages in the Netscape Navigator browser. Since then, it has been adopted by

11
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

all other graphical web browsers. With JavaScript, users can build modern web applications to interact
directly without reloading the page every time. The traditional website uses js to provide several forms of
interactivity and simplicity.

Although, JavaScript has no connectivity with Java programming language. The name was
suggested and provided in the times when Java was gaining popularity in the market. In addition to web
browsers, databases such as CouchDB and MongoDB uses JavaScript as their scripting and query
language.

Features of JavaScript
There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured
programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using classes for
inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

JavaScript Example

1. Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within
body tag, within head tag and external JavaScript file.

Let’s create the first JavaScript example.

1. <script type="text/javascript">
2. document.write("JavaScript is a simple language for javatpoint learners");
3. </script> Test it Now
The script tag specifies that we are using JavaScript.

The text/javascript is the content type that provides information to the browser about the data.

The document.write() function is used to display dynamic content through JavaScript. We will learn about

12
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

document object in detail later.

3 Places to put JavaScript code

1. Between the body tag of html

2. Between the head tag of html
3. In .js file (external javaScript)

JavaScript Example : code between the body tag

In the above example, we have displayed the dynamic content using JavaScript. Let’s see the simple
example of JavaScript that displays alert dialog box.

1. <script type="text/javascript">
2. alert("Hello Javatpoint");
3. </script>

External JavaScript file

We can create external JavaScript file and embed it in many html page.

It provides code re usability because single JavaScript file can be used in several html pages.

An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a
single file. It increases the speed of the webpage.

Let's create an external JavaScript file that prints Hello Javatpoint in a alert dialog box.

message.js

1. function msg(){
2. alert("Hello Javatpoint"); 3. }

Let's include the JavaScript file into html page. It calls the JavaScript function on button click.

index.html

1. <html>
2. <head>
3. <script type="text/javascript" src="message.js"></script>
4. </head>
5. <body>
6. <p>Welcome to JavaScript</p>
7. <form>
8. <input type="button" value="click" onclick="msg()"/>
9. </form>
10. </body>

13
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

11. </html>

Types of JavaScript Comments

There are two types of comments in JavaScript.

1. Single-line Comment
2. Multi-line Comment

javaScript Variable

A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript :
local variable and global variable.

There are some rules while declaring a JavaScript variable (also known as identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.

2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.

14
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

3.OOPS ASPECTS IN JAVASCRIPT

Object-oriented Programming
Object-oriented Programming treats data as a crucial element in program development and doesn't
allow it to flow freely around the system. It ties data more securely to the function that operates on it and
protects it from accidental modification from an outside function. OOP breaks down a problem into several
entities called objects and builds data and functions around these objects.

Basic concepts of Object-oriented Programming

Objects

Objects are the basic run-time bodies in an object-oriented framework. They may represent a place,
a person, an account, a table of data, or anything that the program needs to handle.
Objects can also represent user-defined data such as vectors, time, and lists.

Consider two objects, “customer” and “account” in a program. The customer object may send a message
requesting the bank balance.

Classes

We know that objects hold the data and the functions to manipulate the data. However, the two can
be bound together in a user-defined data type with the help of classes. Any number of objects can be
created in a class. Each object is associated with the data of type class. A class is therefore a collection of
objects of similar types.

Inheritance
The phenomenon where objects of one class acquire the properties of objects of another class is
called Inheritance. It supports the concept of hierarchical classification. Consider the object “car” that falls
in the class “Vehicles” and “Light Weight Vehicles”.

In OOP, the concept of inheritance ensures reusability. This means that additional features can be added
to an existing class without modifying it. This is made possible by deriving a new class from the existing
one.

OOP Concepts in JavaScript

Now that you are familiar with OOP concepts, this section will show you how JavaScript implements
them.

Creating Objects in JavaScript

• We can create an object using the string literal in JavaScript.

15
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

var student = {

name: "pp", age: 21,

studies: "Computer Science",

};

document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + "

studies " + student.studies;

• Creating objects using the new keyword.

var student = new Object(); student.name =

"pp", student.age=21,

student.studies = "Computer Science";

document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + "

studies " + student.studies;

• Creating an object using the object constructor.

function stud(name, age, studies){ this.name = name;

this.age = age; this.studies = studies;

var student = stud("Chris", 21, "Computer Science"); document.getElementById("demo").innerHTML

= student.name + " of the age " +

student.age + " studies " + student.studies;

16
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

4. AJAX FOR DATA EXCHANGE WITH SERVER JQUERY

FRAMEWORK
Short Description of AJAX

Ajax is only a name given to a set of tools that were previously existing.

The main part is XMLHttpRequest, a server-side object usable in JavaScript, that was implemented in Internet
Explorer since the 4.0 version.

To get data on the server, XMLHttpRequestprovides two methods:

1. open: Creates a connection

2. send: Sends a request to the server

Data furnished by the server will be found in the attributes of the XMLHttpRequestobject:

1. responseXmlfor an XML file, or

2. responseTextfor a plain text

Take note that a new XMLHttpRequestobject has to be created for each new data request.

We have to wait for the data to be available to process it, and in this purpose, the state of availability of
data is given by the readyStateattribute of XMLHttpRequest.

Attributes of XMLHttpRequest Class

1. readyState: The code successively changes value from 0 to 4

0: Not initialized

1: Connection established
2: Request received 3: Answer in process 4:
Finished

2. status: 200 is OK

404 if the page is not found

3. responseText: Holds loaded data as a string of characters.

4. responseXml: Holds an XML loaded file, DOM's method allows to extract data.
5. onreadystatechange: Property that takes a function as value that is invoked when the
readystatechangeevent is dispatched.

Methods of XMLHttpRequest Class

17
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

1. open(mode, url,boolean) : mode: type of request, GET or POST

url: the location of the file, with a path

boolean: true (asynchronous) / false (synchronous)
optionally, a login and a password may be added to arguments

2. send("string"): string: POST data, null for a GET command

3. abort() : Cancels the current HTTP request
4. getAllResponseHeaders(): Retrieves the values of all the HTTP headers
5. getResponseHeader(string): Retrieves the value of an HTTP header from the response body
string: name of http header
6. setRequestHeader(name,value): Adds a new http header in the request
name: name/identifier of the header
value: value of the header

18
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

5. JQUERY EVENTS
jQuery events are the actions that can be detected by your web application. They are used to create
dynamic web pages. An event shows the exact moment when something happens.

These are some examples of events.

• A mouse click
• An HTML form submission
• A web page loading
• A keystroke on the keyboard
• Scrolling of the web page etc.

These events can be categorized on the basis their types:

Mouse Events
• click
• dblclick
• mouseenter
• mouseleave

Keyboard Events
• keyup
• keydown
• keypress

Form Events
• submit
• change
• blur
• focus

Document/Window Events
• load
• unload
• scroll
• Resize

19
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

6. REACT INTRODUCTION
ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI
components. It is an open-source, component-based front end library responsible only for the view layer
of the application. It was created by Jordan Walke, who was a software engineer at Facebook. It was
initially developed and maintained by Facebook and was later used in its products like
WhatsApp&Instagram. Facebook developed ReactJS in 2011 in its newsfeed section, but it was released
to the public in the month of May 2013.

Today, most of the websites are built using MVC (model view controller) architecture. In MVC
architecture, React is the 'V' which stands for view, whereas the architecture is provided by the Redux or
Flux.

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.

To create React app, we write React components that correspond to various elements. We organize
these components inside higher level components which define the application structure. For example, we
take a form that consists of many elements like input fields, labels, or buttons. We can write each element
of the form as React components, and then we combine it into a higher-level component, i.e., the form
component itself. The form components would specify the structure of the form along with elements inside
of it.

Preparing the React App

Installing the create-react-app Package

If you've ever had the chance to try React, you've probably heard about the create-react-app
package, which makes it super easy to start with a React development environment. In this tutorial, we

will use this package to initiate our React app.

So, first of all, make sure you have Node.js installed on your computer. It will also install

npm for you.

In your terminal, run npm install -g create-react-app. This will globally install create-react-app
on your computer.

20
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

Once it is done, you can verify whether it is there by typing create-react-app -V. Creating the React Project

Now it's time to build our React project. Just run create-react-app multi-page-app. You can, of course, replace
multi-page-app with anything you want.

Now, create-react-app will create a folder named multi-page-app. Just type cd multi-page-app
to change directory, and now run npm start to initialize a local server. That's all. You have a React app

running on your local server.

Now it's time to clean the default files and prepare our application.

In your src folder, delete everything but App.js and index.js. Then open index.js and replace the content with
the code below.

import React from'react';

importReactDOMfrom'react-dom';

import App from'./App';

ReactDOM.render(<App />, document.getElementById('root'))

I basically deleted the registerServiceWorker related lines and also the import './index.css'; line. Also, replace

your App.js file with the code below.

import React, { Component } from'react';

class App extends Component {

render() {

return (

<div className="App">

</div>
);

exportdefault App;

21
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

Now we will install the required modules.

In your terminal, type the following commands to install the react-router and react- transition-group
modules respectively.

npm install react-router-dom --save

npm install [email protected] --save

After installing the packages, you can check the package.json file inside your main project directory to verify
that the modules are included under dependencies.

React Forms

HTML form elements work a bit differently from other DOM elements in React, because form
elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:

<form>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="Submit" />
</form>

This form has the default HTML form behavior of browsing to a new page when the user submits
the form. If you want this behavior in React, it just works. But in most cases, it’s convenient to have a
JavaScript function that handles the submission of the form and has access to the data that the user entered
into the form. The standard way to achieve this is with a technique called “controlled components”.

Redux - Data Flow

Redux follows the unidirectional data flow. It means that your application data will follow in one-
way binding data flow. As the application grows & becomes complex, it is hard to reproduce issues and
add new features if you have no control over the state of your application.

Redux reduces the complexity of the code, by enforcing the restriction on how and when state
update can happen. This way, managing updated states is easy. We already know about the restrictions as
the three principles of Redux. Following diagram will help you understand Redux data flow better −

22
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

• An action is dispatched when a user interacts with the application.

• The root reducer function is called with the current state and the dispatched action. The root reducer
may divide the task among smaller reducer functions, which ultimately returns a new state.
• The store notifies the view by executing their callback functions.
• The view can retrieve updated state and re-render again.

23
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

7. JAVA WEB DEVELOPMENT

Web development is known as website development or web application development. The web
development creates, maintains, and updates web development applications using a browser. This web
development requires web designing, backend programming, and database management. The
development process requires software technology.

Web development creates web applications using servers. We can use a web server or machine
server like a CPU. The Web server or virtual server requires web application using technology. Web
development requires server-side programming language or technology. Mostly Java, PHP, and other
server-side languages require for web development.

Java web development creates a server-side website and web application. The majority of Java
web apps do not execute on the server directly. A web container on the server hosts Java web applications.

For Java web applications, the container acts as a runtime environment. What the Java Virtual
Machine is for locally running Java applications, the container is for Java web applications.
JVM is used to run the container itself.

Java distinguishes between two types of containers: web and Java EE. Additional functionality,
such as server load distribution, can be supported by a container. A web container supports Java servlets
and JSP ( JavaServer Pages ). In Java technology, Tomcat is a common web container.

A web container is usually a minimal need for web frameworks. GWT, Struts, JavaServer Faces,
and the Spring framework are common Java web frameworks. Servlets are at the heart of most modern
Java web frameworks.

Functions of Java Web Development

Java web development creates applications and websites using static and dynamic resources. The
static resource refers to HTML pages with images, and a dynamic resource refers to classes, jars,
Servlet, and JSP. Java web development uses several packages, files, and online links. Java web
development requires web archive files known as a WAR files.

Java web development works on three main factors. These development factors show below.

• Front-end web development using Java technology.

• Backend web development using Java server technology.
• Database management using Java database driver.

The above three factors create, update, remove, display and operate data or information.

Front-end web development: The front-end technology interacts with the user and Java interface. It helps
to insert and submit data. Java web development uses JavaServer Pages or JSP for the front-end form or
table.

Backend web development: The backend technology maintains and updates data of the database. Java
uses Servlet, spring, and other advanced technology.

24
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

Database management handles or fetches data from the database using the Java database driver. The Java
technology uses JDBC, Hibernate to handle the database.

Types of the Java Web Technologies

• Servlet API
• JSP (JavaServer page)
• JDBC Driver
• JAVA Persistence
• JavaServer Faces (JSF)
• JSTL
• JAVA Message Service API

Unable to load the graphic

Servlet API (JAVA Web application programming interface)

Servlet, filter, filter chain, servlet config, and other interfaces are available in the javax. Servlet package.
The capabilities of servers that host apps are increased by using Servlet.
The Java Message Service (JMS) API provides a strong tool for resolving enterprise computing
problems by integrating Java technology and enterprise messaging.

Enterprise messaging enables the secure and flexible sharing of business data. The JMS API extends this
by providing a uniform API and provider framework that facilitates the building of portable message-
based Java applications.

Special Features of the Java web development

• Java is a mature, versatile, and powerful programming language.

25
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

• Additionally, it is popular, which means that tools and assistance for Java web development are readily available.
• Java's platform freedom is one of its strongest characteristics. Java code can be executed on any platform,
including a Mac or a Windows computer. On any operating system, we can run a Java web application.
• Java is also capable of running mobile applications on smartphones and tablets.
• Java web development does not require additional effort to design and run web apps across several platforms.
• Java also includes an enormous standard library. This library readily works with common tasks such as input
and output, networking, and graphic user interfaces. It provides tools to help web application developers.

Types of Java Applications

There are four types of Java applications that can be created using Java programming:

• Standalone Applications: Java standalone applications uses GUI components such as AWT, Swing,
and JavaFX. These components contain buttons, list, menu, scroll panel, etc. It is also known as
desktop alienations.
• Enterprise Applications: An application which is distributed in nature is called enterprise
applications.
• Web Applications: An applications that run on the server is called web applications. We use JSP,
Servlet, Spring, and Hibernate technologies for creating web applications.
• Mobile Applications: Java ME is a cross-platform to develop mobile applications which run across
smartphones. Java is a platform for App Development in Android.

26
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

8. RESTful API using Spring Framework

REST has quickly become the de-facto standard for building web services on the web because
they’re easy to build and easy to consume.

There’s a much larger discussion to be had about how REST fits in the world of microservices, but
— for this tutorial — let’s just look at building RESTful services.

Why REST? REST embraces the precepts of the web, including its architecture, benefits, and
everything else. This is no surprise given its author, Roy Fielding, was involved in probably a dozen specs
which govern how the web operates.

What benefits? The web and its core protocol, HTTP, provide a stack of features:

• Suitable actions (GET, POST, PUT, DELETE, …)

• Caching
• Redirection and forwarding
• Security (encryption and authentication)

These are all critical factors on building resilient services. But that is not all. The web is built out
of lots of tiny specs, hence it’s been able to evolve easily, without getting bogged down in "standards
wars".Developers are able to draw upon 3rd party toolkits that implement these diverse specs and
instantly have both client and server technology at their fingertips. By building on top of HTTP, REST
APIs provide the means to build:
• Backwards compatible APIs
• Evolvable APIs
• Scaleable services
• Securable services
• A spectrum of stateless to stateful services

What’s important to realize is that REST, however ubiquitous, is not a standard, per se, but an
approach, a style, a set of constraints on your architecture that can help you build web- scale systems. In
this tutorial we will use the Spring portfolio to build a RESTful service while leveraging the stackless
features of REST.

Maven Prerequisites
For maven to work you need the following installed on your system

1. Java JDK
2. Maven

To install and configure JDK and maven, follow the maven installation guide.

27
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

Build Java Application Using Maven

For this example, we will be using the open-source java spring boot application named pet- clinic.

First, clone the application to your development machine or server.

git clone https://github.com/spring-projects/spring-petclinic.git

The code base has the following important folders and files. It is common in real-time project code as well.

1. /src folder: This folder contains the source code based on the java spring framework.
2. /src/tests folder: This folder contains the unit tests & integration tests of the code under the
tests folder.
3. pom.xml file: It contains all the dependencies required for the pet-clinic applications. As it is an open-source
application, all the dependencies are from the public maven repository.

To build the project, cd into the project root directory. In my case its spring-petclinic. It should contain the
pom.xml file

cd spring-petclinic

From a CI perspective, we just have to build, test, and package the project to create a deployable
artifact(jar file)

So commonly in the CI process, we build and package the java projects using the following maven
command. It compiles the code, tests it, package it as a jar file in the target folder, and will also
install(copy) the jar package in the local .m2 repository.

mvn clean install

After executing the above command, you will see a folder named target in the root directory. Inside
the target directory, you will see the packaged jar file as shown below. We call it a deployable artifact.

28
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

9. DATABASES & DEPLOYMENT

Functional dependency defines the relationship of two or more attributes, typically between the
primary key and non-key attributes of another table. It is also defined by the relation of one attribute to
another attribute in DBMS.

empId → { empName, skill, dependent, contract, project}, → Here, empId can determine or defines the
values of fields empName, dependent, contract and employee project

Username Tables:

userName → dateCreate here if we can know the userName like we have email account if we know the
email Id of user then there is possibility to find the date when account was created.

Multivalued Dependency:

Multivalency Dependency occurs in such a condition or time when two or more attributes in table
are independent to each other but, both of them depend upon the third attributes.

Employee Table:

The attributes like empName, skill, dependent, contract, project all are independent of each other
means not depends on one another but depends upon empId example empName can determine skill, or
any other employee attribute because there can be or even more than one employee with same name or
constraints.

empId->skill empId-> contract empId-> project empId-> dependent These all of the columns is the

multivalued dependency on the empId Username Table:

We only have two attributes here, but there are no multiple attributes that are independent of each
other but rely solely on the third variable.

userName → dateCreate here dateCreate is an attribute that depends or relate upon the userName only

dateCreate when there is not sufficient to find anything. b)

Minimal key is the minimum no of attributes which can find out other attributes of a table
SQL (Structured Query Language) is used to perform operations on the records stored in the database,
such as updating records, inserting records, deleting records, creating and modifying database tables,
views, etc.

SQL is not a database system, but it is a query language.

Suppose you want to perform the queries of SQL language on the stored data in the database. You are
required to install any database management system in your systems, for example, Oracle, MySQL,

29
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

MongoDB, PostgreSQL, SQL Server, DB2, etc.

SQL is a short-form of the structured query language, and it is pronounced as S-Q-L or sometimes
as See-Quell.

This database language is mainly designed for maintaining the data in relational database
management systems. It is a special tool used by data professionals for handling structured data (data
which is stored in the form of tables). It is also designed for stream processing in RDSMS.

You can easily create and manipulate the database, access and modify the table rows and columns,
etc. This query language became the standard of ANSI in the year of 1986 and ISO in the year of 1987.

If you want to get a job in the field of data science, then it is the most important query language to
learn. Big enterprises like Facebook, Instagram, and LinkedIn, use SQL for storing the data in the back-
end.
Structured Query Language contains the following four components in its process:

• Query Dispatcher
• Optimization Engines
• Classic Query Engine
• SQL Query Engine, etc.

The SQL commands help in creating and managing the database. The most common SQL
commands which are highly used are mentioned below:

1. CREATE command
2. UPDATE command
3. DELETE command
4. SELECT command
5. DROP command
6. INSERT command

30
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

SQL vs No-SQL

The following table describes the differences between the SQL and NoSQL, which are necessary to
understand:

SQL No-SQL

1. SQL is a relational database 1. While No-SQL is a non-relational

management system. or distributed database management
system.
2. The query language used in 2. The query language used in the
this database system is a No-SQL database systems is a non-
structured query language. declarative query language.
3. The schema of SQL 3. The schema of No-SQL databases
databases is predefined, fixed, is a dynamic schema for
and static. unstructured data.

31
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

CONCLUSION

In conclusion, the MERN stack presents a robust and efficient solution for developing modern web
applications. MongoDB offers a flexible and scalable NoSQL database, while Express.js simplifies
backend development with its minimalist web application framework. React.js enhances frontend
development by enabling the creation of reusable UI components and providing a virtual DOM for
optimized performance. Node.js ties everything together by allowing server-side JavaScript execution,
facilitating the creation of scalable and high-performance web servers and APIs. Together, these
technologies provide developers with a comprehensive toolkit for building real-time, scalable, and feature-
rich applications. However, it's essential to carefully evaluate project requirements, team expertise, and
scalability needs before choosing the MERN stack or any other technology stack for a given project.

32
Department Of ECE, BITS Vizag
 FULL STACK DEVELOPMENT(MERN) INTERNSHIP

Certificate of completion of internship organised by SmartBridge in

collabration with Andhra Pradesh State Council of Higher Education

33
Department Of ECE, BITS Vizag