Table of Content

1. Chapter 1- Introduction
1.1 Front Page
1.2 Acknowledgement
2. Chapter 2- Introduction to Assigned Job
3. Chapter 3- Modular Description of Job
1) Introduction to Web Development
2) HTML
3) CSS
4) Javascript
5) Google Chrome Developer Console
6) React Js
7) Node Js

4. Chapter 4- Analysis of the tasks performed

5. Chapter 5- Conclusion
6. Chapter 6- Bibliography
CHAPTER 2 INTRODUCTION TO ASSIGNED JOB

During the internship, various techniques were studied which are as follows:

Introduction to Web Development

HTML
CSS
JAVASCRIPT
GOOGLE CHROME DEVELOPER CONSOLE
REACT JS
NODE JS

CHAPTER 3 MODULAR DESCRIPTION OF JOB

Introduction to Web Development

Goal- To understand the basics of how the web technology works, both at the server
and client-side, and how everything combines front-end to the back-end to give a
complete web-app.

Explanation-

“Full Stack Web Development alludes to the development of both front end(client
side) and back end(server side) portion of web application.”

Full stack”web engineers can configuration complete web application and sites. They
take a shot at the frontend, backend,”database and maintenance of web application or
sites.

“Front end is the noticeable piece of site or web application which is liable for client
experience. The client straightforwardly interfaces with the front end segment of the
web application or site.”

Back end alludes“to the server-side portion of web application or site with an essential
spotlight on how the site functions. It is answerable for dealing with the database
through questions” and APIs by customer side orders. This sort of site primarily
comprises of three sections front end, back end, and database.

“Database is the assortment of between related information which helps in productive

recovery, addition and erasure of information from database and sorts out the
information as tables, sees, patterns, reports and so on.”

“ ”
Fig 3.1- Skillset of a full stack web developer

HTML (Hypertext Markup Language)

Goal- To utilize prior knowledge of HTML Fundamentals and become practically

familiar with the most usable tags such as div, span, strong, forms, img, hyperlinks etc.

Explanation –

Hypertext Markup Language (HTML) is the standard”markup language for archives intended to be
shown in an internet browser. It very well may be”helped by advancements, for example, Cascading
Style Sheets (CSS) and scripting dialects, for example, JavaScript.

Internet browsers get HTML reports from a web server or from nearby capacity and render the
records into mixed media site pages. HTML portrays the” structure of a site page semantically and
initially included signals” for the presence of the” archive.

HTML components are the structure squares of HTML pages. With HTML builds, pictures and
different “items, for example, intelligent structures might be implanted into the rendered page. HTML
gives a way to make organized archives by indicating basic semantics for content, for example,
headings, passages, “records, connections, cites and different things. HTML components are depicted
by labels, composed utilizing point sections. Labels, for example, <img/> and <input/>
straightforwardly bring content into the page. Different labels, for example, <p> encompass and give
data about archive message and” may incorporate different labels as subcomponents. Programs don't
show the HTML labels, yet use them to decipher the substance of the page.
CSS (Cascading Style Sheets)

Goal-To get familiar with basics of styling a webpage using CSS and minifying
CSS for more efficiency.

Explanation –

Cascading Style Sheets (CSS) is a template language utilized for”portraying the introduction of a
record written in a markup language like”HTML. CSS is a foundation innovation of the World Wide
Web, close by HTML and JavaScript”.

CSS is “intended to empower the partition of introduction and substance, including design, hues, and
fonts. This detachment “can improve content availability, give greater adaptability and control in the
detail of introduction qualities,“empower different site pages to share arranging by determining the
significant CSS in a different .css record, and lessen intricacy and redundancy in the auxiliary
substance”.

Partition”of organizing and substance likewise makes it attainable to introduce a similar markup page
in various styles for various rendering techniques, for example, on-screen, in print, by voice (by
means of discourse based program or screen per user), and on Braille-based material gadgets. CSS
additionally has rules for substitute designing if the substance is gotten to on a versatile device.

The name cascading originates from the predefined need plan to figure out which style rule applies if
more than one principle coordinates a specific component. This falling need conspire is unsurprising.

JAVASCRIPT

Goal- To understand the concepts of Javascript such as event-handling, OOPS

etc. and use them to create interactive web-apps.

Explanation-

JavaScript frequently”shortened as JS, is a programming language that fits in

with the ECMAScript determination. JavaScript is elevated level, regularly in
the nick of time”gathered, and multi-worldview. It has wavy section linguistic
structure, dynamic composing, model based article direction, and top of the
line capacities.

Nearby HTML and CSS, JavaScript is one of the center advances of the
World Wide Web. “JavaScript empowers intuitive site pages and is a
fundamental piece of web applications. Most by far of sites use it for customer
side page conduct,” and all significant internet browsers have a devoted
JavaScript motor to execute it.

As”a multi-worldview language, JavaScript underpins occasion driven, practical,

and basic programming styles. It has application programming interfaces (APIs)
for working with content, dates, ordinary articulations, standard information
structures, and the Document Object Model (DOM). Notwithstanding, the
language itself does exclude any info/yield (I/O, for example, systems
administration, stockpiling, or”illustrations offices, as the host condition
(generally an internet browser) gives those APIs.

JavaScript motors were initially utilized distinctly in internet browsers, however

they are presently implanted in certain servers, as a rule by means of Node.js.
They are additionally installed in an assortment of uses made with systems, for
example, Electron and Cordova.

In”spite of the fact that there are similarities among JavaScript and Java,
including language name, linguistic structure, and particular standard libraries,
the two dialects are unmistakable and contrast enormously in”plan.

GOOGLE CHROME DEVELOPER CONSOLE

Goal- To understand how the data that flows through the app, can be checked in network
tab, how console tab helps in logging and how element tab helps in DOM manipulation at
runtime.

Explanation-
Web improvement tools (regularly called devtools) “permit web engineers to test and
investigate their code. They are not the same as web designers and coordinated
improvement situations (IDEs) in that they don't aid the immediate formation of a site
page, rather they are”instruments utilized for testing the UI of a site or web application.

Web improvement tools”come as program additional items or inherent highlights in

internet browsers. Most well known internet browsers, for example, Google Chrome,
Firefox, Internet Explorer, Safari and Opera, have worked in apparatuses to help web
designers, and numerous extra additional items can be found in their particular module
download”focuses.

Web advancement”instruments permit designers to work with an assortment of web

advances, including HTML, CSS, the DOM, JavaScript, and different segments that are
taken care of by the internet browser. Because of expanding request from internet
browsers to do more,”famous internet browsers have included more highlights
designed for engineers.

Fig 3.5 – Developer Tools Elements tab to view HTML and CSS.

Fig 3.6 – Console tab to run Javascript

 Fig 3.7 – Sources tab lists source files

Fig 3.8 – Network tabs show the data fetched over network calls

Fig 3.9 – Performance tab to show efficiency.

Fig 3.10 – Memory tab shows memory usage

 Fig 3.11 – Application tab show total application structure

Fig 3.12 – Security tab reviews security

Fig 3.13 – Audit tab shows various miscellaneous features.

REACT JS

Goal- To understand the architecture of front-end development using react framework

developed by the Facebook.

Explanation-
React (otherwise called React.js or ReactJS) is an open-source JavaScript library for
building UIs. It is kept up by Facebook and a network of individual designers and
organizations.

React “can be utilized as a base in the advancement of single-page or portable

applications. Be that as it may, React is just worried about rendering information to
the DOM, thus making React applications for the most part requires the utilization of
extra libraries “for state the executives and directing. Redux and React Router are
individual instances of such libraries.

“
NODE JS

Goal- To understand the basics of backend development using node js and to host a
server using express js.

Explanation –

Node.js”is an open-source, cross-stage, JavaScript runtime condition that executes JavaScript code
outside of an internet browser. Node.js lets engineers use JavaScript to compose order line devices
and for server-side scripting—running contents server-side to deliver dynamic website page content
before the page is sent to the client's internet browser. Subsequently, Node.js speaks to a "JavaScript
all over the place" worldview,” bringing together web-application improvement around a solitary
programming language, as opposed to various dialects for server-and customer side contents.

“However .js is the standard filename expansion for JavaScript code, the name "Node.js" doesn't
allude to a specific document in this unique circumstance and is only the name of the item. Node.js
has an occasion driven design equipped for offbeat I/O. These plan decisions mean to upgrade
throughput and adaptability in web applications with many”info/yield tasks, just as for continuous
Web applications (e.g., ongoing correspondence projects and program games).

The Node.js disseminated advancement venture was recently represented by the Node.js Foundation,
and has now converged with the JS Foundation to frame the OpenJS Foundation, which is encouraged
by the Linux Foundation's Collaborative Projects program .
CHAPTER 4 ANALYSIS OF THE TASKS PERFORMED

FRONT-END

1. Brand Panel: In this panel, all the information related to various brands is shown.
Data is displayed in the form of various graphs, representing the sales on the basis of various
time periods such as on daily, weekly and monthly basis. Also, there are graphs representing
the best city, locality, where the sales of that brand has occurred in the recent times. The
competitor data is also shown in the form of various graphs.

Created a dialog box to be displayed, on verification of a transaction, and set buttons color using CSS.
The screenshot shown below displays a webpage where the verification of billed transaction is done.
An algorithm detects the items printed on the bill using machine learning and image processing
techniques and then verification is performed on these listed items. If the verification is possible, the
transaction is submitted, otherwise the transaction skipped and the dialog box gets displayed.

Fig 4.1.1 - Dialog Box to verify a transaction

2. Retail Panel: This panel lists all the information related to the retail merchants. These
merchants are categorized as retail-merchants, online merchants etc. On retail panel, we have
four various web pages namely, Home, Voucher, Customers, and Feedback. The home page
displays the data related to the merchant campaigns. The voucher page shows the vouchers
offered on the magicpin platform by the merchants, campaign wise. The customer page shows
customers related data and feedback page presents user-feedback.
Created global filters to change the information displayed on the webpage as the dates
are changed or campaign is changed. There are two global-filters, one that allows
switching between the campaigns and another, that changes the dates for which the data
is displayed. These dates can be set manually by the user, along with some default
options.

Fig 4.2.1 – Global Filters

Created and wired the data for the Growth Graph, using react chart-js library. The Growth Graph
displays percentage wise growth of a merchant in recent times. It’s view can be changed on daily,
monthly and weekly basis. This graph provides comparison data for a merchant for the various
competitors in its categories.

Fig 4.2.2 – Growth Chart

Updated the design of the Goal Tracker. The goal tracker represents the current campaign details, the
mission and how its progressing over the period of time.
 Fig 4.2.3 – Goal Tracker

Updated the design of Sales Chart to use react chart-js library. This chart displays the sales and orders
data for the merchant in the current campaign. It is a stacked bar chart.

Fig 4.2.4 - Sales Chart

The New Customer Distribution and the losing customers graph are pie-charts. The new customer
distribution graphs represents the distribution of customers along the various competitor brands in
recent times. And the losing customer distribution shows how the customers of the current brands are
shifting towards the other competitors.
 Fig 4.2.5 – Gaining and Losing Customers

Created the design and wired the data for repeat-frequency graph. This graph shows the percentage of
customers who have the transacted more than 2, 3, 4, 5 times.
 Fig 4.2.6 – Repeat Frequency Chart

Created the design customer preferences chart, with horizontal slider using the react slick library.
This graph shows customer preferences locality-wise and city-wise.

Fig 4.2.7 – Customer Preference

Developed the component for customer profile chart and wired its data. This component displays the
distribution of customers for the merchant across genders and the average age of the customers. Same
data is shown for the competitors.
 Fig 4.2.8 – Customer Profile

Updated the design of Time/Week Chart to use react chart-js. This graph shows how the transactions
of the customer varies according to various different times in the day. There is also another option to
check how data varies according to various days in the week.

Fig 4.2.9 – Time / Week Pattern Graph

Created the design of Average order value Chart and wired the data for it. This chart shows what is the
average value of the customers for the current merchant and its various competitors on the magicpin
platform.
 Fig 4.2.10 – Average Order Value Chart

Created Potential Chart which calculates potential audience for a merchant. This is a form which
allows a merchant to fill details such as city, age, gender, category and the average amount of spend.
Based on this data, the target audience for the merchant.

Fig 4.2.11 – Potential Chart Form

 Fig 4.2.12 – Potential Chart Outcome

Wired the feed data on vouchers page for retail-panel. This feed represents the offers provided by the
merchants throughout their campaigns on the magicpin platform.

Fig 4.2.13 – Feed on Vouchers Page

3. Online – Panel: This panel lists the data of the online merchants. It has various components such
as Sales graph, conversion funnel, customer preferences, voucher details, goal tracker, customer
profile and city distribution and global filters.

Created the design and wired the data for the sales chart. This chart represents the sales and orders
values for the current merchant. Both of these data varies on daily, weekly and monthly basis. In the
value tab, average order values is displayed as a line graph with respect to the secondary y-axis and
the voucher data is displayed as a bar chart with respect to the primary y-axis. The order tab
represents the orders on a bar chart.
 Fig 4.3.1 – Sales Chart with values tab selected

Fig 4.3.2 – Sales Chart with orders tab selected.

Created the conversion funnel component and the voucher - details table. The voucher-details table
shows the voucher variant displaying the information about the voucher, total number of vouchers
sold, total number of vouchers redeemed and the amount of user spend. The conversion funnel
graphs shows how many times the merchants portal has been viewed, how many views have been
have been converted into clicks and how many clicks have changed into transactions.
 Fig 4.3.3– Vouchers Details Table and Conversion Funnel

Developed the Customer Preference Chart and wired its data. This chart represents the customer
preference in various categories such as Food and Beverages, Fashion , Grocery etc.
 Fig 4.3.4 – Customer Preference Chart

Developed the Customer Profile and City Distribution component. The customer profile represents
the percentage distribution of customer gender-wise and in various age groups. The city distribution
chart is a pie-chart which shows the distribution of orders for the merchant in various cities.

Fig 4.3.5 – Customer Profile and City Distribution Chart

BACK-END

• Written restful API’s (Application Programming Interface) for the city distribution chart
and customer profile for the online panel and for the potential chart on the retailpanel.
• Performed caching of data using various data structures, so that database isn’t referenced
on each API call.

CHAPTER 5 CONCLUSION

“As an undergraduate of the Bihar Engineering University I would like to say that this internship
program is an excellent opportunity for us to get to the ground level and experience the things that we
would have never gained through going straight into a job. I am grateful to the Bihar Engineering
University and Invigo Infotech for giving me this wonderful opportunity.”

“The main objective of the internship is to provide an opportunity to undergraduates to identify, observe
and practice how engineering is applicable in the real industry. It is not only to get experience on
technical practices but also to observe management practices and to interact with fellow workers.””

“It is easy to work with sophisticated machines, but not with people. The only chance that an
undergraduate has to have this experience in the internship. I feel I got the maximum out of that
experience. Also I learnt the way of work in an organization, the importance of being punctual, the
importance of maximum commitment, and the importance of team spirit.”
In my opinion, I have gained lots of knowledge and experience needed to be successful in a great
engineering challenge, as in my opinion; Engineering is after all a Challenge, and not a Job.”

“The internship that I received at Invigo Infotech was great experience for me not only on technical
terms but also in”terms of interaction with other employees. I learnt a great deal on applying the
knowledge I have gained at the College. Learning something from books and lectures Is nothing”like
having firsthand experience. I gotto apply my Programming knowledge.The company gives the full
freedom to the interns to get a sufficient exposure. The interns are allowed to perform tasks relevant to
the internship. Engineers are always very enthusiastic on giving us the best training Page experience.
The”employees do not think of their designation but only on the work to be done. Teamwork has been
excellent. Everyone was friendly from top to bottom. Employees are busy with their work but they
always help us to improve our knowledge.”

CHAPTER 6 BIBLIOGRAPHY
● https://javascript.info/
● https://reactjs.org/
● https://stackoverflow.com/