Tribhuvan University

Sagarmatha College of Science and Technology

[Code: CSC-452]

A Final Year Internship Report

On Frontend Development
“Himalayan Fixer”
At
Vimvox Lab Pvt. Ltd.
By
Kusum Shrestha [T.U. Exam Roll No.10748/073]

An Internship report submitted in partial fulfillment of the requirement for the

degree of Bachelor of Science (B.Sc.) Computer Science and Information
Technology Awarded by IOST, Tribhuvan University

Sagarmatha College of Science and Technology

Sanepa, Lalitpur

November 15, 2020

 Sagarmatha College of Science and Technology
Sanepa, Lalitpur (T.U. affiliate)

Supervisor’s Recommendation

I hereby recommend that this report has been prepared under my supervision by
kusum Shrestha in partial fulfillment of the requirements for the degree of B.Sc. in
Computer Science and Information Technology be processed for evaluation.

………………………..
Signature
Er. Ganga Subba
Sagarmatha College Of Science And Technology
Bsc.CSIT Department
Sanepa,Lalitpur

II
 Sagarmatha College of Science and Technology
Sanepa, Lalitpur
(T.U. affiliate)

CERTIFICATE OF APPROVAL

The internship report project entitled, “Himalayan Fixer In Nepal” prepared and
submitted by Ms. Kusum Shrestha has been examined by us and is accepted for the
award of the degree of Bachelor of Science (B.Sc.) in Computer Science and
Information Technology awarded by Tribhuvan University.

……………………. ………………….
Mr. Manish Aryal Mrs. Ganga Subba
Program Coordinator Supervisor
Sagarmatha College of Science & Sagarmatha College of Science &
Technology Technology

……………………………
Mr. Balkrishna Subedi
Tribhuvan University

III
 ACKNOWLEDGEMENT

I must take this opportunity to acknowledge my sincere gratitude to Sagarmatha College

of Science and Technology for providing quality education in the field of Computer
Science and Information Technology which helps the students to broaden the concept
of Computer Science and Information Technology.

I would like to express my sincere thanks to Manish Aryal, Coordinator of Computer

Science & Information Technology and Er.Ganga Subba, supervisor of my project for
their whole-hearted support.

I would also like to express my special gratitude to all Vimvox Lab Pvt. Ltd. for
providing me the opportunity for this internship with full support and cooperation. I
would also like to thank Mr. Uday Maharjan, for his mentorship as well as for
providing me the overview of the projects I worked in. Without them, I would not have
been able to complete this report.

Sincerely,

Kusum Shrestha(10748/073)

ABSTRACT

IV
Due to the enormous growth of Information and Communication Technology the world
is changing every second. Even a little effort of technology can make a huge difference,
new heights can be reached and new standards can be set. This report is based on
Himalayan Fixer which is an online site for filming support. Himalayan Fixer is a team
of film fixers/local coordinators based in Nepal specializing in production support with
access to a large network of Production Companies, filmmakers, and journalists. The
main purpose is to provide information about the film making in nepal, with the
advancement of technology, more and more people are oriented towards using digital
platforms for efficient and effective information’s on border subjects.

Himalayan Fixer was designed using Materialize Css, bootstrap, Sass, Javascript

Keywords: Film Permits, Location Scouting,

V
Table Of Content
Supervisor’s Recommendation ................................................................II
CERTIFICATE OF APPROVAL ......................................................... III
ACKNOWLEDGEMENT ..................................................................... IV
ABSTRACT ............................................................................................. IV
List of Figures....................................................................................... VIII
List of Tables ........................................................................................... IX
ABBREVIATION ..................................................................................... X
Chapter 1. Introduction ............................................................................ 1
1.1 Introduction ........................................................................................................... 1
1.2 Problem Definition................................................................................................ 1
1.3 Objectives ............................................................................................................. 1
1.4 Organizational Details .......................................................................................... 2
1.4.1 Organizational Background ........................................................................... 2
1.4.2 Services provided by the Organization .......................................................... 2
1.4.3 Organization Composition ............................................................................. 2
1.4.4 Internship Durations....................................................................................... 3
1.5 Details of the Work done / Tasks accomplished ................................................... 4
1.6 Motivation ............................................................................................................. 4
1.6.1 Motivation for choosing Vimvox Lab ........................................................... 4
1.6.2 Motivation for choosing Front end Development .......................................... 4
1.7 Scope and Limitations........................................................................................... 5
1.7.1 Scope .............................................................................................................. 5
1.7.2 Limitations ..................................................................................................... 5
Chapter 2. System Analysis ...................................................................... 6
2.1 System Analysis .................................................................................................... 6
2.1.1 Requirement Analysis .................................................................................... 6
2.1.2 Feasibility Analysis ........................................................................................ 7
Chapter 3. System Design ......................................................................... 9
3.1 Architectural Design ............................................................................................. 9
3.2 Mockup Design ..................................................................................................... 9
Chapter 4. Implementation and Testing ............................................... 11
VI
 4.1 Hardware Implementation .................................................................................. 11
4.2 Software Implementation .................................................................................... 11
4.3 Implementation Details ....................................................................................... 11
4.3.2 Creation of Navigation Bar .......................................................................... 11
4.4 Tools Used .......................................................................................................... 12
4.4.1 Development Tools ...................................................................................... 12
4.2 Testing................................................................................................................. 13
4.2.1 Hit and trial method ..................................................................................... 13
4.2.2 Responsive Testing ...................................................................................... 14
4.2.3 Browser Compatibility Testing .................................................................... 16
Chapter 5. CONCLUSION ..................................................................... 18
5.1 Conclusion .......................................................................................................... 18
5.2 Lesson Learnt ...................................................................................................... 18
References ................................................................................................. 19
APPENDIX ............................................................................................... 20

VII
 List of Figures

Figure 1-1 Organization Hierarchy ................................................................................ 3

Figure 2-1Use case diagram of Himalayan Fixer.......................................................... 6
Figure 3-1 Architectural design of Himalayan Fixer..................................................... 9
Figure 3-2 Mockup Design of Himalayan Fixer using adobe Photoshop ................... 10
Figure 4-1Mobile Phone responsive Testing ............................................................... 10
Figure 4-2 Responsiveness of application in tablet ..................................................... 11

VIII
 List of Tables

Table 1-1 Internship Durations ...................................................................................... 3

Table 4-1 Test case for check out form ....................................................................... 15
Table 4-2 Test case for browser compatibility ............................................................ 17

IX
 ABBREVIATION

CEO: Chief Executive Officer

CSS: Cascading Stylesheet

HTML: Hypertext Markup Language

FED: Front end developer

JS: JavaScript

CSIT Computer Science Information Technology

X
 Chapter 1. Introduction
1.1 Introduction
Himalayan Fixer is a team of film fixers/local coordinators based in Nepal specializing
in production support since 2002 with access to a large network of Production
Companies, filmmakers, and journalists. They have in the past and continue to
collaborate with international filming companies on account of which they have created
a reputation, domestically, for themselves as one of the most reliable group of people
to work with. Whether it be filming permits, transportation requirements, equipment
rentals, location scouting, and other such local fixing needs, Himalayan Fixer provides
it all, all the while ensuring a comfortable filming experience. They have an eye for
perfection and they never fail to deliver!

Whether it be film permits, transportation, equipment, and local fixing, Himalayan

Fixer provides all these services for foreign filmmakers for filming in Nepal. Local
coordinator specializing in production support since 2002 has access to a large network
of Production Companies, filmmakers, fixers, and journalists in Nepal.

1.2 Problem Definition

Vimvox Lab assigned me to create frontend/client part of Himalayan Fixer.com which
is a site where we can find the information about production support while filming in
Nepal. It is hard for foreign film maker to get film permits, get transportation, to know
about location. They may face many problems like this while filming in Nepal so in
order to make it easy Himalayan fixer is the place where they can find all kinds of
support and needs required for film making in Nepal.

1.3 Objectives
• To provide details about film making in Nepal.
• To make easier for foreign film maker to film in Nepal.
• To create an environment for foreign film maker and existing local film
maker to communicate in comfortable manner.
• To provide a good location around Nepal for film maker.

1
1.4 Organizational Details

1.4.1 Organizational Background

VIMVOX LAB is a tech company envisions to design, develop and implement in the
sector of information and technology. It is a place where we develop Web Applicate,
Mobile Application, ERP Applications and Design Development.

1.4.2 Services provided by the Organization

Vimvox Lab provide services like web designing, system design, mobile application
designing. Recently Vimvox Lab created system like missed call service, which related
with the banking service in which if we give missed call from registered mobile number
of our account then it will provide us our current balance of account.

1.4.3 Organization Composition

The diagram in Figure1-1 defines the organizational hierarchy of Vimvox Lab. Every
organization runs under a system. In order to maintain system, an organization follows
certain hierarchy. An organizational hierarchy structure is a blueprint of an
organization's employee and job titles. The employees who fall vertically beneath they
have lower ranks and work under the higher level. In addition, employees who hold
similar titles are under the horizontal line Therefore, companies can use one or several
key organizational hierarchy structures.

2
 Figure 1-1 Organization Hierarchy

1.4.4 Internship Durations

As per requirement of the Tribhuvan University, the internship duration need was at
least three months.

Table 1-1 Internship Durations

Name Vimvox Lab
Address Purano Baneshwor,ktm
Telephone 9801223303
Opening hours 10:00 A.M to 5:00 P.M
Email hello@vimvoxlab.com.np

Website http://vimvoxlab.com.np/

3
1.5 Details of the Work done / Tasks accomplished
• Installation of text editor. HTML, Css
• Creation of navigation bar.
• Creation of content field using different div boxes.
• Creation of contact page using form.
• Creation of different pages and merged.

1.6 Motivation

1.6.1 Motivation for choosing Vimvox Lab

As per the college requirement student was required to choose an IT related field for
our internship program, for the partial fulfillment of the requirement for the degree of
Bachelor of Computer Science And Information Technology.

VIMVOX LAB is a tech company formed by the group of motivated people to do

something in the field of information and technology. It’s a growing software company
located in purano baneshwor, Kathmandu. I applied for this organization to work as
intern and got selected according to the requirement of the internship program. I was
happy to be selected as a front end web developer.

1.6.2 Motivation for choosing Front end Development

The major task of frontend developers is to create an interface through which the end
users can interact with the system. Frontend development, also known as client-side
development is used to connect the users with the system and its functions. It involves
information architecture, website structure, user interface, navigation structure, website
layout, colors, contrasts, fonts, images, icons design. Living in a digital world, a good
ui is now a necessity for a business, big or small. As it is the process of visually guiding
the user through a product’s interface via interactive elements and across all
sizes/platforms. It is the process of development and improvement of quality interaction
between a user and all facts of a company.

Web design include a combination of HTML and CSS that define how each page will
appear in browser. Web designers create webpages using HTML tags that define
content and metadata of each page. The layout and appearance of elements within a

4
page is defined using cascading style sheet. JavaScript help to give functionalities to
web page and to create a dynamic web page.

1.7 Scope and Limitations

1.7.1 Scope

• Himalayan Fixer helps viewer to know information about the location,

permits for film making.
• Viewer can contact the specialized film fixers/local coordinators through
the contact page.
• Allows visitor to send an inquiry about the permits and others required tools
for film making.
• To enable fair and competitive market for film making.

1.7.2 Limitations

• This is not dynamic.

• It not user interaction.

5
 Chapter 2. System Analysis
2.1 System Analysis

2.1.1 Requirement Analysis

The basic requirements of the user must be known before developing any system or
software. Likewise, in web designing, we first need to know the requirement of the user.
The requirement collection was done before initiating the designing. Requirement
collection was done using different methods. Requirements such as information about
the company, services, images related to company was collected through google.

Functional Requirements

Fig 2.1 describes behavior or interaction between system and users.

Figure 2-1 Use case diagram of Himalayan Fixer

6
Non-Functional Requirements

Non-functional requirements are used to understand the operation of the system rather
than some specific operation. We can know about how system works by using the
nonfunctional requirement. Some of the non-functional requirements for designing the
farm management are as Follows:

• User Friendly: website designed is user friendly because the system is easy
to operate if there is internet connection.
• Flexibility: The designed is flexible as it is developed using bootstrap and
is compatible in any devices like tablets, mobiles and other device.
• Performance: The performance of the website is determined by various
factors like server response time, throughput, and internet connection.
• Maintenance: The maintenance and frequent updates of the system can be
carried out easily.
• Reliability: The system is reliable as whenever provided with correct
information/input.
• Usability: The system is easy to use once required knowledge regarding
the working methods of the system is obtained.

2.1.2 Feasibility Analysis

Feasibility analysis is a test of the system according to its workability, impact of the
organization, ability to meet user needs and effective use of the resources. The
feasibility analysis for this web application corresponds to determining if the system is
sufficiently feasible enough to meet the requirements.

• Technical feasibility

It was easy to achieve the technical feasibility of our system since there was not much
difficulty in getting required resources for the designing of the app as well as
maintaining the system. Since all the required technologies are already existed and the
system can be upgraded if the new technology is developed, the designed meets the
technical feasibility. The system is technically feasible as it uses widely used and easily

7
implementable technology such as web browser and other resources such as laptop,
internet, etc.

• Economic feasibility

As user can access the application if they have internet connection, the expected cost
for using this is very low. The system is economically feasible as the technologies and
resources needed to build the software, is already available. The organization's initial
cost maybe costly but the system is beneficial for long time usage.

• Operational Feasibility

The system is also operationally feasible as it is user friendly and easy to use, once
proper tra guidance is obtained.

8
 Chapter 3. System Design
3.1 Architectural Design

Figure 3-1 Architectural design of Himalayan Fixer

Figure 3.1 shows basic architectural design of Himalayan Fixer. The architectural
design describes how the system works. When the user requests some action via web
browser in the client side, the system processes according to the user’s request using
the system modules and database information, and responses to the user’s request with
new view. All the response is displayed in the user’s web browser.

Here, the user can be local or international film makers who are in search of beautiful
location or a permit to shoot film or equipment’s required to film. Every services which
are required for film making are available here. User or viewer can inquire about
anything related with film industry and also get help from our special production team.

3.2 Mockup Design

In manufacturing and design process, a mockup is a scale or full-size model of a design
or device, used for teaching, demonstration, design evaluation, promotion, and other
purposes. A mockup is a prototype design of any system that provides at least a part of

9
the functionality of a system and enables testing of a design. For this project, Adobe
Photoshop was used for the mockup designs.

Adobe Photoshop

An image editing software developed and manufactured by Adobe Systems Inc.

Photoshop is considered one of the leaders in photo editing software. One of the easy
way to design a mockup of a website is Photoshop. In this project Adobe Photoshop
was used to design the prototype of the basic view of the application.

Following figure 3-2 shows the basic homepage design of this website.

Figure 3-2 Mockup Design of Himalayan Fixer using adobe Photoshop

10
 Chapter 4. Implementation and Testing
4.1 Hardware Implementation
The system was built on different computers by different people on Windows or Linux.
During development phase, network was needed to connect frontend and any backend
running computer or the server. For the testing process, the system was first run on local
server by setting up Apache Tomcat. Problems were dealt with by carrying out various
kinds of testing in local server at different levels.

4.2 Software Implementation

• Visual Studio code (source code editor)
• Google Chrome as platform to run on
• Slack for communication and monitoring tasks

4.3 Implementation Details

The front end of the system was developed using Html, Css, Bootstrap,JavaScript
Visual studio code was used to edit code. Google chrome was implemented as platform
to run on the code.

4.3.2 Creation of Navigation Bar

Basic document structure

Everything was wrapped in .wrapper box to make advantage of CSS flex property.
.wrapper was given the CSS property align-items: stretch. Content in id content, class
site content. Navigation is made using header id masthead.

Toggle button

This button will handle the opening and closing of the navigation bar when the site is
opened in the device of smaller screen size.

11
Cascading Style Sheet (css)

CSS is a modern CSS framework with built-in responsiveness. It supports responsive

design, and it is smaller and faster than similar CSS frameworks.

CSS can also speed up and simplify web development because it is easier to learn, and
easier to use than other CSS frameworks:

JavaScript

After clicking the toggle button, the navbar was given an active class, and pushed out
from the screen. The page content will take the full-screen width too. When toggle
button was Re-clicked it removed the .active class and the navbar reappears again. And
so on.

4.4 Tools Used

4.4.1 Development Tools

• Hypertext markup language (Html5)

In this project HTML is used to create container or a root div which is used to display
all the content going to be displayed. HTML is backbone to all the web pages so it has
been used in the front end of the system

• Cascading stylesheet (Css3)

CSS was used to style the look of the document layout and structure written in HTML.
Cascading Style Sheet (CSS) is a style sheet language used for describing the
presentation semantics (the look and formatting) of a document written in a markup
language. CSS is designed primarily to enable the separation of document content
(written in HTML) from document presentation, including elements such as the layout,
colors, and fonts.

Bootstrap

In this project, agricultural inputs such as micronutrients, fertilizers, seeds, machinery

tools were designed using bootstrap flex and inputs were slide using slick slider.

12
Bootstrap.css and Bootstrap.js is included in the HTML file. Bootstrap alert and modal
has also notably used for the designing forms.

• JavaScript

In this project JavaScript has been used to give functionalities to web page and to create
a dynamic web page. JavaScript alert () function has been used to display popup
message in form. On click () function has been used to display content of form when
user click navigation item. Add Listener () has been used to open multiple info window
with description when user click marker in map.

• Materialize

Materialize has been used to designed this whole project. Since, it is in-built responsive
design Himalayan Fixer ui has been designed using it. Materialize has been
implemented to create Navigation, grid.

4.2 Testing

4.2.1 Hit and trial method

Hit and trial was done for testing individual activity of this system. Each activity such
as checkout after order delivery was tested individually.

Hit and trial Contact Form

Test Case 1: Checking for blank fields

Input: Name: kusum shrestha

Email: kusuman.711@gmail.com

Subject: Location scouting

Your Message: Hope for your positive response

Expected Output: *Enter the specified field.

Obtained Output:

13
Remarks: Test Succeed

4.2.2 Responsive Testing

Responsive Design lets application ‘adapt’ to different screen sizes without

compromising usability and user experience. Responsive testing includes the process
of testing the elements and functionality that change as the screen’s canvas reduces in
size. This includes navigation, page layout and images. We can also check the
responsiveness of the application by resizing the browser’s window. This is a quick
method. Here one can simply grab the browser’s window by the corner and drag across

14
the breakpoints to see what happens. This is easy and simple way to quickly scan the
overall responsiveness of a web application.

Objective: To see if the application is displayed correctly or not.

Table 4-1Test case for check out form

Test data Images, Input Fields, Icons, contents
Devices Desktop, Tablet, Smartphones
Expected Result No congested data in design pattern.
Actual Result No congested data was found in design pattern.
Conclusion Test Succeed
The following figures shows the responsive testing of the web application on various
devices.

Figure 4-1Mobile Phone responsive Testing

Figure 5-1shows the responsiveness of the application in any mobile devices.

15
 Figure 4-2Responsiveness of application in tablet

4.2.3 Browser Compatibility Testing

Ensuring all aspects of web application are functioning properly in the most commonly
used browsers should be an ongoing part of testing. Basically, we can use IE Tester for
testing site for internet explorer. Similarly, we can check for another popular browser.
It may be required to add vender prefixes as well. Objective: To check whether the site
supports variety of browsers.

16
 Table 4-2 Test case for browser compatibility
Test Case ID Test Brows Expected Actual Result Remarks
Result
er
C-1 Google Succesful Succesful Test Sucessed
chrome

C-2 Mozilla Succesful Succesful Test Sucessed

Firefox
C-3 Internet Succesful Succesful Test Sucessed
Explorer

17
 Chapter 5. CONCLUSION
5.1 Conclusion
Himalayan Fixer is a platform where we can get everything related with film making.
It provides us information or knowledge about the film making. Here an international
film makers can also get help with location scouting, transportation, areal filming,
equipment hiring, film shooting permits etc. This Himalayan Fixer fixes most of the
problems related with the film making in one platform. It can also be called as the
multiple work at one platform.

5.2 Lesson Learnt

The internship program turned out to be a very important opportunity to learn about
professionalism, work environment and skill development. Along with that, some of
the important things learnt during the internship program are:

• Importance of working in team.

• Proper understanding of the problems before actually starting to work on it.
• For better and faster outcome, the problems should be broken down into smaller
parts.
• Focus on the single work at a time.

Most importantly, working in a team of professionals was an important part of the

whole experience which played a significant role in improving the problem-solving
ability.

18
 References

[1] W3school, “CSS,” [Online]. Available : https://www.w3schools.com/CSS. [ Accessed 23 feb

2021].

[2] Eric A. Meyer, “Cascading Style Sheets: The Definitive Guide,” 3rd Edition Originally
published: 2000.

[3] Thomas Powell, “HTML & CSS: The Complete Reference, Fifth Edition,” Originally published:
January 8, 2010.

[4] Author – Marjin Haverbeke,” Eloquent JavaScript: A Modern Introduction to Programming,”

3rd Edition

19
 APPENDIX

Screenshot 1 : Displaying production services

Screenshot 2: Contact form

20
Screenshot 3: Navbar with menu item

21
Screenshot 7: Cluster map

22