INTERNSHIP AS WEB DEVELOPER

AN INTERNSHIP REPORT

Submitted by
JENISH VAGHASIYA

200420107010

In partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING

in

Department of Computer Engineering

Sarvajanik College of Engineering and Technology, Surat

Gujarat Technological University, Ahmedabad

April, 2024

i
 Sarvajanik College of Engineering and Technology, Surat
Dr. R. K. Desai Marg, Opp. Mission Hospital, Athwalines, Surat - 395001

CERTIFICATE
This is to certify that the project report submitted along with the project
entitled Web-App Development has been carried out by Jenish Vaghasiya
under my guidance in partial fulfillment for the degree of Bachelor of
Engineering in Computer Engineering, 8th Semester of Gujarat Technological
University, Ahmedabad during the academic year 2023-24.

Prof. Jaydeep Gheewala Prof. (Dr.) Dipali Kasat

Internal Guide Head of the Department

ii
Company Certificate

iii
 Sarvajanik College of Engineering and Technology, Surat
Dr. R. K. Desai Marg, Opp. Mission Hospital, Athwalines, Surat - 395001

DECLARATION

We hereby declare that the Internship report submitted along with the
Internship entitled Web-App Development Internship submitted in partial
fulfillment for the degree of Bachelor of Engineering in Computer
Engineering to Gujarat Technological University, Ahmedabad is a bonafide
record of original project work carried out by me at Department of Computer
Engineering, Sarvajanik College of Engineering and Technology, Surat under
the supervision of Prof. Jaydeeep Gheewala and that no part of this report
has been directly copied from any students’ reports or taken from any other
source, without providing due reference.

Name of the Student Sign of Student

Jenish Vaghasiya ________________________

iv
 Acknowledgement

In the accomplishment of this task of the project successfully, many people have best

owned upon me their blessing and the heart pledged support, this time I am utilizing to

thank all the people who have been concern with project.

First and foremost, I would like to thank Mr. Naitik Shah and Mr. Bhargav Vashi, Founder

and CEO of Digitattva Technolabs for providing the opportunity of an internship, with such

a great experience for the growth and development of employee in organization.

Primarily I would thank God for being able to complete this task of the project with success.

Then I would like to thank to our H.O.D. Prof.(Dr.) Dipali Kasat for guidance, inspiration

and contractive suggestion that helpful us in the preparation of the project we also thanks

to our internal guide Mr. Prof. Jaydeep Gheewala whole valuable guidance has been the

once that helped me path this project and make it full proof success his suggestions and his

instruction has served as the major contributor towards the completion of this project.

Then we would like to thank my parents and friends who have helped me with their valuable

suggestion and guidance has been helpful in various phases of the completion of this

project.

v
 Abstract

Digitattva Technolabs, a prominent software company renowned for its innovative

solutions and dynamic work environment. During my internship as a Web Developer
Digitattva Technolabs, I had the privilege of contributing to various projects and
collaborating with a talented team of developers, designers, and project managers. The
company's commitment to excellence and cutting-edge technologies provided me with an
invaluable learning platform, allowing me to enhance my technical skills and gain insights
into the software industry. This report reflects on my experiences, contributions, and the
growth I achieved during my tenure at Digitattva Technolabs, underscoring the pivotal role
the company played in shaping my career as a web developer.

During my Internship there are many task i have performed

1) Learn React-Native
2) Tasks in React-Native
3) Jain Panchang Mokshmarg in React-Native
4) Certified backflow Jobs in Reac-Native

vi
 List of Figures

Fig 1.1.1 Company Logo…………………………………………………….. 1

Fig 2.1 Technologies……………………………………………………….. 4
Fig 3.2.1 Task-1 Implementation…………………………………………….. 6
Fig 3.2.2 Task-2 Implementation…………………………………………….. 7
Fig 3.2.3 Task-3 Implementation…………………………………………….. 7
Fig 5.1 Famous React Native Apps ……………………………………….. 10
Fig 5.1.1 React Native Rendering …………………………………………… 10
Fig 5.2.1 Cross-Platform Compatibility …………………………………….. 11
Fig 5.2.2 React Native Libraries……………………………………………... 12
Fig 5.4.1 Splash Screen………………………………………………………. 15
Fig 5.4.2 Custom Slider……………………………………………………… 16
Fig 5.4.3 Login Page………………………………………………………… 17
Fig 5.4.4 Custom Drawer…………………………………………………….. 18
Fig 6.3.1 Home Page…………………………………………………………. 22
Fig 6.3.2 Pachhakan Page……………………………………………………. 22
Fig 6.3.3 Detail Pachhakan Model…………………………………………… 22
Fig 6.3.4 Calander Page……………………………………………………… 22
Fig 6.3.5 Events Page………………………………………………………… 23
Fig 6.3.6 Choghadiya Page…………………………………………………... 23
Fig 7.3.1 Login Page...……………………………………………………….. 26
Fig 7.3.2 Zoho Page………………………………………………………….. 26
Fig 7.3.3 Home Page…………………………………………………………. 26
Fig 7.3.4 Drawer……………………………………………………………... 26
Fig 7.3.5 Settings Page………………………………………………………. 27
Fig 7.3.6 Sort Option………………………………………………………… 27
Fig 7.3.7 Detail Pages………………………………………………………... 27
Fig 7.3.8 Job Edit Page………………………………………………………. 28
Fig 7.3.9 Device Edit………………………………………………………… 28
Fig 7.3.10 Device Edit………………………………………………………… 29

vii
Fig 7.3.11 New Device Page…………………………………………………. 29
Fig 7.3.12 Image Picker………………………………………………………. 30
Fig 7.3.13 Remove Image…………………………………………………….. 30
Fig 7.3.14 Delete Image………………………………………………………. 30
Fig 7.3.15 Job Listing Page…………………………………………………… 30

viii
 Abbreviations

HTML Hyper Text Markup Language

CSS Cascading Style Sheets
JS JavaScript
API Application Programming Interface

ix
 Table of Contents

Acknowledgement………………………………………………………………… v
Abstract…………………………………………………………………………… vi
List of Figures…………………………………………………………………...... vii
List of Abbreviations……………………………………………………………... ix
Table of Contents………………………………………………………………… x
Chapter 1: Introduction….................................................................................... 1
1.1 About Company 1
1.2 Mission and Vision 1
1.3 Learning Objectives 2
1.4 Company Culture 2
Chapter 2: Technologies Used During Internship…......................................... 3
Chapter 3: JavaScript Concepts & Tasks ......................................................... 5
3.1 JavaScript Concepts 5
3.2 JavaScript Tasks 6
Chapter 4: JQuery & AJAX Concepts.............................................................. 8
4.1 JQuery Concepts 8
4.2 AJAX Concepts 9
Chapter 5: React-Native Concepts...................................................................... 10
5.1 Understanding 10
5.2 Key Features 11
5.3 Libraries 14
5.4 React Native Tasks 15
Chapter 6: Jain Panchnmag Moksh Marg ...................................................... 19
6.1 Overview 19
6.2 Modules 19
6.3 Implementation 22
Chapter 7: Certified Backflow Jobs ………........................................................ 24
7.1 Overview 24
7.2 Modules 24

x
 7.3 Implementation 26
Chapter 8: Conclusion…...................................................................................... 31
References…………………………………………………………....................... 32
Appendix...…………………………………………………………...................... 33

xi
 CHAPTER 1: INTRODUCTION

1.1 ABOUT COMPANY

Fig. 1.1.1 Company Logo

Digitattva Technolabs, a leading software company renowned for its innovative

solutions, provided me with a stimulating environment to learn and grow. As a Web-App
Developer, I had the privilege of contributing to various projects, each offering unique
challenges and learning opportunities. They provided me with a holistic view of software
development, from project inception to deployment.

1.2 MISSION AND VISION

Company’s Mission is to exceed client's expectations by going beyond software to

provide best Web solutions that transform data into knowledge, enabling them to solve their
problems.

Company’s Vision is to be a leading Web Solution company in IT sector and

progress in our current position in market. We know that Customer’s growth is our growth,
so we commit our customers to help in achieving their business goals.

1
1.3 LEARNING OBJECTIVES

• Improving the technical skills and understanding new technologies that are
currently
• being used in the industry.
• Finding the solutions of the problems that I am not familiar with.
• Understanding the concept by researching the topics on the internet.
• Making some industry contacts by working for the company.
• Earning an industry experience that will narrow down our list of potential careers

1.4 COMPANY CULTURE

In our culture at Digitattva Technolabs, individual satisfaction and peace of mind

are paramount, leading to consistent excellence. Providing a family environment for every
team member, rooted in Indian Culture, fosters a positive core team and drives excellence
across all our products and solutions.

2
 CHAPTER 2: TECHNOLOGIES USED DURING
INTERNSHIP

HTML (Hyper Text Markup Language):

Throughout my internship, HTML played a pivotal role in shaping the structure of web
pages. HTML, short for Hyper Text Markup Language, offered the fundamental markup
elements crucial for arranging and stylizing content on the internet. It empowered me to
establish the blueprint of web pages, encompassing headings, paragraphs, lists, and an array
of other components. Through the utilization of HTML, I was able to craft coherent and
systematic designs, guaranteeing optimal display of content across diverse devices and
browsers.

CSS (Cascading Style Sheets):

CSS proved to be indispensable in elevating the aesthetic appeal of the web pages I crafted
during my internship. Cascading Style Sheets, known as CSS, empowered me to imbue
HTML elements with styles and design features, encompassing colors, fonts, spacing, and
layout. Leveraging CSS, I could fashion visually captivating and harmonized designs
spanning numerous pages, thereby enriching the overall user experience.

JavaScript (JS):

JavaScript played a pivotal role in infusing interactivity and dynamic functionality into the
web applications I engaged with during my internship. As a cross-platform, object-oriented
scripting language, JavaScript provided me with the means to generate interactive features,
including animations, form validation, and event handling. This capability allowed me to
elevate user engagement by tailoring web pages to respond to user interactions, thereby
enriching the overall user experience. The versatility and widespread adoption of
JavaScript rendered it an essential asset in the development of contemporary web
applications.

3
React Native:

React Native has proven to be an invaluable asset in my arsenal for crafting dynamic and
adaptable mobile user interfaces. As a progressive JavaScript framework tailored
specifically for mobile development, React Native equips me with a rich set of tools and
components to construct engaging and data-centric UI elements. Its inherent reactivity and
component-driven structure empower me to swiftly assemble intricate mobile interfaces,
elevating both the usability and functionality of the applications I create. React Native's
intuitive nature and extensibility make it an ideal solution for crafting cutting-edge and
scalable mobile applications.

Fig. 2.1 Technologies

4
 CHAPTER 3: JAVASCRIPT CONCEPTS AND TASKS

3.1 JAVASCRIPT CONCEPTS

• Variables and Data Types

o Variables: Containers for storing data values.
o Data Types: Different types of values that can be stored in variables,
including primitive types (strings, numbers, booleans, null, undefined) and
complex types (objects, arrays, functions).
• Control Flow
o Control Flow: The order in which statements are executed in a program.
o Conditional Statements: Allow execution of different code based on
conditions.
o Looping: Repeating a block of code multiple times until a certain condition
is met.
• Functions
o Functions: Blocks of reusable code that perform a specific task.
o Parameters and Arguments: Values passed to functions to customize their
behavior.
o Return Statement: Specifies the value returned by a function.
• Arrays and Objects
o Arrays: Ordered collections of values.
o Array Methods: Built-in functions for manipulating arrays.
o Objects: Collections of key-value pairs used to store complex data
structures.
• DOM Manipulation
o DOM (Document Object Model): Representation of HTML elements as
objects that JavaScript can interact with.
o Accessing and Modifying DOM Elements: Techniques for selecting and
changing elements on a web page.

5
 • Events
o Events: Actions that occur in a web page, such as clicking a button or
submitting a form.
o Event Handling: Attaching functions (event listeners) to respond to specific
events.
• Asynchronous JavaScript
o Asynchronous Programming: Allows JavaScript to execute multiple tasks
concurrently without blocking the main thread.
o Callbacks, Promises, and async/await: Mechanisms for handling
asynchronous code and managing asynchronous operations.
• Error Handling
o Error Handling: Techniques for detecting and managing errors in JavaScript
code.
o try-catch blocks: Allow graceful handling of errors to prevent program
crashes.
• Scope and Hoisting
o Scope: Determines the accessibility of variables in different parts of a
program.
o Hoisting: JavaScript's behavior of moving variable and function
declarations to the top of their containing scope during compilation.

3.2 JAVASCRIPT TASKS

Task 1: Character Limit in Textarea

Implement a character limit in a textarea input field along with a character count display.

Fig. 3.2.1 Task-1 Implementation

6
Task 2: Interactive Table Operations

Implement various interactive functionalities for a static table, including checkbox

manipulation, row deletion, row editing, row duplication, and more.

Fig. 3.2.2 Task-2 Implementation

Task 3: Dynamic Select Options

Create a select dropdown with options and perform dynamic operations such as getting the
selected option's value, disabling all options except the selected one, adding new options
with user input, and setting the first option as selected dynamically using jQuery.

Fig. 3.2.3 Task-3 Implementation

7
 CHAPTER 4: JQUERY & AJAX CONCEPTS

During my internship, I also covered jQuery and AJAX concepts, gaining proficiency in
leveraging these technologies for frontend development tasks.

4.1 JQUERY CONCEPTS

o jQuery DOM Manipulation

• Selecting Elements: Explanation of jQuery selectors to target HTML elements.

• Modifying Content: Methods to manipulate HTML content, attributes, and CSS
properties dynamically.
• Dynamic Element Manipulation: Techniques for adding, removing, and modifying
DOM elements on-the-fly.

o Event Handling with jQuery

• Event Binding: Utilizing jQuery for attaching event handlers to HTML elements.
• Common Event Methods: Overview of commonly used jQuery event methods like
click(), hover(), etc.
• Event Delegation: Explanation of event delegation for handling events on
dynamically added elements efficiently.

o jQuery Effects and Animations

• Visual Effects: Applying visual effects and animations to enhance user experience.
• Common Animation Methods: Explanation of fadeIn(), fadeOut(), slideDown(),
and other commonly used animation methods.

o jQuery Plugins

• Overview: Introduction to jQuery plugins and their role in extending jQuery

functionality.

8
 • Integration: Guidance on finding, selecting, and integrating jQuery plugins into web
projects.
• Popular Plugins: Highlighting popular jQuery plugins for various functionalities
such as sliders, form validation, etc.

4.2. AJAX Concepts

o Handling AJAX Responses

• Processing Responses: Techniques for handling AJAX response data, including

text, XML, and JSON formats.
• Displaying Data: Methods for displaying AJAX response data dynamically on
webpages.
• Error Handling: Strategies for handling errors and timeouts in AJAX requests to
ensure robustness.

o Working with AJAX APIs

• Consuming APIs: Utilizing AJAX to consume external APIs for fetching and
manipulating data.
• HTTP Requests: Making various types of HTTP requests (GET, POST, PUT,
DELETE) using AJAX.
• Data Integration: Strategies for handling API responses and integrating data into
web applications seamlessly.

9
 CHAPTER 5: REACT NATIVE CONCEPTS

In this chapter, we explore the foundational aspects of React Native, a versatile

JavaScript framework highly regarded for its capability in crafting dynamic and interactive
mobile user interfaces.

Fig. 5.1 Famous React Native Apps

5.1 UNDERSTANDING

React Native is a JavaScript framework designed to facilitate the development of

interactive and responsive mobile applications. It equips developers with tools to create
robust single-page applications (SPAs) and reusable components tailored for mobile
platforms.

Fig. 5.1.1 React Native Rendering

10
5.2 KEY FEATURES OF REACT NATIVE

Cross-Platform Compatibility:

React Native enables developers to build mobile applications that are compatible with
multiple platforms such as iOS and Android, using a single codebase. This helps in
reducing development time and effort significantly.

Fig. 5.2.1 Cross-Platform Compatibility

Native Performance:

React Native allows developers to create mobile applications with near-native

performance by leveraging native components. This ensures smooth animations, fast load
times, and seamless user interactions, providing users with a high-quality experience.

Hot Reloading:

With hot reloading, developers can see the changes they make to the code reflected instantly
in the application without the need to rebuild the entire app. This feature accelerates the
development process and enhances developer productivity.

11
Reusable Components:

React Native promotes the concept of reusable components, allowing developers to create
modular UI elements that can be reused across different parts of the application. This results
in cleaner code, improved consistency, and faster development.

Third-Party Library Compatibility:

React Native offers excellent compatibility with third-party libraries and plugins, enabling
developers to integrate a wide range of functionalities into their applications. This includes
libraries for maps, animations, authentication, and more, enhancing the capabilities of the
app.

Fig. 5.2.2 React Native Libraries

12
Community Support:

Backed by a large and active community of developers, React Native provides extensive
documentation, tutorials, and resources. This makes it easier for developers to learn,
troubleshoot, and collaborate on projects, fostering innovation and growth within the
ecosystem.

Native Module Integration:

React Native allows developers to incorporate platform-specific code modules written in

native languages like Java or Swift. This enables access to device features and
functionalities that are not available through JavaScript APIs alone, providing flexibility
and extensibility.

Declarative UI Development:

With React Native's declarative UI approach, developers can efficiently design and build
complex user interfaces using JSX syntax, which closely resembles HTML, CSS, and
JavaScript. This simplifies the UI development process and improves code readability

Responsive Layouts:

React Native offers responsive layout components and flexbox-based styling, allowing
developers to create adaptive UIs that automatically adjust to different screen sizes and
orientations. This ensures a consistent user experience across devices.

Offline Support:

React Native applications can function offline by utilizing local storage solutions like
AsyncStorage and SQLite. This allows the app to store and sync data locally, enhancing
user experience and accessibility in low-connectivity environments.

13
5.3 LIBRARIES IN REACT NATIVE

In Vue.js development, leveraging libraries can significantly enhance productivity and

extend functionality. Here are some essential libraries commonly used in Vue.js projects:

o @react-native-async-storage/async-storage: Asynchronous key-value storage for React

Native apps.
o @react-native-community/checkbox: Checkbox component for React Native
applications.
o @react-navigation/native: Core navigation library for React Native apps.
o @reduxjs/toolkit: Official Redux toolkit for efficient Redux development.
o axios: Promise-based HTTP client for making requests in React Native.
o react-native-gesture-handler: Gesture management library for React Native.
o react-native-safe-area-context: React context for safe area insets in React Native.
o react-redux: Official React bindings for Redux state management.
o @react-native-community/netinfo: Library for accessing network state in React Native.
o @react-native-masked-view/masked-view: Component for applying masks to views in
React Native.
o @react-navigation/drawer: Drawer navigation component for React Navigation.
o react-native-image-crop-picker: Library for selecting and cropping images in React
Native.
o react-native-image-picker: Image picker component for React Native apps.
o react-native-reanimated: Animation library for React Native.
o react-native-paper: Material Design components for React Native apps.
o react-native-element-dropdown: Dropdown component for React Native applications.
o react-native-snackbar: Snackbar component for displaying brief messages in React
Native.
o react-native-vector-icons: Customizable vector icons for React Native apps.
o react-native-modal: Modal component for displaying content on top of other content in
React Native.
o react-native-swiper: Swiper/slider component for React Native apps.
o @react-navigation/bottom-tabs: Bottom Tab navigation component for React
Navigation.
o @react-navigation/material-top-tabs: Material Top Tab navigation component for React
Navigation.
o react-native-base64: Library for encoding and decoding base64 data in React Native.
o react-native-device-info: Library for accessing device information in React Native apps.

14
5.4 TASKS IN REACT NATIVE

In React Native development, practical tasks are invaluable for mastering the
framework and its associated libraries. Here's a list of tasks that cover various
aspects of React Native and its ecosystem:

1.Splash Screen:

• As the initial screen users see when launching the app, the splash screen plays a crucial
role in creating a strong first impression.

• Implemented a visually appealing splash screen featuring our app's logo, which helps
reinforce brand identity and build anticipation.

Fig. 5.4.1 Splash Screen

15
2. Slider:

• Designed the slider to showcase important information, such as app updates, promotions,
or product highlights, in a visually appealing slideshow format.

• Utilized the slider to effectively communicate with users and guide them through the app's
functionalities and offerings.

Fig. 5.4.2 Custom Slider

3. Login and Logout Functionality:

• Developed a seamless login process that enables users to securely access their accounts
and sensitive information.

• Integrated logout functionality to allow users to terminate their sessions and securely log
out of the application when needed, prioritizing user privacy and security.

16
 Fig. 5.4.3 Login Page

4. Custom Drawer Navigation:

• Crafted a custom drawer navigation system tailored to our app's design and user
experience requirements.

• Designed the navigation drawer to provide intuitive access to different sections and
features of the app, enhancing user navigation and engagement.

17
 Fig. 5.4.4 Custom Drawer

5. Stack Navigation:

• Utilized stack navigation to maintain a clear and predictable navigation flow within the
app, enhancing usability and user satisfaction.

6. Redux in React Native:

• Integrated Redux into our React Native application to efficiently manage the app's state
and data flow.

18
 CHAPTER 6: JAIN PANCHANG MOKSH MARG

6.1 OVERVIEW

The Jain Panchang offers a comprehensive calendar service covering the next ten
years, supporting multiple languages including Hindi, Gujarati, and English. Users receive
notifications for upcoming events, auspicious occasions, and lunar days (Tithis), staying
connected with Jain traditions. A widget feature displays the Tithi of the current day for
quick reference. Users can choose between the English calendar or Hindu calendar months
format. The Panchang includes important Jain festivals and dates, ensuring users are aware
of key religious observances. Additionally, it provides access to various Jain rituals
(Pachakhans) such as Navkarsi, Porsi, Sadhporsi, along with audio guidance. Users can
also view daily timings for Navkarsi, Porsi, Sadha Porshi, and other rituals based on their
location, with Tithis color-coded to indicate whether green vegetables should be consumed
on a particular day, in accordance with Jain dietary guidelines.

6.2 MODULES

Home:

• The Home feature of the Panchang app acts as a central hub, providing users with
quick access to essential information.

• It displays the current date, time, and relevant astrological data, along with
summaries of upcoming events and auspicious timings. Additionally, it prominently
features the Tithi component, showcasing the current lunar day's significance in
Hindu astrology.

19
Pachhakan:

• The Pacchakan feature of the app provides insights into different periods of the day,
such as morning and evening.

• Users can access detailed information by selecting a specific period, which opens a
custom dialog with relevant astrological data and guidance.
• This empowers users to make informed decisions and plan activities according to
astrological considerations within the Hindu calendar system, enriching their
spiritual and cultural practices.

Calendar:

• It presents a traditional calendar layout, highlighting auspicious and inauspicious

days, festivals, and other significant events based on the Hindu lunar calendar
system.

• Users can easily switch between months or years to explore past or upcoming dates,
facilitating efficient planning and reference for religious or cultural observances.

Choghadiya:

• The Choghadiya feature offers users insights into auspicious and inauspicious time
periods categorized into day and night intervals according to Hindu astrology.

• Users can explore timings for both segments, each associated with specific
planetary configurations and suitability for various tasks.

20
 • By consulting Choghadiya timings, users can plan activities like travel, business
dealings, or religious ceremonies, ensuring alignment with favorable astrological
influences for each time segment.

Events:

• The Events feature presents users with a curated list of upcoming religious, cultural,
or astrological events and festivals.

• Each event is displayed with its title, accompanying image, and date, providing
users with a visually engaging overview of the event.

• Users can browse through the list of events to discover important dates and learn
about the significance of each occasion.

API Data Integration and Pagination :

• Implemented API calls to fetch data for all app components, including Panchang,
Choghadiya, events, and dashboard information, ensuring that users have access to
comprehensive and up-todate content

• Implemented pagination techniques to efficiently manage large datasets retrieved

from the API, enabling smooth navigation and improved performance, particularly
when dealing with extensive data sets in components such as events or dashboard
summaries.

21
6.3 IMPLEMENTATION

Fig. 6.3.1 Home Page Fig. 6.3.2 Pachhakan Page

Fig. 6.3.3 Detail Pachhakan Model Fig. 6.3.4 Calander Page

22
Fig. 6.3.5 Events Page Fig. 6.3.6 Choghadiya Page

23
 CHAPTER 7: CERTIFIED BACKFLOW JOBS

7.1 OVERVIEW

"Certified Backflow Jobs" is a comprehensive technician management system designed to

streamline the process of handling backflow jobs, even in offline environments. Through
secure user authentication, technicians access a dashboard displaying upcoming,
completed, and pending tasks, with filters for streamlined management. The app allows
technicians to browse available backflow jobs in their area, apply for jobs directly, and
access detailed job information. Technicians can manage their workload efficiently,
accepting or rejecting jobs based on their availability, with real-time updates on job status.
Additionally, the system supports documentation and reporting, enhancing transparency
and efficiency. With the capability to work offline, technicians can access critical
information and update job status even without an internet connection, ensuring
uninterrupted workflow management in various working conditions.

7.2 MODULES

Login:

• Implements secure authentication options, enabling technicians to access the

system through various methods, including email/password, social media login,
and biometric authentication from ZOHO CRM.

Home:

• Utilizes real-time synchronization to ensure that any changes made to job details,
even while offline, are reflected in the Home page upon reconnection.
• In home page there is button to save job to server when user is online

24
Jobs:

• Lists available backflow jobs, each comprising various devices requiring testing.

• Technicians can access detailed information about each job, including device
specifications and testing requirements.

• Real-time updates on job status and client communication enhance collaboration

and transparency.

Settings:

• Allow user to sync new jobs from server

.
Offline Capabilities:

• Certified Backflow Jobs offers robust offline capabilities to ensure uninterrupted

workflow management.
• Technicians can sync jobs from the server, updating the Home page with any
changes or new assignments.
• If offline, technicians can still make changes to job statuses or details, which will
be reflected in the respective jobs upon reestablishing connectivity.
• The Home page remains accessible even when offline, displaying relevant job
information. If no changes are made while offline, the page will remain unchanged
until synchronization occurs.

25
7.3 IMPLEMENTATION

Fig. 7.3.1 Login Page Fig. 7.3.2 Zoho Page

Fig. 7.3.3 Home Page Fig. 7.3.4 Drawer

26
Fig. 7.3.5 Settings Page Fig. 7.3.6 Sort Option

Fig. 7.3.7 Detail Pages

27
Fig. 7.3.8 Job Edit Page

Fig. 7.3.9 Device Edit

28
 Fig. 7.3.10 Device Edit

Fig. 7.3.11 New Device Page

29
 Fig. 7.3.12 Image Picker Fig. 7.3.13 Remove Image

Fig. 7.3.14 Delete Image Fig. 7.3.15 Job Listing Page

30
 CHAPTER 8: CONCLUSION

My internship at Digitattva Technolabs has been an invaluable journey of growth

and learning. Throughout this experience, I've had the opportunity to enhance my skills in
React Native development, overcoming challenges and honing my abilities through hands-
on projects.The supportive atmosphere at Digitattva Technolabs has been instrumental in
fostering my professional development. From mastering React Native to refining my time
management and communication skills, each aspect of this internship has contributed to
my growth as a developer.

I've particularly appreciated the diverse range of projects I've been involved in
during my internship. From developing sleek user interfaces to implementing complex
functionalities, each project has presented unique challenges that have pushed me to expand
my skill set and think creatively. These experiences have not only strengthened my
technical proficiency but have also instilled in me a sense of adaptability and resilience that
will serve me well in my future career.

Furthermore, the collaborative nature of the work environment has been truly
enriching. Working alongside talented professionals from different backgrounds has
exposed me to diverse perspectives and approaches, fostering a culture of innovation and
collaboration. The camaraderie within the team has made every project a rewarding and
enjoyable experience, and I am grateful for the friendships formed and the knowledge
shared.

As I conclude my internship at Digitattva Technolabs, I am filled with a sense of

gratitude for the opportunities I've been given and the experiences I've gained. I am
confident that the skills and insights acquired during this time will serve as a solid
foundation for my future endeavors in React Native development. I look forward to
applying what I've learned and continuing to grow both personally and professionally in
the exciting world of mobile app development.

31
 REFERENCES

• ReactNative Documentation: https://reactnative.dev/

• NPM Documentation: https://www.npmjs.com/

• jQuery Documentation: https://api.jquery.com/

• GeeksforGeeks: https://www.geeksforgeeks.org/

32
Weekly report scanned copy

33