Internship Report

on
SUMMER INTERNSHIP – III (21ET76I)
TITLED

“DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5

FLASH API & REACT JS”
Submitted by

HARISH ISHWAR NAIK USN: 1RV21ET015

Carried out at:

VTU-Skill Enhancement Course

Under the Guidance of

Internal Guide External Guide
Dr. B. Roja Reddy Mr. Uttam Kumar
Associate Professor Trainer
RV College of Engineering Edutainer
Bengaluru Bengaluru

Submitted in partial fulfillment for the seventh semester examination of

BACHELOR OF ENGINEERING
in
Electronics and Telecommunication Engineering

DEPARTMENT OF
ELECTRONICS AND TELECOMMUNICATION ENGINEERING

2024-25
 RV COLLEGE OF ENGINEERING®
(Autonomous Institution Affiliated to Visvesvaraya Technological University, Belagavi)
Bengaluru– 560059

DEPARTMENT OF
ELECTRONICS AND TELECOMMUNICATION ENGINEERING

CERTIFICATE
Certified that the Internship work titled “Development of AI Trip Planner Using Gemini 1.5
Flash API & React JS” carried out by Harish Ishwar Naik, USN: 1RV21ET015, a Bonafide
student, submitted in partial fulfillment for the seventh semester examination of Bachelor of
Engineering in Electronics and Telecommunication Engineering of RV College of
Engineering®, Bengaluru, affiliated to Visvesvaraya Technological University, Belagavi, during
the year 2024-25. It is certified that all corrections/suggestions indicated for internal assessment
have been incorporated in the report deposited in the departmental library. The Internship report
has been approved as it satisfies the academic requirement in respect of internship work
prescribed for the said degree.

Guide Head of the Department Principal

Dr. B. Roja Reddy Dr. K. Nagamani Dr. K N Subramanya
Associate Professor Professor & Head Principal
RV College of Engineering RV College of Engineering RV College of Engineering
Bengaluru Bengaluru Bengaluru

Name of the External Examiners Signature with Date

1.____________________ __________________

2.____________________ _________________
CERTIFICATE FROM ORGANIZATION

(i)
 ACKNOWLEDGEMENT
I am indebted to my guide, Dr. B. Roja Reddy for her wholehearted support, suggestions, and
invaluable advice throughout the Internship.

I also express our gratitude to our evaluation panel member Dr. K. Saraswathi, Associate
Professor, Department of Electronics and Telecommunication Engineering for his valuable
comments and suggestions.

My sincere thanks to Dr. Nagamani K, Professor and Head, Department of Electronics

&Telecommunication Engineering, RVCE for her support and encouragement.

I express sincere gratitude to our beloved Principal, Dr. K. N. Subramanya for his appreciation
towards this internship work.

I thank all the teaching staff and technical staff of the Department of ETE, RVCE for their help.

HARISH ISHWAR NAIK

Department of ETE
RV College of Engineering
Bengaluru-59

(ii)
 EXECUTIVE SUMMARY

The development of the AI Trip Planner using Gemini 1.5 Flash API and React.js focuses on
providing an intelligent, automated travel itinerary generation system. This application is
designed to assist travelers by offering personalized trip plans based on their preferences,
including destination, budget, travel duration, and group type. Unlike traditional travel planning
methods, this AI-driven system eliminates the need for manual research by utilizing Geoapify
API for accurate location-based data and Gemini 1.5 Flash API for generating detailed
itineraries. The AI Trip Planner enhances real-life travel scenarios by providing structured day-
wise schedules, hotel recommendations, estimated costs, transportation suggestions, and local
attractions. The ability to generate optimized travel plans in real time makes it an essential tool
for users seeking efficiency and convenience in their trip planning process.

The implementation of the AI Trip Planner followed a structured methodology, beginning with
frontend development using React.js to create a user-friendly interface. Since the system is
entirely frontend-based, it relies on API calls to fetch and process data dynamically. The
Geoapify API is integrated to obtain geolocation data for hotels and attractions, while the
Gemini 1.5 Flash API generates personalized trip itineraries by analyzing user inputs. The
project focused on ensuring smooth API communication, optimized performance, and error
handling mechanisms. The UI was designed to be interactive and responsive, allowing users to
modify inputs and receive updated recommendations instantly. Extensive testing was
conducted to validate API accuracy, UI functionality, and overall performance. By
implementing state management and caching techniques, the planner optimizes real-time data
processing, ensuring a seamless and efficient user experience.

The AI Trip Planner successfully delivers a structured, automated, and highly detailed travel
itinerary that significantly reduces the effort required for trip planning. The results include well-
organized day-wise activity schedules, detailed cost breakdowns, and transportation
recommendations, enhancing the overall travel experience. Users receive a downloadable trip
plan in HTML format, ensuring accessibility even in offline mode. The system’s efficiency is
demonstrated by its ability to provide quick and accurate travel plans based on real-time data.
Future enhancements could involve integrating additional APIs for real-time flight bookings,
local event tracking, and user preference learning for even more personalized
recommendations.

(iii)
 TABLE OF CONTENTS
Certificate from Organization (i)
Acknowledgement (ii)
Executive Summary (iii)
List of Figures (iv)
List of Abbreviations (v)

Chapter 1
Profile of the Visvesvaraya Technological University
1.1 Organization structure 1
1.2 Domain of Expertise 1
1.3 Business Partner 1
1.4 Man Power 2
1.5 Social Concerns 2
1.6 Professional Practices 2

Chapter 2
Activities of Edutainer India
2.1 About the Edutainer India 3
2.2 Activity &Research Collaboration 3

Chapter 3
AI Trip Planner using Gemini-1.5 Flash API & React Js
3.1 Summary of Task Performed 5
3.2 HTML (Hyper Text Markup Language) 7
3.3 CSS (Cascading Style Sheet) 11
3.4 JavaScript and React JS 14
3.5 AI Trip Planner using Gemini 1.5 Flash & React 20

Chapter 4
Reflections
4.1 Experience 27
4.2 Assessment 27
4.3 Technical and Non-Technical Outcomes 28

References 30

31
Annexure A1 : CO – PO Mapping
 LIST OF FIGURES

Sl No. Description Page No.

3.1 Boiler plate for HTML 7

3.2 Heading Tag 8

3.3 Paragraph Tag 8
3.4 Link Tag 9
3.5 Image Tag 9
3.6 List Tags 10
3.7 Table Tags 10
3.8 CSS Syntax 11
3.9 Selector Uses Cases in CSS 12
3.10 CSS Box Model 13
3.11 Variables declarations 14
3.12 Function Declaration 15
3.13 Promises & Async-await in JavaScript 16
3.14 Components in React 18
3.15 Fetching Data from external API 19
3.16 Methodology Flow Chart for AI Trip Planner 21
3.17 Architecture of AI Trip Planner 23
3.18 Input Page of AI Trip Planner 24
3.19 Accommodation section of output page 24
3.20 Itinerary section of output page 25
3.21 Cost breakdown section of output page 26

(vi)
 LIST OF ABBREVIATIONS

Abbreviations Full Form

AI Artificial Intelligence

API Application Programming Interface

BE Bachelor of Engineering

CSS Cascading Style Sheets

HTML Hypertext Markup Language

JS JavaScript

JSON JavaScript Object Notation

MERN MongoDB, Express.js, React, Node.js

MoU Memorandum of Understanding

NPM Node Package Manager

NSS National Service Scheme

PO Program Outcome

UI User Interface

(v)
DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Chapter 1

Profile of the Visvesvaraya Technological University

This chapter gives insight into the organization where the internship took place in. Different
aspects of the organization and its primary organizational values are discussed.

1.1 ORGANIZATION STRUCTURE

Visvesvaraya Technological University (VTU) is governed by an Executive Council and
an Academic Senate, which are responsible for the administration and academic policies of the
university. The Executive Council is the principal governing body, comprising members from the
academic community and government officials. Key positions include:

Chancellor: Sri Thawar Chand Gehlot, Governor of Karnataka

Vice-Chancellor: Dr. S. Vidyashankar
Registrar: Prof. Satish Annigeri (In-charge)

The Academic Senate oversees academic affairs and includes members such as the Vice-Chancellor
and representatives from various colleges affiliated with VTU

1.2 DOMAIN OF EXPERTISE

VTU specializes in engineering, technology, and allied sciences, offering a broad range of
undergraduate and postgraduate programs. The university has established itself as a leader in
technical education in India, catering to over 300,000 students across its 219 affiliated colleges
Its focus areas include:
• Engineering disciplines (Mechanical, Civil, Electrical, etc.)
• Management programs (MBA)
• Computer applications (MCA)
• Research initiatives across various fields

1.3 BUSINESS PARTNERS

VTU collaborates with numerous organizations to enhance its educational offerings and research
capabilities. It has signed Memorandums of Understanding (MoUs) with international entities and

Dept. of ETE RVCE 1

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

multinational corporations such as Edutainer India, IBM, Microsoft, and Bosch Rexroth. These
partnerships facilitate internships, research projects, and knowledge sharing, benefiting both
students and faculty.

1.4 MAN POWER

The university employs a significant number of faculty and administrative staff to support its
operations. As of recent data, VTU has around 2,305 recognized research departments across its
affiliated institutions. The faculty is involved in teaching, research supervision, and various
administrative roles within the university Additionally, VTU's regional offices in Bengaluru,
Mysuru, Kalburgi, and Belagavi help manage its extensive network of colleges effectively

1.5 SOCIAL CONCERNS

VTU is committed to addressing social concerns through various outreach programs and initiatives
aimed at community development. The university promotes sustainable development practices and
encourages students to engage in social service activities through its National Service Scheme (NSS)
and other platforms. This focus on social responsibility aims to foster a sense of community among
students while contributing to societal needs

1.6 PROFESSIONAL PRACTICES

VTU emphasizes professional ethics and practices within its curriculum. The university integrates
industry standards into its educational framework to prepare students for real-world challenges. One
of the key approaches employed by VTU is the incorporation of project-based learning. This method
enables students to apply their theoretical understanding to real-world problems, encouraging critical
thinking, problem-solving, and innovation. Through hands-on projects, students engage in
teamwork, time management, and decision-making, all of which are crucial for professional success.
These projects often simulate industry scenarios, ensuring that students gain practical exposure to
the challenges they will encounter in their careers. This includes:
• Incorporating project-based learning
• Encouraging internships with industry partners
• Promoting research that addresses societal challenges
The aim is to develop not only technical skills but also ethical and professional competencies among
graduates

Dept. of ETE RVCE 2

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Chapter 2
Activities of Edutainer India
This chapter gives insights about the Digital Services of Edutainer India and also
summarize of major areas on they provide serviced to their clients. The area of expertise
and few of the major developmental projects will also be mentioned in this chapter

2.1 ABOUT THE EDUTAINER INDIA

Edutainer India is a leading online education platform dedicated to equipping individuals with the
skills needed to thrive in a rapidly evolving professional landscape. With a strong focus on industrial
expectations and practical, result-oriented learning, Edutainer delivers a wide range of affordable,
skill-based courses designed to meet industry demands. By integrating theoretical learning with real-
world applications, Edutainer bridges the gap between education and employment. Courses are
guided by expert instructors with extensive industry experience, ensuring that learners gain insight
into actual operational processes. Upon completion, students receive certifications and placement
references from leading organizations, empowering them to secure high-demand, well-paying jobs.
At Edutainer India, learners have the flexibility to study at their own pace, interact with industry
professionals, and engage in an immersive learning experience. The platform is committed to
making education accessible and impactful, transforming lives and careers worldwide.

2.2 ACTIVITY AND RESEARCH COLLABORTAION

Edutainer India actively engages in activities and collaborations to foster innovation and connect
academia with industry needs.

• Industry Partnerships: Aligns course content with market trends by working with top
organizations. Provides internship opportunities and professional references to enhance
employability.
• Research Collaboration: Partners with academic and research institutions to design cutting-
edge curricula. Facilitates projects tackling real-world technological and professional
challenges.
• Educational Initiatives: Hosts events like webinars and workshops featuring industry and
academic experts. Develops interactive tools and platforms for enhanced engagement and
learning.
Dept. of ETE RVCE 3
 DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
• Community Support: Offers scholarships and discounted courses to underprivileged
learners. Promotes knowledge sharing and interdisciplinary innovation for societal benefit.

Through these activities, Edutainer India bridges the gap between education and employment. Beyond
academic and industry collaborations. Edutainer India is committed to community support by making
education accessible to underprivileged learners. The organization offers scholarships and discounted
courses to individuals who may face financial constraints, ensuring that quality education is available to
a broader audience. Furthermore, it promotes interdisciplinary innovation by encouraging knowledge-
sharing initiatives that benefit society at large. By fostering a culture of inclusivity and continuous
learning, Edutainer India empowers learners from diverse backgrounds to develop the skills necessary
for personal and professional growth.

Through these comprehensive activities, Edutainer India effectively bridges the gap between education
and employment. By integrating industry expertise, research-driven learning, innovative educational
initiatives, and community-focused programs, the organization equips learners with the necessary skills
and knowledge to excel in a dynamic global economy.

Dept. of ETE RVCE 4

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Chapter 3
AI Trip Planner using Gemini-1.5 Flash API & React Js
This chapter summarizes the AI Trip Planner using Gemini-1.5 Flash and React.js, providing
insights into key areas of development in AI-driven travel planning and also highlight task performed
during the internship period.

3.1 SUMMARY OF THE TASKS PERFORMED

Over the course of six weeks, a structured learning approach was followed to develop a strong
foundation in web development and React.js. The journey began with the basics of HTML and CSS,
gradually progressing to Bootstrap for responsive design. React.js was then introduced, covering key
concepts such as JSX, components, state management, hooks, API integration, form handling, and
routing.

This section outlines the tasks performed each week, detailing the core concepts learned and
implemented during the training. The objective was to build a comprehensive understanding of front-
end development, focusing on modern web technologies and best practices.

3.1.1 Introduction to Web Development and React Tools

The first week focused on understanding the fundamental concepts of web development and
setting up the necessary tools for React.js. The learning began with HTML, covering essential
elements, attributes, forms, and images, which are the backbone of any web page. Additionally,
react development tools were introduced, including Node.js, npm, and package managers,
ensuring a smooth setup for working with React. By the end of the week, a basic understanding
of structuring web pages and preparing a React development environment was established.

3.1.2 Styling with CSS and Bootstrap.

In the second week, styling and layout techniques were explored using CSS and Bootstrap. CSS
fundamentals such as selectors, properties, box model, flexbox, and grid were covered to create
visually appealing web pages. Bootstrap was introduced as a powerful front-end framework to
build responsive designs efficiently. Components like navigation bars, buttons, and grids were
implemented using Bootstrap classes.

Dept. of ETE RVCE 5

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

3.1.3 Setting Up React and JSX Fundamentals.

The third week marked the beginning of React.js, starting with the installation and setup of React
applications. JSX, the syntax extension for JavaScript, was introduced to create dynamic and
reusable components. The fundamentals of React components, state, and rendering elements
were explored. Concepts like passing data using props and handling basic user interactions were
also covered. This week laid the foundation for building interactive web applications using
React.

3.1.4 React Functional Components and Hooks

The fourth week focused on React functional components and hooks, which are essential for
managing state and side effects in modern React applications. The useState hook was introduced
for handling component state, while the useEffect hook was explored for handling side effects
such as API calls. React’s array-handling techniques were studied, and structured UI elements
like tables and cards were implemented. By the end of this week, a deeper understanding of how
React components interact and manage data dynamically was gained.

3.1.5 Fetching and Handling API Data in React

In the fifth week, API integration was the main focus, learning how to fetch, display, and
manipulate data using React. The fetch API and useEffect hook were used to retrieve data from
external sources dynamically. Additional functionalities such as deleting data and handling
asynchronous operations were implemented. The concept of props was also explored to
understand how data flows between parent and child components. This week strengthened the
ability to work with real-time data and integrate external APIs into React applications. Based on
knowledge acquired in this week AI Trip Planner was implemented using Gemini 1.5 API and
React Js.

3.1.6 Advanced React Concepts and Routing

The final week covered advanced React concepts, focusing on navigation, user interaction, and
form handling. React Router was introduced to manage multiple views within a single-page
application. Controlled forms were created using the useForm hook, with validation mechanisms
to ensure proper data input. The useRef hook was also explored for direct DOM manipulation.
Additionally, search functionality and UI components like Jumbotron were implemented to
Dept. of ETE RVCE 6
DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
enhance the user experience.

3.2 HTML (HYPER TEXT MARKUP LANGUAGE)

HTML (HyperText Markup Language) is the standard language used to create and structure
webpages. It provides the framework for web content by using elements and tags that define different
components such as text, images, links, and multimedia. HTML is not a programming language;
rather, it is a markup language that structures content on the web.

3.2.1 Basic Structure of an HTML Document

An HTML document consists of elements enclosed in tags. A typical HTML file follows
structure as shown in Fig 3.1

Figure 3.1 : Boiler plate of HTML

The <!DOCTYPE html> declaration is used to define the document type and version of HTML
being used, specifically HTML5. It ensures that the browser interprets the document correctly
without falling back to older rendering modes. The <html> element serves as the root of the
HTML document, encompassing all other elements on the page. Within it, there are two primary
sections: <head> and <body>. The <head> section contains metadata that provides important
information about the document, such as character encoding (<meta charset="UTF-8">),
viewport settings for responsive design, links to external stylesheets, and the document title
specified using the <title> tag. The title appears on the browser tab and helps users identify the
Dept. of ETE RVCE 7
DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
webpage. The <body> section holds the main content that is visible to users, including text,
images, links, buttons, forms, and other interactive elements.

3.2.2 HTML Elements and Tags

Tags are the fundamental components of HTML used to define elements. They are enclosed in
angle brackets (<>) and usually come in pairs: an opening tag and a closing tag. The closing tag
includes a forward slash (/) before the tag name. Example for tags include:

• Headings (<h1> to <h6>) :Headings in HTML are used to define different levels of section
titles or headings within a webpage. The <h1> tag represents the most important heading,
typically used for the main title of a page, while <h6> represents the least important heading
as shown in Fig 3.2.

.Figure 3.2 : Heading Tags

Using headings correctly helps in organizing content, improving readability, and enhancing
search engine optimization (SEO).

• Paragraphs (<p>): The <p> tag is used to define text content in a structured and readable
manner as shown in Fig 3.3. It allows developers to separate different blocks of text, making
the webpage more visually appealing .

Figure 3.3: Paragraph Tag

Paragraphs also help improve the clarity of content, ensuring that text does not appear as a
continuous block, which can be difficult to read.
Dept. of ETE RVCE 8
DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

• Links (<a>): Hyperlinks are created using the <a> tag as shown in Fig 3.4, which allows
users to navigate between webpages or resources. The href attribute specifies the URL or file
path the link points to.

Figure 3.4:Link Tag

Links can be used for internal navigation within the same website or to direct users to external
sources. Proper use of links enhances the interactivity and accessibility of a webpage,
enabling users to explore additional content with a single click.

• Images (<img>): The <img> tag is used to embed images in a webpage, enhancing the visual
appeal and user engagement. The src attribute specifies the image source, while the alt
attribute provides alternative text as shown in Fig 3.5, which is useful for accessibility and
SEO.

Figure 3.5:Image Tag

Images play a vital role in improving user experience, making content more engaging, and
helping convey information more effectively than text alone.

• Lists (<ul>, <ol>, <li>): Lists in HTML are used to present information in a structured
format. Unordered lists (<ul>) display items with bullet points, making them ideal for non-
sequential content. Ordered lists (<ol>) present items in a numbered or lettered format .Each
item within a list is represented using the <li> tag, ensuring clear and organized content
presentation as shown in Fig 3.6. Lists improve readability by breaking down information
into easily digestible points. Lists can also be nested, allowing for hierarchical structuring of
content within a list. Additionally, they can be styled using CSS to customize bullet points,
numbering, spacing, and alignment for enhanced presentation.
Dept. of ETE RVCE 9
DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Figure 3.6:List Tags

• Tables (<table>, <tr>, <td>, <th>): Tables in HTML are used to organize and display data in
rows and columns. The <table> tag defines the table structure, while <tr>

Figure 3.7:Table Tags

represents table rows. The <th> tag is used for header cells, typically displayed in bold, and
<td> defines data cells within the table as shown in Fig 3.7. Tables are commonly used for
presenting structured information, such as product listings, pricing details, schedules, and
statistical data. Proper use of tables helps in effectively managing and displaying complex
information in a tabular format.

3.3 CSS (CASCADING STYLE SHEETS)

CSS (Cascading Style Sheets) is a stylesheet language used to control the visual presentation of
HTML documents. It allows developers to style web pages by defining how elements are displayed,
including layout, colors, fonts, and spacing. One of the key advantages of CSS is its ability to
separate content from design, making the code more maintainable and improving the overall
Dept. of ETE RVCE 10
DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
structure of the webpage. This separation helps developers modify the visual appearance without
altering the HTML content, making web development more efficient.

3.3.1 Basic CSS Syntax

CSS uses a simple yet powerful syntax to apply styles to HTML elements. The syntax consists
of selectors, which target specific HTML elements, followed by a set of style rules enclosed
within curly braces {} as shown in Fig 3.8. Each style rule contains properties and their
corresponding values, defining how the targeted elements should be displayed. For example, the
background-color property sets the background color, while the font-size property specifies the
text size.

Figure 3.8: CSS Syntax

3.3.2 Types of CSS

CSS can be applied in three different ways, each offering different levels of flexibility and
reusability. Inline CSS is applied directly within an HTML element using the style attribute,
affecting only that specific element. Internal CSS is defined within the <style> tag inside the
<head> section of an HTML document, allowing styles to be applied across the entire page.
External CSS is the most efficient method, where styles are stored in a separate .CSS file and
linked to the HTML document using the <link> tag. This method promotes code reusability and
simplifies maintenance by keeping the design separate from content.

Dept. of ETE RVCE 11

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
3.3.3 Selectors in CSS

CSS selectors are used to target HTML elements and apply styles to them. The Element Selector
targets all instances of a specific HTML tag, applying the same style uniformly. The Class
Selector, represented by a dot (.), targets elements with a specified class attribute, allowing the
same style to be applied to multiple elements.

Figure 3.9 : Selectors use case in CSS

The ID Selector, denoted by a hash (#), targets a unique element with a specific id attribute,
ensuring that only one element is styled. The Group Selector combines multiple selectors to
apply the same style to different elements, reducing code duplication and simplifying the
stylesheet as shown in Fig 3.9.

3.3.4 Box Model in CSS

The CSS Box Model defines how elements are displayed on a webpage by considering their
content, padding, border, and margin as shown in Fig 3.10. The Content represents the actual text

Dept. of ETE RVCE 12

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
or image within the element. Surrounding the content is the Padding, which creates space
between the content and the border.

Figure 3.10 : CSS Box Model

The Border acts as a boundary around the padding, while the Margin provides space between the
element and other elements. Understanding the box model is essential for creating well-structured
layouts, as it helps developers control the spacing and alignment of elements. The box model is
crucial for layout design, as it helps maintain proper spacing and alignment of elements within a
webpage. By mastering it, developers can ensure consistency in web design and avoid layout
issues caused by unexpected element sizing.

3.4 JAVASCRIPT & REACT JS

JavaScript (JS) is a high-level, dynamically typed, and interpreted programming language that
enables interactive web development. Originally created for client-side scripting, JavaScript has
evolved to support server-side development with environments like Node.js. It allows developers to
manipulate the Document Object Model (DOM), handle user events, perform asynchronous
operations, and create dynamic web applications. Unlike static HTML and CSS, JavaScript adds
Dept. of ETE RVCE 13
DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
interactivity by responding to user actions, such as clicks, form submissions, and keyboard inputs.
Modern JavaScript includes features like arrow functions, template literals, destructuring,
spread/rest operators, and ES6 modules, making it more powerful and readable.

3.4.1 Variables and Data Types in JavaScript

JavaScript uses var, let, and const for variable declarations. The var keyword has function-level
scope, while let and const have block-level scope, making them more predictable in modern
development.

Figure 3.11: Variables declaration

JavaScript supports primitive data types like string, number, boolean, undefined, null, symbol,
and bigint, along with complex data structures like arrays and objects as shown in Fig 3.11.
Primitive values are immutable, whereas objects and arrays are reference types, meaning they
can be modified after creation.

3.4.2 Functions in JavaScript

Dept. of ETE RVCE 14

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
Functions in JavaScript allow developers to encapsulate code for reusability. There are different
ways to define functions, including function declarations, function expressions, arrow functions,
and immediately invoked function expressions (IIFE) as shown in Fig 3.12. Arrow functions
provide a shorter syntax and do not bind their own this value, making them useful for callbacks
and functional programming.

Figure 3.12: Function Declaration

3.4.3 DOM Manipulation

The Document Object Model (DOM) represents an HTML document as a tree structure, where
each element is a node. JavaScript allows developers to interact with the DOM using methods
like document.getElementById(), document.querySelector(), and document.createElement().
Events such as click, mouseover, and keydown can be handled using addEventListener(),
enabling dynamic interactions on a webpage.

3.4.4 Event Handling

Dept. of ETE RVCE 15

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
JavaScript provides multiple ways to handle user interactions, such as inline event handlers
(onclick), traditional event handlers (element.onclick = function()), and modern event listeners
(element.addEventListener()), which allow multiple event handlers to be attached to a single
element.

3.4.5 Asynchronous JavaScript

JavaScript is single-threaded but supports asynchronous programming through callbacks,

promises, and async/await. Callbacks are functions passed as arguments to other functions, while
promises represent the eventual completion of an asynchronous task.

Figure 3.13: Promises and Async-await in JavaScript

The async/await syntax simplifies promise-based code, making it more readable and manageable
as shown in Fig 3.13.

3.4.6 React Fundamentals

React is a JavaScript library designed for building fast and interactive user interfaces, primarily

Dept. of ETE RVCE 16

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
for single-page applications (SPAs). It was developed by Facebook (Meta) to address the
challenges of updating web pages efficiently. Traditional web applications rely on direct
manipulation of the DOM (Document Object Model), which can be slow and inefficient,
especially when handling frequent UI updates. React solves this issue using a virtual DOM and
a declarative programming approach, allowing developers to define what the UI should look like
rather than writing complex procedures for manipulating the DOM manually. React applications
are made up of components, which are reusable, independent, and self-contained UI elements.
These components can manage their own state and can be easily composed to build complex user
interfaces. React also follows a one-way data flow, ensuring better predictability and easier
debugging.

Some of the key fundamentals of React include:

• JSX (JavaScript XML): A syntax extension that allows writing HTML-like code inside
JavaScript.
• Components: The building blocks of React applications, which can be functional or class-
based.
• Props (Properties): Mechanism to pass data between components.
• State: Manages dynamic data and re-renders the UI when updated.
• Virtual DOM: A lightweight copy of the actual DOM that helps optimize UI updates for
better performance.

React also enables developers to build responsive and modular applications, making it one of the
most popular libraries for modern web development.

3.4.7 JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within
JavaScript files. It makes it easier to create UI components and improves readability. JSX
elements are transformed into React elements using Babel before rendering them in the browser.

3.4.8 Components in React

React applications are built using components, which can be classified into functional
components and class components. Functional components are simpler and use React Hooks for

Dept. of ETE RVCE 17

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
state management, while class components use the this.state object and lifecycle methods.

Figure 3.14 : Components in React

Components receive props (short for properties) from their parent components, allowing them to
be dynamic and reusable. Props are immutable, meaning they cannot be modified inside the child
component as shown in Fig 3.14.

3.4.9 State Management in React

State is an essential concept in React that allows components to store and manage dynamic data.
The useState hook enables functional components to maintain internal state. Unlike props, state
is mutable, meaning it can be updated to trigger re-renders .React also provides context API and
third-party libraries like Redux for managing global state, ensuring efficient data flow between
components in larger applications. Effective state management helps maintain performance,
prevents unnecessary re-renders, and ensures a smooth user experience in complex applications.

3.4.10 React Hooks

React Hooks were introduced in React 16.8 to enable state and lifecycle features in functional
components. Some commonly used hooks include:

Dept. of ETE RVCE 18

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
• useState – Manages local state.
• useEffect – Handles side effects like API calls and subscriptions.
• useContext – Provides access to global state using React's context API.
• useRef – Maintains references to DOM elements or component instances.
• useReducer – Manages complex state logic similar to Redux reducers.

3.4.11 React Router

React Router is a popular library for handling navigation in React applications. It allows
developers to create dynamic, single-page applications with multiple views while maintaining a
seamless user experience. The <BrowserRouter>, <Route>, and <Link> components enable
client-side routing, eliminating the need for full-page reloads.

3.4.12 Fetching Data from APIs

React applications often interact with APIs to fetch or send data. The fetch API and axios library
are commonly used for making HTTP requests as shown in Fig 3.15. The useEffect hook is used

Figure 3.15 : Fetching Data from external API

to call APIs when components mount, ensuring data is loaded asynchronously without blocking
the User Interface. Axios package can also be used as alternative to fetch method for flexibility.

3.5 AI TRIP PLANNER USING GEMINI 1.5 FLASH API & REACT JS

This AI-driven trip planning application is designed to help users create personalized and well-
structured travel itineraries. Built using React, it leverages the Geoapify API for location-based data

Dept. of ETE RVCE 19

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
and the Gemini 1.5 Flash API for generating AI-powered travel recommendations. The system
provides a seamless way for users to plan trips by simply entering details such as destination,
duration, group type, and budget. The application processes user inputs to fetch real-time location
information, including coordinates and nearby points of interest. Using AI, it generates a
comprehensive travel plan, covering itineraries, hotel recommendations, estimated costs,
transportation options, and local attractions. To enhance performance, it incorporates state
management and caching, ensuring efficient API handling and a smooth user experience. By
integrating AI with real-time geographic data, this trip planner simplifies travel organization,
offering users a structured and intelligent approach to trip planning while minimizing effort and
maximizing efficiency.

3.5.1 Methodology

1. Requirement Analysis and Feature Planning

Identify core functionalities: trip planning, hotel recommendations, itinerary generation,

budget estimation, and transport suggestions. Define user inputs: destination, travel duration,
group type, and budget category. Ensure the application is frontend-only, eliminating the
need for a backend as shown in Fig 3.16.

2. API Selection and Integration

Use Geoapify API for location-based data such as hotel suggestions, points of interest, and
transportation details. Use Gemini 1.5 Flash API for AI-driven itinerary generation based
on user inputs. Structure API requests to minimize redundant calls and optimize performance.

3. Frontend Architecture Design

Develop a single-page application using React for UI management. Implement state

management to handle user inputs and API responses dynamically. Ensure a responsive
design with an intuitive UI for seamless user experience.

4. Implementing API Calls

Capture user inputs and send requests to Geoapify for geolocation-based recommendations.
Simultaneously, pass the user data to Gemini API to generate detailed itineraries. Process
and structure responses to display travel plans, hotel options, and estimated costs.

Dept. of ETE RVCE 20

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Figure 3.16 : Methodology Flow Chart for AI Trip Planner

5. Data Processing and Display

Parse and format API responses into structured output for clear visualization. Use interactive
maps to display hotels and attractions fetched from Geoapify. Present AI-generated itineraries
in categorized sections: daily schedule, expenses, and transport details.
Dept. of ETE RVCE 21
DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
6. Performance Optimization

Implement caching mechanisms to store previous queries and reduce redundant API calls.
Optimize API response handling to ensure smooth and fast rendering of results. Minimize
unnecessary UI re-renders for improved performance.

7. Error Handling and Edge Case Management

Implement fallback mechanisms for API failures, rate limits, or invalid responses. Display
error messages with alternative suggestions for unsupported locations. Handle incorrect user
inputs with validation checks before sending API requests.

8. Testing and Debugging

Conduct unit testing for API interactions to verify correct request-response flow. Perform UI
testing to ensure smooth user experience across different devices. Identify and resolve bugs
related to input validation, data rendering, and API limits.

3.5.2 Implementation

The implementation follows a structured approach to ensure smooth functionality, optimal

performance, and user-friendly interaction. Since the application does not have a backend, all
processing happens on the frontend using React and two APIs—Geoapify for location-based
services and Gemini 1.5 Flash for AI-powered itinerary generation. The development begins with
setting up the React project and integrating the required dependencies. The UI components are
designed to capture user inputs such as destination, travel duration, group type, and budget
category. State management is handled efficiently using React’s built-in hooks to store and
update user selections dynamically Once the user provides input, the application triggers API
calls to fetch relevant data. Geoapify is used to retrieve location-specific information such as
nearby attractions, hotels, and transportation options as depicted in Fig 3.17 . This data is
processed and structured before being passed to Gemini 1.5 Flash, which generates personalized
travel plans, including daily itineraries and estimated costs as shown in Fig 3.17 The API
responses are formatted properly before being displayed to users in an intuitive and visually
appealing manner. The UI dynamically updates based on API responses, ensuring a seamless
user experience. Interactive elements such as date pickers, dropdowns, and map views enhance
engagement. The app also implements error handling to manage API failures, invalid inputs, or

Dept. of ETE RVCE 22

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Figure 3.17 : Architecture of AI Trip Planner

unexpected edge cases. Additionally, performance optimization techniques such as caching

frequent API responses and debouncing user inputs help improve speed and efficiency. Finally,
thorough testing is conducted to validate the application's accuracy, usability, and
responsiveness. Debugging tools and browser console logs are used to detect and fix issues before
deployment.

3.5.3 Result

The AI Trip Planner generates a comprehensive and personalized travel itinerary based on user
inputs and real-time data from the Geoapify and Gemini 1.5 Flash APIs as shown in Fig 3.18.
Once a user provides details such as destination, travel duration, budget category, and group type,
the system processes this information and produces a structured trip plan. The generated results
include a detailed day-wise itinerary, hotel recommendations, estimated costs, transportation
suggestions, and local recommendations to enhance the travel experience as depicted in Fig 3.19.
The AI constructs a well-optimized daily itinerary by selecting key tourist spots, estimating
visiting durations, and scheduling activities efficiently as depicted in Fig 3.20. It ensures that the
user can explore attractions without unnecessary delays while considering factors such as
opening hours and proximity to other destinations. Additionally, the itinerary includes meal
planning with recommendations for restaurants that align with the user’s budget and preferences.

Dept. of ETE RVCE 23

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
Suggested activities, such as cultural experiences, adventure sports, or historical site visits, are
tailored to the traveler's interests. For accommodation, the AI Trip Planner provides hotel

Figure 3.18 : Input Page of AI Trip Planner

recommendations based on the user’s budget, location preferences, and group type. Using
location data from Geoapify, the system identifies suitable hotels that are conveniently situated
near major attractions.

Figure 3.19: Accommodation section of output page

Dept. of ETE RVCE 24

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
The AI suggests options ranging from budget-friendly stays to luxury hotels and provides
estimated prices, allowing users to make informed decisions. Estimating travel costs is another
critical aspect of the generated results. The AI provides a cost breakdown covering
accommodation, local transportation, dining, and entry fees for attractions as shown in Fig 3.21.
This allows users to gauge the affordability of their trip and make adjustments as needed. The
budget calculation adapts based on the selected budget category (cheap, moderate, or luxury) as
shown in Fig 3.18 , ensuring realistic expense estimations. Transportation planning is also
integrated into the results. The AI Trip Planner suggests optimal travel routes between attractions
, factoring in available transport options such as walking, public transport, taxis, or rental cars.

Figure 3.20 : Itinerary section of output page

Travel time estimates are provided to ensure users can efficiently move between locations
without unnecessary delays. Geoapify’s mapping and navigation services enhance this feature,
offering real-time location assistance. Beyond the structured itinerary and logistical details, the
AI enhances the travel experience by providing personalized local recommendations. It suggests
hidden gems, lesser-known attractions, and cultural events happening during the user's visit.
Additionally, the AI identifies the best street markets and food spots, ensuring travelers can
experience the local culture authentically. The AI also considers weather conditions and peak travel
times to recommend the best time slots for visiting attractions, ensuring a smooth experience. Users can
also specify personal preferences, such as adventure activities or historical sites, allowing the AI to tailor
recommendations accordingly. Furthermore, the planner provides

Dept. of ETE RVCE 25

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Figure 3.21 : Cost breakdown section of output page

budget estimates for each transportation option, helping travelers make cost-effective decisions
in journey. The final output is presented in a user-friendly format, either as an interactive travel
plan displayed within the React UI or as a downloadable document (PDF or HTML) for offline
access..

Dept. of ETE RVCE 26

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Chapter 4

Reflections
This chapter provides a quick overview of the work experience and assessment throughout the
internship period. It also contains information on the technical and non-technical consequences of
functioning organizations. Technical and non-technical outcomes include learning and working on
new conceptions, personal growth, time management, and resource utilization abilities

4.1 EXPERIENCE

B.E. 6th semester students are required to participate in a six-week internship program in an
organization as part of the academic curriculum to gain practical exposure to theoretical concepts.
The program provides sufficient time to thoroughly understand each concept in real-world
applications. Over six weeks, significant knowledge has been acquired, and learning new
concepts has been an enriching experience. The internship offers an opportunity to expand
expertise in the technical domain, providing deeper insights into the field that require focused
attention. This experience helps in identifying the preferred area of work upon completing the
studies. Both technical and non-technical aspects of the internship have been highly beneficial.
The opportunity to gain practical experience and acquire new skills has been invaluable,
contributing significantly to professional and personal development.

4.2 ASSESMENTS

Assessment is the process of analyzing the benefits and drawbacks of a program. The internship
experience can be evaluated based on several key criteria:

• A positive and professional working environment.

• Supportive and knowledgeable guidance from mentors.
• Practical understanding of initiating and progressing through a module.
• Application of academic knowledge in real-world scenarios.
• Development of both interpersonal and technical skills.
• Enhancement of presentation abilities.
• Strengthening of managerial competencies.
• Improvement in communication skills.

Dept. of ETE RVCE 27

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
• Valuable learning experience that helped in defining career goals and future steps.
• Acquisition of relevant experience to support career exploration.
• Access to resources beyond those available within academic institutions.

4.3 TECHNICAL AND NON-TECHNICAL OUTCOMES

The internship experience resulted in both technical and non-technical learning outcomes,
contributing to a well-rounded professional development. The technical outcomes involved
gaining in-depth knowledge of problem-solving approaches, software tools, and React.js
development. Additionally, exposure to advanced concepts such as component-based
architecture, state management, and API integration enhanced technical proficiency. On the
other hand, non-technical outcomes focused on improving interpersonal and professional skills.
Effective communication, teamwork, adaptability, and critical thinking were key areas of
development. The experience also provided valuable insights into project workflows, deadline
management, and best coding practices. These combined outcomes have significantly
contributed to practical learning and career preparedness.

4.3.1 TECHNOLOGICAL RESULTS

• A comprehensive analysis of the AI-driven trip planning problem, focusing on designing an

efficient and user-friendly solution.
• Hands-on experience with React.js for frontend development and integration of the Gemini
1.5 Flash API for intelligent trip planning.
• Implementation of real-time data fetching, API handling, and validation of AI-
generated travel plans against user preferences and existing travel
recommendations.

4.3.2 NON-TECHNICAL RESULTS

• Improved communication and collaboration within the development team to ensure seamless
project execution.
• Development of discipline and time management skills while adhering to project milestones.
• Engaging with mentors and industry professionals to gain insights into AI-powered
applications and best development practices.
Dept. of ETE RVCE 28
DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25
• Enhancement of critical thinking and problem-solving abilities in relation to optimizing AI-generated
travel recommendations.
• Strengthened adaptability to changes in project requirements, API responses, and user
feedback.

• Understanding of workflow management, meeting deadlines, and working efficiently as part

of a development team.

Dept. of ETE RVCE 29

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

REFERENCES

[1] S. K. Sinha, S. K. Sinha, and S. K. Sinha, "Embankment Protection - React Native Application
Cross-Platform Application for Protection of Embankments by Crowd Sourced Data," in Proc. 2022
IEEE 5th International Conference on Computing Communication and Automation (ICCCA), 2022,
pp. 1–5. doi: 10.1109/ICCCA55013.2022.00009.

[2] V. Komperla, P. Deenadhayalan, P. Ghuli, and R. Pattar, "React: A Detailed Survey," Indonesian
Journal of Electrical Engineering and Computer Science, vol. 26, no. 3, pp. 1710–1717, 2022. doi:
10.11591/ijeecs.v26.i3.pp1710-1717.

[3] B. V. S. Indla and Y. Puranik, "Review on React JS," International Journal of Trend in Scientific
Research and Development (IJTSRD), vol. 5, no. 4, pp. 1233–1236, 2021. doi: 10.31142/ijtsrd42490.

[4] S. K. Sinha, S. K. Sinha, and S. K. Sinha, "Design and Development of Car Rental Website Using
MERN Stack," in Proc. 2022 IEEE 5th International Conference on Computing Communication
and Automation (ICCCA), 2022, pp. 1–5. doi: 10.1109/ICCCA55013.2022.00010.

[5] M. Javeed, "Performance Optimization Techniques for ReactJS," International Journal of

Advanced Computer Science and Applications (IJACSA), vol. 10, no. 10, pp. 1–7, 2019. doi:
10.14569/IJACSA.2019.0101001.

[6] M. F. S. Lazuardy and D. Anggraini, "Modern Front-End Web Architectures with React.Js and
Next.Js," International Research Journal of Advanced Engineering and Science (IRJAES), vol. 7,
no. 1, pp. 162–166, 2022. doi: 10.5281/zenodo.6573900.

[7] S. Chavan, S. Chavan, and S. Chavan, "AppleGo: React Js (Web Application)," International
Journal for Research in Applied Science & Engineering Technology (IJRASET), vol. 10, no. 5, pp.
123–127, 2022. doi: 10.22214/ijraset.2022.41011.

Dept. of ETE RVCE 30

 DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Annexure A1
CO – PO Mapping
Course: Summer Internship-II, 21ETI57
Course Outcomes: After completing the course, the students will be able to: -
CO1 Develop interpersonal, critical skills, work habits and attitudes necessary for
employment.
CO2 Assess interests, abilities in their field of study, integrate theory and practice and
explore career opportunities prior to graduation.
CO3 Explore and use state of art modern engineering tools to solve societal problems
with affinity towards the environment and involve in ethical professional practice.
CO4 Compile, document and communicate effectively on the internship activities with
the engineering community.

Program Outcomes:

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization for the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems
and design system components or processes that meet t h e specified needs with appropriate
consideration for public health and safety, and cultural, societal, and environmental
considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and
research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools, including prediction and modelling to complex
engineering activities, with an understanding of the limitations.

Dept. of ETE RVCE 31

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal, and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional
engineering solutions in societal and environmental contexts, and demonstrate the
knowledge of, and need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities
and norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with t h e society at large, such as, being able to comprehend
and write effective reports and design documentation, make effective presentations, and
give and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to
engage in independent and life-long learning in the broadest context of technological
change.

Mapping of “DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH &

REACT JS” to Course Outcomes:

Title of internship CO1 CO2 CO3 CO4

DEVELOPMENT OF AI TRIP PLANNER

USING GEMINI-1.5 FLASH & REACT JS H M H M

Dept. of ETE RVCE 32

DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH & REACT JS 2024-25

Mapping of “DEVELOPMENT OF AI TRIP PLANNER USING GEMINI-1.5 FLASH &

REACT JS” to Program Outcomes:

Title of internship PO1 PO2 PO3 PO4 PO5 PO6

H M M M H M
DEVELOPMENT OF AI
PO7 PO8 PO9 PO10 PO11 PO12
TRIP PLANNER USING M M H H L M
GEMINI-1.5 FLASH &
REACT JS

H: High, M: Medium, L: Low

Student Name:

Harish Ishwar Naik Signature

Guide Signature

Dept. of ETE RVCE 33