CHAPTER 1

INTRODUCTION

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.”

1
 “ ”

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

2
incorporate different labels as subcomponents. Programs don't show the HTML labels, yet
use them to decipher the substance of the page.

“ ”

Fig 3.2 – HTML symbol

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”.

3
 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.

“ ”

Fig 3.3 – CSS symbol

4
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.

5
”

Fig 3.4 – Javascript Image

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.

6
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

7
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

8
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.

9
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.

”Fig 3.14 – React Symbol

10
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

”Fig 3.15 – Node Js Symbol

11
 CHAPTER 2

ANALYSIS OF THE TASKS PERFORMED

FRONT-END

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

12
 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

13
 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

14
 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

15
 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.

16
 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.

17
Fig 4.2.10 – Average Order Value Chart

Fig 4.2.11 – Potential Chart Form

18
 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.

19
 CHAPTER 3

TECHNOLOGIES USED

Technologies, Frameworks, and Tools Used:

HTML, CSS, JavaScript:

HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript
formed the core trio of front-end technologies. HTML was used for structuring web pages,
CSS for styling and layout, and JavaScript for interactivity and dynamic behavior.

React.js:

React.js was employed for building dynamic and interactive user interfaces. Its
component-based architecture facilitated the creation of reusable UI elements, enhancing
development efficiency and maintainability.

Node.js:

Node.js was utilized for server-side development, enabling the execution of

JavaScript on the server. It provided a powerful runtime environment for building scalable
and high-performance back-end applications.

Express.js:

Express.js, a minimalist web application framework for Node.js, was chosen for
handling routing, middleware, and other server-side functionalities. It streamlined the
development of robust and efficient APIs.

MySQL:

MySQL was the chosen relational database management system (RDBMS) for
storing and managing structured data. It provided a reliable foundation for data storage and
retrieval in the e-commerce project.

20
MongoDB:

MongoDB, a NoSQL database, was employed in the social networking application

project for its flexibility in handling unstructured data. Its document-oriented approach
proved invaluable in accommodating diverse user-generated content.

WebSocket:

WebSocket technology was utilized to establish real-time communication channels in

the social networking application. This facilitated instant messaging and interactive features,
enhancing user engagement.

Git and GitHub:

Git version control system, in conjunction with GitHub, was instrumental in

managing code repositories, facilitating collaborative development, and ensuring version
history and code integrity.

AWS (Amazon Web Services):

AWS services, including EC2 for hosting, S3 for file storage, and RDS for database
management, were leveraged for deploying and hosting web applications.

Postman:

Postman was used for API testing and debugging, allowing for efficient validation of
API endpoints and responses during development.

These technologies, frameworks, and tools collectively formed the technological stack that
empowered the successful execution of the web development projects during my internship.
They played pivotal roles in achieving project objectives and enhancing the overall user
experience of the applications.

21
 During my Fullstack web development internship, I had the opportunity to work with
a diverse range of technologies, libraries, and tools that collectively formed the foundation of
the projects. This included utilizing HTML, CSS, and JavaScript as the fundamental trio for
crafting the structure, style, and interactivity of web pages. React.js was employed
extensively to develop dynamic and interactive user interfaces, leveraging its component-
based architecture for reusable UI elements. On the server-side, Node.js provided a powerful
runtime environment, allowing JavaScript to be executed server-side.

Complementing Node.js, Express.js was employed as a minimalist web application

framework, streamlining routing, middleware, and other server-side functionalities. For
database management, MySQL was chosen for its robustness in handling structured data in
one project, while MongoDB, a NoSQL database, was utilized in another for its adaptability
in managing unstructured data. Version control was facilitated through Git and GitHub,
ensuring seamless collaboration and version history tracking. Additionally, AWS services
such as EC2, S3, and RDS were leveraged for deployment and hosting needs, while Heroku,
a cloud platform as a service, proved invaluable for its simplicity and Git integration in
hosting applications.

Bootstrap played a pivotal role in front-end development, ensuring mobile

responsiveness and expediting UI design through its pre-built components and responsive
grid system. Lastly, Postman was instrumental for API testing and debugging, allowing for
efficient validation of API endpoints and responses. These technologies, libraries, and tools
collectively formed a robust stack that empowered the successful execution of the web
development projects during my internship, ultimately contributing to the enhancement of
user experience and achieving project objectives.

22
 CHAPTER 4

CHALLENGES FACED

During my web development internship, I encountered several challenges that

provided valuable learning experiences. One notable difficulty arose when I was tasked with
optimizing the performance of a particularly complex React component. Balancing the need
for a highly interactive user interface with optimal load times proved to be a delicate task. It
required a deep dive into React's lifecycle methods and state management to identify and
address performance bottlenecks. Another challenge emerged during the integration of a
third-party API for payment processing. Navigating the API documentation and
understanding its nuances required meticulous attention to detail, as well as extensive trial
and error to ensure seamless integration. Additionally, collaborating with a diverse team of
developers brought its own set of communication challenges. Effective coordination and
clear communication became crucial in ensuring that everyone was aligned on project
objectives and tasks. Despite these difficulties, they provided me with opportunities to
enhance my problem-solving skills, expand my technical knowledge, and develop a more
nuanced understanding of the intricacies of web development. Each challenge ultimately
contributed to my growth as a developer and reinforced my determination to tackle complex
problems head-on.

Complex Component Optimization:

Optimizing a complex React component for performance proved challenging.

Balancing interactivity with load times required a deep dive into React's lifecycle methods
and state management.

Third-Party API Integration:

Integrating a third-party API for payment processing presented a significant hurdle.

Navigating the API documentation and understanding its intricacies demanded meticulous
attention to detail and extensive trial and error.

23
Collaborative Development Challenges:

Working with a diverse team of developers brought communication challenges.

Effective coordination and clear communication became crucial to ensure alignment on
project objectives and tasks.

Cross-Browser Compatibility:

Ensuring consistent functionality and appearance across different browsers posed a

notable difficulty. Debugging and testing for compatibility on various browsers required
careful attention to detail.

Database Query Optimization:

Improving the efficiency of database queries for retrieving and updating data
presented a complex problem. This required a deep understanding of database indexing and
query optimization techniques.

Security Concerns:

Addressing security vulnerabilities and implementing robust security measures was a

priority. This included safeguarding against SQL injection, cross-site scripting (XSS), and
other potential threats.

Version Control Issues:

Managing complex codebases with multiple contributors led to occasional conflicts in

version control. Resolving these conflicts in a way that preserved code integrity required
careful attention and collaboration.

Handling Large Data Sets:

Processing and displaying large datasets efficiently proved challenging.

Implementing pagination and optimizing data fetching strategies were essential to ensure
smooth user experiences.

24
Adapting to Evolving Technologies:

Staying up-to-date with rapidly evolving technologies and frameworks posed a

continuous challenge. Learning new tools and techniques while maintaining project progress
required adaptability and a proactive approach.

Time Management for Multiple Tasks:

Balancing multiple tasks and deadlines within the project timeline required effective
time management skills. Prioritizing tasks and allocating time appropriately was crucial to
meet project milestones.

In tackling the challenges encountered during my web development internship, I

adopted a multi-faceted approach that combined research, collaboration, and hands-on
experimentation. For the complex component optimization, I delved into React's
documentation and explored various optimization techniques. Through meticulous profiling
and testing, I identified areas of improvement and implemented performance-enhancing
strategies, such as memoization and lazy loading, resulting in significantly improved
component responsiveness.

Integrating the third-party API for payment processing demanded a rigorous process
of understanding the API documentation and conducting iterative testing. Leveraging the
knowledge gained from API integration, I refined my ability to navigate and integrate
external services, broadening my skill set in working with diverse software ecosystems.

Collaborative development challenges were mitigated through improved

communication practices. Engaging in regular stand-ups and leveraging project management
tools facilitated clearer task assignment and progress tracking. Additionally, I proactively
sought feedback from team members and actively participated in code reviews, which not
only resolved any misunderstandings but also fostered a culture of knowledge sharing and
mutual learning.

Addressing cross-browser compatibility issues involved extensive testing and

debugging across various browsers. Leveraging browser developer tools and adopting

25
progressive enhancement strategies, I ensured a consistent user experience across platforms,
reinforcing the importance of thorough testing in the development process.

For database query optimization, I delved into advanced SQL techniques and
explored indexing strategies. By refining my understanding of database performance, I
successfully improved query execution times, demonstrating the critical impact of efficient
database management on overall application performance.

These experiences collectively reinforced the importance of adaptability, persistence,

and a proactive approach in overcoming challenges in web development. Moreover, they
underscored the significance of continuous learning and the value of a collaborative work
environment in facilitating professional growth. Overall, these experiences have equipped me
with a more comprehensive and nuanced skill set, positioning me as a more adept and
resourceful web developer.

Complex Component Optimization:

Approach: Conducted in-depth research on React optimization techniques, including

memoization and lazy loading. Profiling and testing were used to identify and address
performance bottlenecks.

Learning: Gained a deeper understanding of React's lifecycle methods and state

management. Learned to balance interactivity with performance for complex components.

Third-Party API Integration:

Approach: Thoroughly studied the API documentation and conducted iterative testing to
understand its functionality and requirements. Implemented and iterated on integration until
seamless functionality was achieved.

Learning: Developed advanced skills in integrating external services, enhancing adaptability

to diverse software ecosystems.

Collaborative Development Challenges:

Approach: Actively engaged in regular team meetings, stand-ups, and utilized project
management tools for clear task assignment and tracking. Sought feedback from team

26
members and actively participated in code reviews.

Learning: Improved communication skills, honed teamwork abilities, and gained insight
into effective collaborative development practices.

Cross-Browser Compatibility:

Approach: Conducted extensive testing and debugging across various browsers, leveraging
developer tools for troubleshooting. Employed progressive enhancement strategies to ensure
a consistent user experience.

Learning: Enhanced proficiency in debugging and troubleshooting, gained a deeper

understanding of browser-specific quirks, and honed skills in cross-browser development.

Database Query Optimization:

Approach: Delved into advanced SQL techniques and explored indexing strategies to
improve database query performance. Conducted rigorous testing to validate optimizations.

Learning: Deepened understanding of database management, gained proficiency in

optimizing database queries for enhanced application performance.

Time Management for Multiple Tasks:

Approach: Prioritized tasks based on project milestones and deadlines. Utilized time
management techniques to allocate dedicated time blocks for specific tasks.

Learning: Improved organizational and time management skills, gained the ability to
efficiently manage multiple tasks within project timelines.

27
 CHAPTER 5

CONCLUSION

As an undergraduate of the Jaypee University of Information Technology 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 Jaypee University of Information Technology and magicpin(Samast
Technologies Private Ltd.) 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.””

“ “The internship that I received at magicPin 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.”

28
 CHAPTER 6

BIBLIOGRAPHY

● https://javascript.info/
● https://reactjs.org/

● https://stackoverflow.com/

29