1.

INTRODUCTION

1.1 Introduction

An internship is a professional teachable moment that gives students real-world experience in

their field of study or professional goals. An internship enables students to learn new skills
while exploring and enhancing their careers. This report is a description of my ongoing
internship at Zeetron Networks. This internship report details the activities that helped me
achieve a bunch of my stated objectives. I was assigned the profile of “MERN Stack
Developer” for my internship. In the first month of the internship, I was asked to learn
different frontend languages. After the completion of this learning process, I was assigned
many different tasks on the live project of the company.

Software process automation is a technology that may be viewed as a two-edged sword. On

The one hand it can be viewed as a productivity and quality enhancer, while on the other
hand, It can be viewed as a mechanism to control, routinize, and de-skill work. These views
both Have elements of truth, but with appropriate design and adoption considerations, we
believe That it is possible to enhance the positive elements while reducing the negative ones.
This report looks at the issues that have arisen for the early adopters of process automation.
These people are the innovators, the ones who have been through the ―school of hard
Knocks,‖ taken the brunt of an immature technology, and suffered from the fact that there are
Few experienced people to guide them. Some of the projects we saw succeeded, some failed,
But few found the going easy. This technology is not for the faint of heart—at least not yet.
However, we hope, through this report, to document experiences and lessons learned. We
Hope that we have extracted practical insights to provide insights to the developers of process
Automation tools and guidance to those who wish to automate their processes.

1.2 Job Description

The introduction of engineering concepts to the creation, implementation, and technical

management is known as software engineering. Software engineering was designed to
address the challenges of low-quality software initiatives. Problems arise when software
exceeds schedules, budgets, and quality expectations. It assures that the software is built in a
consistent, correct, timely, cost-effective, and specification-compliant manner. Software
engineering became vital to keep up with the rapid depending of user needs and the context
in which the program is expected to operate.

1
 Fig 1.1 Objectives of Software Engineering

The Software Engineer Trainee is responsible to assist in the design and development of
software. The Software Engineer Trainee works with other members of the team to develop
secure and dependable software solutions. The duties and responsibilities of this position are
as follows:

 Application development (coding, programming)

 Code debugging and testing

 New software application documentation and testing

 Investigating, diagnosing, and resolving a wide range of technical challenges

 Working with senior executives

 Identifying issues and developing solutions

 Learning about new technology ahead of time

1.3 Objectives

The objective of the internship is to learn more about the programming languages like
Node.js, Express.js, MongoDB, and ReactJS. These four languages are the basic
requirements for my job profile. After the learning process, I was assigned to work on a live
project for the company. This internship provides experience to the freshers so that they can
learn more about the industry. The perspective was to gain enough knowledge so that we can

2
work easily on the project assigned to us.

Learning Objectives/Internship Objectives

 Internships are generally thought of to be reserved for college students looking to

gain experience in a particular field. However, a wide array of people can benefit
from Training Internships in order to receive real world experience and develop their
skills.

 An objective for this position should emphasize the skills you already possess in the
area and your interest in learning more.

 Internships are utilized in a number of different career fields, including architecture,

engineering, healthcare, economics, advertising and many more.

 Some internship is used to allow individuals to perform scientific research while

others are specifically designed to allow people to gain first-hand experience
working.

 Utilizing internships is a great way to build your resume and develop skills that can
be emphasized in your resume for future jobs.

 When you are applying for a Training Internship, make sure to highlight any special
skills or talents that can make you stand apart from the rest of the applicants so that
you have an improved chance of landing the position.

1.4 Internship Schedule

The internship plan was as follows:

First Month

This month, I revised the HTML, CSS, and Javascript which was followed by learning about
Vue.js. I was assigned to develop different tasks on the frontend of the Zeetron Networks
application for hands-on experience and a better understanding of the language.

Second Month

To learn more about Frontend development, I learned about React.js this month. I developed
different projects for Athena Education using all three languages. This project helped me to
know how the frontend works for the web development project.

3
After the completion of frontend development, I studied ApexChart Library and ReactJS for
frontend development. On learning all the languages for MERN Stack development, I was
assigned to create a Graph Task to integrate all my learnings into one project. This project
helped me to understand how the web application works.

Third Month

I worked on multi-selection components and internal dashboard of the company. Worked on

the styling of the existing and developed pages using Material UI Framework.

1.5 Company Description

Zeetron Networks is the best software company. We provide services such as web and app
development, security and server migration, Wi-Fi solutions, etc. Zeetron Networks is not
only the best IT software company but it is also one of the leading companies in Jaipur who
provides different products and services like Electronic Accessories, Cables, Networking
Devices, etc. Based out of Rajasthan, INDIA – Zeetron Networks private limited, has for over
long years been a Boutique Consultancy, Solutions Enabler, Service provider and has also
been Training in the Network Infrastructure & Cyber Security Space. We are expertise in
both equipment manufacturers and service providers to identify critical market requirements
for next-generation networking products and services. Our product development expertise
helps our clients realize cutting-edge new products and services in networking and another
field.

Here we organize Workshops, where students get practical knowledge with theoretical
knowledge. We also provide winter, summer, and Regular Internships, as well as the Job
Oriented Diploma. We specialize in the areas of Internetworking Technologies (including
Convergent Networks using Data/Voice technologies, Wireless/Optical Networks and
Storage Area Networks), Operating Systems, Relational Database Systems, Web Servers, and
Security/Firewalls. Supporting your IT Security Lifecycle drives our business and your
infrastructure’s protection is our only priority. Our product development expertise enables our
customers to acknowledge front line new products and services in the networking industry.

4
Zeetron Networks Pvt. Ltd. Is one of the most innovative software and website development
company placed in Jaipur, India. We are the best due to the top-notch satisfactory of software
programs and website development services that we provide to each customer. A website is
your first impression on the web which ought to be full of creativity and capability that could
increase the online presence of your enterprise. An appealing and powerful website design
acts as a platform by presenting an exceptional gateway to showcase your business portfolio.
To assure an amazing searching, usable website for every viewer your site needs to be
responsive. We increase responsive layout code to perfect view from monitors, TFTs,
Laptops, Tablets and even on mobiles. The covers technology like HTML5, CSS3, JSP,
Ajax, Flash, PHP, .Net, XML, XHTML, etc to deliver fully customized User-Friendly
Websites to assist your business to succeed. We have a splendid team of web developers,
who implement new ideas and keep on experimenting constantly for resulting in a brilliant
transformation of website designs into something that acts as your business’s gold mine.

Our dedicated software/web developers are passionate about their work and have innovative
minds with desirable analytical thinking. Their years of programming revel in, technical
understanding, trouble-solving skills, and exceptional communication capabilities enable
them to deliver great software program software as per the client's business needs.

Zeetron Networks has full-size experience in handing over CRM solutions. Our team is
skilled in creating the proper CRM system that contains all the vital specifications to fulfill all
your requirements. We offer you a huge variety of Customer Relationship Management
(CRM) Software Development Solutions for small to big size businesses.

5
 2. APPLICATION INFRASTRUCTURE

2.1 The Mern Stack

MERN stands for MongoDB, Express.js, React.js and Node.js. With MongoDB as Database,
Express.js is a web server framework (integrated with Node.js), React.js is a web client
library, and Node.js is a server-side platform. It helps developers to develop Web apps based
solely on full-stack JavaScript.

MERN combines four cutting-edge technologies today, from the front-end to the back-end
development, which Facebook strongly supports, so developers do not need to learn any
other technology such as .NET, PHP, or Java. It saves developers time and effort to learn
different technologies for application development. Due to the same JavaScript platform, the
stack is supported by a vast number of open-source packages and a dedicated community for
programmers to increase scalability and maintain software products.

Fig. 2.1 A 3-tier MERN architecture

As depicted in Figure 2.1, the MERN stack starts with the core Node.js, a server- side
technology with very high performance and fast response to all tasks, including large and
complex data.

MERN does not need to use TypeScript, just the flexible foundation of React - the most
popular and influential front-end technology today.

2.2Node.js

2.2.1 Background of Node.js

None of us are unfamiliar with the Google Chrome web browser, and there is nothing new
that this browser can open web pages and run JavaScript on the websites. The JavaScript

6
code's execution is thanks to a JavaScript engine located inside a Chrome browser called V8.
V8 has proven to be a powerful engine, written in C ++; V8 can interpret and execute
JavaScript very quickly.

Faced with the apparent fact about the power of V8, the idea popped into the founders' minds
to separate this V8 from Chrome and form an application capable of executing the JavaScript
code on the server-side. In 2009, Ryan Dahl created Node.js to achieve that goal.

It should be easy to understand when Node has the same role as JVM (Java Virtual
Machine). Like the JVM, Node.js is considered a platform, an environment for the
applications to run on. If JVM executes the byte code, Node.js executes the JavaScript code.
Programmers always use high-level languages such as Java, Scala, Groovy, or Kotlin to write
the source code on the application programming side when working on the JVM. This source
code will be compiled into byte code. Nevertheless, Node.js itself can understand and
execute JavaScript on the Node.js platform, so the language written on the application side
can be JavaScript, or languages capable of compiling into JavaScript like Typescript.

The birth of Node.js brought a breath of fresh air into the programming world. It has gained
popularity among developers' top server-side platform choices and is used in major systems
such as Netflix, LinkedIn, and Uber. The following is a ranking of the most popular
libraries/platforms according to a StackOverflow survey in 2020.

2.2.2 Non-Blocking programming in Node.js.

The Node.js platform is versatile, perhaps not because of the V8 engine or the ability to
support the JavaScript language, but in the Non-Blocking style of programming. Operations
related to Non-Blocking in Node.js are mostly related to IO, such as reading and writing data
to disk or calling Web APIs, for example. Furthermore, the use of Non-Blocking operations
makes applications written on a Node.js platform capable of using computational resources
(CPU) most efficiently.

In the creation of the Non-Blocking mechanism, Node.js applications operate according to

the Event Loop design pattern. The illustration below explains this design in more detail:

7
 Fig. 2.2 The Event Loop mechanism.

 Event Queue: Considering as a repository to store Events (events). Event here can be
understood as a particular process in the program. Each event contains information to
classify what that event is and the accompanying data. Because it is a queue structure, the
Event Queue will operate on the principle of First In First Out (FIFO). This ensures that
the order in which the Events are retrieved for processing is the same as the order they
are put into the Event Queue.

 Main Thread: Saying this is the Main Thread because it will be the source and the end
of the program. This main Thread is responsible for processing computation when
receiving Events from the Event Queue. This is also the only Thread of the Node
application that the programmer has control over. That is also the reason why it is still
said that a Node application is single-threaded. Because of that, programmers will not
have a headache about concurrency problems between threads like in some other
platforms like Java.

 Node API: The unit responsible for handling IO operations. IO operations will be
handled here by the multi-threaded mechanism. Moreover, each IO operation after
completion will return the result as an event, and this event will be put in the Event
Queue.

With the above three components, the way a Node application behaves like this:

 The Main Thread will run the computation processing statements declared in the
source code. Wherever IO manipulation is involved, the Main Thread will make a
Non-Blocking call to the Node API and then continue to execute other commands

8
 without waiting for the other IO operation to complete.

 When receiving a request from Main Thread, Node API will directly handle IO
manipulation by different Threads. Once the IO operation is completed, the Node
API will wrap the result as an Event and place it into the Event Queue.

 Events in the Event Queue will be processed by the Main Thread one after another. In
the Main Thread, the code used to handle Events is usually declared as callback.

The above process is repetitive, creating a cycle of events in the application. The
programming will be imposed in a way that is geared towards event handling instead of the
traditional sequential way of thinking.

2.2.3 Node package manager (NPM)

NPM (short for Node Package Manager) is used and comes together to support each
development of Node.js. Most libraries are available on NPM, so it is relatively easy to
include them just by running npm install <package> command line to download them.

NPM is being maximized and operating based on two prominent roles as follows:

NPM is a Software Registry and is being used very extensively to publish open-source
Node.js projects. One can understand that: it is an online platform that allows all users to
publish and share several other tools written in JavaScript. It has crossed over 1.3 million
code packages as of April 2020.

NPM is one of the command-line tools that can help interact with other online platforms such
as servers or web browsers. It is also a utility that can assist with package installation,
package uninstallation, version management, and server-driven management. Also, NPM is
used to manage the dependencies needed to run the projects.

2.2.4 Applications of Node.js

 Websocket servers: Websocket is a protocol formed to support two-way communication

between the client and the server to connect and exchange data with each other quickly
and accurately. The protocol is implemented over TCP, and they are used for web
applications.

 Ad Server: Running ads and controlling views will take time. Therefore, Node.js will be
a platform that brings many benefits to customers. It is easier for ad servers to capture
information.

9
 Cloud Services: Cloud services on electronic devices such as phones, iPad, etc.

 RESTful APIs.

 Real-time applications.

 Microservices: The idea of microservices is to split an extensive application into small

services and connect them.

2.3 Express.js

2.3.1 Introduction to Express.js

Express.js is released under an open-source license, has a large community of support, and
used for commercial applications. Hence, developers can completely rest assured to use
this framework for their projects, from small projects to large projects.

Express.js has a ton of support packages and provides additional features for developers to a
better program. Nevertheless, it does not slow down the speed of Node.js. The famous
Node.js platform today is using Express.js as a core function.

According to the GitHub repository, Express.js was founded by TJ Holowaychuk and was
first released on May 22, 2010, with version 0.12. In June 2014, project management rights
were acquired by StrongLoop. IBM acquired StrongLoop in September 2015. In January
2016, Express.js was managed by the Nodejs Foundation.

2.3.2 Structure of an Express.js application

Fig. 2.3 Structure of an Express.js app.

10
As illustrated in Figure 2.3, the project directory structure using Express.js is divided into
three parts: Routes, Views, and Public. Express.js build web applications following the MVC
(Model, View, Controller) design pattern.

o Root.

 app.js: contains all the logic setup for the applications to run.

 package.json: contains all the installed packages.

 routes: contains all the routing-related logic present in the application.

 views: contains the views/templates for the application.

 Public: contains static files such as images, JS codes and CSS settings for the
application.

2.3.3 Understanding middleware

Middleware is computer software that connects software components or applications

together. Software of this type consists of services that allow interaction between processes
running on one or more different machines. Middleware technology has been developed to
provide interoperability, catering to commonly used distributed architectures to support and
simplify complex distributed applications.

When working with Express.js, developers use various middleware functions with different
functionalities:

 Functions receive the request, response of 1 cycle of HTTP request/response.

 Functions can correct requests and responses before sending them to the next()
middleware function.

 Functions can update or terminate the request/response cycle.

The middleware function in Express.js often takes three parameters: the request (req) object,
the response (res) object, and the next() function. Figure 6 below illustrate a custom
middleware used in the project.

11
 A custom middleware.

2.4 MongoDB

2.4.1 Introduction to MongoDB

MongoDB was first born by MongoDB Inc. in October 2007. It was part of the PaaS
(Platform as a Service) product like Windows Azure and Google App Engine. It was later
made open source in 2009.

MongoDB is a document-oriented database and a NoSQL database. Therefore, MongoDB

will often avoid the relational database's table-based structure to adapt to all documents such
as JSON, available in a very flexible schema called BSON.

2.4.2 Pros and Cons of MongoDB

The outstanding advantages of MongoDB convincing the choice of current users are:

 Since MongoDB uses data in the JSON form, each collection has different sizes and
documents. Nevertheless, they are very flexible when it comes to archiving.

 MongoDB data is usually not bound to each other; it does not support join query like
in RDBMS, so when users insert, delete or update, it will not spend too much time to
check if it satisfies the constraints like in RDBMS or not.

 MongoDB is easy to scale. In MongoDB, the concept “cluster” refers to clusters of

nodes containing data to communicate with each other. Adding a new node to the
cluster helps users expand the system quickly.

 The unique identifier _id will always be indexed automatically, so the speed of

12
 querying information will consistently achieve the highest performance.

 Data query will be cached to RAM with little access to the hard drive so the read and
write speed is faster.

In addition to many outstanding advantages as above, MongoDB still does have its
drawbacks:

 It is not applicable to any transaction models that require a high degree of accuracy
due to its non-binding nature.

 There is no transaction mechanism to banking service applications.

 Data takes RAM as the centre of the action, so it requires a large amount of RAM
when operating.

 Any change to the default data is not written to the hard drive immediately, so the
chance of losing data from the cause of an unexpected power failure is very high.

2.5 React.js

2.5.1 Introduction to React.js

React.js is a JavaScript library built by Facebook engineers, being used by many famous
companies to develop their products such as Yahoo, Airbnb, Facebook, Instagram. It is better
suited for large, scalable projects rather than small projects.

 Features of React.js

The React.js mindset is to build reusable components that make it easy to break down
problems and test. It helps us quickly manage and extend the system; if it is Angular, it
requires optimal structure and coding style.

React.js always keeps components stateless (as much as possible), making it easy to manage
because it is like a static HTML page. It takes inputs from the outside and only displays it
against those inputs, explaining why it is reuse and easy for testing.

 The strengths of React.js

React.js is a performance-minded view rendering framework. Many of the heavyweights on

the MVVM (Model-View-ViewModel) framework take a long time to display large amounts
of data, such as lists. However, with React.js, that is no longer an issue, as it just shows what
changes.

13
One of React.js more strengths is the virtual DOM (Document Object Model) - which is
hidden inside every view and is the reason why React.js achieves good performance. When a
view requests a call, everything is included in a virtual copy of the DOM. React.js compares
the virtual DOM and the real DOM after the call completes and makes the changes indicated
in the above comparison.

For example, if we are looking at a list of 20 products displayed by React.js and change the
2nd product, only that product is re-displayed, and the remaining 19 products remain the
same (no need to display reload or reload the page). React.js used the so-called virtual DOM
to increase performance by outputting a virtual view, then checking the difference between
the virtual rendering and what is in the DOM and creating a patch.

2.5.2 Some concepts of React.js

 Component

React.js is built around components, not using templates like other frameworks. The user can
create a component by extending the component as follows.

Figure 7. A component in React.js.

The most crucial method is render, which is triggered when the component is ready to be
rendered on the page.

In that function, the user will return a description of what the user wants React.js to render on
the page. As in the example above, the user renders an h1 tag containing the greeting and the
name.

The render function is a specific description of the UI at any given time. If the data is
changed, React.js will update the UI with the corresponding data. One can understand that
React.js will automatically call the render function to update the UI when the data changes.

 Prop

14
Props here are properties of a component; users can change the props of the component by
passing data from the outside. Props can be an object, function, string, number, etc. [19]

Prop in React.js.

When a prop is passed to the component, it is immutable. That is, its data is not changed like
a "pure" function.

Examples of “pure” and “not pure” function. We consider the function as below:

Pure function.

The function is called "pure" because it does not change its input value and always returns
the same result for the same inputs.

We consider the second function as shown below:

Not pure function.

15
Here the above function changed its input sum value, and this makes it not a "pure" function.

All React.js components must act as "pure" function.

 State

A React.js component has two ways to get props and state information. Unlike props, the
state of a component is not passed from the outside. A component determines its own state.
To create a state for the component, we will have to declare it in the constructor function.

State in React.js.

16
 3. TOOLS AND TECHNOLOGIES USED

3.1 Github

Software developers and engineers can use GitHub to build public-facing cloud repositories
for free. You can transfer a GitHub repository to your device, add and alter files locally, and
then "push" your changes back to the repository, where they will be visible to the public.

Repository

A repository (sometimes shortened as "repo") is a site where all of the files for a project are
kept. Each project has its repository, which you can access using a specific URL.

Forking a Repo

When you establish a new project based on an existing project, this is known as "forking."
This is a fantastic tool that greatly fosters the development of new applications and projects.
If you find a project on GitHub that you'd want to contribute to, you can fork it, make the
modifications you want, and then republish it as a new repo. You may quickly add changes to
your current fork if the original repository that you forked to create your new project is
updated.

Branch

A branch represents an independent line of development. Branches serve as an abstraction for

the edit/stage/commit process. You can think of them as a way to request a brand new
working directory, staging area, and project history. New commits are recorded in the history
for the current branch, which results in a fork in the history of the project.

Head

Git’s way of referring to the current snapshot. Internally, the git checkout command simply
updates the HEAD to point to either the specified branch or commit. When it points to a
branch, Git doesn't complain, but when you check out a commit, it switches into a “detached
HEAD” state.

Git Commit

You're ready to commit once you've staged the files you want to add. The commit message is
important regardless of whether you commit using GitHub Desktop or the command line.

17
Short commit statements that describe your change should be used. The commit messages
will lead you through the history of your repository, therefore they should be informative.
The following message format can be used in command-line commits:

git commit -m "git commit message example"

Pull Requests

You've forked a repository, made a fantastic change to the project, and want the original devs
to notice it—perhaps even put it in the original project/repository. Create a pull request to
accomplish this. The original repository's authors can view your work and decide whether or
not to accept it into the official project. When you submit a pull request, GitHub provides an
excellent communication channel between you and the primary project's maintainer.

BitBucket

Bitbucket Cloud is a Git based code hosting and collaboration tool, built for teams.
Bitbucket's best-in-class Jira and Trello integrations are designed to bring the entire software
team together to execute on a project. We provide one place for your team to collaborate on
code from concept to Cloud, build quality code through automated testing, and deploy code
with confidence.

18
3.2 Postman

Postman is a well-known API testing tool. APIs may be simply created, tested, shared, and
documented with the help of this tool. Postman is an Application Program Interface (API)
testing tool that may be used to create, test, develop, change, and document APIs. It's a basic
graphical user interface for executing and analyzing HTTP requests and responses. When
utilizing Postman for testing, you don't need to write any HTTP connection code. Instead, we
use Postman to connect with the API and create test suites called collections. Almost every
feature a developer can require is included in this program. This tool can do GET, POST,
PUT, and PATCH HTTP queries, as well as convert APIs.

Postman is built around a set of powerful technologies that are extremely easy to use.
Postman has become a useful tool for more than 8 million users. Postman is used for the
following reasons:

1. Accessibility- After installing Postman on the device, simply login to the account to use it
anywhere.

19
2. Use Collections- Users can create collections for their API calls using Postman. Each set
can create multiple requests and subfolders. It will aid in the organization of test suites.

3. Test development- Every API request should include verification of a successful HTTP
response status to test checkpoints.

4. Automation Testing- The Collection Runner or Newman can conduct tests in multiple
repetitions or iterations, saving time for repeated tests.

5. Creating Environments- The usage of numerous environments reduces test replication

because the same collection can be used in different settings.

6. Debugging- The postman console assists in successfully debugging the tests by tracking
what data is being obtained.

7. Collaboration- To improve file sharing, you can import and export collections and
environments. You can also share the collections via a direct connection.

8. Continuous integration- It can support continuous integration.

It's as simple as typing a URL into your browser to send a request. In Postman, we can
quickly send requests to APIs. You can use an API request to access or deliver data from a
data source.

An HTTP method is required to send the API request. POST, GET, DELETE, PUT, and
PATCH are some of the most widely used methods.

 GET: This HTTP method is used to access the data from an API.

 POST: This method transmits new data.

 DELETE: This is used to remove or delete the existing data.

 PATCH: This method is used to update the existing data.

 PUT: This method is used to update the existing data.

20
3.3 MongoDB

MongoDB is a document-oriented, cross-platform database with exceptional productivity,

availability, and easy handling. MongoDB is built on the collection and document concepts.

Database

A database is a tangible repository for data. On the file system, each database has its own
collection of files. Typically, a MongoDB server provides many databases.

21
Collection

In MongoDB, a collection is a group of documents. An RDBMS table is the same thing. A

collection exists within a single database. Collections do not enforce a schema. Within a
collection, different elements can be found in separate documents. In most cases, every one
of the documents in a collection has the same or similar functions.

Document

A document is made up of a set of key-value pairs. Documents have a dynamic schema.

Documents in the same collection don't really want to have the same number of fields or
architecture, and similar variables in a collection's document can contain data.

3.3.1 Advantages of MongoDB over RDBMS:

 MongoDB is a way to store data that allows you to store multiple documents in
one collection. A document's amount of features, content, and size may differ
from one to the other.

 The structure of a single thing is clear.

 No complicated connections here.

 Deep querying capabilities. MongoDB supports dynamic querying on documents

using a document-based markup language that's also nearly as effective as SQL.

 Tuning.

 The scalability of MongoDB is simple.

 No conversion or mapping of application components to database objects is

required.

 The (windowed) work set is stored in internal memory, allowing for quicker data
access.

3.3.2 Uses of MongoDB:

 Data is saved as JSON-style documents in document-oriented storage.

 Indexing can be done on any attribute.

 Replication and high availability.

 Auto-Sharding

22
  Rich searches

 For real-time information.

 Expert assistance is provided by MongoDB.

3.4 Express.js

It is a Node.js web framework that includes a wide range of features for developing web and
mobile apps. It makes it easy to swiftly build Node-based Web apps. The following are some
of the important aspects of the Express framework:

Allows middlewares to build up responses to HTTP queries.

 Creates a routing table depending on the HTTP Method and Address to perform various
actions.
23
Allows you to dynamically generate HTML pages using template arguments.

Fig. 3.1 Express Framework

3.4.1 Advantages of Express.js

 Quickly and easily creates Node.js web applications.

 Configuration and customization are simple.

 You could use HTTP methods and URLs to define application routes.

 There are various middleware modules included that can be used to carry out extra
requests and responses.

 Several template engines, such as Jade, Vash, EJS, and others, are easy to use.

 Allows you to choose a middleware for error handling.

 It's simple to provide static files and resources from your app.

 Creates a REST API server for you.

 Connecting to databases like MongoDB, Redis, and MySQL is simple.

3.5 React

ReactJS is a Javascript framework for constructing declarative, fast, and adaptable user
interface components. It's a component-based front-end framework that manages the app's
view layer exclusively. Jordan Walke, a software engineer at Facebook, conceived the idea.
Facebook invented and maintains it, and it's later used in Facebook products like WhatsApp
and Instagram. Although ReactJS was designed around 2011 for Facebook's feed area, it was
first publicly published in May 2013.

The most common website architecture today is MVC (model view controller). React is the

24
view in the MVC design, whereas Flux or Redux is the architecture.

A ReactJS application is made up of numerous components, each being responsible for

generating a reusable piece of HTML code. Components are the foundation of all React
programs. Complex applications can be developed using simple building blocks by nesting
these components with other components. ReactJS interconnects the DOM-based technique
for populating data in the HTML DOM. Because the virtual DOM alters specific DOM
components rather than refreshing the full DOM, it is fast.

To create a React app, we create React components that correspond to various aspects. The
application structure is made up of these components, which are arranged into higher-level
components. Consider a form containing the required fields, labels, and buttons, among other
things. Each form component can be created as a React element, which we then combine to
build the form component. The form elements would describe the structure and parts of the
form.

ReactJS' major purpose is to construct a User Interface that aids program performance. It
makes use of a virtual DOM (JavaScript objects), that speeds up the app. In JavaScript, the
virtual DOM is quicker than the traditional DOM. ReactJS can also be used on server and
client sides, as well as with other frameworks. Component and data structures are used to
frame and make app maintenance easier.

25
 Fig. 3.2 An example of a ReactJS application

3.5.1 Features of ReactJs

Fig. 3.3 Features of ReactJS

ReactJS is quickly becoming the most popular JavaScript framework among web developers.
It is an important part of the front-end ecology. The following are some of ReactJS' key
features:

JSX

JavaScript XML is abbreviated as JSX. It's a syntax extension for JavaScript. ReactJS uses an
XML or HTML-like syntax. This syntax is converted into React Framework JavaScript calls.
It enhances ES6 to allow HTML-like text and JavaScript react code to coexist. It is not
required to utilize JSX, however, it is strongly recommended in ReactJS.

Components

Components are at the heart of ReactJS. A ReactJS application consists of several

components, each with its logic and controls. These components are reusable, which makes it
easier to keep the code clean while working on larger projects.

One-way Data Binding

ReactJS is designed to handle one-way data binding or unidirectional data flow. One-way
data-binding allows you to have more control over your application. If the data flow occurs
oppositely, additional characteristics are required. Because components are designed to be
immutable, and the data they contain cannot be modified, this is the case. Flux is a pattern
that aids in data unidirectionality. This increases efficiency by making the application more

26
versatile.

Virtual DOM

The original DOM object is represented by a virtual DOM object. It functions similarly to a
one-way data binding. The complete UI is re-rendered in virtual DOM representation
whenever any changes are made to the web application. Then it compares the differences
between the old and new DOM representations. After that, the true DOM will only update
the things that have changed. This speeds up the application and eliminates memory waste.

Simplicity

ReactJS makes use of a JSX file, which makes the program easy to code and comprehend.
We already know that ReactJS is a component-based solution that allows you to reuse code
as needed. This makes it easy to use and understand.

Performance

The speed of ReactJS is well-known. This distinguishes it from other frameworks currently
available. This is due to the fact that it manages a virtual DOM. The Document Object Model
(DOM) is a cross-platform computer programming API for HTML, XML, and XHTML. The
DOM is purely memory-based. As a result, we didn't even write directly to the DOM while
creating a component. Instead, we'll create virtual components that will be converted into the
DOM, resulting in smoother and faster performance.

3.6 Node.js

Node.js is an open-source and cross-platform JavaScript runtime environment. It is a

commonly used tool for almost any task. Node.js runs the V8 JavaScript engine, which is at
the core of Google Chrome, outside of the browser. As a consequence, Node.js is lightning
quick.

Node.js software runs in a single operation rather than creating a new process for each
request. The standard library of Node.js offers a set of asynchronous I/O semantics that
prohibit JavaScript code from stopping, and modules in Node.js are frequently built using
non-blocking paradigms, thus blocking behavior is an exception to the general rule.

When Node.js performs an I/O operation, such as receiving from the connection, entering a
database, or entering the filesystem, instead of suspending the process and spending CPU

27
cycles awaiting a response, Node.js will begin the activities as soon as the response is
received. This allows Node.js to handle hundreds of concurrent connections without
incurring the cost of thread concurrency control, which may be a major source of mistakes.

Node.js has a significant benefit since billions of frontend programmers who develop
JavaScript for the internet can now generate server-side code in combination with client
applications without needing to learn another language. You shouldn't have to rely on all of
our users' browsers to upgrade to use the new ECMAScript standards in Node.js because you
can choose ECMAScript version use by updating the Node.js edition, and you can
additionally facilitate certain experimental features by running Node.js with flags.

4. INTERNSHIP WORK

4.1 Description

The major task of the project is to Collection and CDL team comments/Feedback should be
accessible to Credit Team. I mainly have to create three internal dashboards for the company.

Which were Cdl dashboard, Collection Dashboard, and Credit dashboard Changes.

4.2 Features of the dashboard

Feature 1: In the Pre-Credit Feedback tab, Agents can write comments about customers by
pressing the “Add Feedback” button. (Screen 1)

Feature 2: It will be saved by date and agent name. (Screen 2)

Feature 3: Agents can write multiple comments.

28
Feature 4: very same comments will be visible on Credit Dashboard as well.

4.3 Collection dashboard

Feature 1: Agents can write comments about customers. (present CDL design is to remain
the same). (Screen 1)

Feature 2: Agents will fill the category (Drop-down). (Screen 1)

Feature 3: It will be saved by date and agent name.

Feature 4: Agents can write multiple comments.

Feature 5: very same comments will be visible on Credit Dashboard.

4.4 Credit Dashboard Changes

Create Intel Page on Credit Dashboard and Integrating the Cdl dashboard and the collection
dashboard in a view only mode.

Feature 1: There is to be a separate tab,”Intel” for feedback and comments of CDL and
collection teams.

Feature 2: If there are any comments, a green dot will show up in the Intel tab.

Feature 3: In the Intel tab, credit officers can click on the feedback/comments and see the
details left by CDL/collection.

4.5 Code

The basic code of background.js is as follows.

29
30
Collection Dashboard

31
32
Intel Page

33
34
35
36
 5. RESULTS

After building the cdl dashboard with edit and view comment feature and the collection
dashboard with view and edit review functionality. As a result Correct data was displayed on
the intel page of the credit dashboard, using v-dialog box in a view only mode.

37
 CONCLUSION

In conclusion, this internship has become a wonderful and rewarding experience. I can say
that my stay with Zeetron Networks Pvt. ltd. was quite beneficial to me. Needless to say, the
technical components of my work aren't perfect and, given enough time, could be improved.
As someone who had no prior experience with MERN stack development, I think the effort I
spent learning and understanding about was well spent, as it helped to construct a fully
effective web service. Two of the most significant lessons I've learned are time management
and self-motivation.

MERN stack and its characteristics are studied and applied to build an end-to-end social
media web application. The paper has outlined comprehensively the history of
JavaScript, which is the core of MERN stack, as well as the background theories,
concepts, and important techniques of each technology in the stack itself. The author has
demonstrated the advantages of those technologies and how they strongly unify to form
an application with connected backend and frontend, aided by a NoSQL database engine.

38
 REFERENCES

1) David, A.Arnott. Everyone wants full stack developers — and these other 24
in-demand jobs [online]. National News Desk Editor. Mar 22, 2017.
Retrieved from https://www.bizjournals.com/bizjournals/news/2017/03/22/every
one-wants-full-stack-developers-and-these.html. Accessed on 17 April 2021.
2) MongoDB. MERN Stack. Retrieved from https://www.mongodb.com/mern-
stack?fbclid=IwAR19AW5xLR45sMUccHB1mjbZLbAq8u8ePnm
EI6aAYlM1H2vEtQtpAwrSYSU. Accessed on 17 April 2021.
3) Node.js. AboutNode.js. Retrieved from
https://www.mongodb.com/mern- stack?
fbclid=IwAR19AW5xLR45sMUccHB1mjbZLbAq8u8ePnm
EI6aAYlM1H2vEtQtpAwrSYSU. Accessed on 17 April 2021.
4) MongoDB Manual. Introduction to MongoDB. Retrieved from
https://docs.mongodb.com/manual/introduction/. Accessed on 17 April 2021.
5) https://www.youtube.com/watch?v=SccSCuHhOw0
6) (2006) Vue JS 3 Tutorial for Beginners #1 - Introduction - YouTube

39