AN INTERNSHIP REPORT

on
REACT JS
at
TEIFECTA DIGI MEDIA

Submitted By
MANDHOJ BHARATI
P.U. Registration No: 2019-1-53-0005
Symbol Number: 20530033

In the partial fulfillment of the requirement for the degree of

BACHELOR OF COMPUTER APPLICATION
(BCA)

Submitted To
Department of Bachelor of Computer Application,
CITIZEN COLLEGE
(Affiliated To Pokhara University)
Kumaripati, Lalitpur,
Nepal.

FEB, 2024
 AN INTERNSHIP REPORT
on
REACT JS
at
TRIFECTA DIGI MEDIA

Submitted By
MANDHOJ BHARATI
P.U. Registration No: 2019-1-53-0005
Symbol Number: 20530033

In the partial fulfillment of the requirement for the degree of

BACHELOR OF COMPUTER APPLICATION
(BCA)

Submitted To
Department of Bachelor pf Computer Application,
CITIZEN COLLEGE
(Affiliated To Pokhara University)
Kumaripati, Lalitpur,
Nepal.

FEB, 2024
 COPYRIGHT ©

The author has agreed that the library, Department of Science and Technology, Pokhara
University,Citizen College, may make this internship Report freely available for inspec-
tion. Moreover, the author has agreed that the permission for extensive copying of this
internship report for scholarly purposes may be granted by the professor, who supervised
the internship report recorded herein or, in their absence, by the Head of the Department,
wherein this internship was done. It is understood that recognition will be given to the
author of this internship and to the Department of Science and Technology, Pokhara
University, Citizen College in any use of the material of this internship report. Copying
of publication or other use of this internship report for financial gain without the approval
of the Department of Science and Technology, Pokhara University, Citizen College and
the author’s written permission is prohibited.

Request for permission to copy or to make any use of the material in this thesis in whole
or part should be addressed to:

Head
Department of Science and Technology
Citizen College,Pokhara University
Kumaripati, Lalitpur, Nepal

iii
 DECLARATION

I, Mandhoj Bharati, hereby declare that the internship report titled ”Front-end Developed”
is a result of my own work and that it is based on my personal experience during the
internship period at Trifecta Digi Media. The report is being submitted to Citizen
College as a requirement for the completion of my internship. During my internship
period, I worked as an intern in the front-end Developer team of Trifecta Digi Media.
The internship provided me with valuable insights into React.js development practices,
enhancing my skills and knowledge in web development.

I declare that the information presented in this report is accurate and complete to the
best of my knowledge. All references used in the report are duly acknowledged and
cited. I also confirm that this report has not been submitted for assessment to any other
institution. I understand that any attempt to misrepresent the work in this report will
result in disciplinary action as per the policies of the institution.

Mandhoj Bharati
PU Reg. No.: 2019-1-53-0005,
Exam Symbol No.: 20530033
FEB, 2024

iv
RECOMMENDATION FROM WORKING COMPANY AND SUPERVISOR

Figure 1: Internship Certificate

v
 DEPARTMENTAL ACCEPTANCE

The Internship report on React JS at Trifecta Digi Media, submitted by Mandhoj

Bharati in partial fulfillment of the requirement for the award of the degree of “Bachelor
of Computer Application” has been accepted as a genuine record of work independently
carried out by the student in the department.

Head of the Department

Department of Science and Technology,
Citizen College,
Pokhara University, Nepal.

FEB, 2024

vi
 EXAMINER’S APPROVAL LETTER

Figure 2: EXAMINER’S APPROVAL LETTER

vii
 ACKNOWLEDGMENT

The successful completion of this internship report would not have been possible without
the support and assistance of many individuals and organizations. The author feels
immensely blessed to have gotten this during my internship program. The author would
like to take this opportunity to offer my earnest admiration to every one of them.

All thanks to my adorable parents for their profound help and support during the cause
of this internship. The author expresses my sentiment of gratitude to Mr. Rohan sir, who
has been a continuous source of inspiration as my intern mentor. My gratitude for his
trust and generosity goes beyond words. Author indebted and thankful to my learned
and revered supervisor for his upbeat personality, kindness; encouraging support, and
willingness to help have tangibly and greatly improved the quality of my Internship
Report and brought it up to its present status.

I would also like to thank the entire team at Trifecta Digi Media for welcoming me
and for all the knowledge and experience they have shared with me. I have genuinely
enjoyed working with all my colleagues, and I have learned so much from them.

I am grateful to Pokhara University and Citizen College for providing me with this
opportunity to gain practical experience in my field. I am confident that the skills and
knowledge I have gained during my internship will be invaluable as I continue my
academic and professional journey.

Finally, I would like to thank my family and friends for their support and encouragement
during my internship. Their love and belief in me have been a constant source of
strength and motivation. Thank you all for making my internship such a meaningful and
memorable experience.

Mandhoj Bharati
7th semester, BCA
FEB, 2024

viii
 ABSTRACT

This internship report encapsulates my immersive journey as a Front-End Web Design

intern, specifically focused on React.js, at Trifecta Digi Media. The report delves into
the dynamic landscape of web development, emphasizing the role of React.js in crafting
visually compelling and responsive user interfaces. Throughout the internship, gained
practical experience in mastering React.js fundamentals, implementing effective UI/UX
design, and applying responsive web design principles. Collaborative development,
problem-solving, and a commitment to continuous learning emerged as vital components
of the internship experience. The report encapsulates eight distinct learning outcomes,
highlighting the acquisition of technical proficiency, design sensibilities, and the ability
to navigate real-world challenges. Through reflective analysis, this abstract provides a
concise overview of the valuable insights and skills gained during the internship, setting
the stage for the detailed exploration within the full report.

Keywords: Design, Front-End, ReactJs, Skills.

ix
 TABLE OF CONTENTS

COPYRIGHT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii

DECLARATION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv

RECOMMENDATION FROM WORKING COMPANY . . . . . . . . . . . . . . . . . . . . v

DEPARTMENTAL ACCEPTANCE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vi

EXAMINER’S APPROVAL LETTER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

ACKNOWLEDGMENT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii

ABSTRACT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

TABLE OF CONTENTS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x

LIST OF FIGURES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii

LIST OF TABLES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii

LIST OF ABBREVIATIONS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv

1 INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 Internship. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 ReactJs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3.1 Objective of Internship . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.2 Objective of Internship in ReactJs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Scope and Limitation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.5 Report Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 ORGNIZATION ANALYSIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.1 Background of Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Structure of Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Specific Department . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3.1 CEO (Chief Executive Officer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3.2 Project Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3.3 Senior Developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3.4 Junior Developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3.5 Interns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

x
 2.4 Duration of Internship . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 LITERATURE REVIEW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2 Evolution of React.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3 Core Principles of React.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.4 Advantages of React.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.5 Challenges in React.js Development . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4 INTENSHIP ACTIVITIES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.1 Roles and Responsibilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.2 Weekly log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3 Description of the Project Involve during the Interns . . . . . . . . . . 15
4.3.1 Requirement Software Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.3.2 Back End . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.3.3 User Interface Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.3.4 login Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.3.5 Add links Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.3.6 Generate QR Code Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.4 Tasks /Activities Performed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

5 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.1 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.2 Learning Outcomes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
APPENDIX A

INTERNSHIP APPOINTMENT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Internship Log Book1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Internship Log Book2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Internship Log Book3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Internship Log Book4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Internship Log Book5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Evaluation Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

xi
 LIST OF FIGURES

Figure 1 Internship Certificate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v

Figure 2 EXAMINER’S APPROVAL LETTER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
Figure 2.1 Structure of Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Figure 2.2 Specific Department . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Figure 4.1 Login Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Figure 4.2 Add links Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Figure 4.3 Specific Department . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

xii
 LIST OF TABLES

Table 2.1 Duration of Internship . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Table 4.1 Weekly Log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Table 4.2 Major Tasks Performed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

xiii
 LIST OF ABBREVIATIONS

AJAX Asynchronous JavaScript And XML

API Application Programming Interface
BCA Bachelor Of Computer Application
CSS Cascading Style Sheets
CEO Chief Executive Officer
CTO Chief of Technology Officer
DBA Database Administrator
DOM Document Object Model
E-Business Electronic Business
HMVC Hierarchical Model View Controller
HTML Hypertext Markup Language
IT Information Technology
JS JavaScript
JSON JavaScript Object Notation
JQuery JavaScript Query
SEO Search Engine Optimization
SPA Single Page Application
SVG Scalable Vector Graphics
UI User Interface
XHTML Extensible Hypertext Markup Language
XML EXtensible Markup Language
XUL XML User Interface Language

xiv
 CHAPTER 1

INTRODUCTION

1.1 Internship
An internship is like a short-term adventure into the professional world, designed for stu-
dents or beginners eager to get a glimpse of real-world work. It’s a hands-on experience
where you dive into actual tasks related to your interests, learning from experts like a
superhero sidekick learning from their mentor. Whether it’s caring for animals at a zoo
or coding for a tech company, internships provide a taste of the working world, helping
you discover your passions and develop practical skills. They’re not just for experts;
they’re for curious learners ready to explore, make mistakes, and grow. Applying for an
internship is like joining a cool club, where your enthusiasm and willingness to learn are
your key qualifications. It’s a unique opportunity to bridge the gap between classroom
learning and the exciting challenges of a future career.

The internship program, which enabled me to transition from the classroom into a career,
was an example of Citizen College’s commitment to practical education. I have been able
to overcome challenges, expand my skills set and become more capable of dealing with
the demands of today’s business world thanks to a strong support from my university.
The commitment of the institution to promote holistic development is evidenced by this
internship experience which has been duly recognised and approved by Citizen College.
This underlines the importance of active engagement and hands on learning to develop
professionals that are ready for success in today’s competition landscape.

Internships for professional careers are similar in some ways, but not as rigorous as
apprenticeships for professions, trade, and vocational jobs. The lack of standardization
and oversight leaves the term “internship” open to broad interpretation. Interns may be
high school students, college and university students, or post-graduate adults. These
positions may be paid or unpaid and are temporary. Typically, an internship consists of an
exchange of services for experience between the intern and the organization. Internships
are used to determine if the intern still has an interest in that field after the real-life
experience. The benefit of bringing an intern into full-time employment is that they are
already familiar with the company, their position, and they typically need little to no

1
training. In addition, an internship can be used to create a professional network that can
assist with letters of recommendation or lead to future employment opportunities.

1.2 ReactJs
ReactJS, a dynamic JavaScript library forged by Facebook, stands as a cornerstone in
the ever-evolving landscape of web development. Its ascendancy can be attributed to
its ingenious component-based architecture, which empowers developers to construct
modular and reusable user interface elements. This modular approach not only fosters
code organization but also facilitates collaboration among development teams, enhancing
scalability and maintainability. The virtual DOM, a pivotal feature of React, optimizes
the rendering process by creating a lightweight, virtual representation of the actual DOM.
This approach minimizes manipulations and updates only the necessary components,
resulting in a highly efficient and performant web application.

At the heart of React’s expressiveness lies JSX, a syntax extension that seamlessly
combines JavaScript with HTML-like code. This declarative syntax not only enhances
code readability but also simplifies the representation of UI components and their states.
React’s ability to efficiently manage states through props and states further contributes
to its appeal, providing developers with a structured and predictable way to manage data
flow within their applications.

As the focus shifts toward practical application in this internship report, we will embark
on a journey through React’s core concepts, exploring its practical implementation, and
reflecting on firsthand experiences gained during the internship. This exploration aims to
equip the reader with a nuanced understanding of ReactJS and its pivotal role in shaping
modern, interactive web applications.

1.3 Objectives
The internship program was done to fulfill the academic requirement of the BCA 7th
Semester. An internship provides a variety of benefits for young workers who want to
broaden their chances of landing a job and jump-starting their careers.

2
1.3.1 Objective of Internship
1. To Provide students or recent graduates with practical, real-world work experience in
their chosen field,
2. To Allow interns to apply and expand their academic knowledge in a professional
setting,
3. To Develop new skills and enhance existing ones, such as communication, teamwork,
and time management,
4. To Build professional networks and connections in the industry,
5. To Offer exposure to different career paths and opportunities,
6. To Provide a platform for interns to display their talents and work ethic to potential

3
1.3.2 Objective of Internship in ReactJs
1. To Gain practical experience in React.js development,

2. To Apply theoretical knowledge acquired during academic studies to real-world

projects.

3. To Work collaboratively with cross-functional teams, including developers, designers,

and project managers.

4. To Develop problem-solving skills in the context of real-world web development.

5. To Best Practices and Code Quality.

6. To Documentation and Knowledge Sharing.

1.4 Scope and Limitation

The scope of this internship primarily revolves around the comprehensive exploration
of front-end web design, with a specific focus on React.js, within the dynamic envi-
ronment of Trifecta Digi Media. It encompasses hands-on experience in mastering
React.js fundamentals, creating scalable components, and implementing effective UI/UX
design principles. The scope extends to gaining proficiency in responsive web design,
collaborative development practices, and problem-solving skills. The internship further
delves into the application of learned concepts in real-world projects, contributing to a
holistic understanding of front-end development and positioning the intern as a valuable
contributor to web design projects.

While the internship provides valuable hands-on experience, its scope is confined to
the specific projects and technologies within Trifecta Digi Media. Time constraints
may limit the depth of exploration into certain aspects of front-end web design. The
projects’ nature influences the learning scope, potentially omitting some broader industry
practices. Additionally, the focus on practical applications may limit theoretical depth in
specific areas. Lastly, the evolving nature of web technologies means that the acquired
knowledge might not encompass every emerging trend in the field.

4
1.5 Report Organization
The material in this project report is organized into five chapters. After this introduction
chapter 1 introduces the problem topic this research tries to address, Chapter 2 describes
the background of the organization, structure, and specific department. Chapter 3
contains the literature review of vital and relevant publications, pointing toward a notable
research gap, and describes the literature review for the learn react js and internship
reports. Chapter 4 mentions the internship activities such as Roles and responsibilities
weekly log, and tasks/ activities performed. Chapter 5 concludes the project shortly,
mentioning the accomplishment and comparing it with the main objectives.

5
 CHAPTER 2

ORGNIZATION ANALYSIS

2.1 Background of Organization

Nepal is making quick progress in the Digital Marketing and website development
industry. Many mentionable Digital Marketing and website development organizations
in Nepal has contributed significantly to the rise of Digital Marketing and website
development industry sector in Nepal and Trifecta Digi Media Ltd. is one of them.
This exceptional team has every solution to their clients’ biggest and most complicated
problems. This organization services are offered both on and offshore, and delivered
with pride and passion. This organization is a group of young, motivated, skilled people
whose main goal is to provide their clients with an innovative solution regarding web
development and digital marketing.

Trifecta Digi Media is a company based in the USA that specializes in helping businesses
with their online presence. With a strong emphasis on client satisfaction, Trifecta Digi
Media is led by a dynamic management team and a skilled workforce well-versed in
the intricacies of web development, digital marketing, and beyond. The company’s
commitment to excellence extends to both onshore and offshore services, reflecting
a global outlook and a dedication to delivering results with pride and passion. They
offer services like creating websites, promoting businesses through digital marketing,
managing social media, and crafting engaging content. Even though the company is in
the USA, it’s cool to be part of their team from Nepal, and I’m learning a lot during my
internship.

The company has a group of creative and skilled people who are experts in web design,
digital marketing, hosting services, and more. They work hard to make sure their clients
are happy with the results. Trifecta Digi Media is not just about providing services;
they’re like a team that’s dedicated to finding smart solutions for their clients in the
ever-changing world of the internet. It’s exciting to be part of a company that cares about
doing great work, no matter where you are in the world, Trifecta Digi Media is able to
help its customers define and implement their e-business strategies successfully.

6
2.2 Structure of Organization
Trifecta Digi Media follows a streamlined organizational structure to ensure efficient
operations and optimal service delivery. The company is led by a dedicated management
team overseeing different departments, including web design, digital marketing, social
media management, and content creation. Each department is comprised of skilled
professionals working collaboratively to meet client needs. The hierarchical structure
facilitates clear communication and enables the team to adapt swiftly to the dynamic
demands of the digital landscape. This organized setup ensures a cohesive and effective
workflow, allowing Trifecta Digi Media to deliver high-quality services and innovative
solutions to its clients.

Figure 2.1: Structure of Organization

7
2.3 Specific Department
The Chief Executive Officer of the Company, Mr. Rohan Sharma is responsible for
overseeing the overall work culture of the organization. In the role, he sets the tone
and direction for how the resources and support they need to be successful. Mr. Sagar
Bhandari, the Project Manager/ Project Supervisor, works closely with Mr. Keshav
Bahadur Sunari to manage the various departments within the organization and the
projects that they handle. He is responsible for ensuring that projects are completed on
time, within budget, and to the highest possible standards of quality. In this way, Mr.
Bhandari plays a crucial role in helping the company to achieve its goals and objectives.
The Developer department is one of the several departments within the organization that
is managed by Mr. Sagar Bhandari, the Project Supervisor. This department consists of
three employees, including himself.

Figure 2.2: Specific Department

8
2.3.1 CEO (Chief Executive Officer)
A CTO is a top-level executive responsible for overseeing the technology strategy and
operations of a company. They are responsible for developing and implementing the
company’s technical vision, managing the research and development process, and making
technology-related decisions that align with the company’s goals and objectives.

2.3.2 Project Manager

Project Manager is responsible for planning, organizing, and managing resources to
ensure the successful completion of specific projects. They are responsible for creating
project plans, defining project goals and objectives, identifying risks and issues, and
managing project teams to ensure that projects are delivered on time, within budget, and
to the required quality standards.

2.3.3 Senior Developers

A Senior Developer is an experienced professional responsible for the design, implemen-
tation, and maintenance of the software development infrastructure and operations. They
are responsible for managing the deployment pipeline, automating the build and release
process, and ensure that the software development environment is highly available and
scalable.

2.3.4 Junior Developers

A Junior Developer is an entry-level position in the Development field. They assist in
the implementation and maintenance of the software development infrastructure and
operations. They are responsible for supporting the senior Development team members,
documenting processes, and providing assistance with troubleshooting issues.

2.3.5 Interns
An Intern is a temporary employee who is usually a student or recent graduate working
in an entry-level position to gain experience in a particular industry or profession. They
are typically given less complex tasks and require more supervision than those given to
full-time employees. Interns are expected to learn and contribute to the organization’s
goals, often to be offered a permanent position in the future.

9
2.4 Duration of Internship
I completed my internship program in partial fulfillment of the requirement for the
Bachelor of Computer Application (BCA) 7th semester of Pokhara University, Nepal, on
Front-End (ReactJs)from Trifecta Digi Media Company. The information on duration,
timing, and position are provided below.

Table 2.1: Duration of Internship

Organization Trifecta Digi Media

Start Date 20th November 2023
Address Imadol,Lalitpur
Total Duration 2 months
Position Front-End ( ReactJs)
Supervisors Er. Rohan Sharma
Work Hour 10am - 5:00pm
Working Days 6 days per week
End Date 20th Jan 2024

10
 CHAPTER 3

LITERATURE REVIEW

3.1 Introduction
React.js, a JavaScript library for building user interfaces, has gained immense popularity
in recent years, revolutionizing front-end development. This literature review provides
an overview of existing research on React.js, covering its evolution, core principles,
advantages, and challenges.

3.2 Evolution of React.js

React.js was introduced by Facebook in 2013 to address the challenges of building
dynamic and responsive user interfaces. The library’s development has been character-
ized by regular updates and an active community. Understanding its evolution provides
insights into the motivations behind its design choices and ongoing improvements.

3.3 Core Principles of React.js

React.js is built on key principles such as component-based architecture, virtual DOM,
and unidirectional data flow. Exploring these principles is crucial for grasping the
foundation of React.js and its impact on the development of scalable and maintainable
user interfaces.

3.4 Advantages of React.js

Numerous studies and practical implementations have demonstrated the benefits of
using React.js. These advantages include enhanced development speed, improved code
maintainability, and a modular approach that facilitates code reuse. Additionally, React.js
has proven effective in optimizing performance and user experience.

3.5 Challenges in React.js Development

While React.js offers a robust framework for building user interfaces, it comes with its set
of challenges. These challenges encompass issues like the learning curve for newcomers,
state management complexities, and potential difficulties in integrating React.js into
existing projects. Identifying and addressing these challenges is crucial for successful
React.js adoption.

11
3.6 Conclusion
The existing body of research indicates that React.js is a powerful tool for front-end
development, providing numerous advantages for developers and organizations. How-
ever, challenges in its adoption and usage should not be overlooked. Further research is
warranted to explore emerging trends, evolving best practices, and the long-term impact
of React.js on web development.

12
 CHAPTER 4

INTENSHIP ACTIVITIES

4.1 Roles and Responsibilities

1.React.js Development: Develop and implement user interface components using
React.js concepts and best practices. Collaborate with back-end developers to integrate
user-facing elements with server-side logic.

2. Responsive Web Design: Implement responsive web design principles to create

applications that adapt seamlessly across various devices and screen sizes.

3.Component-Based Architecture: Build modular and reusable components within a

component-based architecture to enhance scalability and maintainability.

4. Collaborative Development: Collaborate with cross-functional teams, including

back-end developers, designers, and other stakeholders, to deliver cohesive and integrated
solutions.

5. Debugging and Issue Resolution: Identify and troubleshoot software defects,

addressing issues promptly to ensure the smooth functionality of web applications.

6. Documentation: Document codebase, processes, and application features for future

reference and knowledge sharing within the team.

7. Continuous Learning: Stay updated with the latest trends and advancements in front-
end development and React.js, applying new knowledge to enhance existing projects.

8. Client Interaction: Collaborate with clients to understand their requirements, provide

technical insights, and incorporate feedback into the development process.

9. Testing and Quality Assurance: Implement testing strategies, including unit testing,
to ensure the reliability and quality of code. Collaborate with quality assurance teams to
address and resolve identified issues.

13
4.2 Weekly log
The following is the weekly log of tasks that I did during the internship period from
the day of my hiring to the end of 2 months contract i.e., 20th November, 2023 to 20th
January, 2024.

Table 4.1: Weekly Log

Weeks Date/Time Activities

Week 1 20th November 2023 – Introduction with all the mem-
26th November 2023, bers of the Company Create new
10:00 AM – 5:00 PM Gmail-related with the company.
Add-in every Different Social
Media Groups Such as What-
sApp, Viber etc.
Week 2 27th November 2023 – 3th Install and setup all the required
December 2023, tools used in Web Design like VS
10:00 AM – 5:00 PM code, React Js, npm Component,
Node JS, Routers, etc.
Week 3 4th December 2023 – 11th Basic introduction to react js,
December 2023, component, overview of react js,
10:00 AM – 5:00 PM Create Simple js file.
Week 4 12th December 2023 – 19th Create a different Js file with
December 2023, functionality, render HTML, re-
10:00 AM – 5:00 PM act list, and design a simple form
in react js
Week 5 12th December 2023 – 19th props, component, Hooks ie. us-
December 2023, 10:00 AM eState, useEffect, useContext in
– 5:00 PM React js
Week 6 20th December 2023 – Router in react js, navigation de-
27th December 2023, sign, and include the CSS file in
10:00 AM – 5:00 PM js file
Week 7 28th December 2023, – 5th React events like Onlick, On-
Jan 2024, change event, Revise and imple-
10:00 AM – 5:00 PM ment events on web pages, and
design personal portfolios.
Week 8 6th Jan 2024 – 13th Jan implement bootstrap on a simple
2022, reactjs form, login page, create
10:00 AM – 5:00 PM generator page, learn CSS
Week 9 14th Jan 2024 – 20th Jan Involve New Project planning,
2022, Brand Name, supporting, and de-
10:00 AM – 5:00 PM signing a simple project.

14
4.3 Description of the Project Involve during the Interns
During the internship, I worked on developing a QR code generator project aimed
at creating QR codes for various types of links, including links to YouTube videos,
Facebook pages, and websites. The project involved implementing a user-friendly
interface where users could input the desired link and generate a corresponding QR code
instantly.

Key Features:

1. Link Input: The project allowed users to input different types of links, such as
YouTube video URLs, Facebook page URLs, and website URLs, via a user interface.

2. QR Code Generation: Upon receiving the input link, the project dynamically
generated a QR code representing the provided link.

3. Customization Options: Users were provided with options to customize the appear-
ance of the generated QR code, such as choosing the size, color, and format.

4. Download and Sharing: The generated QR code can be downloaded or shared

directly from the application, making it convenient for users to use it in various contexts.

5. Responsive Design: The user interface was designed to be responsive, ensuring

optimal usability across different devices and screen sizes.

6. Error Handling: The project incorporated error handling mechanisms to validate

input links and provide informative feedback to users in case of invalid inputs.

7. Integration: The QR code generator was integrated with popular APIs and libraries
for generating QR codes efficiently and accurately.

Benefits:

- Ease of Use: The project provided a simple and intuitive way for users to generate QR
codes for different types of links without the need for technical expertise.

- Time Savings: By automating the QR code generation process, the project saved users
time and effort compared to manual methods.

15
- Versatility: The project supported various types of links, making it suitable for a wide
range of applications and use cases.

- Learning Experience: Developing the project provided valuable hands-on experience

in web development, user interface design, and integration with external APIs.

The QR code generator project undertaken during the internship demonstrated the practi-
cal application of web development skills and provided a valuable learning experience
for both the development team and end users.

4.3.1 Requirement Software Tools

The whole Project is divided into two parts the front end and the back end.

Front End

The front end is designed using of JavaScript (React JS), CSS, HTML etc.

HTML

HTML or Hyper Text Mark-up Language is the main mark-up language for creating
web pages and other information that can be displayed in a web26 browser. HTML is
written in the form of HTML elements consisting of tags enclosed in angle brackets (like
¡html¿), within the web page content. The purpose of a web browser is to read HTML5
documents and compose them into visible or audible web pages. It provides a means to
create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. It can embed scripts written in languages
such as JavaScript which affect the behavior of HTML web pages.

16
CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look
and formatting of a document written in a mark-up language. While most often used
to style web pages and interfaces written in HTML and XHTML, the language can
be applied to any kind of XML documents, including plain XML, SVG and XUL 5.
CSS is a cornerstone specification of the web and almost all web pages use CSS style
sheets to describe their presentation.CSS is designed primarily to enable the separation
of document content from document presentation, including elements such as the layout,
colors, and fonts. This separation can improve content accessibility, provide more
flexibility and control in the specification of presentation characteristics, enable multiple
pages to share formatting, and reduce complexity and repetition in the structural content
(such as by allowing for table-less web design can also allow the same mark-up page
to be presented in different styles for different rendering methods, such as on-screen,
in print, by voice (when read out by a speech-based browser or screen reader), and
on Braille-based, tactile devices. It can also be used to allow the web page to display
differently depending on the screen size or device on which it is being viewed.

Java Script

JavaScript (JS) is a dynamic computer programming language. It is most commonly

used as part of web browsers, whose implementations allow client-side scripts to interact
with the user, control the browser, communicate asynchronously, and alter the document
content that is displayed. It is also being used in server-side programming, game develop-
ment and the creation of desktop and mobile applications. JavaScript is a prototype-based
scripting language with dynamic typing and has first-class functions. Its syntax was
influenced by C. JavaScript copies many names and naming conventions from Java, but
the two languages are otherwise unrelated and have very different semantics. The key
design principles within JavaScript are taken from the self and Scheme programming
languages. It is a multi-paradigm language, supporting object-oriented, imperative, and
functional programming styles.

17
4.3.2 Back End
Node Js

Node.js is a powerful, open-source JavaScript runtime built on Chrome’s V8 JavaScript

engine. It allows developers to run JavaScript code on the server side, enabling scalable,
efficient, and high-performance web applications. With its event-driven architecture and
non-blocking I/O operations, Node.js is well-suited for building real-time applications
and APIs. It also boasts a rich ecosystem of libraries and frameworks, making it a
popular choice for web development projects of all sizes.

4.3.3 User Interface Design

User interface design(UI) is the design of user interfaces for machines and software,
such as computers, home appliances, mobile devices, and other electronic devices, with
a focus on maximizing usability and the user experience. The goal of user interface
design is to make the user’s interaction as simple and efficient as possible, in terms of
accomplishing user goals.

18
4.3.4 login Page
A login page for a QR code generator serves as a secure entry point for users to access the
generator’s functionality. It typically includes fields for users to input their credentials,
such as email and password, along with options for authentication, like logging in with
social media accounts or email verification. The login page ensures that only authorized
users can utilize the QR code generator, maintaining the security and integrity of the
generated QR codes.

Figure 4.1: Login Page

19
4.3.5 Add links Page
The add link page for a QR code generator enables users to input and generate QR codes
for multiple URLs simultaneously. This feature streamlines the process of creating QR
codes for diverse sets of links, enhancing efficiency and convenience for users managing
multiple destinations or campaigns. Users can easily input multiple URLs, and generate
QR codes.

Figure 4.2: Add links Page

4.3.6 Generate QR Code Page

Display the QR code for the multiple URLs.

Figure 4.3: Specific Department

20
4.4 Tasks /Activities Performed
The major tasked performed in Company are listed below:

Table 4.2: Major Tasks Performed

S.N Major Tasks Performed Description

1 React js Install and setup all the required
tools used in Web Design like VS
code, React Js, npm Component,
Node JS etc.
2 Component Development Create reusable and efficient React
components to enhance the modular-
ity and maintainability of the code-
base
3 Documentation and Knowl- Take an active role in documenting
edge Sharing project workflows, coding standards,
and best practices.
4 Responsive Web Design Focus on creating responsive user in-
terfaces that adapt to various devices
and screen sizes
5 Problem Solving Tackle real-world challenges and
problem-solving scenarios that arise
during the development process.
6 Routing in React Implement client-side routing us-
ing libraries like React Router, nav-
igation, and URL management in
single-page
7 Code Reviews Participate in and conduct code re-
views to learn best practices and im-
prove the overall quality of the code-
base.

21
 CHAPTER 5

CONCLUSION

5.1 Conclusion
In concluding my internship focused on front-end web design with React.js at Trifecta
Digi Media, I can confidently say it has been a transformative experience. The hands-on
exposure to real-world projects and collaboration with skilled professionals has provided
a deep understanding of React.js and its applications in crafting engaging and responsive
user interfaces. This internship has instilled problem-solving resilience, enhancing
my ability to identify and resolve issues efficiently. As I reflect on this transformative
experience, the knowledge, skills, and insights gained at Trifecta Digi Media serve as a
robust foundation for my continued growth in the ever-evolving landscape of front-end
web design.

5.2 Learning Outcomes

1. Proficiency in React.js: My internship has equipped me with a strong command of
React.js fundamentals, allowing me to create dynamic and scalable front-end components.
I’ve gained expertise in leveraging React’s component-based architecture for building
efficient user interfaces.

2. Effective Component-Based Development: The internship has provided practical

experience in developing scalable and reusable components, allowing me to implement
a modular and efficient approach to front-end web design.

3. Responsive Web Design Proficiency: Practical exposure to responsive web design

principles has equipped me with the skills to create applications that seamlessly adapt to
various screen sizes, ensuring a consistent and optimal user experience across devices.

4. Collaborative Development and Code Reviews: Participating in collaborative devel-

opment processes, including regular code reviews, has enhanced my ability to work
effectively within a team, fostering clear communication and adherence to best coding
practices.

5. Problem-Solving and Debugging Expertise: The internship has honed my skills in

identifying and resolving issues efficiently, navigating through debugging processes and

22
finding effective solutions to challenges encountered in real-world projects.

6. Understanding of Front-End Best Practices: Exposure to industry best practices

in front-end development has provided insights into optimizing code for performance,
adhering to coding standards, and ensuring the maintainability of projects.

In summary, these learning outcomes collectively represent a well-rounded skill set

encompassing React.js proficiency, responsive web design, collaborative development
practices, problem-solving expertise, adherence to best practices, and the application of
design patterns – all essential components for success in front-end web design.

23
A. INTERNSHIP APPOINTMENT

24
B. Internship Log Book1

25
B. Internship Log Book2

26
B. Internship Log Book3

27
B.Internship Log Book4

28
B. Internship Log Book5

29
C. Evaluation Form

30
31
 REFERENCES

[1] Trifecta Digi Media (2022) Trifecta digi Media , Available online at https://
trifectadigimedia.com/, Accessed: Feb 2, 2024.

[2] Indeed (2024) Internship report: outline and examples, Available on-
line: https://www.indeed.com/career-advice/career-development/
how-to-write-an-internship-report, Accessed: Jan 02, 2024.

[3] Bedushe, Ananna (2020) INTERNSHIP ON WEB-BASED E-COMMERCE

APPLICATION DEVELOPMENT AT BANGLA SOFT COMPUTER USING REACT
JS, Available online: https://www.researchgate.net/publication/
343215323_INTERNSHIP_ON_WEB-BASED_E-COMMERCE_APPLICATION_
DEVELOPMENT_AT_BANGLA_SOFT_COMPUTER_USING_REACT_JS, Accessed:
Jan 12, 2024.

32