TRIBHUVAN UNIVERSITY

INSTITUTE OF SCIENCE AND TECHNOLOGY

AN INTERN REPORT
ON
REACT JS
AT
PEACE NEPAL DOT COM PVT. LTD.

SUBMITTED TO:

DEPARTMENT OF COMPUTER SCIENCE AND

TECHNOLOGY
NEPALGUNJ CAMPUS
NEPALGUNJ, BANKE, NEPAL

In partial fulfillment of the requirements for the Bachelor’s Degree in

Computer Science and Information Technology

UNDER THE SUPERVISION OF

MR. NISHANT KUMAR SHAKYA

SUBMITTED BY:
PRINCY SHRESTHA (17048/074)
SEPTEMBER, 2022
 NEPALGUNJ CAMPUS
TRIBHUVAN UNIVERSITY

SUPERVISOR’S RECOMMENDATION

I hereby recommend that this internship report prepared under my supervision by Princy
Shrestha entitled “ReactJs Intern” is satisfactory in the partial fulfillment of the requirement
for the degree of Bachelor of Science in Computer Science and Information Technology and
be processed for the evaluation.

.................................................

MR. NISHANT KUMAR SHAKYA

INTERNSHIP REPORT SUPERVISOR

NEPALGUNJ CAMPUS

NEPALGUNJ, BANKE
 Tribhuvan University
Institute of Science and Technology
NEPALGUNJ CAMPUS

LETTER OF APPROVAL

This is to certify that the project prepared by PRINCY SHRESTHA (17048/074), entitled
REACT INTERN in partial fulfillment of the requirements for the degree of B.Sc. in
Computer Science and Information Technology has been well studied. In our opinion it is
satisfactory in the scope and quality as a project for the required degree.

…………………………………

MR. NISHANT KUMAR SHAKYA

(Intern Project Supervisor)

Nepalgunj Campus

Nepalgunj, Banke

................................................... ………………………………...

External Examiner Internal Examiner

KESHAV DATTA BHATTA BRIJESH BAISH

Institute of Science and Technology Nepalgunj Campus
Tribhuvan University Nepalgunj, Banke
iii
 DECLARATION
I hereby declare that this internship at “Peace Nepal DOT Com Pvt. Ltd.” submitted to
Office of the Dean, Institute of Science and Technology (IOST), Tribhuvan University, is
a result of my own internship study carried out in the year 2022, in the form of partial
fulfillment of requirements for the Bachelor of Science in Computer Science and
Information Technology (B.Sc. CSIT). The help taken from the other people has been
mentioned on the acknowledgment.

………………………………………

Princy Shrestha

TU Roll No: 17048/074

iv
 ACKNOWLEDGEMENT
First of all, I would like to express my deepest gratitude towards Nepalgunj Campus for
providing the opportunity to work as an intern in the organization. During my internship,
the staffs at the company guiding me were very helpful and help whenever required for
the projects which I worked on. I have learned a lot about project execution in the real
world and my interpersonal skills and self-confidence have improved significantly.
I would like to extend my gratitude to Mr. Nishant Kumar Shakya (Principal),
providing necessary support and guidance. I would like to extend my gratitude to Peace
Nepal DOT Com Pvt. Ltd. for selecting me as an intern and for their assistant and
support throughout my internship period.
I would also like to express my gratitude to Mr. Taman Neupane my mentor for
assisting and inspiring me to do the internship on React and entire members of the Peace
Nepal Dot Com for allowing me to complete my internship program and providing me
their valuable time during my internship period. Without their support and
encouragement, it would have been difficult for us to work on.

Sincerely,

Princy Shrestha
T.U. Exam Roll No: 17048/074

i
 ABSTRACT
The scope of this report is to identify and describe the analysis carried out, experience
gained and focuses on achievement as a react intern. The main objective of doing this
internship was to improve the development of professional and personal skills that
allowed me to acquire a planned learning experience and learned about using many
libraries in a project. During the internship period, the author had the chance to learn
about how to design and developed a well-functioning frontend development for project
using React Js Library at Peace Nepal Dot Com. Overall, I am very satisfied with the
results of my internship. I was able to use my skill and apply it in a real organizations
working in a real life problem.

Keywords: React Js Library, well-functioning, frontend.

ii
 TABLE OF CONTENTS
ACKNOWLEDGMENT....................................................................................................i
ABSTRACT.........................................................................................................................ii
LIST OF FIGURES............................................................................................................iv
LIST OF TABLE.................................................................................................................v
LIST OF ABBREVIATIONS.............................................................................................vi
CHAPTER 1: INTRODUCTION........................................................................................1
1.1 Introduction....................................................................................................................1
1.2 Problem Statement.........................................................................................................1
1.3 Objectives.......................................................................................................................1
1.4 Scope and Limitation.....................................................................................................2
1.5 Report Organization.......................................................................................................2
CHAPTER 2: ORGANIZATION DETAILS AND LITERATURE REVIEW..................3
2.1 Introduction to Organization..........................................................................................3
2.2 Organizational Hierarchy...............................................................................................4
2.3 Working Domains of Organization...............................................................................5
2.4 Description of Intern Department / Unit.......................................................................5
2.5 Literature Review / Related Study.................................................................................5
CHAPTER 3: INTERNSHIP ACTIVITIES........................................................................6
3.1 Roles and Responsibilities.............................................................................................6
3.2 Weekly log (Log should contain the list of technical activities performed)..................6
3.3 Description of the Project(s) Involved During Internship..............................................7
3.4 Tasks / Activities Performed (Technical details of the activities done during the
internship)............................................................................................................................8
CHAPTER 4: CONCLUSION AND LEARNING OUTCOMES.....................................26
4.1 Conclusion...................................................................................................................26
4.2 Learning Outcome.......................................................................................................26
REFERENCES...................................................................................................................27
APPENDIX........................................................................................................................28

iii
 LIST OF FIGURES
Figure 1: Organization Hierarchy........................................................................................ 4
Figure 2: Main Page......................................................................................................................28
Figure 3: Reusable Component on Main Page..............................................................................29
Figure 4: Slick Slider....................................................................................................................30
Figure 5: Sub Page........................................................................................................................31
Figure 6: Dynamic Routing...........................................................................................................32
Figure 7: React Table....................................................................................................................32
Figure 8: MetLife Login Page............................................................................................33
Figure 9: MetLife Dashboard Page...............................................................................................33
Figure 10: MetLife Prospect Page......................................................................................34

iv
 List of Table
Table 2.2: Contact Detail of an Organization......................................................................4
Table 3.2: weekly log...........................................................................................................7

v
 LIST OF ABBREVIATIONS

B.Sc.CSIT Bachelor of Science in Computer Science and Information Technology

Js JavaScript
API Application Program Interface
UI User Interface
HTML Hyper Text Markup Language
CSS Cascading Style Sheet
JSX JavaScript XML

vi
 CHAPTER 1: INTRODUCTION

1.1 Introduction
ReactJS is a JavaScript library for building user interfaces that allows us to create reusable UI
components. It is an open-source JavaScript library used to build the user interface for Web
Applications.
As a part of the course requirement of the 8 th semester of the Bachelor of Science in Computer
Science and Information technology (B.Sc.CSIT) degree of Tribhuvan University, all
students are required to complete a minimum 10 weeks/180 hours long internship.

Internships help build competent resume by giving students visible work experience.
Although colleges and universities assists students in finding the right Internship programs, it
is the responsibility of the would-be interns to carefully examine internship programs, and see
if those programs actually offer the training they need.

During the internship period, the author had the chance to learn about how to design and
developed a well-functioning frontend development for project using React Js Library at
Peace Nepal Dot Com.

1.2 Problem Statement

We have just a theoretical knowledge of this technical field which is not enough for the real
world. Without internship it is very difficult to develop skills and practical knowledge in
related field. We cannot imagine that we learn about our capabilities and ultimately
encourage us to have a greater understanding of our strengths and weaknesses.

1.3 Objectives
 To build a resume for the future.
 To have chances to build a network with people in our area of work.
 To acquire new skills.
 To familiarize oneself to the professional working environment.
 To establish a relationship with mentors.

1
1.4 Scope and Limitations

1.4.1 Scope
.
 During the internship period, the major project that I worked on was Kumari Bank
Website and this report mentions the system analysis and design of this project,
how it is functional.
 The report also discusses the knowledge I gained during my time in the
organization.

1.4.2 Limitations

There are some limitations of this internship report. They are listed as follows:

 Each and every part of the functioning of the organization has not been described as
there are restrictions due the privacy policies of the organization.

 Economic details of the project have not been mentioned due to confidentiality issues.

1.5 Report Organization

The contents of the report are organized into the following sections
Chapter 1: discusses the introduction to the project with the objectives to be
met. Also, the scope and limitations of the project are discussed.
Chapter 2: discusses the background study of the organization and literature
review. Organization introduction, hierarchical structure, working domains and
department units are discussed. Studies of various systems and architecture are
reviewed in this section through which the foundation of the project was set up.
Chapter 3: all the internship activities are described here. It includes roles and
responsibilities during internship, weekly logs maintained during internship,
description of the project involved during internship and activities performed in it,
requirements collection of the project as well as system design and testing
descriptions.
Chapter 4: the conclusion of the report and learning outcomes of the internship
are discussed here.

2
CHAPTER 2: ORGANIZATION DETAILS AND LITERATURE
REVIEW
2.1 Introduction to Organization
Peace Nepal Dot Com is a leading IT company based in Nepal. It is an IT company with
highly qualified and dedicated team members always committed for providing state of art and
quality output and delivering it on the time committed for. The success of the company
depends on the demand from the customers globally and not how much more it sells than the
competitors; Peace Nepal Dot Com can help the company/business expand and go global
with every possible expertise we have. To make the business successful in reaching global
customers, we will provide the solutions with vary techniques and consultation by the group
of our IT professionals.

At Peace Nepal DOT Com our technical experts provide range of services; inception to
design and development of custom made software applications to maintenance and upgrading
of existing applications. Our IT solutions are built are tailored made for the
business/company whatever magnitude you serve. Peace Nepal Dot Com is passionate about
helping clients succeed in delivering business value through cost effective, sustainable and
scalable software.

Peace Nepal Dot Com provides multiple services in the area of website design and
development. The areas of expertise of the organization are:

1. Mobile and Web Development:

 PHP, Laravel, Node Js, Express Js, Nest Js
 Figma UI, React Js , React Native, Flutter
 Mongo DB, MYSQL
2. IT Consulting
 Web Consulting
 Software Consulting
3. Marketing
 Digital Marketing
 SEO

3
 Table 1: Contact Detail of an Organization

Organization Name Peace Nepal Dot Com

Address Kandevtasthan, Lalitpur, Kathmandu, Nepal

Phone +97715446140

Email contact@peacenepal.com

Website https://www.peacenepal.com

2.2 Organizational Hierarchy

Peace Nepal Dot Com comprises of an administrative team along with interns, junior and
senior programmers and web designers. All the employees are led by the single owner.

Managing
Director

Technology Business Marketing and Sales Account and Finance

Department Development Department Department

Design and Research and

Testing Group
Development Development

Senior

Mid-level

Junior level

Intern

Figure 1: Organization Hierarchy

4
2.3 Working Domains of Organization
Peace Nepal Dot Com, a well-established and reputed IT firm, is known for its high quality product.
Since its inception, the firm has successfully provided its quality output to highly valued service
seekers. They have provided range of Services to their valued customers differing from domain
registration, web development, web hosting, web programming, application development,
ecommerce, graphics and logo designing, prints and layouts, IT consultancy, Search Engine
Optimization to animation, that too at an very reasonable price. They have highly trained IT
professional who are ever-ready for the execution and support with their expertise solution. The Team
at Peace Nepal Dot Com is passionate about helping clients succeed in delivering business value
through cost effective, sustainable and scalable software.

2.4 Description of Intern Department / Unit

Peace Nepal Dot Com has its own organizational hierarchy, for the efficient management and
working of the overall organizations. The frontend team and backend team have separate lead who
handles interns in various stacks. The senior app developer leads the React Js intern in Peace Nepal.
There are altogether 4 interns working for the department. The intern field of the work is defined with
the interest of the intern and the requirement of the organization. The interns are assigned with the
respective mentor according to their field of work. Accordingly, the interns are managed and
supervised by the senior developers of the company to complete the daily task that are assigned to
them. The progress and activity update should be share in the daily worksheet.

2.5 Literature Review / Related Study

In this intern period I was aware to work with research and development. The tools used for our
project Kumari Bank Website is Node Js and React Js. Designer department provide the static file of
project so I didn’t have to work hard on learning HTML, CSS and Bootstrap. React slick was used for
slider which was new to me and It was further clear with concept of React Slick Slider. The working
mechanism of Multiple page application was the first thing I have to research when I started working
in Kumari Bank website with the research and concept of Multiple Page Application, I was clear of
MPA. The React JS was new to me so I had gone through the official documentation of React JS.

5
 CHAPTER 3: INTERNSHIP ACTIVITIES
3.1 Roles and Responsibilities
As an intern my role at Peace Nepal Dot Com was a React Js Intern for Frontend
Development. For this I required core knowledge of HTML, CSS, Javascript, React, Redux,
Next for front end. As per my role of React Js Intern, I learned about frontend frameworks
and libraries along with the state management and routing.

In first stage my responsibility at Peace Nepal Dot Com is to develop the User Interface using
React Js according to the provided UI design and Code. I have to convert HTML, CSS file to
JSX file/Component to create the User interface. Later on my responsibility was to create the
re-usable UI component using ReactJS. I was responsible to create navbar components, slider
components, and other components etc. I have to merge the built components to create the
pages of the user side. After creating the static application I was responsible for making page
functional using event, state and hooks. I was responsible for integrating the Restful API
build by our backend team. I have to test the response and request of the API and have to
integrate it using the Axios, Instance to make my User interface dynamic. I was assigned to
do every task using both functional and class component in react Js.

3.2 Weekly log (Log should contain the list of technical activities
performed)
Table 3.1: weekly log
Date Work Done
1. convert index.html file of kumaribank websites into react (jsx components)
2022-05-18 2. convert all html files of kumaribank websites into react(jsx components)
2022-05-19 learn about components,hooks,states,constructors and super props
2022-05-20 research about inserting slider image and event handling
2022-05-21 Holiday
2022-05-22 Holiday
2022-05-23
To
2022-05-24 completed header of websites
2022-05-25 learn about react-slick packages for slider
2022-05-26 completed image slider of home page
2022-05-27 completed another slider
2022-05-28 Holiday
2022-05-29 Holiday
2022-05-30 research about react-router-dom version5 and version6
2022-05-31 research about switch,routes,react-router-config
2022-06-01 research about useNavigate and useHistory

6
2022-06-02 solve the problem of route path in header menu
2022-06-03 learn about other primary components in react router version5
2022-06-04 Holiday
2022-06-05 Holiday
2022-06-06
To
2022-06-08 Completed Routing
Android studio setup completion and install gulp ,cordova and jdk
2022-06-10 for Metlife Insurance Application
To project was completely based on Rimix for Mobile application.
2022-07-08 translated UI data to nepali.
2022-07-08
To
2022-07-17 Slider,Routing,API fetching done same as reactjs in NextJs.

3.3 Description of the Project(s) Involved During Internship

3.3.1. Kumari Bank Ltd. Using React
Kumari bank is a Kumari Bank Site and It is inhouse project of WireBadge Technologies.
This is real project and I was assigned to created a home page, hero slider, reusable card
component, detail page and the reusable related post components using the React Js, Html,
Sass. This project is assigned to me after I completed the responsive design of contact page
for client project and while doing this project, I got to learn about html semantics element and
how we can write reusable sass. And how we can create the smooth slider using react slider.

3.3.2 MetLife
This was the second project that I worked on and this project was completely based on
Rimix for Mobile application. Rimix is company’s framework based on Javascript and React
component. At first on MetLife app I had learn about file structure and system of Rimix.
Then I strated working on translation of english content in nepali language. Some it is hard
to do some task due to old version of node. While Working in Metlife I was assigned to
translated UI data to nepali, also assigned to translate conditonal message, error messeage
and validation message etc. It was good experience to learn some skill on mobile application
using Android Studio tool.

7
3.3.3 Kumari Bank Ltd Using Nextjs
This was one of the most challenging and most interesting project that I have been assigned
during my internship period and this project was beyond my expertise level because this was
server side rendering project. I was assigned to work on dynamic routing. Where I have to
look for all the slug pages that get data from api. This project has to be done using
technologies NexttJs,. While doing this project I got the chance to get familiar with various
new things and this project also motivated me to push myself beyond my comfort zone. With
lot of hard work and passion and continuous guideness from the mentor I made things happen
and accomplished the assigned task.

3.4 Tasks / Activities Performed (Technical details of the activities done

during the internship)
I have worked on the above-described projects as a Frontend Developer Intern. My first task
was Kumari Bank, in which I write frontend part for the UI provided by the company. It was
my real-world project. After completion of Kumari Bank, I was assigned to work on frontend
of MetLife. After a level of knowledge in frontend development, I was assigned to learn Next
Js and was assigned also Kumari Bank. The activities I performed on these projects are
discussed below:

3.4.1 Task performed on Kumari Bank Ltd

In this first project I create a frontend of website where I used HTML, CSS along with
Bootstrap and ReactJS and react-slick-slider. I first created reusable header component, slider
for banner, section component, footer page for footer. The major activities performed are listed
below:
Created reusable component with react Js:
 Header.js with Dynamic Routing
 import React, { useState } from 'react';
 import Link from 'next/link';
 function Header({menus, menuPosition}){
 const[notification, setNotification] = useState(false);
 const[apply, setApply] = useState(false);
 const[login, setLogin] = useState(false);
 const[showSearch, setShowSearch] = useState(false);
 const[showMobileMenu, setShowMobileMenu] = useState(false);
 const [value, setValue] = useState(menuPosition);
 // console.log("Header",menus);

8
 return(
 <>
 <div className="search-wrapper" style={showSearch? { display:'block'} :
{ display:'none'} } > <i className="bi bi-x search-close" onClick={()
=> setShowSearch(!showSearch) } ></i>
 <div className="search-container">
 <div className="search">
 <div className="search-field">
 <div className="form-floating">
 <button><i className="bi bi-search"></i></button>
 <input type="text" className="form-control"
id="floatingInput" placeholder="" />
 <label htmlFor="floatingInput">How can we help you?</label>
 </div>
 </div>

 <div style={{color: '#fff'}}>Most Searched</div>
 <div className="btnlist">
 <ul>
 <li><a href="#">Saving Account</a></li>
 <li><a href="#">ATM</a></li>

 <li><a href="#">Home Loan</a></li>
 <li><a href="#">Branches</a></li>

 </ul>
 <div className="clear"></div>
 </div>
 <br/>
 <div className="card-box">
 Are you looking for?
 <div className="btnlist">
 <ul>
 <li><a href="#"><i className="bi bi-person"></i> Open an
Account</a></li>
 <li><a href="#"><i className="bi bi-laptop"></i> Internet
Banking</a></li>
 <li><a href="#"><i className="bi bi-phone"></i> Mobile
Banking</a></li>
 <li><a href="#"><i className="bi bi-credit-card"></i>
ATM</a></li>
 <li><a href="#"><i className="bi bi-diagram-3"></i>
Branches</a></li>
 <li><a href="#"><i className="bi bi-house"></i> Home
Loan</a></li>
 <li><a href="#"><i className="bi bi-percent"></i>
Interest Rate</a></li>

9
 <li><a href="#"><i className="bi bi-gift"></i>
Offers</a></li>
 </ul>
 <div className="clear"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <header>
 <div className="header-top">
 <div className="container">

 <div className="topmenu">
 <ul>
 {menus.data.map((mainmenu, index)=>{
 return(
 <li key={index}><Link
href={mainmenu.relative_url.charAt(0)=="/"?
mainmenu.relative_url:"/"+mainmenu.relative_url} ><a className={value
== index? "menucurrent": "" } style={{textDecoration:'none'}}
onClick={()=> value == index? null:
setValue(index)}>{mainmenu.title}</a></Link></li>
 )
 })}
 </ul>
 <div className="clear"></div>
 </div>
 <div className="icon-lang-wrap">
 <ul>
 <li><a href="#" role="button" id="notificationlist" data-
bs-toggle="dropdown" aria-expanded="false" onClick={()
=>setNotification(!notification)}><i className="bi bi-bell
notificationicon hvr-grow" ></i><span className="badge">4</span></a>
 <ul className={`dropdown-menu notificationlist $
{notification ? "show": ""}`} aria-labelledby="notificationlist">
 <li><a className="dropdown-item" href="/kumari-
foneloan-now-available-on-emi">Kumari Foneloan Now Available On
EMI</a></li>
 <li><a className="dropdown-item" href="/summary-of-
annual-financial-details">Summary of Annual Financial Details for FY
2077-78</a></li>
 <li><a className="dropdown-item" href="/important-
notice">Important Notice</a></li>
 </ul>
 </li>
10
 <li><a href="#."><i className="bi bi-cloud-download hvr-
grow"></i></a></li>
 <li><a href="#."><i className="bi bi-percent
hvr-grow"></i></a></li>
 <li className="searchicon"><a href="#." onClick={() =>
setShowSearch(!showSearch) }><i className="bi bi-search
hvr-grow"></i></a></li>
 <li>
 <form className="lang-select">
 <select className="form-select">
 <option value="" select="">EN</option>
 <option value="">NP</option>
 </select>
 </form>
 </li>
 </ul>
 <div className="clear"></div>
 </div>
 <div className="clear"></div>
 </div>
 </div>
 <div className="main-header">
 <div className="container">
 <div className="logo"> <a href="" ><img src="/images/logo.png"
/></a> <a href="#" ><img src="/images/20.jpg" className="twenty" /></a>
</div>
 <div className="applynow">
 <div className="dropdown"> <a className="btn hvr-shutter-out-
horizontal dropdown-toggle" href="#" role="button" id="dropdownMenua"
data-bs-toggle="dropdown" aria-expanded="false" onClick={()=>setLogin(!
login)}> Login </a>
 <ul className={`dropdown-menu ${login ? "show":""}`} aria-
labelledby="dropdownMenua">
 <li><a className="dropdown-item hvr-grow"
href="/ibanking-login"><i className="bi bi bi-person "></i> iBanking
Login</a></li>
 <li><a className="dropdown-item hvr-grow" href="/3d-
secure-service"><i className="bi bi-box "></i> 3D Secure
Service</a></li>
 <li><a className="dropdown-item hvr-grow"
href="/corporatenew"><i className="bi bi-wallet2"></i> Corporate
Pay</a></li>
 </ul>
 </div>
 <div className="dropdown"> <a className="btn hvr-shutter-out-horizontal
dropdown-toggle" href="#" role="button"
 id="dropdownMenua" data-bs-toggle="dropdown" aria-expanded="false"
onClick={() =>setApply(!apply)}> Apply Now </a>
 <ul className={`dropdown-menu ${apply ? "show":""}`} aria-
labelledby="dropdownMenua">

11
 <li><a className="dropdown-item hvr-grow" href="/products"><i
className="bi bi bi-person "></i> Online Account Opening</a></li>
 <li><a className="dropdown-item hvr-grow"
href="https://meroshare.cdsc.com.np/login"><i className="bi bi-box
"></i> Online Demat Account</a></li>
 <li><a className="dropdown-item hvr-grow" href="/account-
first-fixed-nep"><i className="bi bi-wallet2"></i> Fixed Deposit
Account</a></li>
 </ul>
 </div>
 </div>
 <div className="a-menu">
 <ul>
 <li ><a href="/atm" style={{textDecoration: 'none'}}><i
className="bi bi-credit-card" ></i> ATM</a></li>
 <li><a href="/branch" style={{textDecoration: 'none'}}><i
className="bi bi-diagram-3" ></i> Branch</a></li>
 <li><a href="/interest-rate-deposits"
style={{textDecoration: 'none'}}><i className="bi bi-percent" ></i>
Interest Rate</a></li>
 </ul>
 <div className="clear"></div>
 </div>
 <div className="clear"></div>

 </div>
 </div>
 <div className="navik-header header-shadow navik-mega-menu mega-
menu-fullwidth">
 <div className="container">
 <div className="navik-header-container">
 <div className={`burger-menu ${showMobileMenu ? "menu-
open":""}`} onClick={()=>setShowMobileMenu(!showMobileMenu)}>
 <div className="line-menu line-half first-line"></div>
 <div className="line-menu"></div>
 <div className="line-menu line-half last-line"></div>
 </div>
 <img src="images/kumarifav.jpg" className="fixedlogo"/>
 <nav className="navik-menu menu-caret submenu-top-border
desktop-menu">
 {menus.data.map((mainmenu,index)=>{
 return(
 <ul key={index}>
 {mainmenu.submenu.map((menu,indexe)=>{
 if(value == index){
 return(
 <li key={indexe}><Link
href={menu.relative_url.charAt(0)=="/"?
menu.relative_url:"/"+menu.relative_url}><a>{menu.title}

12
 <span className={menu.submenu?"fas fa-chevron-down": "" }
style={{fontSize: '0.75rem', marginLeft: '0.25rem'}}></span></a></Link>
 <ul style={menu.submenu? {visibility:'show'}:
{visibility:'hidden'}}>
 {menu.submenu?
menu.submenu.map((submenu,indexee)=>{
 return(

 <li key={indexee}><Link
href={submenu.relative_url.charAt(0)=="/"?
submenu.relative_url:"/"+submenu.relative_url}><a>{submenu.title}</
a></Link></li>

 )
 }):null}
 </ul>
 </li>
 );
 }
 })}
 </ul>
 )
 })}
 </nav>
 </div>
 </div>
 </div>
 </header>
 </>
 );
 }
 export default Header;
13
  Footer.js

import React from "react";

function Footer(){
return(
<>
<footer className="content-pd wow animate__animated animate__fadeInUp">
<div className="container ">
<div className="card-box">
<div className="row">
<div className="col-lg-4 mob-br "> <a href="#" ><img
src="/images/logo.png" style={{width: "60%", textDecoration: 'none'}} /></a>
<br/>
<br/>
<div className=" footer-address">
<ul>
<li><i className="bi bi-geo-alt"></i> <small>Address</small>
<br/>
Tangal, Kathmandu (Head Office)</li>
<li><i className="bi bi-telephone"></i> <small>Phone</small>
<br/>
01-4443070, 01-4443078, 01-4443079, </li>
<li><i className="bi bi-envelope"></i> <small>Email</small>
<br/>
<a href="#" style={{textDecoration: 'none'}}>
communication@kumaribank.com</a> </li>
</ul>
<div className="clear"></div>
</div>
<div className="footer-head">Follow Us</div>
<div className="social-link">
<ul>
<li><a href="" target="_blank"><i className="fab fa-facebook-f
hvr-grow"></i></a></li>
<li><a href="" target="_blank"><i className="fab fa-twitter hvr-
grow"></i></a></li>
<li><a href="" target="_blank"><i className="fab fa-youtube hvr-
grow"></i></a></li>
<li><a href="" target="_blank"><i className="fab fa-instagram
hvr-grow"></i></a></li>
</ul>
<div className="clear"></div>
</div>
</div>
<div className="col-lg-8 ">
<div className="row">
<div className="col-md-4 col-sm-4 mob-br">

14
 <div className="footer-head">About Us</div>
<div className="footer-listing">
<ul>
<li><a href="/welcome-to-kumari-bank"
style={{textDecoration: 'none'}}>About Kumari Bank</a></li>
<li><a href="/board-of-directors" style={{textDecoration:
'none'}}>Board of Directors</a></li>
<li><a href="/kbl-management-team" style={{textDecoration:
'none'}}>Management Team</a></li>
<li><a href="/company-secretary" style={{textDecoration:
'none'}}>Company Secretary</a></li>
<li><a href="/covid-respose-officer" style={{textDecoration:
'none'}}>Covid Response Officer</a></li>
<li><a href="/grievance-handling-officer"
style={{textDecoration: 'none'}}>Grievance Handling Officer</a></li>
<li><a href="/financial-report" style={{textDecoration:
'none'}}>Financial Report</a></li>
<li><a href="/agm-minutes" style={{textDecoration:
'none'}}>AGM Minutes</a></li>
<li><a href="/right-to-information" style={{textDecoration:
'none'}}>Right to Information</a></li>
<li><a href="/career" style={{textDecoration:
'none'}}>Career</a></li>
</ul>
<div className="clear"></div>
</div>
</div>
<div className="col-md-4 col-sm-4 mob-br">
<div className="footer-head">Quick Links</div>
<div className="footer-listing">
<ul>
<li><a href="/annual-compliance-report"
style={{textDecoration: 'none'}}>Annual Compliance Report</a></li>
<li><a href="/branches" style={{textDecoration:
'none'}}>Branches</a></li>
<li><a href="/atm" style={{textDecoration:
'none'}}>ATM</a></li>
<li><a href="/service-charge" style={{textDecoration:
'none'}}>Service Charge</a></li>
<li><a href="/share" style={{textDecoration:
'none'}}>Share</a></li>
<li><a href="/kbl-3d-registration" style={{textDecoration:
'none'}}>KBL 3D Registration</a></li>
<li><a href="/c-asba" style={{textDecoration: 'none'}}>C-
ASBA</a></li>
<li><a href="/interest-rate" style={{textDecoration:
'none'}}>Interest Rate</a></li>

15
 <li><a href="/emi-calculator" style={{textDecoration:
'none'}}>EMI Calculator</a></li>
</ul>
<div className="clear"></div>
</div>
</div>
<div className="col-md-4 col-sm-4">
<div className="footer-head">Media Center</div>
<div className="footer-listing">
<ul>
<li><a href="/press-release" style={{textDecoration:
'none'}}>Press Release</a></li>
<li><a href="/news-and-events" style={{textDecoration:
'none'}}>News & Events</a></li>
<li><a href="/photo-gallery" style={{textDecoration:
'none'}}>Photo Gallery</a></li>
<li><a href="/video-gallery" style={{textDecoration:
'none'}}>Video Gallery</a></li>
<li><a href="/downloads" style={{textDecoration:
'none'}}>Downloads</a></li>
<li><a href="/notice" style={{textDecoration:
'none'}}>Notice</a></li>
<li><a href="/audio-notice" style={{textDecoration:
'none'}}>Audio Notice</a></li>
<li><a href="/csr" style={{textDecoration:
'none'}}>CSR</a></li>
</ul>
<div className="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="bottom-footer">
<div className="row">
<div className="col-lg-6">
<div className="footer-menu">
<ul>
<li><a href="/career" style={{textDecoration:
'none'}}>Career</a></li>
<li><a href="/privacy-policy" style={{textDecoration:
'none'}}>Privacy Policy</a></li>
<li><a href="/disclaimer" style={{textDecoration:
'none'}}>Disclaimer</a></li>
<li><a href="/sitemap" style={{textDecoration:
'none'}}>Sitemap</a></li>
</ul>

16
 <div className="clear"></div>
</div>
</div>
<div className="col-lg-6">
<div className="poweredby"> <small> Powered By: <a
style={{textDecoration: 'none'}} href="https://peacenepal.com/"
target="_blank">Peace Nepal DOT Com</a> </small> </div>
<div className="copyright"> <small>Copyright 2022. Kumari Bank
</small> </div>
<div className="clear"></div>
</div>
</div>
</div>
</div>
</footer>
</>
)
}
export default Footer;

 Slick Slider
 import React, {useState, useEffect} from "react";
 import Slider from "react-slick";
 function SlickSlider(){
 const [slideIndex, setSlideIndex] = useState(0);
 const slider = React.createRef();
 let next = () => {
 slider.current.slickNext();
 setSlideIndex(1);
 }
 let previous = () => {
 slider.current.slickPrev();
 setSlideIndex(0);
 }


 const settings= {
 dots: true,
 infinite: true,
 speed: 500,
 slidesToShow: 1,
 slidesToScroll: 1,
 autoplay:true,
 autoplaySpeed:3000,
 appendDots: dots => (
 <div id="myCarousel" className="carousel slide" data-bs-
ride="carousel" >

17
 <div className="carousel-indicators" style={{padding:
"40px",paddingLeft:"77rem"}}>
 <button className={` ${slideIndex==0 ?"active": "" }`}
type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" aria-
current="true" aria-label="Slide 1" onClick={previous}></button>
 <button className={` ${slideIndex==1 ?"active": "" }`}
type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-
label="Slide 2" onClick={next}></button>
 </div>
 </div>
 )
 }
 return (
 <div>
 <Slider {...settings} ref={slider} >
 <div>
 <section className="slideshow ">
 <div id="myCarousel" className="carousel slide" data-
bs-ride="carousel">
 <div className="carousel-inner">
 <div className="carousel-item active">
 <div className="slide-desc">
 <div className="container">
 <div className="row">
 <div className="col-lg-5 col-md-8">
 <h2>Get the best</h2>
 <h1>Home Loan Offer</h1>
 <p>Kumari Home Loan facility helps
make this dream come true though financing for owning a residential
property, extension of your houese, renovating or restoration of your
old house.</p>
 <div className="clear"></div>
 <a href="" className="btn hvr-
shutter-out-horizontal">Read More <i className="bi bi-arrow-right"></i>
</a> </div>
 </div>
 </div>
 </div>
 <div className="slideimg"> <img
src="/images/slide.jpg" /> </div>
 </div>
 </div>
 </div>
 </section>
 </div>
 <div>
 <section className="slideshow ">

18
  <div id="myCarousel" className="carousel slide" data-
bs-ride="carousel">
 <div className="carousel-inner">
 <div className="carousel-item active ">
 <div className="slide-desc">
 <div className="container">
 <div className="row">
 <div className="col-lg-5 col-md-8">
 <h2>Get the best</h2>
 <h1>Kumari Youth Saving</h1>
 <p>Cash Top Up Facility - NPR
100.00 will be deposited in the customer's account after the
registration of Mobile Banking Facility.</p>
 <div className="clear"></div>
 <a href="" className="btn hvr-
shutter-out-horizontal">Read More <i className="bi bi-arrow-right"></i>
</a> </div>
 </div>
 </div>
 </div>
 <div className="slideimg"> <img
src="/images/slide2.jpg" /> </div>
 </div>
 </div>
 </div>
 </section>
 </div>
 </Slider>
 </div>
 );
 }
 export default SlickSlider;


3.3.2 Task performed on MetLife

This was the second project that I worked on and this project was completely based on
Rimix for Mobile application. Rimix is company’s framework based on Javascript and React
component. At first on MetLife app I had learn about file structure and system of Rimix.
Then I strated working on translation of english content in nepali language. Some it is hard
to do some task due to old version of node. While Working in Metlife I was assigned to
translated UI data to nepali, also assigned to translate conditonal message, error messeage
and validation message etc.

19
 View for Login Page
 "component": {
 "id": "login-page-body-root",
 "type": "core.components.div",
 "input": {
 "className": "float-section login-container"
 },
 "children": [
 {
 "id": "login-form-text",
 "type": "core.components.text",
 "input": {
 "className": "font-size-24",
 "content": "@translation signInLabel",
 "centerText": true
 }
 },
 {
 "id": "login-error",
 "type": "core.components.text",
 "input": {
 "className": "login-error-text",
 "content": "@model loginErrorMessage",
 "centerText": true,
 "hidden": true
 }
 },
 {
 "id": "username",
 "type": "core.components.input",
 "input": {
 "modelValue": "@model agent.username",
 "inputId": "username",
 "inputLabelText": "@translation username",
 "inputType": "text",
 "minLength": "1",
 "validations": {
 "messages": [
 {
 "message": "@translation userNameValidation"
 }
 ],
 "isValid": "@isValid agent.username"
 }
 },
 "output": "@model agent.username"
 },
 {
 20
 "id": "password",
 "type": "core.components.input",
 "input": {
 "modelValue": "@model agent.password",
 "inputId": "password",
 "inputLabelText": "@translation password",
 "inputType": "password",
 "minLength": "1",
 "validations": {
 "messages": [
 {
 "message": "@translation passwordValidation"
 }
 ],
 "isValid": "@isValid agent.password"
 }
 },
 "output": "@model agent.password"
 },
 {
 "id": "remember-me-clearfix",
 "type": "core.components.div",
 "input": {
 "className": "clearfix"
 },
 "children": [
 {
 "id": "remember-me",
 "type": "core.components.checkbox",
 "input": {
 "checkboxId": "rememberMe",
 "checkboxContainerClassName": "pull-left metlife-
checkbox",
 "checkboxLabel": "@translation rememberMe",
 "checked": "@model isRememberMe"
 },
 "output": "@model isRememberMe"
 }

 ]
 },
 {
 "id": "forgot-password-link",
 "type": "core.components.text",
 "input": {
 "content": "@translation forgotPassword",
 "centerText": true,
 "className": "forgot-password-link"
21
 }
 },
 {
 "id": "signin-btn",
 "type": "core.components.button",
 "input": {
 "buttonType": "Submit",
 "buttonText": "@translation signIN",
 "id": "signinBtn"
 }
 },
 {
 "id": "App-version",
 "type": "core.components.text",
 "input": {
 "content": "@model versionText",
 "centerText": true,
 "className": "App-version"
 }
 },
 {
 "id": "pdf-btn",
 "type": "core.components.button",
 "input": {
 "hidden": true,
 "buttonType": "Submit",
 "buttonText": "PDF Test",
 "id": "pdftest"
 }
 },
 {
 "id": "login-popup",
 "type": "core.components.modalpopup",
 "input": {
 "hidden": "@model isModalShown | core.not",
 "confirmText": "Ok",
 "noControls": "@model isNoGoModal"
 },
 "children": [
 {
 "id": "login-popup-text",
 "type": "core.components.text",
 "input": {
 "content": "@model modalText",
 "centerText": true,
 "className": "popup-text"
 }
 }
 22
 ]
 },
 {
 "id": "jail-break-popup",
 "type": "core.components.modalpopup",
 "input": {
 "hidden": "@model jailBreakResponse | core.not",
 "confirmText": "Ok",
 "inputLabelText": "Custom Firmware detected",
 "noControls": true
 },
 "children": [
 {
 "id": "jail-break-popup-text",
 "type": "core.components.text",
 "input": {
 "content": "An abnormal use of device has been detected.
The service is no longer available on the device.",
 "centerText": true,
 "className": "popup-text"
 }
 }
 ]
 },
 {
 "id": "onsucces-loader",
 "type": "core.components.loader",
 "input": {
 "isLoaderShown": "@model loaderShown"
 }
 }
 ]
 },

 Screen for login Page:

 {
 "id": "login-screen",
 "version": "0.0.1",
 "schema": {
 "name": "screen",
 "version": "0.0.1"
 },
 "views": [
 {
 "id": "login-template",
 23

 "view": "login-page-template-view"
 },
 {
 "id": "app-header",
 "view": "app-common-header-view",
 "input": {
 "agent": "@model application.agent"
 }
 },
 {
 "id": "login-body",
 "view": "login-page-body-view",
 "input": {
 "agent": "@model application.agent"
 }
 }
 ],
 "layout": {
 "view": "login-template",
 "children": {
 "app-common-header-view": {
 "view": "app-header"
 },
 "login-page-body-view": {
 "view": "login-body"
 }
 }
 },
 "rules": {
 "views": {
 "login-body": {
 "events": {
 "next": [
 "this.session.model.application.agent = arguments.data",
 //"this.navigate('/sales/illustration-protect-elite')"
 "this.navigate('/sales/dashboard')"
 ],
 "navigateToForgotpassword":
 [
 //"this.session.model.application.agent = arguments.data",
 "this.navigate('/sales/forgotPassword')"
 ],
 "navigateToResetPasswordscreen": [
 "this.session.model.application.agent = arguments.data",
 "this.navigate('/sales/resetPassword')"
 ]
 }
 24
 }
 }
 }
 }

 Translationtable.js for login:

const translationTable = {
english: {
id: 'ID',
username: 'User Name',
password: 'Password',
signInLabel: 'Sign in to your account',
rememberMe: 'Remember Me',
touchID: 'Enable Touch ID',
completed: 'completed',
submitted: 'submitted',
incomplete: 'incomplete',
invalid: 'invalid',
reviewed: 'reviewed',
}
nepali: {
id: 'ID',
username: 'प्रयोगकर्ता नाम',
password: 'पासवर्ड',
rememberMe: 'मलाई सम्झनुहोस ्',
touchID: 'टच आईडी सक्षम गर्नुहोस ्',
completed: 'पूरा भयो',
submitted: 'पेश गरियो',
incomplete: 'अपूर्ण',
invalid: 'अवैध',
reviewed: 'समीक्षा गरियो',
}
 25

CHAPTER 4: CONCLUSION AND LEARNING OUTCOMES

4.1 Conclusion
The internship in Peace Nepal Dot Com has provided a great opportunity to enhance
knowledge and skills on Frontend Development as React Intern. Since all the projects has
been developed along with my learning. I learn a demanded Js libraries i.e. React Js Library,
Next Js Framework for Frontend. I learned the better folder structures of the projects. I came
to know why Redux is suited for state management library in large projects. The main
objective of the internship is to use modern libraries on frontend development and backend
and built the real Project. It has given me the opportunity to work on like site.

I found that the internship was very beneficial as a part of development of career and the
experience gained through this would be helpful and beneficial for the future opportunities.

4.2 Learning Outcome

Learned a lot while working as an intern on Kumari Bank's website and Kite mobile app.
Some of learning Outcomes of me after completion of this intern session are:
1. During the internship session I gained knowledge in React JS and Next Js
Framework.
2. Develop UI components and integration to build a page
3. Experience with Rest API and API calls using Axios, getStaticProps, getStaticPaths,
getServerSideProps.
4. Gained knowledge use react hooks hook needed to build a web app.
5. Develop work habits and attitudes necessary for job success as a developer.
6. Develop communication, interpersonal and other critical skills in the job interview
process.
7. Learn to work on company’s framework based on Js and React Library while
working on Kite app
8. Acquire employment contacts leading directly to a full-time job following graduation
from college.
9. Gained knowledge on state management using Redux Library.
 26
REFERENCES

Axios. (2022). Freecodecamp .Org. https://www.freecodecamp.org/news/axios-react-

how-to-make-get-post-and-delete-api-requests/

React Slick Slider. (2022). React-Slick.Neostack.Com. https://react-

slick.neostack.com/

React state management: What is it and why to use it? | LoginRadius Blog.

(n.d.).Longradius.Com. https://www.loginradius.com/blog/engineering/react-state-

management/

Rest API. (n.d.). Redhat.Com. Retrieved 2022, from

https://www.redhat.com/en/topics/api/what-is-a-rest-api
 27

APPENDIX

Kumari Bank Website:

Figure 2: Main Page

 28

Figure 3: Reusable Component on main page

 29

Figure 4: Slick Slider

 30

Figure 5: Sub Pages

 31

Figure 6: Dynamic Routing

Figure 7: React Table

 32

MetLife App Content Translation English to Nepali (KITE)

Figure 8: MetLife Login Page

Figure 9: MetLife Dashboard Page

 33

Fig 10: MetLife Prospects Page

34