0% found this document useful (0 votes)
27 views91 pages

CPE Final Report

The document is a project report for an AI Travel Planner developed by students of the Diploma in Computer Technology at Bharati Vidyapeeth Institute of Technology. It outlines the project's objectives, methodology, and features, including AI-driven itinerary management, real-time updates, and collaborative planning capabilities. The report emphasizes the need for intelligent travel solutions and presents a systematic approach to creating a user-friendly application that enhances the travel planning experience.

Uploaded by

arpit.monga1402
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
27 views91 pages

CPE Final Report

The document is a project report for an AI Travel Planner developed by students of the Diploma in Computer Technology at Bharati Vidyapeeth Institute of Technology. It outlines the project's objectives, methodology, and features, including AI-driven itinerary management, real-time updates, and collaborative planning capabilities. The report emphasizes the need for intelligent travel solutions and presents a systematic approach to creating a user-friendly application that enhances the travel planning experience.

Uploaded by

arpit.monga1402
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 91

A Project report On

“AI Travel Planner”

Submitted in fulfillment of the requirements for the award of a Degree of

Diploma in
(Computer Technology)

By
Mr. Aditya Nigde Deshmukh
Mr. Arpit Monga
Ms. Krinjal Gawade

Under the guidance of


Mrs. Sujata Gawade

DEPARTMENT OF COMPUTER TECHNOLOGY


BHARATI VIDYAPEETH INSTITUTE OF TECHNOLOGY
Sector-7,
C.B.D. Belpada,
Navi Mumbai-400614
Academic Year 2024 – 2025
DEPARTMENT OF COMPUTER TECHNOLOGY
BHARATI VIDYAPEETH INSTITUTE OF TECHNOLOGY, NAVI MUMBAI- 400614
(2024-2025)
CERTIFICATE

This is to certify that the following students of third year diploma in computer technology
have satisfactorily completed the project work
On
“AI Travel Planner”
As prescribed by the “MSBTE”

Ms. Krinjal Gawade Enrollment No: 2200270213

Mr. Aditya Nigde Deshmukh Enrollment No: 2200270249

Mr. Arpit Monga Enrollment No: 2200270268

(Head of Department) (Internal Examiner) (Project Guide)

(External Examiner)
Acknowledgement
We sincerely express our deep sense of gratitude to our guide Mrs. Sujata Gawade,
for her valuable guidance, continuous encouragement, and support whenever required
and Head of the Department of Computer Technology Mr. Mithun Mhatre, for his
valuable guidance, encouragement, and timely help given to me throughout this work.
We would like to thank our Project Coordinator Mrs. Shobhana Gaikwad who had shown
us the way toward the destination.
We would also like to take this opportunity to thank our whole-heartedly Honorable
Principal Mr. P.N. Tandon and our Faculties of the Computer Technology department
who have imparted valuable teaching and guidance that has inspired us to attain new
goals.

Mr. Aditya Nigde Deshmukh


Mr. Arpit Monga
Ms. Krinjal Gawade
TYCM (Computer Technology) - III Year
Abstract
In the era of rapid technological advancements, there is a growing need for intelligent
travel solutions that enhance convenience, efficiency, and personalization. Our project, an AI-
Powered Travel Planner, introduces an innovative approach to trip planning by leveraging
artificial intelligence, real-time data, and user preferences.
This application, developed using Android Studio, React Native, Gemini AI, Firebase,
Expo, and JavaScript, provides users with a seamless travel experience. It offers personalized trip
recommendations, real-time itinerary updates, budget optimization, and smart booking
suggestions. The platform includes features such as AI-powered chat assistance, location-based
recommendations, itinerary management, expense tracking, and real-time navigation.
Additionally, it integrates user profiles, cloud-based storage for trip data, and collaborative
planning features to enhance the overall experience.
By incorporating AI-driven insights, our travel planner helps users make informed
decisions, optimize their schedules, and discover new destinations effortlessly. This project aims
to redefine travel planning by providing a smart, user-friendly, and adaptive platform that caters
to individual preferences and real-time constraints.
Table of Content
Chapter No. Title Page No.

1 Introduction 1

2 Literature Survey 2

3 Problem Definition 4

4 Methodology 6

5 Results 20

6 Future Scope 71

7 Conclusion 74
List of Tables
Table No. Name of Table Page No.

1 Test case of Welcome Page 61

2 Test case of User Authentication Page 62

3 Test case of Homepage 63

4 Test case of Search Location Page 64

5 Test case of Travel Group Selection Page 65

6 Test case of Date Selection Page 66

7 Test case of Budget Page 67

8 Test case of Review Your Trip Page 68

9 Test case of My Trips Page 69

10 Test case of Itinerary Page 70


List of Figures
Figure No. Name of Figure Page No.

1 AI Travel Planner Flowchart 6

2 API Homescreen 10

3 Firebase Project Overview 12

4 Firebase Authentication Module 14

5 Firebase Cloud Firestore Database 17

6 Welcome Page 20

7 User Authentication Interface 23

8 Homepage 29

9 Search Location Page 33

10 Travel Group Selection Page 35

11 Date Selection Page 38

12 Budget Selection Screen 44

13 Trip Review Page 47

14 Trip Generation Screen 50

15 My Trips Page (Homescreen) 52

16 Itinerary Display Page 55

17 Know More Feature 59


CHAPTER 01
INTRODUCTION
INTRODUCTION
In today’s fast-paced world, planning travel efficiently has become more crucial than ever. With
the increasing demand for personalized, real-time, and AI-driven travel solutions, traditional
methods of trip planning often fall short in providing the flexibility and intelligence needed by
modern travellers. Our AI Travel Planner project addresses this gap by leveraging cutting-edge
artificial intelligence, real-time data processing, and cloud technologies to create a seamless and
intelligent travel experience.

The core functionality of our application revolves around AI-driven itinerary management, smart
recommendations, and real-time navigation assistance. Users can plan their trips effortlessly,
receive optimized suggestions based on their preferences, and get real-time updates on travel
conditions. The platform is designed to provide personalized experiences, ensuring that users
receive tailor-made recommendations for destinations, accommodations, activities, and
transportation options.

To enhance user engagement, the application integrates features such as secure user
authentication, AI chatbot assistance, interactive trip planning, budget optimization, and cloud-
based trip storage. The system ensures that users can collaborate with friends, manage expenses,
and modify plans dynamically. Additionally, real-time AI-driven insights allow travellers to
make informed decisions, reducing uncertainties and improving overall travel efficiency.

By combining AI, Firebase, React Native, and cloud-based technologies, this project redefines
travel planning, making it smarter, more intuitive, and highly adaptable to individual user needs.
CHAPTER 02
LITERATURE SURVEY
LITERATURE SURVEY
With the growing complexity of modern travel and the increasing reliance on digital solutions,
the need for an intelligent, AI-powered travel planner has never been more apparent. Traditional
trip planning methods require extensive manual research, comparison across multiple platforms,
and constant updates based on real-time conditions, making them inefficient and cumbersome.
Artificial Intelligence (AI), real-time data processing, and cloud computing offer a
transformative approach to travel planning by automating itinerary creation, optimizing routes,
and providing personalized recommendations based on user preferences.

This literature survey explores existing research and technologies that form the foundation of our
AI Travel Planner, covering areas such as AI-driven travel recommendations, real-time data
synchronization, chatbot assistance, location-based services, and collaborative trip planning.

Artificial Intelligence is revolutionizing the travel industry by making trip planning more
personalized, efficient, and data-driven. Li, Hu, and Xu (2020) discuss how machine learning
algorithms are used to analyse historical travel patterns, user preferences, budget constraints, and
real-time conditions to generate customized itineraries. AI can dynamically adjust travel plans
based on weather updates, flight delays, or last-minute changes, ensuring that users receive up-
to-date recommendations.

Moreover, AI models like collaborative filtering and content-based recommendation systems


have significantly improved travel suggestion mechanisms. These models learn from user
behaviour, search history, and traveller demographics to suggest destinations, accommodations,
and experiences that align with individual interests.

Wang et al. (2021) highlight how Location-Based Services (LBS) are integral to modern travel
applications, offering real-time information on nearby attractions, restaurants, and transportation
options. By integrating GPS and AI-powered mapping technologies, our AI Travel Planner
ensures accurate and context-aware travel guidance. Smart navigation features optimize travel
routes based on traffic data, public transport schedules, and user preferences, significantly
improving travel efficiency.
Modern travel planning involves coordination among multiple travellers, requiring real-time
itinerary sharing, budgeting, and expense tracking. By integrating Firebase and AI, our platform
allows multiple users to edit and update shared itineraries effortlessly. A built-in expense
management system further enhances the experience by providing automated cost-splitting
features, helping travellers manage budgets efficiently. Additionally, AI-driven predictive
analysis enables users to estimate travel costs in advance based on past spending patterns and
location-based pricing trends, ensuring better financial planning for trips.

Advancements in AI-driven analytics enable travel applications to provide insightful


recommendations based on data trends, weather conditions, and user reviews. Studies by Chen et
al. (2022) suggest that AI can predict the best times to visit destinations, estimate travel costs,
and provide automated packing lists based on the location’s climate. These predictive analytics
significantly improve trip planning efficiency and ensure a personalized user experience by
adapting recommendations according to individual preferences.

As AI-powered travel applications handle sensitive user information, security and privacy
become critical concerns. Research by Sharma and Patel (2021) highlights the importance of
implementing robust encryption methods, secure authentication protocols, and compliance with
data protection regulations to safeguard user data. In our AI Travel Planner, Firebase
Authentication ensures secure user logins, while AI-driven fraud detection mechanisms prevent
unauthorized access and suspicious activities. Privacy-focused features such as local device data
processing and limited third-party access help build user trust and maintain compliance with
global data security standards.
CHAPTER 03
PROBLEM DEFINITION
PROBLEM DEFINITION
The modern world faces an urgent challenge: the increasing complexity of travel planning due to
fragmented information sources, fluctuating real-time conditions, and inefficient itinerary
management. Despite the availability of numerous travel applications, individuals often struggle
with overwhelming choices, lack of personalized recommendations, and the absence of seamless
integration across different aspects of trip planning. Consequently, there is a pressing need for an
innovative solution that not only simplifies the travel planning process but also enhances user
experience through automation, AI-driven recommendations, and real-time updates.

One specific area of concern lies in travel itinerary management, where traditional methods
require manual research, comparison across multiple platforms, and constant adjustments to
accommodate last-minute changes. Additionally, the challenge of real-time coordination among
group travellers often leads to inefficiencies, miscommunication, and scheduling conflicts.
Ensuring a smooth and hassle-free travel experience requires a system that can dynamically
adapt to real-time changes and provide users with optimized travel plans.

Existing travel applications often lack AI-powered decision-making capabilities, relying on static
data that fails to personalize recommendations based on user preferences, budget constraints, and
situational factors such as weather conditions, flight delays, or local events. While various
platforms offer individual services like hotel bookings, flight reservations, and navigation, the
absence of a unified system results in fragmented and inefficient planning.

Furthermore, real-time data synchronization and itinerary sharing remain significant challenges
for travellers. Without a centralized system that integrates live updates, users may struggle to
stay informed about flight reschedules, hotel check-ins, or last-minute changes in transportation.
This issue is particularly pronounced for group travel, where coordinating plans among multiple
users becomes cumbersome without a collaborative itinerary management system.

Moreover, AI-driven assistance and chatbot integration are crucial for enhancing user
engagement. Traditional travel planning tools often require users to manually input their
preferences and navigate through various interfaces to obtain relevant information. Without an
intelligent assistant capable of understanding user queries, offering instant responses, and
providing contextual recommendations, the process remains inefficient and time-consuming.
In light of these challenges, there is a clear need for an integrated AI-powered solution that
addresses the following key objectives:

3.1 Personalized AI-Driven Travel Planning

Developing an AI-based system that analyses user preferences, budget constraints, and real-time
conditions to generate optimized travel itineraries, ensuring a seamless and efficient planning
experience.

3.2 Real-Time Itinerary Synchronization

Implementing cloud-based real-time data synchronization that allows users to receive instant
updates on travel changes, enabling better coordination among solo and group travellers.

3.3 Smart Navigation and Location-Based Services

Integrating GPS-based location tracking and smart navigation features that provide real-time
suggestions for routes, local attractions, and transportation options, enhancing the overall travel
experience.

3.4 Collaborative Trip Management

Facilitating multi-user itinerary access and editing, ensuring seamless coordination among group
travellers, expense tracking, and shared travel updates.

By addressing these objectives, the proposed solution aims to revolutionize travel planning by
leveraging AI, real-time data processing, and smart automation. Through personalized
recommendations, efficient itinerary management, and real-time synchronization, this platform
will empower travellers to make informed decisions and enjoy a seamless, stress-free journey.
The integration of AI-driven insights, live updates, and collaborative features will not only
simplify travel planning but also ensure a smarter, more connected, and highly efficient travel
experience for all users.
CHAPTER 04
METHODOLOGY
AI Travel Planner

METHODOLOGY
This chapter describes the step-by-step development process and technologies involved in
building the AI Travel Planner mobile application. The methodology focuses on the systematic
approach adopted to ensure a user-friendly, intelligent, and functional application that helps users
plan and manage their travel experiences efficiently. The application integrates AI-based
recommendations, Firebase for backend infrastructure, and Expo for deployment.

4.1 System Architecture and Workflow


The system architecture of the AI Travel Planner app is designed to ensure a smooth and
interactive user experience while managing user data, trip planning features, and AI-based
suggestions effectively.

Department of Computer Technology, Navi Mumbai 6


AI Travel Planner

The architecture comprises three primary layers:


4.1.1 Frontend Layer
The frontend of the application is developed using React Native and launched via Expo to ensure
cross-platform compatibility. It includes all the user interfaces through which users interact with
the app. Key screens in the frontend include:
 Welcome Page: The initial landing screen that introduces users to the app and provides a
"Get Started" button.
 Login/Sign Up Page: Allows new users to register and existing users to securely log in.
 Home Screen (My Trips): Displays planned trips and provides an option to start a new
trip.
 Trip Planning Pages: Includes travel date selection, budget category selection, location
search using Gemini AI, group type selection (solo, couple, family, friends), and trip
review.
 Itinerary Page: Displays the final itinerary generated based on user preferences and AI
recommendations.
4.1.2 Backend Layer
The backend infrastructure is managed using Firebase, which offers the following services:
 Authentication: Secure login/signup with email-password authentication.
 Cloud Firestore: Manages user data such as profiles, trips, and itineraries in a real-time,
scalable database.
 Storage: Stores any media or images associated with the user's trips (if applicable).
 Hosting (optional): Supports backend deployment for web-based features if required.
4.1.3 AI Integration Layer
AI functionality is integrated through Gemini AI (Google's AI model) which powers the smart
location search functionality:
 Users can type in queries like "beaches in India for a 5-day trip" or "budget-friendly hill
stations in July," and Gemini AI returns optimized travel suggestions.
 AI also helps in filtering destinations based on user preferences like budget, group type,
season, etc.

Department of Computer Technology, Navi Mumbai 7


AI Travel Planner

4.1.4 System Workflow


The workflow of the application proceeds as follows:
1. User Accesses App: User opens the application and lands on the Welcome Page.
2. Authentication: User either logs in or signs up via the authentication module powered by
Firebase.
3. Trip Initialization: The user is taken to the Home Screen (My Trips) where they can start
a new trip.
4. Travel Planning Sequence:
o Select travel dates.
o Choose budget preference (Cheap, Moderate, Luxury).
o Search locations using AI-powered search bar.
o Select who’s traveling (Solo, Couple, Family, Friends).
o Review trip summary.
5. Itinerary Generation: AI analyzes all selected inputs and displays a custom itinerary.
6. Data Storage: The trip data is stored in Firestore for future reference or editing.
This architecture ensures modularity, ease of maintenance, and scalability for further
enhancements.

4.2 Technology Stack Used


The success of the AI Travel Planner application is significantly influenced by the carefully
chosen technology stack. Each component of the stack serves a specific purpose to ensure high
performance, scalability, and a seamless user experience.
4.2.1 Frontend Technologies
 React Native: A powerful JavaScript framework used to build cross-platform mobile
applications with a single codebase. It offers fast development, hot reloading, and rich UI
components.
 Expo: A development toolchain that simplifies the process of building and deploying
React Native apps. It helps developers preview, test, and publish applications effortlessly.
4.2.2 Backend Technologies
 Firebase Authentication: Enables secure user authentication using email and password
credentials.

Department of Computer Technology, Navi Mumbai 8


AI Travel Planner

 Firebase Firestore: A NoSQL real-time cloud database that stores structured data such as
user profiles, travel plans, and itineraries.
 Firebase Storage: Used to manage and store any media or image files uploaded by users.
 Firebase Hosting (Optional): For hosting backend services or integrating web versions of
the application.
4.2.3 AI Integration Tools
 Gemini AI (Google AI): A generative and conversational AI model that provides travel
recommendations, search suggestions, and natural language query handling to enhance
user experience.
4.2.4 Development Tools
 VS Code: A code editor that supports JavaScript, React Native, and Firebase
configurations.
 GitHub: Version control system for managing source code and collaboration.
 Android Emulator/Physical Devices: For testing and debugging the application.
4.2.5 Deployment Tools
 Expo CLI and Expo Go: Tools used for local preview, testing, and final deployment of
the application.

4.3 User Interface Design


The UI design plays a critical role in ensuring the app's usability and appeal. The design follows
a minimalistic and intuitive approach to cater to users of all demographics.
4.3.1 Design Philosophy
 Simple navigation
 Clear layout
 High readability fonts
 Soft color palettes
 Accessible design for better usability
4.3.2 Key UI Components
 Welcome Page: Displays app name, a brief description, and a "Get Started" button.
 Login/Sign Up Screen: Allows easy registration and secure login.
 My Trips Screen: Displays a list of planned trips and prompts users to start a new one.

Department of Computer Technology, Navi Mumbai 9


AI Travel Planner

 Trip Planning Forms: Include dropdowns, date selectors, radio buttons, and search bar
 Itinerary Display Page: Neatly presents the AI-generated travel plan.

4.4 Functional Modules


The application consists of distinct modules, each handling a core functionality:
 Authentication Module: Handles user login/signup securely.
 Trip Planning Module: Manages step-by-step travel planning.
 AI Recommendation Module: Uses user inputs to generate tailored travel suggestions.
 Database Module: Stores, retrieves, and updates user and trip data.
 Itinerary Display Module: Visualizes the final travel plan for the user.

4.5 Google AI Studio API Home Screen

As a core component of the development methodology adopted for the AI-based Travel Planner
application, the Google AI Studio platform played a pivotal role in designing, testing, and
refining the natural language processing logic that powers the intelligence layer of the system.
The image below captures the interface of Google AI Studio, which served as the primary
environment for prompt engineering and AI model behavior simulation using Gemini API.
This tool was not merely a testing utility but a fundamental part of the overall development
pipeline. It provided a dedicated environment where prompt structures were conceptualized and
iteratively improved to ensure optimal output quality, contextual relevance, and real-time

Department of Computer Technology, Navi Mumbai 10


AI Travel Planner

applicability in the mobile application. Before integrating Gemini AI into the backend, every AI
functionality—ranging from travel suggestions and itinerary creation to user-specific destination
filters—was first modeled and evaluated in this studio environment.
At the center of the interface lies the main prompt workspace. This area allowed developers to
define, test, and modify system instructions and prompts. Various iterations were conducted here
to determine how Gemini AI responds to dynamic user queries such as “Plan a solo travel trip to
Australia within ₹30,000” or “List top beach destinations for nature lovers under a specific
budget.” The AI responses generated here were instrumental in shaping the user experience
within the application.
The left-side navigation panel includes multiple options such as Create Prompt, Stream Realtime,
Starter Apps, Library, and access to API Documentation. These elements collectively
streamlined the prompt development cycle. The Library module was especially critical,
functioning as a repository for reusable prompt formats and system instruction templates, thereby
supporting version control and consistency across modules.
The right panel of the interface displays the execution configuration, where developers could
select the preferred model, adjust temperature settings, monitor token counts, and control the
format of AI output. For this project, Gemini 1.5 Flash was selected due to its faster response
generation capability, which aligned well with the mobile app’s requirement for lightweight and
latency-optimized interactions. Additionally, output temperature was maintained at a balanced
level to ensure informative yet creatively diverse results.
Another critical feature included in the configuration panel was the structured output toggle,
which allowed AI responses to be returned in a JSON-friendly format. This was particularly
useful for backend integration, where outputs from Gemini AI were mapped to fields in Firebase
Firestore and then rendered through React Native components on the frontend. Although features
like function calling and code execution remained disabled for this application version, they
reflect the platform’s extensibility for future iterations involving more complex AI logic or real-
time automation workflows.
This stage of the methodology enabled a distinct decoupling between AI logic testing and
application coding. It allowed the prompt design team to validate the logical correctness and
contextual fit of AI outputs independently, prior to embedding them into Firebase Functions and
linking them with the user interface. This decoupled approach accelerated development speed

Department of Computer Technology, Navi Mumbai 11


AI Travel Planner

and also improved testing accuracy, as AI behavior could be examined in isolation before
integration.
Furthermore, the studio’s interface supported quick adjustments in prompt syntax and logic
without having to redeploy the backend, which significantly reduced development time and
enabled real-time refinements. The iterative methodology adopted through this interface ensured
that every AI interaction within the app was first meticulously tested for relevance, structure, and
consistency, making the overall application more robust and user-friendly.
In conclusion, the use of Google AI Studio was deeply embedded in the methodological
framework of the project. It not only provided the infrastructure for AI prompt testing but also
became a critical enabler for maintaining modularity, reducing integration errors, and delivering
a more polished end-user experience. Its integration into the workflow exemplifies a modern
development approach where AI modeling and software engineering coexist as parallel streams,
converging only after each component has matured independently.

4.6 Firebase Project Overview

The Project Overview screen in Firebase acts as the central hub for managing and monitoring the
overall performance and integration status of an application. This screen provides a high-level
summary of the project and displays key usage analytics for core Firebase services such as
Firestore, Authentication, and Realtime Database. In the context of the Travel-Planner app, this
interface plays a critical role in evaluating backend functionality and verifying service
engagement over time.
The Project Overview interface seen in the image represents the backend administration panel of

Department of Computer Technology, Navi Mumbai 12


AI Travel Planner

the Travel-Planner project. It gives the developer immediate visibility into the real-time usage
statistics and the structure of the integrated Firebase services. The various components of this
screen are elaborated as follows:
At the top, the project name “Travel-Planner” is displayed, indicating the active Firebase project
being worked on. Adjacent to it, Firebase offers navigation options like linking to Google
Developer Programs and additional documentation. The “Spark Plan” label suggests the project
is currently using the free-tier Firebase pricing model.
On the left-side vertical navigation panel, quick access to several Firebase tools and services is
available. These include:
 Authentication: For managing user sign-ins.
 Firestore Database: For storing and retrieving data.
 Realtime Database: For real-time syncing of application data.
 Data Connect, App Check, Genkit AI, Vertex AI: For extended services like securing
data access, AI integration, and more. This sidebar enables developers to move swiftly
across services without navigating away from the project environment.
If needed, developers can add more apps (web, Android, iOS) using the “+ Add App” button.
This integration visibility is crucial, especially in multiproduct ecosystems or multi-platform
applications.
Firestore Build Analytics – Read and Write Operations
The most prominent element on the page is the analytics panel titled "Build", which visualizes
the Firestore database usage statistics over time. The statistics shown are extremely valuable in
understanding how much the app is interacting with the database in terms of read and write
operations.
 Reads (Current): 151
This value indicates the total number of read requests made to Firestore for retrieving
data, which includes operations like loading saved trips, fetching itineraries, budget
information, and other dynamic data visible to the user.
 Writes (Current): 17
This reflects the total write operations, which typically happen when a user creates a new
trip, modifies an itinerary, or saves planning data.
The graph beneath these values shows the trends of usage across specific dates. It demonstrates

Department of Computer Technology, Navi Mumbai 13


AI Travel Planner

an observable spike in activity around March 11 and March 12, likely indicating user testing or
app usage intensification during those dates. It also helps identify peak activity periods and app
engagement intensity.
Importance in Project Methodology
In the context of the methodology section, this Firebase Project Overview serves as a real-time
project health dashboard. It offers quantitative backing to validate the success of backend
integration and user engagement. It acts as a performance audit trail where database interaction is
quantified, thus complementing qualitative development workflows.
Additionally, this screen helps in:
 Assessing Firestore efficiency and data usage behavior.
 Identifying backend load management needs based on read/write volume.
 Monitoring for abnormal spikes or under-utilization.
This dashboard is continuously used during development and testing phases to make decisions
around database structure optimizations, security rule implementations, and performance tuning.

4.7 Firebase Authentication Module

Firebase Authentication serves as the foundational access control system in the AI Travel
Planner application. It facilitates secure user onboarding through sign-up and login
functionalities, ensuring each user’s data and personalized experience are properly
compartmentalized and protected. The authentication module is integrated at the core level of the
application flow, making it the very first step that governs user access to features such as trip
creation, itinerary planning, and personalized dashboard elements.

Department of Computer Technology, Navi Mumbai 14


AI Travel Planner

The screenshot represents the Firebase Authentication dashboard as configured for the project
titled Travel-Planner. This interface is an administrative backend that allows developers to view
and manage authenticated users, along with their associated metadata.
The left sidebar contains various Firebase project shortcuts such as Authentication, Firestore
Database, App Check, and Realtime Database, but the currently highlighted section is
Authentication, which is the primary focus here.
At the center of the screen, the main interface is divided into tabs such as:
 Users
 Sign-in Method
 Templates
 Usage
 Settings
 Extensions
In this particular view, the Users tab is active, showcasing the list of users who have successfully
signed up or logged in through the application. This interface provides all essential information
about each user registered through Firebase.

Key Components and Their Functional Roles


 Identifier: This refers to the email address or unique login ID provided by the user at the
time of account creation. In this instance, two users are shown: [email protected] and
[email protected].
 Providers: This column shows the authentication method used by the user. In this
application, the method used is the Email/Password combination, which is clearly
indicated by the mail icon. It confirms that the application has integrated Firebase's
email-based authentication system.
 Created: This field displays the date on which the account was initially created. It is
automatically timestamped by Firebase and stored as metadata when the sign-up process
is completed successfully.
 Signed In: This column records the most recent successful login date. It helps developers
monitor active user engagement and ensures the system is working correctly.
 User UID: This is a Unique Identifier automatically generated by Firebase for each user.

Department of Computer Technology, Navi Mumbai 15


AI Travel Planner

It plays a critical role behind the scenes, as this UID becomes the key reference ID used
throughout Firestore Database for storing and fetching user-specific data (like trips,
itineraries, and preferences). All personalized collections in Firestore are mapped to these
UIDs to maintain data integrity and access control.
 Search and Add User Options: The search bar at the top of the user list allows developers
to query users by email, phone, or UID. The Add User button enables manual addition of
users for testing or administrative control, though in actual production flow, users are
expected to sign up directly through the app interface.
 Warning Notification Panel: A contextual warning box is visible, indicating Firebase’s
future policy changes regarding Dynamic Links and OAuth support. While not a core part
of this project’s architecture, such notifications serve as proactive alerts for developers
about upcoming deprecations or required adjustments.
 Pagination Controls: The bottom section shows pagination for user entries, helpful in
larger-scale applications where user numbers may run into hundreds or thousands.

When a user launches the application and proceeds to sign up via the Create Account screen,
Firebase Authentication handles the registration by capturing the credentials and storing them
securely on the backend. Once authenticated, a UID is generated, which then acts as a key
anchor to that user’s identity throughout the app.
During subsequent logins, the Sign In page validates credentials and checks them against
Firebase’s secure authentication system. Upon successful validation, the app interface transitions
into the My Trips Dashboard, pulling in user-specific data using the UID as a reference key.
Firebase Authentication ensures:
 Seamless and secure access management
 Isolation of user-specific trip data
 Smooth integration with Firestore Database using UIDs
 Scalability for onboarding more users without needing complex server-side credential
handling
 Enhanced user experience by enabling personalized journeys
`

Department of Computer Technology, Navi Mumbai 16


AI Travel Planner

4.8 Firebase Cloud Firestore Database

The Cloud Firestore Database page serves as the heart of real-time structured data management
in the Travel-Planner app. It provides a scalable, flexible NoSQL database where app data is
stored in a document-oriented format. This page allows developers to create, view, and manage
user data collections, documents, fields, and sub-collections, making it a critical part of the
backend infrastructure of the application.
Interface Overview and Purpose
The displayed interface in the image shows the Firestore Database console view for the Travel-
Planner project. It offers a visual, hierarchical representation of the data stored in the app,
allowing developers to navigate, inspect, and debug collections and documents with ease.
Breakdown of Components and Functional Flow
1. Collection Layer (Left Column)
 UserTrips Collection:
The left-most panel shows that a collection named UserTrips has been created. This
collection is used to store trip-related data of users. Each entry within this collection is
treated as a document representing an individual user's travel plan submission.
Collections in Firestore act as containers for documents. Unlike traditional relational databases,
collections do not contain sub-collections or fields directly but act as hierarchical levels to
organize document-based data.
2. Document Layer (Middle Column)

Department of Computer Technology, Navi Mumbai 17


AI Travel Planner

 Each user’s trip entry is represented by a uniquely generated document ID.


Example IDs:
o 1741908180014
o 1741908122043
These document IDs can be auto-generated by Firebase or custom-generated by the app logic
depending on the need. Each document is structured to hold complex nested data (JSON-like
objects) related to a specific user’s travel itinerary.
3. Field-Level Data (Right Column)
This column showcases the actual data fields and content stored within a selected document
(e.g., 1741908180014). It represents the core of trip information stored in the app’s database.
Detailed Explanation of Fields:
 docId:
A field storing the document's own ID explicitly. Although Firestore inherently identifies
documents by their ID, this can be useful for retrieval operations in queries or display
purposes in the app frontend.
 tripData:
This field contains a serialized object or JSON string storing various metadata about the
trip, such as:
o locationInfo: Includes the country name, map coordinates (latitude and longitude),
and a photo reference used by the Gemini AI or Google Places API.
o title: Title of the trip (e.g., “Family Trip”).
o desc: A short description about the trip purpose.
o startDate and endDate: Dates in ISO timestamp format indicating the duration of
the trip.
o people: Describes group size or number of people traveling.
o totalNoOfDays: Derived duration for calculation and display.
o budget: The selected budget category (e.g., Luxury, Economy).
 tripPlan Object:
This is a nested structured object containing:
o travelPlan:
 budget: Category like “Luxury”.

Department of Computer Technology, Navi Mumbai 18


AI Travel Planner

 duration: A derived, human-readable string (e.g., "4 Days & 3 Nights").


o flight:
 bookingUrl: Stores a flight booking link (e.g., Qatar Airways), which may
be generated by Gemini AI or selected by the user.
4. Action Buttons and Tools
 + Add Document / + Add Field / + Start Collection:
These allow the developer to manually add new documents, fields, or even nested
collections directly from the console for testing or debugging purposes.
 Panel View / Query Builder:
Provides a toggle between default panel and query-based views, allowing filtered
searches and complex document retrieval through Firestore query language.
 More in Google Cloud:
A redirect for advanced data analytics or backup/export options using Google Cloud
Platform tools.
Practical Use in Project Methodology
This database screen forms the foundation for user-generated content storage in the Travel-
Planner app. Each interaction from the front-end UI—such as selecting a destination, setting a
budget, or saving a trip—is mapped into this structured Firestore schema. The application reads
from this database to display itinerary details and stores every new trip planned by users securely
and efficiently.
Benefits and Role:
 Real-time sync between frontend and backend.
 NoSQL flexibility allows nested data, perfect for complex trip plans.
 High scalability, suitable for growing user base.

Department of Computer Technology, Navi Mumbai 19


CHAPTER 04

RESULTS
AI Travel Planner

RESULTS
5.1. Welcome Page

The Welcome Screen is the very first user interface that appears when the AI Travel Planner
application is launched. As the primary entry point to the app, this screen is designed to create an
immediate impression and establish a connection with the user. Its core objective is to introduce
the application’s theme, create a sense of curiosity, and prompt the user to proceed to the next
step—signing in or registering.
The screen is not only aesthetically pleasing but also strategically designed with user experience
principles to offer a clean, modern, and welcoming appearance. It sets the tone for what the
application promises: personalized, AI-powered travel planning with ease and efficiency.

The Welcome Screen features a minimalistic and elegant design that captures attention without
overwhelming the user. The layout elements are placed thoughtfully to provide a clear visual
hierarchy, ensuring a smooth visual flow from top to bottom. Each element has a defined
purpose and contributes to the overall functionality of the screen.
 App Name:
o Displayed prominently at the top of the screen, the application name “AI Travel
Planner” immediately introduces the identity of the app.

Department of Computer Technology, Navi Mumbai 20


AI Travel Planner

 Introductory Message:
o Just beneath the app name, a short, catchy tagline appears:
 “Embark on your next adventure with ease!”
 “Unlock personalized itineraries at your fingertips and explore the world
smarter with AI-powered travel insights.”
o These lines are carefully chosen to convey the core value proposition of the
application—ease of use, personalization, and intelligent travel planning.
 Call-to-Action Button (CTA):
o At the bottom of the screen lies a visually striking “Get Started” button.
o The button is designed in a contrasting color with soft rounded corners to draw
attention and encourage interaction.
o Upon clicking the button, the user is seamlessly redirected to the Login/Signup
Screen, initiating the journey into the application’s core functionalities.

The primary goal of the Welcome Screen is to:


 Create a first impression that reflects the modern, AI-driven nature of the application.
 Guide the user intuitively toward the next step (sign-in or registration).
 Reinforce the app’s value proposition, i.e., smart, seamless, and personalized travel
planning.
It acts as a launchpad for the user's interaction with the app. This is where users begin to connect
emotionally with the application, and it plays a psychological role in making the user feel that
they are about to explore something innovative, helpful, and exciting.

To ensure optimal user engagement, several UX design principles were followed during the
development of this screen:
 Simplicity and Clarity:
o Avoiding clutter and focusing only on the essential elements ensures that the user
is not confused or distracted.
 Motivational Messaging:
o The taglines are designed to motivate the user and build anticipation for what lies

Department of Computer Technology, Navi Mumbai 21


AI Travel Planner

ahead.
 Smooth Navigation:
o The Get Started button provides a single action which reduces cognitive load and
supports intuitive navigation.
 Responsiveness:
o The screen layout is responsive across various screen sizes and resolutions,
maintaining design consistency across devices.

The Welcome Screen was developed using React Native and styled using modern UI libraries
compatible with Expo. Key technical aspects include:
 React Native Functional Components:
o The screen was coded as a functional component with clean and maintainable
structure.
 Expo Framework:
o Expo was used to deploy the app, allowing for rapid prototyping, hot reloading,
and easy testing.
 Navigation Integration:
o Upon clicking the "Get Started" button, the screen uses React Navigation Stack to
route the user to the Login/Signup Screen.
 Styling:
o Tailwind-like or custom CSS-in-JS styling was used to ensure consistent padding,
font sizing, alignment, and responsive design elements.
From a functional and psychological perspective, the Welcome Screen plays a critical role in
user onboarding. While technically minimal, it is strategically significant for:
 Onboarding new users effortlessly
 Reassuring users that the app is modern and intelligent
 Setting expectations for personalized, AI-powered service
 Providing a frictionless gateway into the app’s main features
This screen is not merely a visual formality—it is a conversion element that bridges the curiosity
of a new visitor to the commitment of a new user.

Department of Computer Technology, Navi Mumbai 22


AI Travel Planner

5.2. User Authentication Interface

In any modern mobile application that requires a personalized user experience, the auth-
entication module plays a pivotal role. It is not merely a gateway to user data but forms the very
foundation of data privacy, user retention, and access control. In the AI Travel Planner app, the
user authentication module is implemented as a dual-option interface, allowing users to either
create a new account if they are accessing the app for the first time or sign in if they are already
registered. These two pathways—“Create Account” and “Sign In”—are seamlessly
interconnected to ensure a smooth, intuitive, and frictionless onboarding and login experience for
users.
The authentication flow is designed to be lightweight yet highly secure, integrating seamlessly
with Firebase Authentication as the backend system. Firebase provides a robust and scalable user
authentication service, enabling email-password-based sign-up/sign-in functionality with a
secure token-based session architecture. This ensures that even though the interface remains
minimal and user-friendly on the front end, the back-end infrastructure is thoroughly secure,
scalable, and production-ready.
On launching the app, users are either led directly to the Sign-In screen or can navigate to the
Create Account screen. The seamless navigation between these two screens ensures that users
never feel lost or stuck. Each screen is visually distinct in terms of function, yet follows the same
UI design system to maintain a cohesive visual language across the app.
5.2.1 Create Account Page:
Department of Computer Technology, Navi Mumbai 23
AI Travel Planner

The Create Account screen acts as the primary onboarding interface for all new users. As a
critical gateway into the application ecosystem, it has been designed to be minimal, friendly, and
user-centric. This screen allows users to register by providing essential details that are stored and
managed securely via Firebase Authentication.
Upon loading the screen, the user is greeted with a “Create New Account” heading, presented in
a high-weight font to reinforce visual hierarchy and provide immediate context. Just above this
heading, a back arrow icon allows users to return to the previous screen. The overall layout
respects mobile-first design principles, ensuring visual balance, adequate touch space, and easy
navigability.

The form consists of three key input fields:


The Full Name field is a simple text input box designed to accept alphabetic input from the user.
Although the name field is not functionally required by Firebase, it is useful for personalization
and future enhancements such as travel group greetings or user profile creation.
The Email Address field is essential. It accepts string input in the email format and acts as the
primary identifier for the user account. Firebase uses this email to associate a unique user ID and
manage login sessions.
The Password field is a masked input box designed for secure password entry. Input masking
ensures privacy, and the underlying logic checks for minimum password strength (typically 6
characters or more as per Firebase’s default policy).

Upon completing the form, the user can press the “Create Account” button, which triggers the
validation process. Validation is handled both on the client-side and server-side. The client-side
checks ensure that no fields are left empty and that the email format is correct. On successful
validation, the form data is sent to Firebase Authentication via a secure API call. Firebase
generates a user credential token and stores the authentication session in the cloud.
Beneath the Create Account button is a secondary text-button labeled “Sign In”, which redirects
the user to the login screen. This dual CTA approach prevents user drop-offs and ensures easy
recovery from navigational mistakes.

5.2.2 Sign-In Page:

Department of Computer Technology, Navi Mumbai 24


AI Travel Planner

The Sign-In screen is a streamlined interface tailored for returning users. Its purpose is to
authenticate and allow access to the personalized travel planning dashboard. It features a
consistent design aesthetic that mirrors the Create Account screen, providing continuity in user
experience.
At the top, a “Let’s Sign You In” title is rendered in bold typography, accompanied by a subtle
subheading— “Welcome Back! You’ve Been Missed!” This emotional touch adds warmth to the
interface, making users feel valued and engaged.

The Sign-In form comprises two main fields:


The Email field prompts the user to input their registered email. Input validation checks ensure a
valid email format is entered before form submission.
The Password field remains masked during typing and ensures that users enter their password
securely. Though visually hidden, this field connects directly to Firebase Authentication APIs for
credential verification.
After filling in the credentials, pressing the “Sign In” button initiates a call to Firebase. Firebase
cross-checks the email and password against its user database. Upon success, it initiates an
authenticated session by generating a secure token. This token is stored either in local storage or
session storage (depending on the platform and development configuration), allowing access to
subsequent protected screens.
If the credentials are incorrect, Firebase returns an error code which is mapped to a user-friendly
error message on the front end. Common error scenarios include “Invalid Email”, “User Not
Found”, or “Incorrect Password”—each of which is handled gracefully with appropriate user
prompts.
In addition to the primary CTA, a secondary “Create Account” text-button is placed below,
allowing easy redirection to the account creation screen in case the user has not registered yet.

Behind the scenes, Firebase Authentication takes care of securing user sessions, preventing
unauthorized access, and providing email verification and password recovery options if needed
(planned for future iterations).

5.2.3 Error Handling Mechanism:

Department of Computer Technology, Navi Mumbai 25


AI Travel Planner

Error handling is a crucial layer in any authentication flow. It ensures the system can gracefully
handle user errors, system failures, and connectivity issues without breaking the user experience
or compromising data integrity. In the AI Travel Planner app, error feedback is designed not only
for developers during debugging but more importantly, for user clarity and reassurance.

Types of Errors Handled:


 Empty Field Submission: If the user taps “Sign In” or “Create Account” without entering
data in one or more required fields, a prompt immediately appears indicating which field
is incomplete (e.g., “Please enter your email address.”).
 Invalid Email Format: If the user enters an incorrect email format (e.g., “user@domain”),
a toast/alert is triggered with a warning like “Enter a valid email address (e.g.,
[email protected]).”
 Password Too Short: Firebase requires passwords of at least 6 characters. If this rule is
violated, the user is alerted immediately.
 Duplicate Email (During Sign-Up): If the entered email already exists in the Firebase
database, the system returns a specific error (auth/email-already-in-use) which is parsed
into a user-friendly message like “This email is already registered. Please sign in
instead.”
 Wrong Password (During Sign-In): If the password is incorrect, the error code
auth/wrong-password is displayed as “Incorrect password. Please try again.”
 User Not Found: If no user account is associated with the entered email, the system
returns auth/user-not-found, translated to “No account found with this email. Please
create a new account.”
 Network Connectivity Issues: If the app is offline or facing API call timeouts, fallback
messages like “Please check your internet connection and try again.” are shown.

Each of these error messages is rendered using a non-intrusive but visible method (such as
modals or Snackbar/Toast alerts), designed to not interrupt the user flow.

5.2.4 Input Validation Logic:

Department of Computer Technology, Navi Mumbai 26


AI Travel Planner

The validation system in the authentication module consists of two layers:


A. Frontend Client-Side Validation
Executed immediately when the user inputs data or presses the CTA button:
 Regex-based Email Validation: A regular expression pattern like /^\S+@\S+\.\S+$/
checks email syntax.
 Password Length Check: Ensures a minimum character count.
 Empty Field Check: Ensures no field is left unfilled before submission.
B. Backend Firebase Validation
Even after client-side validation, Firebase revalidates every entry using:
 Internal schema matching.
 Duplicate entry checks.
 Account verification status.
This dual validation ensures high accuracy, preventing both malformed data entry and malicious
access attempts.

5.2.5 Firebase Authentication Integration:


Firebase Authentication serves as the central security system in the AI Travel Planner app.
Below is a breakdown of how Firebase manages each authentication task:
A. Sign-Up Flow
1. User fills Full Name, Email, and Password.
2. On pressing “Create Account”, an API request (createUserWithEmailAndPassword) is
sent to Firebase.
3. Firebase:
o Creates a new user entry in its database.
o Issues a UID (Unique Identifier).
o Links email and password securely.
o Optionally stores the user’s display name (if implemented).
4. A login token is generated and sent to the frontend.

B. Sign-In Flow

Department of Computer Technology, Navi Mumbai 27


AI Travel Planner

1. User fills Email and Password.


2. On pressing “Sign In”, an API request (signInWithEmailAndPassword) is initiated.
3. Firebase:
o Validates credentials.
o If correct, issues a session token.
o If incorrect, returns specific error codes.
4. Session token is stored locally and used for authenticated API calls.
Firebase also supports:
 Automatic session restoration (via onAuthStateChanged).
 Logout handling (signOut()).
 User deletion and password update functions (planned for future releases).

5.2.6 Navigation and Screen Linking Architecture:


In a mobile app, fluid navigation is critical. In this project, React Navigation (Stack Navigator) is
used to create a clean and stack-based flow between authentication screens and subsequent travel
planning screens.
Navigation Flow Structure:
 From Create Account → Sign In: Users can tap the “Already have an account? Sign In”
button, which triggers a navigation.navigate("SignInScreen") function.
 From Sign In → Create Account: The reverse flow is enabled via the “Don’t have an
account? Create One” link.
 Post Authentication Transition: Once authentication is successful, navigation is redirected
to the main app screen (Home/TripStart) using navigation.replace("HomeScreen"),
ensuring the user cannot return to login via the back button.

5.3. Homepage

Department of Computer Technology, Navi Mumbai 28


AI Travel Planner

Once a user successfully completes the authentication process—whether by signing in as a


returning user or creating a new account for the first time—the application seamlessly transitions
them to the core section of the app titled “My Trips.” This is not merely a landing page; it acts as
the central hub, the heart of the user’s interaction with the travel planning experience, and is
purposefully designed to be intuitive, responsive, informative, and deeply personal.
The moment the transition occurs, the screen reveals a visually clean, modern, and thoughtfully
minimal interface that balances elegance with functionality. Dominating the top portion of the
screen is the section title “My Trips”, rendered in a bold, high-weight sans-serif typeface,
offering instant clarity to the user about the current context within the app. The title placement in
the upper-left quadrant adheres to well-established user interface principles, following natural
reading flow from left to right and top to bottom, which helps in building immediate cognitive
mapping for the user. The spacing around the heading is generous, giving it breathing room and
enhancing the visual hierarchy, so that it catches attention without competing with other UI
elements.
Just adjacent to the heading on the top right side is a floating circular button with a prominent
plus (“+”) symbol at its center. The circular button adopts a clean black fill with white
iconography, contrasting sharply with the white background of the screen, ensuring maximum
visibility and instant recognizability. This button serves as a universally intuitive call-to-action
trigger for adding a new trip. It is purposefully placed on the top right side of the screen—not
only because it’s ergonomically optimal for thumb-access in most hand grips but also because
Department of Computer Technology, Navi Mumbai 29
AI Travel Planner

it's a globally accepted placement for actions like "create," "add," or "compose" in modern
mobile applications. The use of a plus icon is intentional and symbolic—it implies growth,
addition, and creativity, reinforcing the feeling of starting something new and exciting, like a
journey.
If the user is entering the application for the first time, having no travel history or trip data
associated with their account yet, the interface dynamically adapts to what is known in UI/UX
terminology as a “zero-state” or “empty state” scenario. Instead of leaving the screen blank,
which could create confusion or emotional disconnection, the design deliberately presents a
friendly and visually engaging placeholder layout. This behavior is guided by human-centered
design practices that anticipate user uncertainty and proactively provide encouragement and
guidance.
In the center of the screen, serving both as a thematic visual cue and a decorative anchor, a
location pin icon is displayed. The icon is not just a random graphic; it symbolizes destination,
discovery, and movement, which are central pillars of the travel planning experience. The
presence of this icon at the top of the visual stack in the zero-state screen makes it both symbolic
and instructive, immediately linking the concept of “My Trips” with geographical exploration.
Below the location icon is a larger, friendly, and clear textual message that reads “No Trips
Planned Yet”. The message is styled in bold but not overly aggressive typography, which ensures
it stands out while still maintaining a calm, reassuring tone. This statement serves as a clear,
straightforward status indicator, telling the user that there is currently no data available in their
trip dashboard.
Directly under this, a softly toned subtext offers additional context and motivation: “Looks like
it’s time to plan a new travel experience! Get Started below.” This line has been crafted with
intentional warmth and simplicity. It avoids technical jargon or functional language, opting
instead for an emotionally engaging, conversational tone that subtly nudges the user toward
interaction without any pressure. The choice of words like “Looks like it’s time” and “Get
Started” reflects a gentle prompt rather than a directive command, fostering a sense of personal
initiative and adventure. Just below the message lies the most significant interactive component
of the screen—an elongated, prominent “Start a New Trip” button. The button is styled with high
contrast—deep black background and white text—ensuring maximum visibility and
accessibility. The button shape is slightly pill-rounded, with large enough padding to make it

Department of Computer Technology, Navi Mumbai 30


AI Travel Planner

tappable without accidental misclicks, even for users with larger fingers. The typography inside
the button is centered, clear, and balanced, offering perfect readability. The design also subtly
invites action through visual hierarchy—the eye is naturally drawn to it after scanning the
heading and placeholder message. Upon tapping this button, users are transported to the trip
creation workflow, marking the official beginning of their travel planning journey in the app. All
aspects of the empty state experience are built not just for function but for emotional design
value. The visual calmness, intuitive layout, gentle prompts, and instantly actionable call-to-
action combine to eliminate any sense of intimidation that a new user might feel when they
arrive at a new application screen with no content yet. The goal is to inspire movement—
encouraging the user to explore rather than hesitate.
In contrast, if an existing user logs into the application—someone who has already created one or
more travel plans—the screen adjusts in real time to a data-driven personalized dashboard. The
placeholder elements disappear entirely, replaced with a dynamically generated, scrollable list of
individual trip cards. Each card represents a distinct trip and is designed to act like a miniature
travel portfolio. These cards display key information at a glance, such as the trip title (which may
be the destination or a user-defined name), travel duration (with start and end dates), and the
current status of the trip (like “Upcoming,” “Ongoing,” or “Completed”). Depending on app
enhancements, these cards may also carry visual cues like background images of the destination,
labels such as “Adventure Trip” or “Family Vacation,” or even AI-generated tags based on
itinerary contents.
Each trip card is a fully interactive component. Tapping on it leads the user to a detailed itinerary
view, which contains every aspect of the trip—from places to visit, day-wise scheduling,
bookings, budget tracking, to real-time AI suggestions and user notes. This design approach
allows users to treat “My Trips” not just as a list, but as a comprehensive gateway into their
travel life. The flow is designed to feel less like opening folders and more like stepping into a
storybook of one’s journeys.
The bottom portion of the screen houses a persistent navigation bar, ensuring seamless
movement across the core pillars of the application. The currently active tab, “My Trip,” is
visually highlighted typically via a filled location pin icon, while the inactive tabs like
“Discover” and “Profile” use a lighter fill or outline. The “Discover” section allows users to
browse new ideas, AI-curated experiences, popular destinations, or inspirational travel blogs.

Department of Computer Technology, Navi Mumbai 31


AI Travel Planner

The “Profile” section holds account-related options, where users can manage their personal data,
view preferences, modify saved details, and even log out. This navigation bar is purposefully
designed to be present at all times throughout the app, eliminating the need for excessive back-
button navigation and reinforcing spatial consistency across screens. It also helps reduce
cognitive load, as users always know where to go and how to return to their travel dashboard.
Altogether, the My Trips screen is more than a landing space—it is an evolving travel diary, a
real-time planner, a memory book, and a motivational launchpad. Whether the user is a
wanderlust-filled beginner looking to plan their first adventure or a seasoned traveler returning to
manage an upcoming trip, this screen ensures they feel welcomed, informed, and empowered
with every single visit.

5.4. Search Location Page

Department of Computer Technology, Navi Mumbai 32


AI Travel Planner

After the user logs into the application and lands on the "My Trips" homepage, they can initiate a
new trip by tapping on the “Start New Trip” button. Once this button is clicked, the user is
immediately redirected to the Search Location Page, which is a crucial component in
personalizing the travel experience. This page is designed with a minimalist and intuitive
interface to ensure smooth user interaction.
At the top of this screen, a clear and spacious search bar labeled "Search Place" is displayed.
This is where the user is prompted to enter the destination they intend to travel to. As the user
begins to type their desired location, the application’s smart AI integration begins to function in
real-time.
This search functionality is powered by Gemini AI, which intelligently interprets the user’s input
and dynamically offers location suggestions. As the user types even partial phrases or vague
keywords, Gemini AI predicts the intended destination by analyzing contextual patterns and past
travel-related data. The smart AI not only suggests exact matches but also populates nearby
attractions, iconic locations, cities, and well-known landmarks relevant to the entered keyword.
For instance, when a user starts typing “Australia”, Gemini AI instantly provides suggestions
such as:
 Australia Zoo, Steve Irwin Way, Beerwah QLD
 Australia Fair Shopping Centre, Marine Parade
 Australia Dairy Company, Parkes Street
 Australia Square, George Street, Sydney NSW
Department of Computer Technology, Navi Mumbai 33
AI Travel Planner

Similarly, if a user types “India”, the results may include:


 India Gate, New Delhi, Delhi
 Indianapolis, IN, USA
 Indiana, USA
 Indian Wells, CA, USA
This feature significantly enhances the user experience by reducing the typing effort and
eliminating errors in destination selection. The results appear in a clean dropdown list format
right below the search bar, helping the user quickly choose the correct location without scrolling
through lengthy lists or manually correcting spelling errors.
Once the user selects the appropriate location from the suggested list, the application proceeds to
the next stages of trip planning — such as selecting the travel date, budget, trip members, and
itinerary planning — all streamlined in a step-by-step flow.
This location search screen not only adds precision to the trip creation process but also acts as a
foundation for generating a context-aware travel plan. By leveraging the power of Gemini AI, it
ensures that the trip creation process is faster, smarter, and personalized, ultimately giving users
a seamless start to their journey.

5.5. Travel Group Selection Page

Department of Computer Technology, Navi Mumbai 34


AI Travel Planner

Travel Group Selection Page that follows immediately after the user initiates the process of
creating a new trip in your AI Travel Planner app. This screen is far more than just a basic form
—it plays a crucial role in personalizing the entire travel experience, tailoring the itinerary
generation, destination suggestions, activity types, accommodation preferences, and even budget
considerations based on who the user is traveling with.
The screen unfolds with a fresh, uncluttered, modern design that prioritizes clarity, friendliness,
and ease of interaction. At the very top-left corner, there is a minimalistic back arrow, allowing
the user to easily return to the previous screen without confusion or effort. This element
reinforces user freedom and control, essential aspects of intuitive UX flow.
Just beneath the navigation element is the main title text, prominently reading “Who’s
Travelling?”. This heading is styled in a large, bold, high-weight sans-serif font that immediately
captures attention and defines the purpose of this screen without ambiguity. The tone is casual
and conversational, establishing a human-like warmth rather than a robotic form-filling
atmosphere. The presence of an apostrophe in “Who’s” is also a subtle design choice that adds
familiarity, mimicking everyday language rather than formal command structures.
Right below the title, a friendly subheading appears: “Choose your Travellers!” This line plays a
dual role—it acts as a guiding instruction and also sets an engaging tone that subtly invites user
participation. The exclamation mark at the end makes it feel upbeat and encouraging rather than
directive. The placement of this line bridges the emotional gap between the heading and the
action area, maintaining flow and continuity in the content hierarchy.
Department of Computer Technology, Navi Mumbai 35
AI Travel Planner

Following this introduction, the interface unfolds into a vertically stacked selection layout
featuring four distinct travel group options: Just Me, A Couple, Family, and Friends. Each of
these options is encapsulated within soft-rounded rectangular cards, giving a warm, inviting feel
that visually separates each category without creating a cluttered or mechanical appearance. The
background of these cards is a very light grey, ensuring a contrast from the white backdrop and
subtly guiding the user's visual focus toward each option individually.
Every card contains two core components—a title line in bold black text, and a descriptive
subline in a lighter grey tone, followed by an associated emoji-style icon that visually represents
the travel type in a playful, instantly recognizable manner. These icons are chosen to resonate
universally and quickly trigger mental associations. For example, an airplane icon for solo travel
symbolizes freedom and movement, champagne glasses for a couple imply celebration and
bonding, a house for family suggests comfort and shared space, and a sailboat for friends
connotes adventure and thrill.
The first option, “Just Me,” caters to solo travelers who are planning to explore on their own.
The supporting text below it reads “A sole traveles in exploration,” although the phrase contains
a minor typographical error—“traveles” should ideally be “travels.” Regardless, this description
aims to evoke a sense of self-discovery and independence. It acknowledges the spirit of solo
travel, where the user has complete autonomy over the experience and often seeks introspection,
spontaneity, or exploration on their terms.
The second category is “A Couple”, referring to two people traveling together—typically
romantic partners but also inclusive of any duo. The phrase underneath states “Two traveles in
tandem,” again with a small typo, where “traveles” should read “travel.” The word “tandem”
subtly implies synchronicity, shared decision-making, and experiences tailored for two.
Choosing this category will allow the app to suggest more couple-oriented destinations, intimate
activities, romantic getaways, or budget divisions suitable for two.
The third option, “Family,” focuses on group travel involving parents, children, or extended
family members. The description reads “A group of fun loving adv,” where the sentence seems
to be truncated. Ideally, this would read something like “A group of fun-loving adventurers” or
“A group of fun-loving travelers.” The intent here is to position the family trip as dynamic,
engaging, and inclusive. Family travel has a unique planning requirement, often involving kid-
friendly places, safe accommodations, group-friendly restaurants, and relaxed itineraries.

Department of Computer Technology, Navi Mumbai 36


AI Travel Planner

Selecting this would help the app curate such options accordingly.
The fourth and final group option is “Friends,” intended for users traveling with their peer group.
The description reads “A bunch of thrill-seekes,” where “seekes” seems to be a typographical
error and should be corrected to “seekers.” This phrase captures the essence of group travel with
friends—often adventurous, high-energy, spontaneous, and filled with social activities. This
category triggers the app’s AI to lean toward recommending adventure activities, group
entertainment, party venues, road trips, hostels, and cost-sharing dynamics.
The layout spacing between each card ensures that the screen doesn’t feel overwhelming, even
on smaller devices. Each card can be tapped or highlighted, likely with a subtle animation or
color change upon selection to give tactile feedback to the user—a crucial micro-interaction that
boosts satisfaction and confirms their input intuitively.
At the bottom of the screen, a large, horizontally stretched black button labeled “Continue” acts
as the final call-to-action on this page. The contrast of the black background with white text
ensures it’s unmistakably visible, making it ergonomically easy to tap. This button, in essence, is
the gateway to the next step in the journey creation flow. It is only enabled once the user has
selected one of the travel group options—ensuring no accidental skips while maintaining a
guided linear flow.
The entire screen is designed to act as a branching logic filter, silently feeding input to the AI
engine behind the app that will impact all subsequent suggestions, destinations, and plans. It is a
fine example of integrating user intent into system intelligence early in the user journey.
This screen contributes significantly to the emotional architecture of the trip planning journey. It
humanizes the process, shifts focus from sterile data inputs to narrative storytelling, and ensures
that users feel their experience is truly being customized for them. It also builds a psychological
anchor—users begin to emotionally associate themselves with their upcoming trip from this very
screen, setting the tone for the rest of the adventure ahead.

5.6. Date Selection Page

Department of Computer Technology, Navi Mumbai 37


AI Travel Planner

The Travel Dates screen marks a pivotal stage in the user’s journey through the AI Travel
Planner application. This screen is responsible for capturing the core timeframe of the user's
intended trip and directly impacts the downstream planning components such as itinerary
generation, accommodation search, transport arrangement, and contextual budget predictions.
The UI and UX of this page are designed not only to be visually minimal and modern but also to
offer intuitive usability, strict functional boundaries, and smart error-prevention mechanisms, all
of which come together to streamline the trip planning process.
At the top of the screen, the user is greeted with a prominent and bold title labeled “Travel
Dates” in clean, high-weight sans-serif typography. The visual hierarchy is carefully crafted to
immediately indicate the purpose of this screen without any cognitive friction. Directly beneath
the heading is a calendar navigation bar that allows the user to browse through different months.
The month and year are displayed in the center—such as “March 2025”—while navigation
options labeled “Previous” and “Next” are positioned on either side, enabling the user to toggle
across months with ease. This navigation ensures users are not constrained to planning trips
within a fixed month and can make long-term vacation plans months or even a year ahead.
The calendar component that follows is structured in a traditional week-based grid format, with
weekday abbreviations laid out from Sunday to Saturday on the topmost row. Each subsequent
row contains the date numbers arranged chronologically, consistent with standard calendar
conventions. The current month’s dates are displayed in a crisp black font, while inactive or
unavailable dates from the past (prior to the current day) are dimmed out using a lighter grey
Department of Computer Technology, Navi Mumbai 38
AI Travel Planner

tone to visually indicate that they are disabled and non-selectable. This feature is crucial in
maintaining temporal accuracy, ensuring users cannot backdate their trip selection or plan
retroactively, which would otherwise lead to inconsistencies in itinerary calculations and service
availability.
When a user initiates date selection by tapping on a start date, the selected date is visually
accentuated using a thick, rounded rectangular highlight filled with a solid black color,
contrasting the white background. As the user continues to define the range by tapping an end
date, the intermediate dates between the selected start and end points are dynamically highlighted
in a continuous black bar. This visual treatment offers an uninterrupted, intuitive representation
of the total travel duration. The start and end markers are designed with rounded corners,
emphasizing the trip boundaries distinctly.
A crucial design constraint applied within this module is the trip duration limit. The application
architecture enforces a maximum trip span of 21 days, ensuring that users do not select an
impractically long vacation period. The logic is applied in real time, such that once a start date is
selected, the available range for end-date selection is dynamically capped, disallowing the user
from tapping on dates that exceed the 21-day window. This approach not only prevents user error
but also maintains consistency with downstream logistics planning, which relies on realistic trip
durations for cost, resource, and availability estimations.
Another notable constraint is that the selection of travel dates must begin from the current day or
a future date. Dates prior to today’s date are strictly disabled and non-interactive. This rule is
embedded to ensure that the AI travel planning engine does not consider outdated data, and it
prevents users from creating invalid itineraries or conflicting bookings. This restriction aligns
with typical use cases of travel planning platforms, where forward planning is the default
behavioral assumption.
When no dates are selected, the screen maintains a neutral calendar view with no highlights or
action-based prompts, promoting a clean and focused interface. Upon selecting a valid travel
date range, the visual selection acts as implicit feedback. Once satisfied with the chosen dates,
users proceed by tapping on the Continue button, prominently located at the bottom of the
screen. This button is styled with high visibility—solid black background with bold white text—
and features rounded corners and ample padding for tactile ease. The placement and size of this
button are designed considering thumb-reach ergonomics, especially for mobile device

Department of Computer Technology, Navi Mumbai 39


AI Travel Planner

interaction.
In terms of user behavior control, edge cases are thoughtfully handled. If a user attempts to select
an end date before the start date, the system either resets the selection or prevents the action
entirely, depending on implementation logic. Similarly, if a user selects a date and then tries to
scroll to past months or select past dates, the system blocks interaction with non-eligible cells
while maintaining an error-free experience. These details ensure users are guided gently without
facing disruptive warnings or system-level errors.
The Travel Dates screen is not just a UI for capturing input—it acts as the foundation layer for
dynamic itinerary generation. Once dates are captured, the system can internally begin filtering
relevant events, regional festivities, flight availability, hotel booking windows, seasonal activity
suggestions, and location-specific alerts that correlate directly with the selected time period. For
example, if a user selects a trip during a local festival, the system can intelligently suggest
attending those events, enhancing the personalization element of the app.
In the backend, the selected dates are immediately stored in the user’s session and passed as
parameters into the AI logic engine, which subsequently tailors the entire trip experience based
on this temporal input. These dates become a reference point for all subsequent modules in the
flow, including budget breakdowns, transportation suggestions, and even mood-based activity
recommendations derived through Gemini AI’s semantic travel analysis.
From a visual and interaction design standpoint, the screen successfully maintains a balance
between simplicity and functional robustness. It adheres to minimalist UI principles while
embedding intelligent interactivity and constraint validation beneath the surface. The smooth
transition between date states, subtle haptic feedback upon selection (if implemented), and
graceful handling of invalid interactions combine to offer a seamless experience.
The screen architecture is built with scalability in mind—future updates could integrate
additional features such as multi-city trip segmentation, flexible trip duration sliders, or pre-filled
recommendations based on public holidays. The current implementation, however, is optimized
for clarity, control, and a frictionless trip definition experience that empowers users to proceed
confidently to the next stage of planning.

Beyond its visual and functional elements, the Travel Dates screen also plays a psychologically
strategic role in the user’s journey through the application. In travel planning, date selection is

Department of Computer Technology, Navi Mumbai 40


AI Travel Planner

one of the most emotionally engaging points of interaction. It subconsciously affirms the reality
of the upcoming trip for the user. By offering a clean and visually satisfying interaction model,
the application not only guides users to take action but also reinforces a sense of commitment
and excitement toward the travel experience they are about to create. This emotional
reinforcement, paired with the responsive and intuitive visual feedback, increases user retention
and decreases the likelihood of drop-off at this stage.
In the background, the date selection logic is integrated with a reactive state management system,
typically implemented through React Native hooks or state containers such as Redux. Once a
user selects a start date, the application internally initializes a temporary travel date range object,
which remains in memory until confirmation. This allows for fluid changes if the user decides to
reselect or alter the duration. The selection mechanism dynamically updates the visual DOM
without causing full re-renders, ensuring a performance-optimized experience even on lower-end
Android devices. This also keeps the app responsive and maintains seamless UX continuity as
users scroll or interact with other interface elements.
On a data architecture level, the selected start and end dates are encoded in a consistent ISO 8601
format (YYYY-MM-DD) to ensure standardized interpretation across all modules and backend
APIs. This formatting enables smooth integration with Firebase databases and AI logic modules.
Additionally, the timestamp of selection is also logged passively to monitor user interaction
patterns, allowing developers to gather insights for future UX improvements or predictive
modeling.
Validation of user inputs occurs at both the UI and backend level. At the UI layer, constraint-
based logic is executed immediately via conditional rendering and interaction blocking. For
example, dates in the past are already rendered as non-clickable in the UI layer, but even if a user
attempts to manipulate the frontend (e.g., via code injection or UI hacks), the backend
independently revalidates the selection. If the incoming date data violates business logic—such
as exceeding 21 days or having a start date that occurs after the end date—the server returns a
structured error response and flags the session for review. This double-layer validation
architecture not only fortifies data integrity but also prevents tampering and logical loopholes in
the planning flow.
Another key consideration is timezone normalization. Since users may access the app from
different regions or while in transit, the system ensures that date selections are normalized

Department of Computer Technology, Navi Mumbai 41


AI Travel Planner

according to the user's local timezone upon display but are stored in a standard UTC format in
the backend. This future-proofs the app for international deployment and ensures consistency in
AI-generated suggestions that rely on date-sensitive content such as weather forecasts, event
calendars, or local transport schedules.
Scalability has also been a foundational consideration in the design of this screen. The date
picker component is designed to support integration with external APIs such as public holiday
databases, airline flight schedules, or local event aggregators. While the current implementation
focuses on basic date selection, the architecture leaves room for dynamic overlays that can
visually highlight specific days with colored badges, tooltips, or pop-ups—signaling high-traffic
days, cheaper travel periods, or unique local attractions. These future enhancements would
elevate the Travel Dates screen from a simple selector to a fully intelligent, insight-driven
decision-making tool for travelers.
Moreover, this screen offers rich opportunities for progressive personalization. Over time, as a
user books multiple trips, the app can begin to offer pre-emptive suggestions like “Popular trip
dates last year,” “Plan a birthday getaway,” or “Long weekend detected—plan a short escape.”
These micro-personalization nudges can be layered contextually over the date grid based on user
profile history and AI-driven behavior prediction, thereby increasing engagement and promoting
proactive trip planning.
In terms of accessibility, the application conforms to essential usability standards. Color contrast
ratios are designed to meet WCAG guidelines, ensuring visibility for users with visual
impairments. Tap areas for date cells and action buttons are optimized for touch-based
interactions, providing ample click targets to reduce input errors. The minimal use of text on the
screen ensures international adaptability and makes it easier to integrate multilingual support in
future versions. The Continue button at the bottom acts as a pivotal call to action (CTA),
signaling the end of this micro-journey and triggering transition to the next planning phase. Its
behavior is tightly coupled with input state—remaining inactive or faded out when no valid dates
are selected, and becoming bold and clickable only when a valid range is confirmed. Upon
interaction, the system uses asynchronous navigation logic to seamlessly transition to the next
screen without delay, often with a micro-animation or slide gesture to maintain flow continuity.
The selected dates are simultaneously committed to the app’s global state and passed forward to
contextual modules such as budget configuration, travel group setup, and destination AI search

Department of Computer Technology, Navi Mumbai 42


AI Travel Planner

queries. In broader terms, this screen can be seen as a critical control node within the AI Travel
Planner’s architecture. It not only captures direct user intent but also seeds the AI engine with
contextual anchors. For instance, if a user selects travel dates during a monsoon season, the
itinerary builder will deprioritize outdoor adventures and emphasize indoor activities. If dates
fall during peak seasons, the system might display budgeting alerts or recommend early
bookings. Thus, the Travel Dates screen plays an indirect yet significant role in enhancing the
intelligence and relevance of the travel experience the app offers. The combination of structured
interface design, strategic functional limitations, emotional engagement triggers, predictive logic
hooks, and robust data handling elevates this screen beyond a mere form-fill interface. It
becomes a thoughtfully crafted interface touchpoint that bridges raw user intention with
intelligent travel orchestration—setting the foundation for everything that follows.

5.7. Budget Selection Screen

Department of Computer Technology, Navi Mumbai 43


AI Travel Planner

The Budget Selection screen represents a pivotal decision-making touchpoint within the AI
Travel Planner journey, seamlessly transitioning the user from general intent to personalized
travel dynamics. This screen is designed not only to gauge the financial flexibility of a traveler
but to anchor the upcoming AI-generated suggestions in a contextual framework that reflects the
user’s lifestyle, preferences, and practical constraints. By prompting users to self-identify their
spending approach—be it cost-conscious, balanced, or indulgent—the app is able to fine-tune all
downstream recommendations with greater precision and experiential resonance.
From a user experience perspective, the interface follows a minimalist, yet emotionally evocative
design. Each budget category—Cheap, Moderate, and Luxury—is not just a semantic label but a
micro-narrative that reflects user personas. The "Cheap" selection resonates with travelers who
value frugality and seek cost-effective itineraries, possibly including hostel stays, public
transport, and local food joints. The "Moderate" category appeals to pragmatic travelers aiming
for a balanced mix of comfort and value, likely leaning toward mid-range accommodations and
well-rated experiences. The "Luxury" option, marked by iconography that subtly evokes freedom
from financial constraint, caters to aspirational or affluent users whose priorities revolve around
exclusivity, premium amenities, and indulgence in curated travel moments.
Visually, the screen employs horizontal visual zoning, where each budget type is enclosed within
a rounded-corner selection container that visually mimics a card-based architecture. This
container-based layout increases tactile accessibility and makes the selection interaction feel
intentional and rewarding. The accompanying emoji-style icons serve a dual function—adding
Department of Computer Technology, Navi Mumbai 44
AI Travel Planner

visual delight while also aiding in quick cognitive recognition. These graphical elements,
combined with typographic hierarchy and white space discipline, create a UI structure that is
intuitive, breathable, and emotionally engaging.
From a functional logic perspective, the selection mechanism operates on a state-driven
architecture. When a user taps on a budget option, the system updates the active selection state
and re-renders the UI dynamically to reflect visual confirmation. This might include a
background color shift, slight elevation animation, or icon highlight—depending on
implementation design. The selected budget type is then stored temporarily in local memory
using state management tools such as React Native’s useState or Redux reducers. This state is
passed forward across subsequent screens as part of the user’s session context, ensuring coherent
propagation of budget-aligned preferences across all modules of the app, including destination
recommendations, accommodation tiers, and activity suggestions.
The Continue button at the bottom acts as a conditional gatekeeper. It remains inactive until a
budget selection is confirmed, thereby enforcing a mandatory decision and ensuring the system
has valid data to continue the personalization engine. Once activated, the button triggers a
smooth asynchronous navigation event that not only transitions the user to the next screen but
also commits the selected budget value to the global context layer of the application. This value
becomes a critical input parameter in the AI logic stack, which tailors travel options accordingly.
On the backend, the selected budget category is stored as a standardized categorical value, often
as an ENUM field (e.g., BUDGET_LOW, BUDGET_MEDIUM, BUDGET_HIGH) in Firebase
or any connected database. This classification allows the AI recommendation engine to parse and
compute relevance scores while retrieving options from external APIs or datasets. For example,
when querying available hotels in a selected destination, the AI engine filters results based on the
stored budget field and applies it as a weighting factor in the ranking algorithm. The same logic
extends to transport, food suggestions, activity pricing, and even in-app upsell prompts like
travel insurance or premium guided tours.
Importantly, the budget selection doesn’t function as a static constraint—it acts more like a
dynamic modifier. The AI system is designed to interpret budget flexibility contextually. For
instance, if a user selects “Moderate” but the selected travel dates fall within a peak tourist
window, the system might elevate certain pricing tiers while still preserving value-oriented
recommendations in other aspects, such as transport or meals. This adaptability ensures that the

Department of Computer Technology, Navi Mumbai 45


AI Travel Planner

user receives a harmonized travel plan that remains grounded in their chosen financial
framework without being rigid or limiting.
The screen also represents an excellent opportunity for progressive learning and behavior
mapping. Over time, as users plan multiple trips or revisit their budget choices across different
contexts, the system can start building a profile of financial behavior tendencies. This behavioral
metadata can eventually fuel micro-personalization features such as pre-filled preferences,
budget-based alerts, and dynamic itinerary previews. For returning users, the system can even
nudge the default selection toward historically preferred budget modes, subtly enhancing
convenience and reinforcing personalization.
In terms of scalability, the architecture of this screen is intentionally modular. Additional budget
tiers or contextual filters (like “Eco-friendly Budget” or “Family Budget”) can be introduced
with minimal refactoring. Similarly, localized variations based on currency exchange trends,
inflation dynamics, or regional cost-of-living metrics can be integrated seamlessly. The
underlying framework supports this adaptability through a design pattern that decouples UI logic
from data processing layers, allowing for iterative enhancements without UI regression risks.
On the accessibility front, the app remains aligned with essential design principles. Clear visual
differentiation between active and inactive states, readable typography, and tap-friendly hitboxes
ensure that users across age groups and device types can interact without friction. The interface
also anticipates future enhancements such as voice-based selection or NLP-driven conversational
interfaces where users can simply say, “Plan a luxury trip” to auto-select a budget category.
Psychologically, this screen reinforces the user’s sense of control and self-awareness, making
them feel more empowered and involved in shaping their travel experience. Budgeting,
traditionally a chore, is reframed here as a lifestyle affirmation—a design move that subtly
reshapes user perception and increases satisfaction.
Altogether, the Budget Selection screen stands not just as a functional bridge to the next planning
stage, but as a foundational pillar in tailoring the entire user experience. It anchors the app’s
intelligence engine in realistic parameters, reinforces emotional engagement through thoughtful
visuals, and sets the stage for context-aware recommendations that feel highly curated and
personally resonant.
5.8. Trip Review Page

Department of Computer Technology, Navi Mumbai 46


AI Travel Planner

The "Review Your Trip" page acts as the final confirmation interface in the AI Travel Planner
application's trip creation flow. It is designed to summarize all previously selected user inputs in
a structured, readable, and clean format before initiating the trip-building process powered by
artificial intelligence. This page plays a critical role in ensuring the correctness of user-provided
data and acts as a final gate before triggering itinerary generation logic.
The primary purpose of this screen is to allow the user to verify all their selected preferences for
the trip in one consolidated view. It ensures that no input error propagates to the next stage and
that users are confident in the details they have provided. Once confirmation is achieved, the user
proceeds to trigger the final computation of the personalized travel itinerary.

The screen is structured vertically and displays four key components which summarize all user
inputs:
Destination Field The destination section displays the selected location that was previously
chosen on the Search Location Page. In this instance, the value shown is “Australia”. This
destination data is sourced from the application’s trip session data, either stored temporarily in
local state or persistently in Firebase. The system ensures that the location is displayed using
human-readable formatting (country/city/region name) rather than internal identifiers or
coordinates.
Travel Date Field This section presents the complete travel duration selected by the user. It
includes both the start date and the end date, formatted clearly using the standard date format
Department of Computer Technology, Navi Mumbai 47
AI Travel Planner

(e.g., “15 Mar to 18 Mar”). Additionally, the system automatically calculates and displays the
total number of days between the selected dates. This is dynamically computed using a date-
difference algorithm integrated within the frontend logic layer. In the example shown, the system
correctly identifies the duration as four days. This calculated value is not manually input by the
user but is derived from the input provided during the date selection step.

Travel Group Field This section displays the type of group the user is traveling with, as selected
on the previous screen. It reflects the user's preference for the travel context, which may include
categories such as “Solo”, “Family”, “Couple”, or “Friends”. The category shown here is
“Family”, indicating that the travel plan being generated must take into account requirements
that align with group-based travel preferences such as suitable destinations, child-friendly
locations, comfortable accommodation suggestions, and safer routes.

Budget Category Field This section shows the user’s selected budget tier. The value shown in the
example is “Luxury”. This information plays a significant role in determining the type of
accommodations, transportation modes, activities, and dining options that the AI itinerary builder
will include. The backend algorithms use this input to classify the trip’s economic bracket and
apply filters or weights in favor of high-end travel options such as premium hotels, fine dining,
and exclusive activities.

Backend Data Management and Processing Logic


As the page loads, the frontend application fetches all data points (destination, travel dates, group
type, and budget) from either the local state management system (such as React Context or
Redux store) or from persistent Firebase storage under the current user's active trip session node.
The structure in Firebase typically resembles:

At the bottom of the page, a prominently displayed button labeled “Build My Trip” acts as the
final call to action. Upon clicking this button, the following sequence is initiated:
The app performs one final validation of the input data.
A request is sent to the AI itinerary engine, passing all the user’s preferences in a well-structured
payload.

Department of Computer Technology, Navi Mumbai 48


AI Travel Planner

The backend system uses these inputs to trigger itinerary generation algorithms, which include
AI models trained to produce optimized travel plans based on budget, duration, destination, and
travel group.
The user is redirected to the Trip Generation Loading screen, where a visual animation or
progress indicator is displayed while the system prepares a detailed trip itinerary.
Error Handling and Edge Cases
If any of the values are missing or improperly loaded, the system triggers client-side error
validation routines. For instance, if the travel dates are not correctly passed from the previous
screen due to asynchronous load delay or navigation state reset, the page will throw an error
preventing the user from proceeding. Similarly, if the budget data is missing or malformed, the
“Build My Trip” button remains disabled until all fields are verified.

The layout of the page is designed to promote clarity, minimalism, and cognitive ease. All fields
are vertically stacked with ample white space to avoid visual clutter. Fonts are kept bold and
legible for headers, while values are displayed using clean, sans-serif fonts for easy readability.
Visual consistency is maintained with standard icon alignment and hierarchy, ensuring that users
can intuitively associate each value with its corresponding category.
The page also maintains full responsiveness across devices, adjusting margins and scaling font
sizes appropriately for different screen resolutions.

The Review Your Trip page is an essential component in the AI Travel Planner app’s flow,
strategically placed to prevent errors and improve user confidence before generating
personalized itineraries. Its structured layout, backend integration, dynamic data rendering, and
user-triggered action flow ensure that it serves both functional and experiential purposes. By
consolidating all trip inputs in a single interface, it enhances decision-making clarity and
provides a seamless transition into the AI-driven trip generation module.

5.9. Trip Generation Screen

Department of Computer Technology, Navi Mumbai 49


AI Travel Planner

After the user completes the “Review Your Trip” screen and confirms the input by clicking on
the “Build My Trip” button, the application transitions to the Trip Generation screen. This screen
serves as an intermediate interface to indicate that the system is actively processing the user’s
inputs and working towards generating a personalized day-wise travel itinerary.
The interface of this screen includes a heading that reads “Please Wait…”, followed by a
supporting message, “We are working to generate your dream trip”. This message communicates
to the user that the application is dynamically processing data in real time to create a customized
travel experience. Additionally, there is a visible loading animation at the center of the screen,
which is not merely ornamental but acts as a visual cue representing the ongoing backend
processes. Beneath the loading animation, there is an advisory note stating “Do not Go Back”,
which serves to caution the user against navigating away from the screen while the itinerary
generation is in progress. This message is critical from a functionality perspective because any
disruption during this stage could interfere with backend processing, potentially resulting in an
incomplete or failed trip generation.
In the background, once the “Build My Trip” button is pressed, the frontend system triggers an
API call that sends all the selected data from the previous screens to a dedicated backend
endpoint responsible for handling itinerary generation logic. This API call typically contains
structured JSON payload data including parameters such as the selected destination, travel dates,
group type (e.g., solo, couple, family), chosen budget type, and the authenticated user’s unique
ID derived from Firebase Authentication. Upon receiving this request, the backend system passes
Department of Computer Technology, Navi Mumbai 50
AI Travel Planner

this information to the AI-driven logic processor, which in this case is powered by Gemini AI.
The AI module executes a multi-stage process to build a logically structured and personalized
itinerary. The first step involves analyzing the selected destination to retrieve curated travel
experiences, notable attractions, local cuisines, and region-specific activities. It simultaneously
cross-references the travel dates with contextual data such as local events, weather conditions,
and seasonal availability to enhance trip accuracy and relevance. Following this, the AI engine
contextualizes the group type input to customize the nature of activities and accommodations—
for instance, family-oriented trips would lean toward kid-friendly spots and spacious lodging
options, whereas solo or couple selections would invoke a different filtering logic.
In the next stage, the AI engine applies budget segmentation logic. Based on the user’s selection
of a ‘Luxury’ budget, the system filters high-end accommodations, premium activity options,
exclusive dining experiences, and luxury transport modes. Each option included in the itinerary
is validated to match the budget type, ensuring consistency throughout the plan. This is followed
by a day-wise itinerary structuring process. The AI system optimizes the sequence of activities
and destinations to minimize commute time and maximize value, distributing the itinerary evenly
across the selected number of travel days.
Simultaneously, once the itinerary is generated, the backend system stores this data in the
Firebase Firestore database. A unique Trip ID is assigned, and this Trip ID is linked to the user’s
record in the Firestore for future retrieval. The generated itinerary includes structured data for
each day, including planned activities, locations, timing estimates, internal notes, hotel
suggestions, transport arrangements, and AI-sourced tips for enhanced user experience.
During this entire operation, the frontend remains on the Trip Generation screen, continuously
showing the loading animation until a complete and successful response is received from the
backend. Once the response is fetched and validated, the application seamlessly transitions to the
Itinerary Display screen, where the user will be able to view their personalized trip plan in a day-
wise segmented format.

5.9. My Trips Page (Homescreen)

Department of Computer Technology, Navi Mumbai 51


AI Travel Planner

Upon successful generation of the travel itinerary through the Gemini AI-powered backend, the
application automatically redirects the user to the “My Trips” screen, which serves as the home
screen of the application and acts as the central hub for managing all planned trips associated
with the authenticated user. This screen is a pivotal component in the user flow, as it consolidates
all travel data in one accessible location and allows users to interact with their itinerary or create
new trips seamlessly.
At the top of this screen, a header labeled “My Trips” prominently indicates the primary function
of this section, which is to display all the trips the user has created or planned using the
application. This header acts as a static section that remains consistent to ensure user clarity and
navigation ease. Adjacent to this header, on the top-right corner, there is a “+” icon that plays a
critical role in extending the application’s functionality. This icon serves as an interactive button
that, when tapped, initiates a fresh trip creation process. Tapping this icon triggers a redirection
to the initial phase of the travel planner workflow, effectively resetting the user flow while
preserving the current trip data in the backend. The backend identifies a new trip instance and
initializes a fresh data entry in the Firebase Firestore, awaiting new user inputs. Beneath the
header, the most recently planned trip is displayed as a prominently featured card. This card
comprises multiple data components pulled dynamically from the Firestore database based on the
authenticated user’s unique ID. The visual component of this card includes a trip thumbnail,
which in this case displays an image of the Sydney Harbour Bridge, symbolizing that the user
has planned a trip to Australia. The image is either fetched from a pre-associated media
Department of Computer Technology, Navi Mumbai 52
AI Travel Planner

repository based on the selected destination or dynamically rendered through a logic that maps
destinations with representative images.
Just below the image, the destination name is displayed—in this case, “Australia”—followed by
the corresponding travel date, which is retrieved directly from the trip data stored in the backend.
Here, the date displayed is “15 Mar 2025”, which reflects the exact date selected by the user
during the itinerary creation phase. Alongside the date, the trip type or group type is indicated.
The value “Family” signifies that the trip was designed and generated based on inputs where the
user selected a “Family” travel configuration. This label is crucial as it gives the user contextual
clarity regarding the nature of the itinerary, especially when multiple trips are listed.
Following this information is an interactive button labeled “See your plan”. This button acts as a
navigation trigger. When pressed, it initiates a redirection to the day-wise itinerary display
screen, which presents a detailed breakdown of the trip’s schedule, activities, and arrangements.
From a backend perspective, tapping this button causes the application to query the Firestore
using the associated Trip ID and fetches the full itinerary object, which is then rendered on the
next screen.
Below the primary trip card, a compact trip summary section is displayed again, likely to provide
redundancy and immediate accessibility for quick identification of trips in scenarios where
multiple trips might be listed. This summary again includes the destination name, travel date, and
group type, ensuring that essential metadata for each trip is always visible to the user.
The bottom section of the screen consists of a fixed navigation bar that houses three main tabs:
“My Trip”, “Discover”, and “Profile”. The “My Trip” tab, which is currently active, allows users
to manage and view all saved itineraries. The “Discover” tab is designed to allow users to
explore new travel ideas, suggested destinations, popular spots, or AI-recommended travel
packages based on user behavior. This section likely integrates with the Gemini AI model to
offer dynamic travel discovery features. The “Profile” tab enables the user to view and modify
account details, update preferences, view history, and possibly manage login credentials or
connected devices, all linked to Firebase Authentication services.From the backend perspective,
the trip listing on this homepage is dynamically populated using a real-time listener or on-
demand API call to Firebase Firestore. The application fetches all trips associated with the
current user’s UID, sorts them by creation or travel date, and renders each trip in a card format
with associated metadata. In the event of multiple trips, this listing will scroll vertically to

Department of Computer Technology, Navi Mumbai 53


AI Travel Planner

accommodate the additional entries while maintaining performance using lazy loading
techniques.This home screen plays a critical role in user engagement, allowing for ease of
access, continuity of experience, and an organized trip management system. It also serves as the
gateway for re-engagement and long-term user retention by enabling users to revisit or replicate
previous trips or create entirely new ones with minimal friction.

5.10. Itinerary Display

Department of Computer Technology, Navi Mumbai 54


AI Travel Planner

The itinerary display is one of the final and most user-centric modules in the AI Travel Planner
application. It serves as the culmination of all prior user inputs and AI-generated planning logic.
After the user successfully completes the travel setup—entering details such as start date,
destination, travel group type, budget, and preferred trip nature—the application processes this
data through the integrated AI engine to generate a structured travel plan. This plan is then
presented on the itinerary screen.
The itinerary is automatically organized in a day-wise format, which is not a static list but a
dynamically generated structure based on AI-driven location recommendations, optimized

Department of Computer Technology, Navi Mumbai 55


AI Travel Planner

sequencing, travel feasibility, and user preferences. The screen renders this data into a visually
clean and navigable view, offering a chronological outline of places to visit, activities planned,
and AI suggestions for each day.
On the backend, once the user confirms the trip details, the app calls the AI module (powered
through Gemini AI integration) which processes contextual information including selected
destination metadata, popular landmarks, seasonal availability, user trip type (solo, couple,
friends, family, etc.), and budget constraints. The output from this process is stored in the
Firebase database under a unique trip node linked to the authenticated user ID.
The itinerary screen fetches this data in real-time through a secure Firebase read operation. The
structure typically includes the day index, associated destinations or spots, and corresponding
activity details. In cases where a user modifies trip parameters before final confirmation, the AI
reprocesses the data to generate a fresh itinerary, ensuring the plan remains contextually accurate
and adaptive.
Functionally, the itinerary screen behaves differently based on the user's trip progress. For a new
trip, the system fetches and displays the latest AI-generated plan as a scrollable layout per day. If
the user is returning to an ongoing or completed trip, the itinerary persists through cloud storage
and can be viewed or re-evaluated at any time. This ensures the app offers not just planning
capabilities but also a travel reference hub throughout the journey.
The itinerary data also links contextually with other app modules. For example, it can be
enhanced later with reminders, embedded maps, real-time updates, or modification suggestions
based on time of day, weather forecasts, or closure alerts. However, in the current version, the
focus remains on clean AI-generated trip planning and display rather than interactive
rescheduling or augmentation.
This feature is vital in delivering the final output the user expects after going through the AI-
based trip creation flow. The UI is intentionally kept minimal, letting the AI content be the
primary focus, and future updates may include bookmarking specific day events or exporting the
itinerary as a PDF for offline access.

5.10.1 Australia Trip Example:

Department of Computer Technology, Navi Mumbai 56


AI Travel Planner

To illustrate the practical implementation and effectiveness of the itinerary generation module, a
real-time test case was conducted by simulating a user’s travel planning process for a trip to
Australia. This example demonstrates how the AI engine processed inputs and produced a
coherent, day-wise itinerary that meets the user’s expectations in terms of structure, detail, and
functionality.
Upon initiating the travel planning, the user selected Australia as the destination and provided
accompanying trip parameters such as travel dates, preferred budget, group category, and overall
trip nature. These details were parsed and routed to the backend AI module, where the Gemini-
powered engine began constructing the travel flow. Once processed, the final output was
rendered on the itinerary display screen.
The Australia trip itinerary was structured into a multi-day plan, clearly categorized by each
day’s events and locations. The AI allocated sightseeing and activity clusters based on
geographic proximity and logical travel sequencing, ensuring time efficiency and experiential
diversity throughout the trip.
For instance, Day 1 focused on arrival procedures and acclimatization, beginning with the
Sydney Airport arrival and settling into the hotel. It was followed by light activities like
exploring the Sydney Opera House and taking a brief walk along Darling Harbour. The system
ensured that the first day was kept minimally active to account for travel fatigue.
On Day 2, the itinerary expanded into immersive experiences, starting with a visit to the iconic
Sydney Harbour Bridge, followed by time slots allocated to Bondi Beach exploration and a ferry
ride from Circular Quay. The AI algorithm ensured the clustering of waterfront and central city
attractions for the day, reducing unnecessary back-and-forth transit.
Day 3 shifted focus towards inland attractions. The plan began with a visit to the Blue Mountains
and the Scenic World, followed by an evening dinner suggestion in a local heritage restaurant.
These were intelligently suggested as part of AI’s contextual analysis of local experiences suited
to the user's profile and budget range.
Moving ahead, Day 4 incorporated nature-based exploration. The itinerary mapped out a visit to
Taronga Zoo and the Royal Botanic Gardens in the morning hours, followed by a leisure evening
walk near Barangaroo Reserve. AI ensured the balance between active tourism and relaxed
experiences, which is crucial for long-duration trips.
By Day 5, the system transitioned the travel sequence towards new zones, suggesting a move

Department of Computer Technology, Navi Mumbai 57


AI Travel Planner

from Sydney to Melbourne. It handled logistics interpretation by allocating the first half of the
day to transit and then scheduling a light city walk in Melbourne for the latter half. This marked
the AI’s ability to interlink destination transitions within an itinerary seamlessly.
Day 6 was designed as a cultural immersion day in Melbourne. Visits to Federation Square, the
National Gallery of Victoria, and the Queen Victoria Market were mapped with calculated
durations and lunch break buffers. The itinerary promoted diverse exposure within a compact
time frame while maintaining user comfort.
Lastly, Day 7 was designated for flexible activity slots and leisure, including final shopping
hours or optional city walks before the return to the airport. The AI system flagged this day with
a soft closure, allowing the user to either relax or customize additional last-minute add-ons
without overwhelming the trip end.
This Australia trip example demonstrates the capability of the application to provide realistic,
well-paced, and experience-rich itineraries. The AI adapts based on user profiles, destination
nature, and travel logic, making the itinerary not just a list but a structured plan tailored
intelligently to enhance the travel experience.

5.11. Know More Feature

Department of Computer Technology, Navi Mumbai 58


AI Travel Planner

The "Know More" feature in the AI Travel Planner app provides users with additional
information about a location by redirecting them to the respective Wikipedia page. This allows
users to explore in-depth details about attractions, landmarks, and destinations within their travel
itinerary.
5.11.1 Functional Flow
1. User Interaction:
o Each attraction listed in the day-wise itinerary includes a "Know More" button.
o The button is placed below the attraction details such as name, description, ticket
price, and estimated travel time.
2. Data Extraction:
o The app retrieves the name of the attraction from the itinerary details.
o The extracted name is then formatted appropriately to match Wikipedia search
standards.
3. Redirection to Wikipedia:
o Upon clicking the "Know More" button, the app dynamically generates a
Wikipedia search URL based on the attraction’s name.
o The user is redirected to the Wikipedia page, where they can access
comprehensive information about the location.
5.11.2 Screen Components
 Attraction Card: Displays a summarized view of the attraction, including an image, title,
short description, ticket pricing details, estimated travel time, and the "Know More"
button.

Department of Computer Technology, Navi Mumbai 59


AI Travel Planner

 Know More Button: A clickable button styled to stand out, allowing the user to fetch
more details.

5.11.3 Backend Implementation


 Wikipedia Search URL Generation:
o The attraction name is converted into a URL-friendly format (replacing spaces
with underscores, handling special characters, etc.).
o Example format: https://en.wikipedia.org/wiki/<Attraction_Name>
o Example: https://en.wikipedia.org/wiki/Darling_Harbour
 Intent-based Redirection:
o On button click, an Intent is triggered (in Android), opening the Wikipedia page
in the user’s default web browser.
5.11.4 Technical Flow (Android Implementation)
1. Extract the name of the attraction dynamically from the itinerary dataset.
2. Format the extracted name into a Wikipedia search-friendly URL.
3. Use Android’s Intent.ACTION_VIEW to open the Wikipedia URL in the default
browser.

5.12. Test Cases


Department of Computer Technology, Navi Mumbai 60
AI Travel Planner

5.12.1 Test Cases on Welcome Page:


EXPECTED ACTUAL
TC_ID TC_NAME OBJECTIVES INPUT STATUS
RESULT RESULT

Verify if the Welcome Page Welcome Page


Launch the
TC_01 Page Load Test Welcome Page loads instantly is shown on the PASS
app
loads successfully without glitches screen
Visual
Check if the "Get "Get Started"
Button Visibility inspection Button is
TC_02 Started" button is button is clearly PASS
Test after app clearly visible
visible visible
launch
Button should
Tap on Button redirects
Button Ensure the "Get respond and
"Get to user
TC_03 Interactivity Started" button is redirect to PASS
Started" authentication
Test clickable Create Account
button page
page
Click "Get
Verify redirection Navigate to Navigates to
TC_04 Redirection Test Started" PASS
after button click Sign-in screen Sign in page
button
Verify if the app
App logo or title
App Branding logo or name is Launch the App title is
TC_05 appears at the PASS
Display Test displayed app displayed
top of the screen
correctly
Verify layout UI adapts
Layout Launch app
adjustment on without UI is aligned
TC_06 Responsiveness on various PASS
different screen overlapping perfectly
Test screen sizes
sizes elements
Text and button
Ensure consistent are center-
Font & Button Visual Font & Buttons
TC_07 alignment of text aligned or PASS
Alignment Test inspection are aligned
and buttons uniformly
placed
App Check page Page loads
Page loads
TC_08 Performance response time and Launch app within 1–2 PASS
quickly
Test performance seconds

Department of Computer Technology, Navi Mumbai 61


AI Travel Planner

5.12.2 Test Cases on User Authentication Page:


EXPECTED ACTUAL
TC_ID TC_NAME OBJECTIVES INPUT STATUS
RESULT RESULT
User is
Verify login with Email: successfully
Valid Login Redirect to My
TC_01 correct email and [email protected] logged in and PASS
Test Trips page
password Password: adi123 navigated to My
Trips screen
System prompts
Invalid Email Ensure error on Email: Show "Invalid user with email
TC_02 Format Test incorrect email adigmail.com email format" format error PASS
(Sign In) format Password: adi123 error below email
field
Application
Show "Incorrect shows a toast
Email:
Incorrect Verify login with email or message
TC_03 [email protected] PASS
Password Test wrong password password" indicating
Password: arp123
message invalid
credentials
Red border
Show "Please appears on input
Empty Fields Ensure validation Email: blank
TC_04 enter email and boxes with PASS
Test (Sign In) on empty fields Password: blank
password" error message below
fields
App displays
Verify app Display
Authentication “Something
handles backend Simulated appropriate
TC_05 Failure went wrong, PASS
auth failures Firebase outage error without
Handling please try again
gracefully crashing the app
later”
Full Name: Arpit
User is
Monga Account
Successful Ensure new registered and
Email: created,
TC_06 Account account is created taken to the PASS
[email protected] redirected to My
Creation Test with valid details main homepage
Password: Trips page
seamlessly
arpit@123
Error toast
Validate
Show "Email appears saying
Duplicate Email prevention of Existing Email:
TC_07 already in use" “This email is PASS
Test duplicate account [email protected]
error message already
creation
registered”

Department of Computer Technology, Navi Mumbai 62


AI Travel Planner

5.12.3 Test Cases on Homepage:


EXPECTED ACTUAL
TC_ID TC_NAME OBJECTIVES INPUT STATUS
RESULT RESULT
Homepage Homepage
To verify that the displays with a opens with New
Homepage Load homepage loads User logs in visible “New Trip button
TC_01 PASS
Test correctly after ([email protected]) Trip” button and visible and
login previous trips shows trip-
section related content
New Trip option
New Trip To check if the “New Trip”
User lands on appears clearly
TC_02 Button “New Trip” button button is present PASS
homepage and responds to
Visibility is clearly visible and clickable
cursor click
Message or Page shows a
Trip List To validate empty
prompt shown for clean message
TC_03 Display (No state when user First-time user logs in PASS
user to start a encouraging to
Trips) has no trips
new trip begin a new trip
List of user’s
To validate past trips is
Trip List Previous trips are
presence of trips if displayed with
TC_04 Display (With Returning user logs in displayed in a list PASS
user has created brief info like
Trips) view with details
before destination and
date
To verify if User is redirected Clicking button
New Trip
clicking “New Click on “New Trip” to trip creation navigates user to
TC_05 Button PASS
Trip” opens trip button screen with input plan new trip
Navigation
creation workflow fields interface
Homepage
Homepage shows
To ensure correct displays
User Info Login with user: only the data
TC_06 user-specific data Aditya’s trip PASS
Retrieval [email protected] associated with
is loaded data and options
logged-in user
only
Layout
Homepage
rearranges
To validate UI adjusts layout and
Responsiveness Load homepage on perfectly for
TC_07 responsiveness shows content PASS
Check different devices mobile, tablet
across screen sizes properly on all
and desktop
screen sizes
views

Department of Computer Technology, Navi Mumbai 63


AI Travel Planner

5.12.4 Test Cases on Search Location Page:


EXPECTED
TC_ID TC_NAME OBJECTIVES INPUT ACTUAL RESULT STATUS
RESULT
User is taken to a
To verify if clicking
User clicks on User should land screen with a text
Search Page "New Trip" leads to
TC_01 “New Trip” on a screen with a input for destination PASS
Navigation the Search Place
from homepage location search bar and a prompt to
screen
search location
Search bar appears at
To confirm that the A text box appears
Screen loads the top with a
Input Box search input field is prompting users to
TC_02 after clicking blinking cursor PASS
Visibility clearly visible and type their desired
“New Trip” indicating readiness
interactive location
for input
User sees the typed
To validate that the User types Typed characters
Text Input word “Australia”
TC_03 search input accepts “Australia” in should appear in PASS
Functionality appearing instantly
text input the input box the input field
in the field
Gemini AI
To verify that Gemini AI should
User types automatically
Gemini AI Gemini AI gets start processing
TC_04 “India” into the activates and starts PASS
Search Trigger invoked upon typing input and suggest
field suggesting “India”,
in the search bar matching places
“New Delhi” etc.
Gemini AI should
Location To ensure that suggest relevant Suggestions like
User types
TC_05 Suggestions suggested places are matches like “Sydney, Australia” PASS
“Sydn”
Accuracy relevant and correct “Sydney, appear as predicted
Australia”
Selected location Location box fills
To verify the
Select User taps on should populate the with “Sydney,
location gets selected
TC_06 Location from “Sydney, input field and Australia” and next PASS
upon tapping a
Suggestions Australia” proceed to next screen opens for trip
suggestion
screen planning flow
Error or message App displays a
To check behavior User clicks
Blank Input should appear prompt: “Please
TC_07 when no input is Next without PASS
Handling asking user to enter enter a location
provided typing anything
a destination before proceeding.”
TC_08 Special To test how system User types System should not No suggestions are PASS
Characters handles non-standard “@#$%^&*” in return results or shown; placeholder
Input characters in search the field display message text remains and

Department of Computer Technology, Navi Mumbai 64


AI Travel Planner

cursor is reset

5.12.5 Test Cases on Travel Group Selection Page:


EXPECTED ACTUAL
TC_ID TC_NAME OBJECTIVES INPUT STATUS
RESULT RESULT
User is taken to a
To verify that user is User
new screen
redirected to travel completes User should land on
Travel Group showing travel
TC_01 group selection after previous a screen displaying PASS
Page Navigation group types like
location & budget screens and group type options
Solo, Friends,
selection continues
Couple, Family
Group categories
User sees all group
To confirm visibility such as Solo,
Group Option categories with
TC_02 of all available travel Screen loads Friends, Couple, PASS
Visibility proper icons and
group types Family should be
spacing
clearly displayed
Option should get “Friends” option
To validate selection
Single Option User taps on highlighted and gets highlighted
TC_03 of a single travel PASS
Selection “Friends” selected as active and marked as
group type
group selected
User selects Only “Couple” “Couple” becomes
To check if selecting
Multiple Tap “Solo” then should remain active while
TC_04 another group changes PASS
Behavior selects selected, replacing “Solo” is
previous selection
“Couple” earlier input deselected
User taps
To check behavior App shows:
continue System should
Proceed Without when user tries to “Please choose a
TC_05 without display an error or PASS
Selection continue without travel group to
selecting prompt
selecting a group continue”
group
User quickly Each group option
UI should respond
UI To verify that group taps each instantly responds
smoothly with
TC_06 Responsiveness options are responsive group to taps with PASS
proper selection
Check to user interaction multiple selection highlight
feedback
times transitions
User selects System loads the
To check if selection App should redirect
Navigation to “Family” and review page with
TC_07 allows smooth to next screen in PASS
Next Screen clicks “Family” group
transition to next step trip planning flow
Continue pre-selected
TC_08 Retaining To verify selected User selects Previously selected “Friends” group PASS
Selected Option group is retained when “Friends”, option should stay remains selected

Department of Computer Technology, Navi Mumbai 65


AI Travel Planner

goes forward, when user returns


on Back returning to screen active
then returns to the screen

5.12.6 Test Cases on Date Selection Page:


EXPECTED ACTUAL
TC_ID TC_NAME OBJECTIVES INPUT STATUS
RESULT RESULT
To verify navigation User selects Date selection User is redirected
Page Navigation from previous screen location and page should open to a new screen
TC_01 PASS
to Date Selector lands user on date taps showing calendar with a calendar to
selection page Continue interface choose travel dates
Calendar interface
To verify if calendar is Full calendar with
Calendar Display loads with date
TC_02 fully visible and Screen loads date picker should PASS
Validation selection slots
responsive be displayed
clearly visible
User selects Selected date 15 March 2025
Valid Date To confirm that
15 March should be gets selected and
TC_03 Selection selecting valid dates PASS
2025 as highlighted and highlighted
Functionality works properly
travel date stored properly
System restricts
User tries to App should restrict
Invalid Past Date To check if past dates date and displays:
TC_04 select 10 Feb past date selection PASS
Selection Block are restricted “Past dates cannot
2023 and show error
be selected”
User selects Previous date
To verify if changing 20 March becomes
Selection Update 18 March, should be
TC_05 selected date updates active selection, 18 PASS
Behavior then 20 deselected, new
the selection March is cleared
March one highlighted
User clicks Error prompt App shows:
To test behavior when
Continue Without continue should appear “Please select a
TC_06 continuing without PASS
Date Selection without asking for date travel date to
selecting a date
selecting date selection proceed”
User selects Previously System retains
Retaining To confirm selected
date, selected date previously selected
TC_07 Selection on Back date remains after user PASS
proceeds, should still be date on screen
Action returns to this screen
then returns highlighted revisit
To verify system 29 Feb 2024
User tries Calendar should
Handling of Leap handles special cases appears in calendar
TC_08 selecting 29 display and accept PASS
Year Dates like 29 Feb in leap and gets selected
Feb 2024 29 Feb properly
years successfully

Department of Computer Technology, Navi Mumbai 66


AI Travel Planner

Calendar layout
UI User opens
Date picker should adjusts
Responsiveness To validate UI works date selector
TC_09 scale properly and responsively on PASS
on Various on all screen sizes on tablet and
remain interactive different screen
Devices phone
sizes

5.12.7 Test Cases on Budget Page:


EXPECTED ACTUAL
TC_ID TC_NAME OBJECTIVES INPUT STATUS
RESULT RESULT
To verify if user User selects User is navigated to
Page Navigation Budget selection
reaches the budget travel date a new screen
TC_01 to Budget screen should load PASS
selection page after and taps showing multiple
Selector successfully
previous step Continue budget options
Budget categories All budget options
To confirm that all
Budget Options such as Low, are listed clearly
TC_02 predefined budget Page loads PASS
Display Medium, High, etc. with selection
options are visible
should be shown interfaces
Selected budget
“Medium Budget”
Single Budget To check that only User selects should be
is highlighted while
TC_03 Selection one budget can be “Medium highlighted, and PASS
previously selected
Functionality selected at a time Budget” previous selection
option is cleared
(if any) deselected
User taps
To test behavior App displays:
continue App should prevent
Continue Without when proceeding “Please select a
TC_04 without proceeding and PASS
Budget Selection without choosing a budget option
selecting display error prompt
budget before proceeding”
budget
User selects “High Budget”
To validate if
“Low Only latest selected remains selected
Selection Change changing selected
TC_05 Budget” budget should and “Low Budget” PASS
Behavior budget updates the
first, then remain active is unselected
user selection
“High” automatically
To confirm if budget User selects Earlier budget
Retention of Previously selected
selection is retained budget, goes choice remains
TC_06 Selection on Back budget should PASS
when user navigates back, then active upon
Action remain selected
back returns revisiting the page
Page Budget selector UI
UI To verify UI Layout should
accessed adapts well across
TC_07 Responsiveness compatibility with adjust to fit screen PASS
from mobile screen sizes and
on Devices various screen sizes resolution properly
and tablet remains functional

Department of Computer Technology, Navi Mumbai 67


AI Travel Planner

Selected budget
User selects Selected budget
Budget Data To confirm backend value is successfully
“Medium should be pushed to
TC_08 Storage to storage of selected stored in Firestore PASS
Budget” and Firestore under
Firestore budget to Firestore linked to user trip
proceeds user’s trip session
ID

5.12.8 Test Cases on Review Your Trip Page:


EXPECTED ACTUAL
TC_ID TC_NAME OBJECTIVES INPUT STATUS
RESULT RESULT
User is navigated to
To verify successful Review Trip page
User selects a a new screen
Navigation to navigation to Review should appear
TC_01 budget and taps showing location, PASS
Review Page Trip screen after showing all
“Continue” travel date, budget,
budget selection selected trip details
and group details
Location:
To ensure all previous All inputs must All selected values
Display of Sydney, Date:
selections are appear in are shown clearly
TC_02 Selected Trip 22 Feb, Budget: PASS
correctly displayed on respective fields under each category
Details High, Group: 3
this page for final review header
Friends
To check if there’s an User should User sees they can
User reviews
Edit Option option or intuitive identify that going navigate back to
TC_03 details but wants PASS
Visibility design for modifying back can allow update any previous
to change date
trip selections changes selection
To confirm visibility “Build My Trip” Button appears
Build Trip
and functionality of Review page CTA should be prominently at the
TC_04 Button PASS
“Build My Trip” loads completely visible and bottom and
Visibility
button clickable responds to tap
App should trigger Loading page with
Build Trip To verify response
User taps “Build loading screen and “Building your
TC_05 Button Click upon clicking “Build PASS
My Trip” button begin trip itinerary…” text is
Response My Trip”
generation shown immediately
To confirm All selected trip Data is submitted
Data Sent to
transmission of User confirms details should be successfully to
TC_06 Backend on PASS
reviewed data to AI and clicks build passed to Firestore backend and logged
Build Action
backend and Firestore and AI engine in database
To test behavior if User reaches Application
Handling App should either
any data is missing review page prevents proceeding
TC_07 Missing restrict access or PASS
from previous with incomplete unless all fields are
Review Data show error
selections group selection selected
TC_08 Trip Summary To verify that the UI Page fully All fields should Location, Date, PASS

Department of Computer Technology, Navi Mumbai 68


AI Travel Planner

Budget, and Group


layout for summary is be properly
Layout loaded with are separated with
well-structured and aligned and
Validation sample inputs clean spacing and
readable readable for users
headings

5.12.9 Test Cases on My Trips Page:


EXPECTED ACTUAL
TC_ID TC_NAME OBJECTIVES INPUT STATUS
RESULT RESULT
To verify that all Homepage
User logs in All trips should be
existing trips created displays each
Load Existing and has 1 or visible in card format
TC_01 by the user are planned trip with PASS
Trips more trips with destination and
displayed on the location and
planned basic details
homepage preview details
To confirm that the A clearly visible
Display of A "+" icon should
"+" icon is visible for Homepage "+" icon is located
TC_02 New Trip appear at the top-right PASS
users to start a new loaded at the top-right of
Button corner of the screen
trip the homepage
Tapping the icon
App should navigate
New Trip To ensure "+" button takes the user
User taps the to location
TC_03 Button redirects to location directly to the PASS
"+" icon selection/search
Functionality input/search page place search bar
interface
page
Cards display the
Each card should
To check if each trip Homepage destination, travel
Trip Card show destination
TC_04 card shows essential loaded with group count, date, PASS
Layout name, date, and “See
trip details correctly trip data and CTA for trip
Your Plan” button
itinerary
Each trip card
To confirm presence “See Your Plan” includes a well-
See Your Plan Homepage
and visibility of "See button should be positioned and
TC_05 Button loaded with PASS
Your Plan" CTA on clearly visible on all visible button
Visibility trips
each trip card trip entries labeled “See Your
Plan”
To test that clicking User taps Itinerary screen
Redirection App should show
"See Your Plan" “See Your opens showing
TC_06 from See Your day-wise itinerary for PASS
redirects user to Plan” on a day-wise travel
Plan selected trip
detailed itinerary view trip card plan with details

Department of Computer Technology, Navi Mumbai 69


AI Travel Planner

Message like “You


A blank state or
To verify what New user logs don’t have any
No Trips message encouraging
TC_07 happens if the user has in or deletes trips yet. Click + to PASS
Created State to start a trip should
no trips planned yet all trips start planning”
be shown
appears

5.12.10 Test Cases on Itinerary Page:


EXPECTED ACTUAL
TC_ID TC_NAME OBJECTIVES INPUT STATUS
RESULT RESULT
App transitions
User clicks User should be
smoothly and
Navigation To verify redirection to "See Your redirected to the
displays the
TC_01 from See Your itinerary page upon Plan" from a respective day- PASS
itinerary screen
Plan Button clicking "See Your Plan" trip card on wise itinerary
related to selected
homepage screen
trip
Top of the itinerary
To check whether the
Display of Header should screen displays trip
top section clearly Itinerary
TC_02 Itinerary display location destination, start PASS
indicates selected screen loads
Header title and summary date, and trip
destination
overview
Each day should All planned days
Day-wise To validate presence of A trip with be clearly are segmented with
TC_03 Section individual day-wise multiple days segmented and “Day 1,” “Day 2,” PASS
Visibility sections in itinerary is displayed numbered with a and their respective
title activities shown
Each day contains
Trip is Activities must
Accuracy of To confirm correct sightseeing spots,
generated with match what the AI
TC_04 Activity activities for each day places to visit, and PASS
Gemini AI has planned for
Listing are displayed approximate flow
itinerary each day
of locations
No external Tapping on listed
Read-only To ensure that itinerary User taps on
bookings or items does not lead
TC_05 Nature of is static and not any location or PASS
redirections to any clickable or
Itinerary interactive/bookable activity
should happen interactive behavior
TC_06 Day To test if all day details User scrolls Each day’s As user scrolls, all PASS
Expansion are visible upon scroll down itinerary activities should days and their
Behavior screen be fully viewable planned activities

Department of Computer Technology, Navi Mumbai 70


AI Travel Planner

are shown without


without collapse
truncation
Day-wise activities
To ensure the screen User reaches Data should
Data Binding visible match those
reflects AI-based itinerary appear directly
TC_07 from AI- generated by PASS
generated plan from screen post from AI response
generated Plan Gemini AI and
backend trip build and Firebase
stored to Firestore

CHAPTER 06
FUTURE SCOPE

Department of Computer Technology, Navi Mumbai 71


AI Travel Planner

FUTURE SCOPE
6.1. AI Travel Planner 2.0: Smarter and More Adaptive Travel Solutions:
AI Travel Planner is set to evolve into a more intelligent and user-centric platform, introducing
advanced features that enhance real-time travel planning and personalization. The goal is to
integrate AI-driven predictive analysis, dynamic itinerary adjustments, and a robust monetization
model to support sustainable platform growth.

AI Travel Planner 2.0 will focus on refining its adaptive AI engine, which will proactively adjust
travel plans based on real-time data such as traffic conditions, weather updates, and user
preferences. Additionally, the next version will introduce premium features, allowing users to
access exclusive AI-powered insights, early booking discounts, and concierge services.

Key Features:

 Real-Time Itinerary Optimization: AI will continuously analyze trip conditions and


provide alternative recommendations to minimize disruptions and enhance
convenience.

 Integrated Booking System: Users will be able to book hotels, flights, and local
transport directly within the app, powered by smart AI-based suggestions.

 AI-Powered Personalized Travel Reports: The system will generate travel insights,
expense breakdowns, and safety tips based on user patterns.

 Subscription-Based Model: Premium users can access personalized travel planning,


exclusive deals, and VIP concierge support for a seamless experience.

Department of Computer Technology, Navi Mumbai 72


AI Travel Planner

Benefits:

 Enhanced Travel Experience: AI-driven recommendations will offer seamless trip


management with minimal effort.

 Revenue Generation: A structured monetization model ensures long-term financial


viability while providing users with premium features.

Department of Computer Technology, Navi Mumbai 73


AI Travel Planner

6.2. Referral System for Bonuses:


Implementing a referral system within the AI Travel Planner platform offers a strategic
approach to user acquisition and engagement. By incentivizing users to share the platform
with their friends and family, AI Travel Planner can rapidly grow its user base while
rewarding loyal users.

Key Components:
 Referral Codes & Links: Each user will receive a unique referral code or link to
invite others to the platform.
 Bonus Rewards: Users who successfully refer new members will earn redeemable
travel credits, discounts, or premium access.
 Tiered Reward System: Higher referral counts will unlock greater rewards,
encouraging continued engagement.
 Automated Tracking & Attribution: AI Travel Planner will track referrals in real-
time, ensuring fair rewards distribution.

Benefits:
 Cost-Effective User Growth: The referral system leverages word-of-mouth
marketing to expand the platform.
 Enhanced Community Engagement: Encourages users to actively participate and
engage with the platform.
 Increased App Usage: Incentives will encourage repeat usage and long-term
retention.

Department of Computer Technology, Navi Mumbai 72


AI Travel Planner

6.3. Continuous Improvement & AI Enhancement


To ensure AI Travel Planner remains competitive and efficient, continuous improvements and
AI enhancements will be a core focus. Regular updates will be implemented based on user
feedback, evolving market trends, and advancements in AI technology.

Key Strategies:
 User Feedback Mechanisms: Collecting insights from users through surveys,
analytics, and direct feedback to refine features.
 Agile Development Approach: Rapid iteration and deployment of new features to
enhance user experience.
 AI Upgrades & Machine Learning: Enhancing AI’s ability to predict, optimize, and
personalize travel plans with increased accuracy.
 Feature Expansion: Introducing innovative tools such as AI-powered travel
budgeting, language translation, and local activity recommendations.

Benefits:
 Improved User Satisfaction: Regular updates ensure a smoother, more efficient
travel planning experience.
 Market Adaptability: AI Travel Planner remains aligned with industry trends and
user needs.
 Sustainable Growth: Continuous refinement drives long-term platform success and
scalability

Department of Computer Technology, Navi Mumbai 73


AI Travel Planner

CHAPTER 07
CONCLUSION

Department of Computer Technology, Navi Mumbai 74


AI Travel Planner

CONCLUSION
In conclusion, the development and implementation of the AI Travel Planner marks a
significant advancement in personalized and efficient travel planning. By leveraging AI-
powered recommendations, real-time optimizations, and a seamless booking experience, the
platform enhances user convenience and transforms the way people plan and experience
travel.
The integration of AI-driven insights and dynamic itinerary adjustments allows users to enjoy
hassle-free journeys while optimizing costs, time, and experiences. Future enhancements,
such as AI Travel Planner 2.0, will introduce premium services, a referral-based reward
system, and eco-friendly travel recommendations, further expanding the platform's
capabilities. The referral system fosters user engagement and organic growth, while ongoing
AI enhancements ensure continuous improvement based on real-world data and user
feedback.
By staying adaptive to emerging trends, refining user experiences, and incorporating
innovative AI-driven features, AI Travel Planner is positioned as a leading solution in the
travel industry. This project highlights the transformative power of AI and technology in
simplifying travel logistics, reducing uncertainties, and creating highly personalized
itineraries.
Ultimately, AI Travel Planner represents a step toward the future of intelligent travel, where
automation and data-driven insights work together to craft seamless and enjoyable travel
experiences for users worldwide. Through continuous innovation and user-centric
development, this platform paves the way for smarter, more efficient, and sustainable travel
planning.

Department of Computer Technology, Navi Mumbai 75


AI Travel Planner

REFERENCES
1. Firebase Authentication Documentation
Google Developers. (n.d.). Firebase Authentication. Retrieved from
https://firebase.google.com/docs/auth
2. Cloud Firestore Documentation
Google Developers. (n.d.). Cloud Firestore. Retrieved from
https://firebase.google.com/docs/firestore
3. Firebase Project Configuration Guide
Google Developers. (n.d.). Set up a Firebase project. Retrieved from
https://firebase.google.com/docs/web/setup
4. React Native Official Documentation
Meta Platforms, Inc. (n.d.). React Native Documentation. Retrieved from
https://reactnative.dev/docs/getting-started
5. Expo Framework Documentation
Expo. (n.d.). Expo Documentation. Retrieved from https://docs.expo.dev/
6. Google Gemini AI (formerly Bard)
Google AI. (n.d.). Gemini AI Platform. Retrieved from
https://deepmind.google/technologies/gemini
7. IEEE Standard for Software Test Documentation (IEEE 829)
Institute of Electrical and Electronics Engineers. (1998). IEEE Standard for Software
Test Documentation. IEEE Std 829-1998.
8. Mobile App UX Best Practices
Nielsen Norman Group. (n.d.). Mobile UX Design: Key Principles. Retrieved from
https://www.nngroup.com/topic/mobile-ux/
9. Agile Methodology for Mobile App Development
Ambler, S. W. (n.d.). Agile Modeling and Agile Development Lifecycle. Retrieved
from https://agilemodeling.com/
10. Google Material Design Guidelines
Google. (n.d.). Material Design Guidelines. Retrieved from https://m3.material.io/

Department of Computer Technology, Navi Mumbai 76

You might also like