Building UI and Building Pipelines

A Project Report

Submitted in fulfilment of the Requirement for the award of the

degree of
Master of Computer Applications
(Batch 2019- 2022)
To
Department of Computer Applications, National Institute of
Technology, Kurukshetra

By
Sumit Varshney
(51910005)

Under the supervision of

Mr. Devgaonkar, Mayur Sanjay
Deloitte Consulting India Pvt. Ltd.

DEPARTMENT OF COMPUTER APPLICATIONS

NATIONAL INSTITUTE OF TECHNOLOGY, KURUKSHETRA
June 2022
INTERN CERTIFICATE
 DECLARATION

I hereby declare that the work which is being presented in this project report entitled
“Building UI and Building Pipelines”, in fulfilment of the requirement for the award of
the degree of Master of Computer Applications submitted to the Department of
Computer Applications, National Institute of Technology, Kurukshetra is an authentic
work done by me during a period from 17th January 2022 to 24th June 2022 under the
Guidance of Mr. Devgaonkar ,Mayur Sanjay in Deloitte Consulting India Pvt. Ltd.

The work presented in this project report has not been submitted by me for the award of
any other degree of this or any other Institute/University.

Sumit Varshney
51910005

This is to certify that the above statement made by the candidate is correct to best of
my knowledge and belief. Further, during the above mentioned period he worked
regularly.

Date: 06/2022 Signature

Place: Bengaluru Mr. Devgaonkar, Mayur Sanjay
Deloitte Consulting India Pvt. Ltd.

i
 ACKNOWLEDGEMENT

The joy and satisfaction of completing this project successfully would be incomplete
without giving special thanks to the people who made it possible. I would like to express
my sincere thanks to the Deloitte Consulting India Pvt. Ltd. for this opportunity.

I would like to thank Mr. Devgaonkar, Mayur Sanjay, mentor, without the support of
whom this project would not have been possible. He kept on guiding me throughout the
project for the various aspects of project as well as various know-hows of how to take-on
an idea and build a successful startup. Without his advice and constructive suggestions, I
would not have been able to contribute to this project successfully. He believed in me and
continuously encouraged us to follow the best practices for the project. He always came
with a solution to my problems whenever I was stuck somewhere. I am greatly indebted
to him for his continuous support and guidance at all the project stages.

I would like to express my special gratitude and thank my guide Dr. Ashutosh Kumar
and Dr. Sarika Jain, Assistant Professor, Department of Computer Applications,
National Institute of Technology, Kurukshetra for providing her esteemed guidance,
immense support, and encouragement throughout my college duration. I am thankful to
all the faculty members of Department of Computer Applications, National Institute of
Technology, Kurukshetra, for the valuable information provided by them in their
respective fields and grateful for their cooperation.

Last but not the least, I would like to acknowledge my co-intern and all other people
directly or indirectly involved in this project for their excellent co-operation in the
project.

SUMIT VARSHNEY

ii
 ABSTRACT

In the good old days of web development, things were simple. You created a directory, maybe
some subdirectories, if you were a bit more organized, and into it, you poured all your resources:
a stylesheet or two here, a sprinkling of images, some HTML files, and a heaping helping of
JavaScript files. Then, a single HTML file served as your entry point, and it would go out and
load, by way of script tag references, to load all your JavaScript files, as well as your CSS files
and images.
Nowadays you can do a lot more stuff in modern browsers, and this is going to increase even
more in the future. Thanks to technologies like Angular 5 and React, there will be fewer page
reloads and more JavaScript code in each page, a lot of code on the client side. You need a way
to deploy all this code efficiently so that it loads quickly.
So to get all the latest features and make it compatible with all the browsers and at the same time
maintain the simplicity of development of all the cross compatible code, make it load faster and
also not hamper security at the same time seems like a huge task. This is where Webpack and
babel can save a lot of efforts to form a build process that takes all the heavy lifting and provides
a pleasant developer experience to develop with latest ECMA script versions

Keywords: React, Html, CSS, Webpack, Web development.

iii
 LIST OF FIGURES

Figure No. Figure Caption Page No.

Fig. 1 Deloitte 2

Fig. 2 Emergency Broadband Program 5

Fig. 3 Web Development 6

Fig 4 Frontend Roadmap 7

Fig. 5 Backend Roadmap 9

Fig. 6 Full Stack Technologies 10

Fig. 7 Support Tool Browses 14

Fig. 8 React Dev Tools 15

Fig. 9 React Dev Tools 16

Fig. 10 Agile SDLC 17

Fig. 11 Agile SDLC Process Flow 19

Fig. 12 Agile Scrum Methodology 22

Fig. 13 CI/CD process with automated Code Review 25

Fig. 14 Branching practice for Code 26

Fig. 15 Teams Benefits 30

Fig. 16 Web Browsers 31

Fig. 17 Outlook 32

Fig. 18 Meeting Invite in Outlook 33

Fig. 19 GitHub 34

Fig. 20 Adobe Experience Manager 35

Fig. 21 Jenkins Architecture 36

Fig. 22 Jira Software 36

Fig. 23 Daily Travel Pass 39

Fig. 24 Data Estimator Form 39

iv
Figure No. Figure Caption Page No.

Fig. 25 Pipeline Stage View 40

Fig. 26 Pipeline on Jenkins 40

Fig. 27 Flow Chart of MMR 41

Fig 28 Pipeline of MMR 42

Fig. 29 Auto Merge Pipeline 45

v
 TABLE OF CONTENTS

Company Certificate
Declaration i
Acknowledgement ii
Abstract iii
List of Figures iv
Table of Contents v

Chapter Description Page No.

No.

CHAPTER 1: INTRODUCTION……………………………………………………………1
1.1 ABOUT THE COMPANY…………………...……………………………………1
1.2 OPERATIONS IN INDIA…………………………………………………………3
1.3 HISTORY………………………………………………………………………….3
1.4 ABOUT PROJECT………………………………………………………………...4
1.5 ABOUT CLIENT…………………………………………………………………..5
CHAPTER 2: LITERATURE REVIEW……………………………………………………6
2.1 WEB DEVELOPMENT………………………………………………………..…...6
2.1.1 Frontend development………………………………….…………………7
2.1.2 Backend development…………………………………….……………….8
2.1.3 FullStack Development…………………………………………………..10
2.2 WEB DEVELOPMENT TOOLS……………………………………………..…...13
2.2.1 Support Tool Browsers…………………………………….………….……14
2.2.2 React-Dev-Tool…………………...…………………………………………15
2.3 WEB DEVELOPMENT LIFE CYCLE…………………………………...…..…..16
2.3.1 Agile SDLC…………………….…………………………………….….16
2.3.2 Agile SDLC Process Flow…………………………………………………18

vi
CHAPTER 3: PROJECT OBJECTIVE………………………………………………….20
3.1 ON USER’S SIDE…………………………………………………………………20
3.2 ON DEVELOPER’S SIDE………………………………………………………...20
CHAPTER 4: METHODOLOGY…………………………………………………………21
4.1 AGILE SCRUM DEVELOPMENT METHODOLOGY…………………………21
4.2 TOOLS USED…………………………………………………………………….29
4.2.1 Software…………………………………………………………………….29
4.2.2 Hardware……………………………………………………………………37
4.3 TECHNOLOGIES………………………………………………………………..37
4.3.1 React……………………………………………………………………….37
4.3.2 Node……………………………………………………………………….37
4.3.3 Redux………………………………………………………………………37
4.3.4 React Hooks………………………………………………………………..38
4.3.5 JavaScript…………………………………………………………………..38
4.4 MY CONTRIBUTION…………………………………………………………..38
4.4.1 Building UI…………………………………………………………………38
4.4.2 Building Pipelines………………………………………………………….39
4.4.3 Worked on MMR and AMT………………………………………………...40
CHAPTER 5 CONCLUSION & FUTURE SCOPE……………………………………….48
REFERENCES……………………………………………………………………………….49

vii
 Chapter 1: INTRODUCTION

1.1 ABOUT THE COMPANY

Deloitte Touche Tohmatsu Limited commonly referred to as Deloitte, is a multinational

professional services network with offices in over 150 countries and territories around the
world. Deloitte is one of the Big Four accounting organizations and the largest
professional services network in the world by revenue and number of professionals, with
headquarters in London, England. The firm was founded by William Welch Deloitte in
London in 1845 and expanded into the United States in 1890. The international firm is a
UK private company, limited by guarantee, supported by a network of independent legal
entities. Deloitte provides audit, consulting, financial advisory, risk advisory, tax, and
legal services with approximately 312,000 professionals globally. In FY 2020, the
network earned a record US $47.6 billion in aggregate revenues. As of 2020, Deloitte is
the 3rd-largest privately owned company in the United States, according to Forbes.
• Services: Deloitte member firms offer services in the following functions, with
country-specific variations on their legal implementation (i.e., all operating within a
single company or through separate legal entities operating as subsidiaries of an
umbrella legal entity for the country).

• Audit: Audit provides the organization's traditional accounting and audit services, as
well as internal auditing, IT control assurance and Media & Advertising Assurance.
In 2018, its audit business grew by 7.7%.

• Consulting: Consulting assists clients by providing services in the offering areas of

Strategy, Analytics and M&A, Customer and Marketing, Core Business Operations,
Human Capital, and Enterprise Technology and Performance. Consulting is
Deloitte's largest business, bringing over 40% of total revenues in 2020.

• Financial advisory: Financial advisory provides corporate finance services to

clients, including dispute, personal and commercial bankruptcy, forensics, e-

1
 discovery, document review, advisory, mergers & acquisitions, capital projects
consulting and valuation services. In 2018, Deloitte’s financial advisory business
grew by 8%.

• Risk advisory: Risk advisory provides offerings in enterprise risk management,

information security and privacy, data quality and integrity, strategic & reputation
risk, regulatory risk, project risk and cyber risk, and business continuity
management and sustainability. In 2018, Deloitte’s risk advisory business grew by
12%.

• Tax and legal: Tax & legal helps clients increase their net asset value, undertake the
transfer pricing and international tax activities of multinational companies, minimize
their tax liabilities, implement tax computer systems, and provides advisory of tax
implications of various business decisions. In 2018, tax & legal grew by 8.7%.

Figure 1: Deloitte Office

2
1.2 OPERATIONS IN INDIA

Deloitte has two entities in India - Deloitte India and Deloitte US-India (USI), which is a
region within the Deloitte US organization, with offices across four cities in India
(Hyderabad, Mumbai, New Delhi, and Bengaluru). Deloitte India caters to clients within
India, while Deloitte USI is an entity of Deloitte US that is geographically located in
India and caters to clients of the US member firm.

1.3 HISTORY

In 1845, William Welch Deloitte opened an office in London, United Kingdom. Deloitte
was the first person to be appointed an independent auditor of a public company, namely
the Great Western Railway. He went on to open an office in New York in 1880.

At the time of the US-led mergers to form Deloitte & Touche, the name of the
international firm was a problem, because there was no worldwide exclusive access to the
names "Deloitte" or "Touche Ross" – key member firms such as Deloitte in the UK and
Touche Ross in Australia had not joined the merger. The name DRT International was
therefore chosen, referring to Deloitte, Ross and Tohmatsu. In 1993, the international
firm was renamed Deloitte Touche Tohmatsu.

In October 2016, Deloitte announced that they were creating Deloitte North West Europe.
The Belgian, Danish, Dutch, Finnish, Icelandic, Norwegian, and Swedish member firms
will combine with the UK and Swiss member firms to create Deloitte North West
Europe. Deloitte, over the next three years, will invest €200m to enhance its services to
its global, national and private market clients and to create the best development
opportunities. The firm will come into effect on 1 June 2017 and it is estimated to have
28,000 partners and people generating over €5bn in annual revenue. Deloitte North West
Europe will account for approximately 20% of all revenue within their Global Network.

3
1.4 ABOUT PROJECT

The client belongs to a telecom sector which connects 5 million people, businesses and
government operations with award-winning network. And always looking for ways to make user
experience with communication services and products even better. To stay on top of market
telecom companies provide various services through their web portals(selling the devices along
with plans[normal customers] , providing emergency broadbands[situation base customers] ,
providing services to government[business and government customers]).

For the normal customers we have various plans like business plans , international travel plans
and specialty plans and many more. The Emergency Broadband Program is a government
program that reduces your broadband Internet access service bill. The program is temporary in
nature and, at the conclusion of the program, your bill will return to pre-program rates and terms
and conditions, if you continue to receive service. You may receive this benefit, once at the
household level, from a participating provider and may transfer their EBB Program benefit to
another provider at any time.

The objective of this project is to make use of components again and again and provides
flexibility to the users.

4
 Figure 2 Emergency Broadband Program

1.5 ABOUT CLIENT

Our client is a front runner in the telecom industry. The client belongs to a telecom entity to be
specific a Mobile Network Operator. A mobile network operator (MNO) is a telecoms entity that
provides wireless voice and data services to mobile phone subscribers. They have the ability to
provide customers with wireless devices as well as service how the device connects to their
network.

5
 Chapter 2 : LITERATURE REVIEW

2.1 WEB DEVELOPMENT

Web development refers to the building, creating, 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. Web development is the
building and maintenance of websites; it's the work that happens behind the scenes to make a
website look great, work fast and perform well with a seamless user experience. Web developers,
or 'devs', do this by using a variety of coding languages. The languages they use depends on the
types of tasks they are preforming and the platforms on which they are working. Web
development skills are in high demand worldwide and well paid too – making development a
great career option. It is one of the easiest accessible higher paid fields as you do not need a
traditional university degree to become qualified.

The word Web Development is made up of two words, that is:

 Web: It refers to websites, web pages or anything that works over the internet.
 Development: Building the application from scratch.

Figure 3 Web Development

6
Web development is categorized into three parts:

1.1 Frontend development

1.2 Backend Development
1.3 Full stack development

2.1.1 FRONTEND DEVELOPMENT

The part of a website that the user interacts directly is termed as front end. It is also referred to as
the ‘client side’ of the application.

Figure 4 Frontend Roadmap

 HTML: HTML stands for HyperText Markup Language. It is used to design the front
end portion of web pages using markup language. It acts as a skeleton for a website since
it is used to make the structure of a website.
 CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. It is used to style our
website.
 JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our
website.

7
 Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular CSS framework for developing
responsive, mobile-first websites. Nowadays, the websites are perfect for all the browsers
(IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and
Phones).
 Bootstrap 4
 Bootstrap 5

Frontend Frameworks and Libraries:

 AngularJS
 React.js
 VueJS
 jQuery
 Bootstrap
 Material UI
 Tailwind CSS
 jQuery UI
 Some other libraries and frameworks
are: Handlebar.js Backbone.js, Ember.js etc.

2.1.2 BACKEND DEVELOPMENT

Backend is the server side of a website. It is the part of the website that users cannot see and
interact. It is the portion of software that does not come in direct contact with the users. It is used to
store and arrange data.

8
 Figure 5 Backend Roadmap

• PHP: PHP is a server-side scripting language designed specifically for web development.
• Java: Java is one of the most popular and widely used programming language. It is
highly scalable.
• Python: Python is a programming language that lets you work quickly and integrate
systems more efficiently.
• Node.js: Node.js is an open source and cross-platform runtime environment for
executing JavaScript code outside a browser.
• Back End Frameworks: The list of back end frameworks are:
 Express
 Django
 Rails
 Laravel
 Spring, etc.

9
2.1.3 FULL STACK DEVELOPMENT

It refers to the development of both front end(client side) and back end(server side) portions of
web application.

FULL STACK DEVELOPER: Full stack web developers have the ability to design complete
web applications and websites. They work on the frontend, backend, database and debugging of
web applications or websites.

Figure 6 Full Stack Technologies

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.
Front end Languages: The front end portion is built by using some languages which are
discussed below:
• HTML: HTML stands for Hyper Text Markup Language. It is used to design the front
end portion of web pages using markup language. HTML is the combination of Hypertext and
Markup language. Hypertext defines the link between the web pages. The markup language is
used to define the text documentation within tag which defines the structure of web pages.

10
• CSS: Cascading Style Sheets, fondly referred to as CSS, is a simply designed language
intended to simplify the process of making web pages presentable. CSS allows you to apply
styles to web pages. More importantly, CSS enables you to do this independent of the HTML
that makes up each web page.
• JavaScript: JavaScript is a famous scripting language used to create the magic on the
sites to make the site interactive for the user. It is used to enhancing the functionality of a
website to running cool games and web-based software.
Front End Frameworks and Libraries:
• AngularJS: AngularJs is a JavaScript open source front-end framework that is mainly
used to develop single page web applications(SPAs). It is a continuously growing and expanding
framework which provides better ways for developing web applications. It changes the static
HTML to dynamic HTML. It is an open source project which can be freely used and changed by
anyone. It extends HTML attributes with Directives, and data is bound with HTML.
• React.js: React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. ReactJS is an open-source, component-based front end library responsible only for the
view layer of the application. It is maintained by Facebook.
• Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first web sites.
• jQuery: jQuery is an open source JavaScript library that simplifies the interactions
between an HTML/CSS document, or more precisely the Document Object Model (DOM), and
JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and
manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser
JavaScript development.
• SASS: It is the most reliable, mature and robust CSS extension language. It is used to
extend the functionality of an existing CSS of a site including everything from variables,
inheritance, and nesting with ease.
• Some other libraries and frameworks are:
 Semantic-UI
 Foundation
 Materialize
 Backbone.js
 Express.js

11
  Ember.js etc.

Other Important Points:

• Work with text editors to use shortcuts and its facilities i.e. Visual studio, Atom, Sublime
etc.
• Make UI responsible using grid system.
• Git and git commands like init, add, commit etc. for version control and to work with
team.
• Other tools like npm & yarn package managers, sass css pre-processor, browser
DevTools i.e. chrome devtools .
• Understand using HTTP, JSON, GraphQL APIs to fetch data using axios or other tools.
• It also requires some design skill to make layout and look better.

Back end: It refers to the server-side development of web application or website with a primary
focus on how the website works. It is responsible for managing the database through queries and
APIs by client-side commands. This type of website mainly consists of three parts front end,
back end, and database.
The back end portion is built by using some libraries, frameworks, and languages which are
discussed below:
• PHP: PHP is a server-side scripting language designed specifically for web development.
Since, PHP code executed on server side so it is called server side scripting language.
• C++: It is a general purpose programming language and widely used now a days for
competitive programming. It is also used as backend language.
• Java: Java is one of the most popular and widely used programming language and
platform. It is highly scalable. Java components are easily available.
• Python: Python is a programming language that lets you work quickly and integrate
systems more efficiently.
• JavaScript: Javascript can be used as both (front end and back end) programming
languages.
• Node.js: Node.js is an open source and cross-platform runtime environment for
executing JavaScript code outside of a browser. You need to remember that NodeJS is not a
framework and it’s not a programming language. Most of the people are confused and
understand it’s a framework or a programming language. We often use Node.js for building

12
back-end services like APIs like Web App or Mobile App. It’s used in production by large
companies such as Paypal, Uber, Netflix, Walmart and so on.
• Back End Frameworks: The list of back end frameworks are: Express, Django, Rails,
Laravel, Spring etc.
• The other back end program/scripting languages are: C#, Ruby, REST, GO etc.
Other Important Points:
• Structuring the data in efficient way.
• Handle request-response of APIs for storing and retrieve data.
• Security of data is important.
Note: JavaScript is essential for all stacks as it is dominant technology on Web.
Database: Database is the collection of inter-related data which helps in efficient retrieval,
insertion and deletion of data from database and organizes the data in the form of tables, views,
schemas, reports etc.
• Oracle: Oracle database is the collection of data which is treated as a unit. The purpose
of this database is to store and retrieve information related to the query. It is a database server
and used to manages information.
• MongoDB: MongoDB, the most popular NoSQL database, is an open source document-
oriented database. The term ‘NoSQL’ means ‘non-relational’. It means that MongoDB isn’t
based on the table-like relational database structure but provides an altogether different
mechanism for storage and retrieval of data.
• Sql: Structured Query Language is a standard Database language which is used to create,
maintain and retrieve the relational database.
Popular Stacks:
• MEAN Stack: MongoDB, Express, AngularJS and Node.js.
• MERN Stack: MongoDB, Express, ReactJS and Node.js
• Django Stack: Django, python and MySQL as Database.
• Rails or Ruby on Rails: Uses Ruby, PHP and MySQL.
• LAMP Stack: Linux, Apache, MySQL and PHP.

2.2 WEB DEVELOPMENT TOOLS

Web development tools (often called devtools or inspect element) allow web developers to test
and debug their code. They are different from website builders and integrated development
environments (IDEs) in that they do not rather they are tools used for testing the user interface

13
of a website or web application. Web development tools come as browser add-ons or assist in
the direct creation of a webpage, built-in features in web browsers. Most popular web
browsers, such as Google Chrome, Firefox, Internet Explorer, Safari, Microsoft Edge and
Opera,[1] have built-in tools to help web developers, and many additional add-ons can be
found in their respective plugin download centers. Web development tools allow developers to
work with a variety of web technologies, including HTML, CSS, the DOM, JavaScript, and
other components that are handled by the web browser. Due to increasing demand from web
browsers to do more, popular web browsers have included more features geared for
developers.

2.2.1 SUPPORT TOOL BROWSERS

Several notable web browsers have support for web developer tools that allow web designers
and developers to look at the make-up of their pages. These are all tools that are built into the
browser and do not require additional modules or configuration.

Firefox – F12 opens the Web Console / Browser Console (since Firefox 4). The Web Console
applies to a single content tab; the Browser Console applies to the whole browser. Many
addons also exist, including Firebug.
Google Chrome – Chrome Developer Tools (DevTools)
Internet Explorer and Microsoft Edge – F12 opens Web Developer Tools (as of version 8)
Opera – Opera Dragonfly
Safari – Safari Web Development Tools (as of version 3)

Figure 7 Support Tool Browsers

14
2.2.2 REACT-DEV-TOOL

React Developer Tools is a chrome DevTools extension for the open-source React JavaScript
Library. It allows you to inspect the React component hierarchies in the Chrome Developer
Tools. You will get two new tabs in your Chrome DevTools : “Components” and “Profiler”. The
Components tab shows you the root React components that were rendered on the page, as well as
the subcomponents that they ended up rendering. By selecting one of the components in the tree,
you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs
you can inspect the selected component, the component that created it, the component that
created that one, and so on.

Figure 8 React Dev Tool

15
 Figure 9 dev-tools

2.3 Web development life cycle

2.3.1 Agile SDLC

Software development life cycle (SDLC) is a phenomenon to design, develop and, test high-
quality software. The primary aim of SDLC is to produce high-quality software that fulfills the
customer requirement within times and cost estimates.

Agile Software Development Life Cycle (SDLC) is the combination of both iterative and
incremental process models. It focuses on process adaptability and customer satisfaction by rapid
delivery of working software product. Agile SDLC breaks down the product into small
incremental builds. These builds are provided into iterations.

16
 Figure 10 Agile SDLC

In the agile SDLC development process, the customer is able to see the result and understand
whether he/she is satisfied with it or not. This is one of the advantages of the agile SDLC model.
One of its disadvantages is the absence of defined requirements so, it is difficult to estimate the
resources and development cost.

Each iteration of agile SDLC consists of cross-functional teams working on various phases:

 Requirement gathering and analysis

 Design the requirements
 Construction/ iteration
 Deployment
 Testing
 Feedback

17
  Requirements gathering and analysis
In this phase, you must define the requirements. You should explain business
opportunities and plan the time and effort needed to build the project. Based on this
information, you can evaluate technical and economic feasibility.

 Design the requirements

When you have identified the project, work with stakeholders to define requirements.
You can use the user flow diagram or the high-level UML diagram to show the work of
new features and show how it will apply to your existing system.

 Construction/ Iteration
When the team defines the requirements, the work begins. The designers and developers
start working on their project. The aims of designers and developers deploy the working
product within the estimated time. The product will go into various stages of
improvement, so it includes simple, minimal functionality.

 Deployment
In this phase, the team issues a product for the user's work environment.

 Testing
In this phase, the Quality Assurance team examine the product's performance and look
for the bug.

 Feedback
After releasing of the product, the last step is to feedback it. In this step, the team receives
feedback about the product and works through the feedback.

2.3.2 Agile SDLC Process Flow

18
 Figure 11 Agile SDLC Process Flow

 Concept: Project are imagined and prioritized.

 Inception: Team members are created, funding is put in place, and basic environments
and requirements are discussed.
 Iteration/Constriction: The software development team works to deliver working
software. It is based on requirement and feedback.
 Release: Perform quality assurance (QA) testing, provides internal and external training,
documentation development, and final version of iteration into the product.
 Production: It is ongoing support of the software.

Advantages of Agile SDLC

 Project is divided into short and transparent iterations.
 It has a flexible change process.
 It minimizes the risk of software development.
 Quick release of the first product version.
 The correctness of functional requirement is implemented into the development process.

19
  Customer can see the result and understand whether he/she is satisfied with it or not.

Disadvantages of Agile SDLC

 The development team should be highly professional and client-oriented.

 New requirement may be a conflict with the existing architecture.

Chapter 3 : PROJECT OBJECTIVE

The objectives of the project are twofold.

3.1 ON USER’S SIDE

WECOMM
 created forms and interactive components
 rebranding of style and structure of the comp
 helped the client with achieving a new look and feel of their new website
 and reuse a lot of existing components
 write unit test cases to ensure quality code
3.2 ON DEVELOPER’S SIDE
DXP
 Made a build process script to build components locally, enhanced the performance to
40s/components.
 build pipeline and to build through jenkins and upload artifacts, enhanced the
performance to 55s/components.
 Enhance the repo have the version changes automated, plus only accept different patch
versions.
 cause a build failure in case exact versions of some important dependencies unavailable
in the artifactory.
 performance enhancement.

20
 Chapter 4 : METHODOLOGY

To achieve this we are implementing and following the Agile model of the software
development. The project development process is broken down into smaller iterative work so it
becomes further more manageable and easier to maintain the proper planning and execution of
the project deliverables. Plans regarding the number of iterations, the duration and the scope of
each iteration are clearly defined in advance in agile. Scrum is an adaptable, fast, flexible and
effective agile framework designed to deliver value to the customer throughout the project’s
development. Scrum’s primary objective is to satisfy the customer’s need through maintaining
transparency in communication, collective responsibility and continuous progress. The
development begins with a vague idea of what requires to be built, developing a list of
characteristics ordered by priority that the product owner wants to obtain.

4.1 Agile Scrum Development Methodology

Once the project plan is outlined, we utilize scrum practices for development and management
of the product. Using agile project management methodology, we deliver new components every
2-4 weeks to our clients. Within a Sprint, a planned amount of work is completed by our team
and made ready for review

21
 Figure 12 Agile Scrum Methodology

Every Sprint comprises daily Scrum meetings, Sprint Retro, Demo days, UAT, and Code
Review. This means that every sprint solidifies your product and does not leave anything
for chance. The project follows time box cycles which have a set of features fixed along
with a date of delivery.
1. Complete Sprint Plan

This is more for a client to give him/her an initial idea about the timelines (with exact dates)
for planning all development to launch activities.
As Scrum uses a sprint structure so we estimate all the sprints and their delivery dates in
advance only. This helps the client to get the exact dates of delivery so he can plan his
strategy accordingly for e.g. pre-launch, marketing & etc.
The output of this exercise is a complete sprint plan, with a list of features in each sprint to
be covered.
The process involves the whole development team. The team decides the priority of the
features. The feature priority is decided by the complexity, time taken to complete it,
availability of the resources, dependency on other features, and demand from the end user.

22
Based on this discussion we prepare sprints and with the rough time estimates, we decide
the start and end date of every sprint.

2. Sprint Planning Meeting

This event is the actual start of any sprint. Here all the stakeholders, the development team
and project stakeholders sit together and decide which sprint/features to cover first. Most of
the things are already planned during the Complete Sprint plan but here we meet to put
things on track and plan against any new challenges.

In this meeting, the team would perform the following actions:

• List out features to cover.

• Go through the wireframes and have discussions as detailed as possible. We try to

catch every scenario/use case (negative positive booths).
• Break down the features into user stories.

• Every team member adds their own sub-tasks for each User Story. For e.g., a login
feature needs UI and backend APIs as well, so the front-end dev will add sub-tasks
for creating UI, applying validations and integration of APIs, etc. Similarly, a back-
end dev would add sub-tasks to create the required APIs. All sub-tasks are added
with their efforts in hours QA adds their efforts for writing test cases.

• Once all the user stories and their sub-tasks have been added, we finalize the dates of
all the developers based on their sub-tasks estimations.

• Once the developers’ dates are finalized, QA can also add their final staging build
testing estimates.

• Collectively we finalize the date of the whole sprint delivery. The final dates are for
the internal demo and client demo of the sprint.

• One more important thing we do is decide days in the week when the QA expects
builds from the development team. For e.g., if we choose Monday (evening) and
Wednesday (evening) as build days, then developers must share builds on these days
and on decided times only, not on any other day. This strategy gives enough time for
QAs to do quality testing.

23
 • All these User Stories are added to JIRA under the sprint. All team members are
assigned to sub-tasks they estimate.
• Once we have planned all the tasks, we start the actual development, or we can say
we start a sprint.

3. Daily Standup Meeting

This is one of the most important events in Scrum. The whole team joins together and each
member updates on the tasks they completed on the last day, what he/she is going to cover
today, and if they have any blockers.

This is a very standard way of doing Daily Standup.

To track the work, we ask developers to choose any task from their estimates (sub-tasks
they created) and start progress on JIRA as well. This aids the team to monitor the variation
between estimates and actual work done. It is helpful for developers as well to improve. We
also track the progress of the sprint from all the team members. Whether they are on track
or not, we can take appropriate actions proactively.

4. Code Review

A code reviewer is assigned to every developer. Pull requests are raised every alternate day
to the reviewer. The reviewer checks for the code and makes comments if it can be
improved. The criteria for this check is not just to check coding standards or use the correct
architecture but also covers the overall logic used if the code can be further optimized.
Once all the checks are done then only the PR will be merged. Code Reviews are also
automated as part of the DevOps Pipeline.

5. CI/CD Process

Continuous integration (CI) and continuous delivery/continuous deployment (CD) are the
processes that are used to build, test, package and deploy your application. CI/CD process
represents fully automated processes without any manual intervention. This automated
process saves loads of time for developers. The developers don’t need to worry about
generating builds manually.

24
 Figure 13-CI/CD process with automated code review

Branching Strategy

This process requires developers to push their code on the git repo and everything is done
like magic. We use Github as our Git code management tool. For the Git repository, we
follow a pretty standard branching strategy.

We make sure we have 3 main branches in the Github repo.

• Master

• Staging
• Develop

25
 Figure 14 -Branching Practice for code

Developers can create their own sub-branches from the development branch. To merge
their work with the main development branch, every developer needs to raise pull requests
to their Code Reviewer. Only after approval from the reviewer can the code be merged.

This is an excellent way to check the code quality and verify that good work is done.

The branches have their own significance.

• Every commitment on the development branch should be associated with the alpha
release. The build generated is used for internal testing.

• All commitments to the staging branch are associated with the beta release. The
staging build will be shared with clients once tested and demoed internally by the
development team.

• All commitments to the master branch should be associated with the stable release.
This is usually used for production environments.

A developer cannot directly commit to these main branches- Pull requests must be raised to
the reviewer and after approval, only their work gets merged.

26
Reviewers can decline pull requests if any improvement is required in the code. Reviewers
can put their comments in the code sections where changes must be made. In this case,
developers need to make changes as suggested and raise PR again.

The CI/CD Process checks for every commit/merge made to these 3 main branches and
deploys new updates and generates builds. The generated builds are shared with QAs and
team members. Builds generated in staging and production environments are shared with
clients as well.

Every time a commit/merge is done, the whole team is notified using a dedicated Slack
channel. The Slack channel also updates on the build generation and deployment steps and
notifies you if it fails or succeeds.

6. Internal Demo

Once all the features are developed and shared, tested and verified by QA, in the staging
environment we conduct an internal demo. In this event, all the work delivered is demoed
by QA to the whole team, and then everyone gives their feedback on the work. Team
members can also check for each other’s work on their end and provide feedback.

Feedback includes bugs and suggestions for improvement. Based on our feedback changes,
we decide whether to make changes only or keep it as part of the new sprint.

Finally, the build is ready to be shared with clients.

7. Client Demo

Often founders complain that they do not really know where their project progress lies until
one day they see the project state that has gaps and is too late to fix.

Kept a dedicated time for the demos and product walkthrough at every milestone or major
feature update of the project. If your project is an ongoing engagement, then you can have a
demo every 2-3 weeks. The demo should happen over live video sharing followed with
sharing of build that you can play around in your own comfortable setting as well

27
During the demo, understand thoroughly and provide feedback to the team. To avoid too
much discussion, we suggest clients keep notes and discuss at the end of the demo.
Additionally, at start of every sprint, Detailed sprint planning meeting should happen with
end to end screen walkthrough addressing team’s understanding about it to avoid further
gaps and delays

8. Client Feedback

Feedback can help you understand what customers think about the work and we get a
chance to comprehend their expectations. In addition, feedback allows us to maintain
transparency between conversations and development.

We keep a dedicated time for the demos and product walkthrough at every milestone or
major feature update of the project. Once the work update is shared with the client, we
share all the links (Web URLs), APK and updates for iOS, and a feedback sheet where we
ask the client to provide their feedback and any issues he/she is facing.
9. Sprint Retrospective Meeting

This is a very important event in the scrum framework, but sometimes the team tends to
skip it and jumps to the next sprint development. But we believe in regular assessment of
the work, not just for development.

Once the sprint is done and delivered, then we retrospect for the work done. It gives an
opportunity to understand the rights and wrongs.

As a part of the process the whole team sits together with a questionnaire filled. We ask the
following standard questions in this meeting.

• What went well during the sprint?

• What would we like to change?
• How can we implement the change?

28
 We have also added one more question to understand the learning, mostly in terms of
technical improvements.

• What did you learn in this sprint?

This helps us to improve, we take every member’s input and try to implement all the
feasible changes/suggestions in the new sprint.

10. New Sprint

For new sprint again, we have a Sprint Planning Meeting. Apart from the new features to
work on, we consider changes/improvements suggested by the team members in the
Internal Demo and the client in the Client Demo.

If there are any queries and doubts about any features, we don’t hesitate to connect with
clients and clear everything before starting a new sprint.

The inclusion of changes/improvement points depends on the efforts & priority.

4.2 TOOLS USED

In this section I have listed down the various tools, software and hardware which was
used by me to perform my task. I also mentioned their features why these tools have been
used.

4.2.1 Software

• Microsoft Teams: Microsoft Teams is the ultimate tool for collaborating at work.
Teams provides a fully decked out document storage, chat, and online meeting

29
 environment. Each program is designed for work collaboration and has a slightly
different set of features, some you may need, some you may not.

Figure. 15 Teams Benefits

Feature of Microsoft Teams:

o Fully integrated with Office 365: As another Microsoft product, Teams

integrates beautifully with Office 365, which is perfect if you’re already using
that for your business. The Office 365 applications that get used every day in your
workplace―like Word, Excel, PowerPoint, OneNote, SharePoint, and
Outlook―are fully integrated into Microsoft Teams.

o Collaborate live in real time: Real-time presence changes will come as a

pleasant surprise to those who have been exasperated at the slowness of presence
updates in Teams. This especially affects people moving from Skype for Business
Online because the presence changes in that app happen very smoothly.

o Access Teams across all of your devices: Teams not only has the comprehensive
web interface, but you can collaborate on the go, or answer teammate questions
from afar, using the mobile apps. Available on both Android, Windows, and iOS,

30
 Teams provides a simple and easy-to-use app that allows you to chat with your
team via text, have a voice conversation, or a video meeting.

o Recording Storage: Microsoft Teams has the function of letting users record
their meetings and group calls in Teams to capture audio, video, and screen
sharing. In 2020, even when Microsoft Stream isn’t available in Go Local,
Microsoft is enabling “allow cloud recording” and having this turned on as
default. This means that recordings will be stored in the respective in-region data
centre.

• Web Browser: A software application used to access information on the World

Wide Web is called a Web Browser. When a user requests some information, the web
browser fetches the data from a web server and then displays the webpage on the
user’s screen. The most popular web browsers are Google Chrome, Microsoft Edge
(formerly Internet Explorer), Mozilla Firefox, and Apple’s Safari.

Figure 16. Web Browsers

Features of Web Browsers:

o Sync web browser across devices: From your laptop, to your tablet, to your
phone, your stuff in web browser goes where you go. When you turn sync on, you
can access your bookmarks, saved passwords, and secure payment info.

31
 o Go dark with browser: Choose from a variety of themes and colors, like Dark
mode, to suit your needs or just your mood.

o Stay organized with tabs: Tabs help you stay organized, keep track of multiple
pages, and multi-task. You can group tabs together for better organization or pin
tabs to automatically open websites you use the most.

• Outlook: Microsoft Outlook being a part of Microsoft's Office Suite family is widely
used as desktop email client to communicate over internet. Outlook can be easily
expended with Smartphone's allowing users to access their email data anywhere
around the world. Only they have to synchronize their mailbox with device by
providing user ID and password.

Figure 17 Outlook

Features of Outlook:

o Unfailing Communication: MS Outlook allows users to communicate in plenty

of ways focusing main on emailing. Outlook allows users to send or receive email
to other user with some advance enhancements like attachment, signatures,
themes and backgrounds etc. Carrying out communication in Microsoft Outlook
is streamlined process as interface is quite simple.

32
o Coordination and Constitution: In aspects where organization of work tasks is
issue, Outlook takes first position in way it provides calendar feature. Via using
calendars in Outlook users can view all of tasks and meetings as daily, weekly
and monthly wise with coloring important meetings. 'Contacts' is another way to
stay organized in Outlook. It allows you to save vCard that are digital cards in
electronic communication system.

o Message Confirmation: To keep a record of messages that send to other users,

Outlook offers best tracking services than any other application. When users send
a message to anyone, if it's reached or not, they can set Outlook options as
'Request a Delivery Report' from settings to ensure that message has been
delivered. 'Request a read report' option for users to know whether opposite party
has opens message or not.

o Co-operation: MS Outlook also provide option to perform teamwork tasks easily

just like meetings. 'Meeting Invite' feature in Outlook allow users to invite all
users for immediate meetings along with tracking who accepts or who declines
this invitation. Moreover, Outlook 'Share My Calendar' function also lets users
about confirmation of both parties for meetings etc. Another useful function is
'Task Request' that helps to assign work to other colleagues.

Figure 18 Meeting Invite in Outlook

 GitHub: GitHub is a provider of Internet hosting for software development and version
control using Git. It offers the distributed version control and source code management

33
 (SCM) functionality of Git, plus its own features. It 25 provides access control and
several collaboration features such as bug tracking, feature requests, task management,
continuous integration, and wikis for every project.

Figure 19 GitHub

 AEM(Adobe Experience Manager)

Adobe Experience Manager (AEM) is a comprehensive content management solution
for building websites, mobile apps, and forms.

34
 Figure 20 Adobe Experience Manager

 JENKINS: Jenkins is a self-contained, open source automation server which can be

used to automate all sorts of tasks related to building, testing, and delivering or deploying
software. Jenkins can be installed through native system packages, Docker, or even run
standalone by any machine with a Java Runtime Environment (JRE) installed.

35
 Figure 21 Jenkins Architecture

 JIRA: Jira Software is part of a family of products designed to help teams of all types
manage work. Originally, Jira was designed as a bug and issue tracker. But today, Jira
has evolved into a powerful work management tool for all kinds of use cases, from
requirements and test case management to agile software development.

Figure 22 Jira Software

36
4.2.2 Hardware

• Processor: Intel Core i7

• Ram: 16GB
• Storage: 256 GB SSD

4.3 TECHNOLOGIES

4.3.1 React
React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library
for building user interfaces based on UI components. It is maintained by Meta (formerly
Facebook) and a community of individual developers and companies. React can be used as a
base in the development of single-page, mobile, or server-rendered applications with frameworks
like Next.js. However, React is only concerned with state management and rendering that state to
the DOM, so creating React applications usually requires the use of additional libraries for
routing, as well as certain client-side functionality.

4.3.2 Node
Node.js is an open-source, cross-platform, backend JavaScript runtime environment that runs on
the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use
JavaScript to write command line tools and for server-side scripting—running scripts server-side
to produce dynamic web page content before the page is sent to the user's web browser.
Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web-application
development around a single programming language, rather than different languages for server-
side and client-side scripts

4.3.3 Redux
Redux helps you write applications that behave consistently, run in different environments
(client, server, and native), and are easy to test. Centralizing your application's state and logic
enables powerful capabilities like undo/redo, state persistence, and much more. The Redux
DevTools make it easy to trace when, where, why, and how your application's state changed.
Redux's architecture lets you log changes, use "time-travel debugging", and even send complete
error reports to a server. Redux works with any UI layer, and has a large ecosystem of addons to
fit your needs.

37
4.3.4 React Hooks
Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and
other React features without writing a class. Hooks are the functions which "hook into" React
state and lifecycle features from function components. It does not work inside classes. Hooks are
backward-compatible, which means it does not contain any breaking changes. Also, it does not
replace your knowledge of React concepts.

4.3.5 JavaScript
JavaScript often abbreviated JS, is a programming language that is one of the core technologies
of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the
client side for web page behavior, often incorporating third-party libraries. All major web
browsers have a dedicated JavaScript engine to execute the code on users' devices. JavaScript is
a high-level, often just-in-time compiled language that conforms to the ECMAScript standard. It
has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-
paradigm, supporting event-driven, functional, and imperative programming styles. It has
application programming interfaces (APIs) for working with text, dates, regular expressions,
standard data structures, and the Document Object Model (DOM). The ECMAScript standard
does not include any input/output (I/O), such as networking, storage, or graphics facilities. In
practice, the web browser or other runtime system provides JavaScript APIs for I/O.

4.4 MY CONTRIBUTION
As my role is of a full stack developer so I got the chance to work on various technologies for
both frontend and Back-end development. Initially, I started as an UI developer where my main
role was to work on understanding and developing UI for the web application. Some of the major
deliverables I worked hands on were:

4.4.1 BUILDING UI
In UI, we build dynamic components and web forms.
Dynamic Components: Interactive dialog boxes to know user’s requirements like Internet speed
etc.
Web forms: Data Collection Forms and User information forms.

38
 Figure 23 Daily Travel Pass

Figure 24 Data Estimator Form

4.4.2 BUILDING PIPELINES

Since web portal is requiring dynamic components to build separately so we need to build
pipelines that take care of building artifacts.

39
Artifacts: One deployable bundle of dynamic component.

Figure 25 Pipeline Stage View

Figure 26 Pipeline on Jenkins

4.4.3 Worked on Missing Merge Report and Auto Merge Tool

Missing Merge Report

40
  this script helps compare two branches and generate a list of missing commits and send
appropriate emails.
Requirements:
Assuming, we have 5 developers on board, and there are 3 release branches, in order A1,B2,C3
where B2 originates from A1 and C3 originates from B2 and C3 is the latest branch. Having a
developer add functionalities on A1, requires the same to be on B2 and C3, as its the line of
origination . MMR compares a given source and Target, finds the missing commits, and notifies
a set of people regarding the conflicts present through an email. It a scheduled pipeline which
runs once a day. MMR loops through an array of sources and targets and provides all details on
all given branches . In case the branches are in sync, they don’t appear on the list, if there no
conflicts on any of the given pairs, a mail of body ,'no conflicts' is sent.

Flow Chart of MMR:

Figure 27 Flow Chart of MMR

Pipeline of MMR:

41
 Figure 28 Pipeline of MMR

MMR Documentation:
doCherryPick()
Check if PAT(GH_TOKEN) is provided
makeLocalBranches()
retrieves the l array of branches from targetBranches.json
loop through the array and check out to every branch.
the above step helps jenkins have a latest pull of each branch.
then checkout back to feature/MMR branch
the control is transferred back to doCherryPick().

readExcludedSha()
read a file called excludedSha.txt, which contains commit id's that are to be ignored
make an array out of the files and store as ignoreArray.

42
 the control is transferred back to doCherryPick().

runAutoMerge()
assign value to TARGET_BRANCH and CURRENT_BRANCH, from values in
targetBranches.json
retrieveCommits()
git cherry TARGET_BRANCH CURRENT_BRANCH
This gives a list of commits with '+ ', '- 'prefixed.
perform a filter over the list to retrieve only the commit with '+ ' prefixed.
the result of the filter makes commitList.
the control is returned to runAutoMerge()

if the commitList is available, and has a length, and that length is gretaer than 0
the commitList is looped through,
checking if each item(commitId) has a length greater than 1 and is not included in
ignoreArray
if the above is true, then the commit message is retrived using 'git log'
and checked to affirm if it includes certain commit
messages(revCommit,manualRev) and ignored
else its pushed into the conflicts array

gitCommitsAPI()
this control is transfered here with conflicts as parameter
this makes an axios call to the github api to retrieve the commit details
and push them in conflictArray
also here, the age of commit is calculated by subtracting the commit date
from current date.

the control is transferred back to runAutoMerge()

the conflicts[] is emptied and the loop runs from the next item in the
commitList

once the for loop ends,

43
 sendReport is set to true, if the length of conflictArray is greater than 0 or vice
versa
writeReport()
if sendReport is true
the ejs template is read
then it is rendered with data from the conflictArray
the result is minified

then an object is created with contents of a mail service like {to, from, sub,
body, mimeType}

if sendReport is false, the body of the mail object is replaced with

appropriate message

If PAT unavailable
please authenticate

AUTO MERGE TOOL

 This script helps compare two branches and generate a list of missing commits and
commit them to the target branch and send appropriate emails in case of conflicts.
Requirements:
Assuming, we have 5 developers on board, and there are 3 release branches, in order A1,B2,C3
where B2 originates from A1 and C3 originates from B2 and C3 is the latest branch. Having a
developer add functionalities on A1, requires the same to be on B2 and C3, as its the line of
origination. Doing this manually could be cumbersome. Hence AMT comes into play, where it
compares two given branches, and commits the missing pieces from given source and target if
there are any. If an automatic merge isn’t possible, a mail is sent the developer who made the
commit, to resolve the conflicts along with the necessary details. Also, if branches are in sync,
AMT sends a mail saying there are NO Conflicts.

44
AMT Pipeline:

Figure 29 Auto Merge Pipeline

AMT Documentation:
doCherryPick()
Checks if PAT(GH_TOKEN) is provided

readExcludedSha()
read a file called excludedSha.txt, which contains commit id's that are to be ignored
make an array out of the files and store as ignoreArray.
the control is transferred back to doCherryPick().

runAutoMerge()

45
 branching()
the script is provided with CURRENT_BRANCH as parameter to start the script.
with CURRENT_BRANCH marked as source, loop through targetBranches.json to get
the TARGET_BRANCH
retrieveCommits()
git cherry TARGET_BRANCH CURRENT_BRANCH
This gives a list of commits with '+ ', '- 'prefixed.
perform a filter over the list to retrieve only the commit with '+ ' prefixed.
the result of the filter makes commitList.
the control is returned to runAutoMerge()

if the commitList is available, and has a length, and that length is greater than 0
the commitList is looped through,
checking if each item(commitId) has a length greater than 1 and is not included in
ignoreArray
if the above is true, then the commit message is retrieved using 'git log'
if
the message includes certain commit message(revCommit, manualRev) it is
ignored
then git cherry-pick --allow-empty commitId is performed
in case of error,
if the error message includes the message(emptyCherry)
then git cherry-pick --abort is performed, to stop/abort the cherry-picking
on the particular commit hash
else
then git cherry-pick --abort is performed
the commitId is pushed to conflicts[]

then perform git push and checkout to the current branch

once the for loop ends,
sendReport is set to true, if the length of conflictArray is greater than 0 or vice
versa

46
 if sendReport is true

gitCommitsAPI()
this control is transferred here with conflicts as parameter
this makes an axios call to the github api to retrieve the commit details
and push them in conflictArray
also here, the age of commit is calculated by subtracting the commit date
from current date.

the control is transferred back to runAutoMerge()

writeReport()
the ejs template is read
then it is rendered with data from the conflictArray
the result is minified

then an object is created with contents of a mail service like {to, from, sub,
body, mimeType}

if sendReport is false, the body of the mail object is replaced with

appropriate message

If PAT unavailable
please authenticate

47
 Chapter 5 : CONCLUSION & FUTURE SCOPE

CONCLUSION

 To conclude for learning about this project:

 Successfully completed my responsibilities.
 Learnt tiny bits and parts of the corporate structure.
 Learnt about how to read and understand complex queries and code.
 Hands on with node.js , react and react-redux.
 Started learning about different libraries available in the market and their usability
according to client’s needs.
 Started learning about various Module in general, and thought about how it has positively
impacted our client.
 Design various forms and pipelines.
 As my team lead calls it, the primary task of a consultant is to not write code, or anything
fancy. It is: To analyze the Problem and then find a solution

FUTURE SCOPE:
In future , we are delivering individual components using react and redux and started working on
git hooks and the Developers who use git repository must consider using git hooks to automate
their workflow. Setting up custom git hooks seems to be easy , so start implementing it in future.

48
REFERENCES:

 Responsive Web Design: HTML5 + CSS3 for Entrepreneurs 2018 (udemy.com)

 React - The Complete Guide (incl Hooks, Redux) (udemy.com)
 What Is Jenkins in CI/CD - Everything You Need To Know (phoenixnap.com)
 Set up a Local AEM Development Environment | Adobe Experience Manager
 Introducing Hooks – React (reactjs.org)
 Git (git-scm.com)
 Learn JavaScript Tutorial - javatpoint
 Sass: Syntactically Awesome Style Sheets (sass-lang.com)

49