A

REPORT
On
"Full Stack Using MERN with DevOps Tools”
(Under Industrial Training)
Submitted to Rajasthan Technical University
In partial fulfillment of the required for the award of the degree of
Bachelor of Technology
In
COMPUTER SCIENCE & ENGINEERING
Submitted By-
Name (Roll No.)

Under the Guidance of

Ms. Rama Bhardwaj
(Asst. Professor, Department of CSE)
At

VIVEKANANDA INSTITUTE OF TECHNOLOGY, JAIPUR

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
November 2023
Certificate Copy
 VIVEKANANDA INSTITUTE OF
TECHNOLOGY
(Approved by AICTE, New Delhi | Affiliated to RTU Kota,
Rajasthan)

CANDIDATE’S DECLARATION

It is hereby declared that the work, which is being presented in the Industrial
Report titled "Full Stack Using MERN with DevOps Tools” in partial
fulfilment of the award of Bachelor of Technology in Computer Science and
Engineering and submitted in the department of Computer Science Engineering
of Vivekananda Institute of Technology, Jaipur is an authentic record of the
work under the supervision and valuable guidance of Ms. Rama Bhardwaj Asst.
Professor, Dept. of Computer Science & Engineering. The matter presented in
the report embodies the result of the studies carried out by the student and has
not been submitted for the award of any other degree in this or any other
institute.

Name
Roll No. 20EVJCS032

Place: JAIPUR
Date:20-06-23 to 15-09-23
 ACKNOWLEDGMENT

We take this opportunity to express my deepest gratitude to those who

have generously helped me in providing valuable knowledge and
expertise during my training.
It is a pleasure to represent this report on the project named "Full Stack
Using MERN with DevOps Tools” undertaken by me as part of my
B.Tech (CSE) curriculum. I am thankful to the Vivekananda Institute of
Technology for offering me such a wonderful and challenging
opportunity.
It is a pleasure that we find ourselves penning down these lines to express
our sincere thanks to the people who helped us along the way in
completing our project. We find inadequate words to express our sincere
gratitude towards them.
I express my sincere gratitude to Dr. Dhiraj Singh (Principal, VIT) for
providing me with an opportunity to undergo this major project as part of
the curriculum. I am thankful to Ms. Rama Bhardwaj (Assistant
Professor) for her support, co-operation, and motivation provided to me
during training for constant inspiration, and blessings. I would also like to
thank my Batch Counsellor for her valuable suggestions which helped a
lot in the completion of this project
Lastly, I would like to thank the almighty and my parents for moral
support and friends with whom I share my day-to-day experience and
receive lots of suggestions that improve my quality of work.

Name: Roll No.:

20EVJCS032
 ABSTRACT

This course aimed to understand what MERN stack is and gain an

appreciation for the most popular web development stack and use it build
industry grade projects and web applications.
The MERN stack is one of the most popular stacks currently used in web
development. It’s composed of MongoDB, Express.js, React, and
Node.js.
In this program, we learned how MERN stack includes the latest and
most popular libraries for development like React and express. The main
purpose of using MERN stack is to develop apps using JavaScript only.
Alongside MERN stack we also learnt about how these local web apps
are made available to the clients and how production or deployment
requires knowledge of DevOps frameworks and platforms like Docker
and Kubernetes.
We also learnt about a single DevOps platform called as GitLab which
provides complete CI/CD pipeline in one single platform.
The main aim of the training was to learn and understand how different
frameworks and libraries come together to make a fully-functional web
app or product.
 TABLE OF CONTENTS

CONTENT PAGE NO
Declaration i

Acknowledgment ii

Abstract iii

Table of content iv

Contents v
CONTENTS

CHAPTER – 1 INTRODUCTION
1.1 Objectives
1.2 Project Goals

CHAPTER – 2 PROJECT ENTERPRISE

2.1 About the Institution

CHAPTER – 3 COURSE CONTENT and TOOLS

3.1 Front-end
3.1.1 HTML
3.1.2 CSS
3.1.3 BootStrap
3.1.4 React
3.2 Backend
3.2.1 JavaScript
3.2.2Node
3.2.3 express
3.2.4MongoDB
3.3 Devops
3.3.1 Docker
3.3.2 Kubernetes
3.3.3 GitLab

CHAPTER – 4 Projects during the Training

4.1 Live HTML Interpreter
4.2 Container Management Tool
 Chapter - 1
INTRODUCTION

The purpose of this report is to give a brief idea about the training Full
Stack Using MERN with DevOps Tools. In this report, we have
mentioned all the tools and technologies used for the completion of the
training. We had also given a brief detail about the organization and the
frameworks used for the completion of the project.

1.1 Objective
This training taught us how web development (Full Stack) is one of the
essential parts of tech world and learning web development gives
knowledge about so many concepts of the internet and it’s working.
The project is off duration about 75 days. It needed to provide two to
four hours daily for the completion of the training on time.

1.2 Project goals

After the completion of the project, we were able to -
 Understand web and software development concepts.
 Understand how critical websites and internet works.
 Understand different frameworks and libraries used and required for
development of different components of a website.
 Understand behind the scene working of databases, servers, containers
and many other concepts.
 Chapter - 2
PROJECT ENTERPRISE

2.1 About the Institution

The training is provided by LWIndia. LinuxWorld, short for LW, is a
technology and training solutions company based in Jaipur, India. For
around a decade now, the company has successfully built a niche of its
own by offering an integrated portfolio of high-end Linux, Open Source
& Security trainings and support services. The solutions offered aim to
significantly empower organizations of all shapes and sizes including
SMEs, MNCs, and educational institutes to cultivate the true power of
technology. LinuxWorld Informatics Pvt Ltd is driven by a team of
certified professionals under the dynamic leadership of Mr. Vimal Daga
and the company’s solutions are backed by state-of-the-art
infrastructure.
About the Instructor
The training program is instructed and mentored by Mr. Vimal Daga.
The World Record Holder Mr. Vimal Daga is a Technologist,
Philanthropist & A TEDx Speaker who is dedicatedly working towards
his vision- “Making India, Future Ready” by guiding students.
He is the first one in the world to become "RedHat Certified Architect
Level 23 along with Enterprise Application-Level 9". He has expertise
in multitude of latest and high-end technologies namely Machine
Learning, Deep Learning, Delphix, AppDynamics, Docker, DevOps,
Cloud Computing, AWS, and many more.
 Chapter - 3
COURSE CONTENT

Full stack development: It refers to the development of both front end

(client side) and back end (server side) portions of web application.
3.1 Front-end
It is the visible part of website or web application which is responsible for user
experience. The user directly interacts with the front-end portion of the web
application or website. Human or digital users interact directly with various
aspects of the front end of a program, including user-entered data, buttons,
programs, websites and other features.
Concepts and components that focus on the front end of a system include:
 Design and markup languages like HTML, CSS and JavaScript.
 Search engine optimization (SEO).
 Usability and accessibility testing.
 Graphic design and image editing tools.
 Web performance and browser compatibility.
 Frontend Frameworks and Libraries like Angular.js, React.js, Vue.js,
jQuery

3.1.1 HTML
The Hypertext Markup Language or HTML is the standard markup
language for documents designed to be displayed in a web browser. It
can be assisted by technologies such as Cascading Style Sheets (CSS)
and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from
local storage and render the documents into multimedia web pages.
HTML describes the structure of a web page semantically and originally
included cues for the appearance of the document.
HTML consists of a series of elements, which you use to enclose, or
wrap, different parts of the content to make it appear a certain way, or
act a certain way.
The enclosing tags can make a word or image hyperlink to somewhere
else, can italicize words, can make the font bigger or smaller, and so on.
HTML concepts learnt in training are:
 HTML Tags
 Texts, Images, Videos
 Lists, Forms, Tables
 Links, Anchor tags
 HTML Divs and many more...

3.1.2 CSS
Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML or XML (including XML dialects
such as SVG, MathML or XHTML). CSS describes how elements should be
rendered on screen, on paper, in speech, or on other media.
CSS handles the look and feel part of a web page. Using CSS, you can control
the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used,
layout designs, variations in display for different devices and screen sizes as
well as a variety of other effects.

CSS concepts learnt during training are:

 Inline vs Internal vs External styling

 CSS Display
 CSS Font Styling, background, margin, padding
 Styling Lists, Tables, Forms
 Font Awesome
 Transitionals, Transformations, Animations
 Styling button

3.1.3 Bootstrap

Bootstrap is a giant collection of handy, reusable bits of code written in HTML,

CSS, and JavaScript. It’s also a frontend development framework that enables
developers and designers to quickly build fully responsive websites.
A website is called responsive website which can automatically adjust itself to
look good on all devices, from smart phones to desktops etc.
At present, millions of website designers across the world use the Bootstrap
framework to construct well-performing, functional, and flawless websites.
Concepts learnt in training:
 Bootstrap containers
 Bootstrap Tables, Images, Colors
 Bootstrap Alerts, Buttons
 Bootstrap Spinners, Cards, Pagination, Drop Down
 Bootstrap Carousel

3.1.4 React.js
React is a JavaScript-based User Interface development library. Meta (formerly
Facebook) and an open-source developer community run it.
Although React is a library rather than a language, it is widely used in web
development. The library first appeared in May 2013 and is now one of the most
commonly used frontend libraries for web development.
React offers various extensions for entire application architectural support, such
as Flux and React Native, beyond mere UI.
React Features
 JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in
React development, but it is recommended.
 Components − React is all about components. We need to think of
everything as a component. This will help us maintain the code when
working on larger scale projects.
 Unidirectional data flow and Flux − React implements one-way data flow
which makes it easy to reason about your app. Flux is a pattern that helps
keeping your data unidirectional.
Concepts learnt during training:
 ES6ObjectsandArrays Promises
 Classes
 TheVirtualDOM
 ReactElements
 ReactDOM
  Children
 ConstructingElementswithData
 ReactComponents
 DOMrendering
 Props, State and the Component Tree
 PropertyValidation
 IncorporatingtheRouter
 NestingRoutes
 RouteParameters

3.2 Backend
Back-end Development refers to the server-side development. It focuses on
databases, scripting, website architecture.
It contains behind-the-scene activities that occur when performing any action on
a website. It can be an account login or making a purchase from an online store.
It is the portion of software that does not come in direct contact with the users.
The parts and characteristics developed by backend designers are indirectly
accessed by users through a front-end application. Activities, like writing APIs,
creating libraries, and working with system components without user interfaces
or even systems of scientific programming, are also included in the backend.
Backend Languages: PHP, JavaScript, Python, Node.js (Runtime environment
for JS)
Backend Frameworks: Express, Django, Ruby on Rails, Spring

3.2.1 JavaScript
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 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.
JavaScript is primarily known as the “language of browsers,” and it is used for
web-based applications.
The role of JavaScript in backend development is to make changes to the
existing web page. HTML/CSS just makes a page, but it doesn’t help in
displaying/updating new data, use popups, etc. To change the button’s color
while the mouse hovers on it, add popups and dropdowns; it’s all done using
JavaScript, with some exceptions in CSS.

3.2.2 Node.js
Node.js is an open source, cross-platform runtime environment and library that
is used for running web applications outside the client’s browser.
It is used for server-side programming, and primarily deployed for non-
blocking, event-driven servers, such as traditional web sites and back-end API
services, but was originally designed with real-time, push-based architectures in
mind. Every browser has its own version of a JS engine, and node.js is built on
Google Chrome’s V8 JavaScript engine. Sounds a bit complicated, right?
In simple terms, what this means is that entire sites can be run using a unified
‘stack’, which makes development and maintenance quick and easy, allowing
you to focus on meeting the business goals of the project.
The fact that Node.js is open-source means that it is free to use and constantly
being tweaked and improved by a global community of developers.
An important thing to understand about Node.js is that it is actually neither a
framework or a library - as with traditional application software -, but a runtime
environment.
A runtime environment (sometimes shortened to RTE) contains Web API’s that
a developer can access to build a code, and a JavaScript engine that parses that
code. This makes it lightweight, flexible and easy to deploy, all features that
will help to optimize and speed up your application project.

3.2.3 express.js
Express is a node js web application framework that provides broad features for
building web and mobile applications. It is used to build a single page,
multipage, and hybrid web application.
It's a layer built on the top of the Node js that helps manage servers and routes.
Express.js is a framework of Node.js which means that most of the code is
already written for programmers to work with. Express.js is lightweight and
helps to organize web applications on the server side into a more organized
MVC architecture. Following are some of the core features of Express
framework −
 Allows to set up middleware to respond to HTTP Requests.
 Defines a routing table which is used to perform different actions based
on HTTP Method and URL.
 Allows to dynamically render HTML Pages based on passing arguments
to templates.

Concepts learnt:
 ExpressRequest
 ExpressResponse
 ExpressGet
 ExpressPost
 Express Routing
 Express Middleware
 Express Template Engine

3.2.4 MongoDB
MongoDB is an open-source document-oriented database that is designed to
store a large scale of data and also allows you to work with that data very
efficiently. It is categorized under the NoSQL (Not only SQL) database because
the storage and retrieval of data in the MongoDB are not in the form of tables.
The MongoDB database is developed and managed by MongoDB.Inc under
SSPL (Server-Side Public License) and initially released in February 2009.
MongoDB’s document model is simple for developers to learn and use, while
still providing all the capabilities needed to meet the most complex
requirements at any scale. We provide drivers for 10+ languages, and the
community has built dozens more.
 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 your application code, making
data easy to work with
  Ad hoc queries, indexing, and real time aggregation provide powerful
ways to access and analyze your data
 MongoDB is a distributed database at its core, so high availability,
horizontal scaling, and geographic distribution are built in and easy to use

3.3 DevOps
DevOps is a set of practices that combines software development (Dev) and IT
operations (Ops). It aims to shorten the systems development life cycle and
provide continuous delivery with high software quality.DevOps is
complementary with Agile software development; several DevOps aspects came
from the Agile way of working.
DevOps practices enable software developers (dev) and operations (ops) teams
to accelerate delivery through automation, collaboration, fast feedback, and
iterative improvement.
Components of DevOps Pipeline:
Docker (container tool for deployment)
Kubernetes (for container orchestration and
operation) GitHub (Source code and Version
Controlling) GitLab (Comprehensive DevOps tool)

3.3.1 Docker
The Docker tool was designed for developers and system administrators, an
essential part of DevOps. With Docker, developers can focus on application
development rather than being worried about the platform where it will run.
Docker is a software platform that allows you to build, test, and deploy
applications quickly.
Docker packages software into standardized units called containers that have
everything the software needs to run including libraries, system tools, code, and
runtime. Using Docker, you can quickly deploy and scale applications into any
environment and know your code will run.

3.3.2 Kubernetes
Kubernetes, also known as K8s, is an open-source system for automating
deployment, scaling, and management of containerized applications.
Kubernetes is the most popular container orchestration platform, and has
become an essential tool for DevOps teams. Application teams can now deploy
containerized applications to Kubernetes clusters, which can run either on-
premises or in a cloud environment.
The use of containers and Kubernetes ensures that applications and
infrastructure always deploy and behave the same way, due to immutability.
Kubernetes provides infrastructure abstraction that completely automates
deployment and provisioning, eliminating the need for configuration of
individual software components.
Kubernetes creates a clear separation between operating runtime infrastructure
and deploying applications. IT staff can focus on managing Kubernetes clusters
and addressing issues like capacity management, infrastructure monitoring,
disaster recovery, networking, and security. Application teams can focus on
building container images, deploying and configuring Kubernetes manifest
YAML, and managing secrets.
A Kubernetes infrastructure eases the burden on both operations and application
teams and improves collaboration. Instead of having to coordinate between
multiple stakeholders to get an environment launched or an application
deployed, all this can be done from a shared, declarative configuration.

3.3.3 GitLab
GitLab is a web-based Git repository that provides free open and private
repositories, issue-following capabilities, and wikis. It is a complete DevOps
platform that enables professionals to perform all the tasks in a project—from
project planning and source code management to monitoring and security.
Additionally, it allows teams to collaborate and build better software.
GitLab helps teams reduce product lifecycles and increase productivity, which
in turn creates value for customers. The application doesn't require users to
manage authorizations for each tool. If permissions are set once, then everyone
in the organization has access to every component.
The main benefit of using GitLab is that it allows all the team members to
collaborate in every phase of the project.
GitLab offers tracking from planning to creation to help developers automate
the entire DevOps lifecycle and achieve the best possible results. More and
more developers have started to use GitLab because of its wide assortment of
features and brick blocks of code availability.

Chapter - 4
Projects done during the internship
There were several mini projects competed during the training and few of
them are listed in the report.
Several mini projects like Game building, to-do list, weather app are not
listed to ensure the report does not become bulky.

4.1 Live HTML and CSS Interpreter

It was one of the starting projects built using the concepts of VanillaJS
and core HTML and CSS.
Here we built a live HTML and CSS interpreter which takes the CSS
and html code and displays the interpreted live on the output screen.

4.2 Container Management Tool (CMT)

The Container Management Tool (CMT) aims to provide both the
Graphical and Command line interface to users for easy and hassle-free
implementation of container and container management tools like
Docker and Kubernetes. The main goal is to present users having limited
knowledge of container technologies with a sophisticated graphical
interface to make their jobs easier and save their time and effort.
We can connect the CMT to our host system, either it is a local system
or hosted on the cloud using the IP address of the system. The project
also provides a CLI based Linux operating system interface which could
be used for implementation of Linux based commands on the host
system.
The main component of the project is the Docker tab. It further has
options of GUI, CLI, Tutorials, Official Documentation and Docker
Hub. The GUI part contains various buttons which provide the most
used and relevant functionalities of Docker like listing containers, listing
images,
running containers etc. The options which require some user inputs like
name and image name are also provided using an input box.
Along with GUI we also provided the CLI so that user has more
freedom for Execution of various commands.
Other options like Tutorials and Documentation for Docker are also
provided if the user gets stuck somewhere or needs advanced commands
and options from Docker tool. The last option “Docker Hub” is the
official library containing various container images which the user can
install in the host system based on its needs.

Fig. Pictures of Frontend of both the projects

Fig. Pictures of Frontend of both the projects