Wayfarer

Travel Itinerary Web Application

Student Name:

Student Id:

1
Table of Contents
Executive Summary...................................................................................................................2

Introduction................................................................................................................................3

1. Description of Web application and its features................................................................4

Key features of the Travel Itinerary Planner include:............................................................5

2. Description of technologies used in Web application........................................................5

Main technologies used-........................................................................................................6

3. Overview of the Design & Development...........................................................................7

4. Challenges and Solutional Implementation.......................................................................8

5. Description of the testing process and results....................................................................9

References................................................................................................................................11

2
Executive Summary
This project aims to build a web application that will help users to plan and book whole trips,
comprising flights, hotels also adventure activities that might be available at a particular
travel destination. In this report, the main focus is on the core development aspects of this
web-based Travel Itinerary Planner application. This project has a strong lead when it comes
to the technologies, as the choice of technologies here plays a very crucial role when it comes
to the web development process. So, for the structural support, strong and fundamental
layout, and an appealing user interface it has HTML & CSS. For the major handling of user
interface and database designing, it has the involvement of MY SQL & PHP. And, finally
adding the logic and functionalities, it has the usage of JavaScript.

This application has many ideal features that can be very useful for users that might make
their life sorted by providing ease with the travel planning process. The application allows
users to suggest and book their trips effectively by offering features such as flight booking,
hotel reservations, and adventure activity scheduling.

The application's initial objective is to provide a user-friendly platform for traveller’s to

arrange and organize their itineraries, smoothing the planning process and enhancing overall
travel experience. Through this, the traveling experience can be sorted and there would be no
mess and chaos about having the advanced knowledge of where to go and what to do.

3
Introduction
The Travel Itinerary Planner is a web-based application constructed to make the travel
planning process simpler and non-hectic for individuals and groups. This application aims to
provide a manageable platform for travellers to book flights, hotels, and adventure activities
while managing their personalized itineraries.

Through this they can easily go to any place without struggling much in finding out hotels, or
asking for places to visit, also it helps you to book your flight ticket, hotel or stay
accommodation, and adventure activity booking as well. The goal is to achieve no stress
about travel planning as things like traveling should never be hectic and stressful.

In building this web application the major technologies that are involved are as follows-
HTML, CSS (which will help in creating the layout and UI), SQL & React(which will help in
integrating the databases and UI balancing), and lastly, JavaScript & React (which will help
in providing functionalities and logic connecting) As there is a rise in online travel agencies
and travel booking websites, tourists are often excited by the numerous options available. The
Travel Itinerary Planner works toward addressing the issue by providing a complete and
combined platform for travel planning.

This application helps various types of people who like to travel to different and exciting
places, including leisure travellers, business travellers, and adventure seekers. By offering a
range of features that will help plan the whole trip without giving much effort and time, this
application provides proper packages that will help people have fun without worrying about
going from place to place as per the local people’s navigation.

The application is developed using HTML, CSS, JavaScript, React , and MySQL, ensuring a
strong and scalable solution. The project's objective is to create a user-centric application that
simplifies the travel planning process while supplying a tailored and enjoyable experience for
travellers.

By developing the Travel Itinerary Planner, this project remains to contribute to the rising
demand for online travel planning solutions, while also providing an effective way to solve
real-world problems by giving smart solutions although demonstrating the actual application
of web development technologies to solve real-life problems.

4
1. Description of Web application and its features
This project shows an efficient application of web development technologies to solve real-
world problems, showcasing a scalable and supportable solution for travel planning and
booking. This web application is specifically designed to have various features that meet the
user requirements like booking hotels, stays, or accommodations in advance to avoid hassle-
free check-ins and checkout. Nowadays people are going short in time which leads to the
usage of such applications that help by making a customized and tailored itinerary as per their
needs and requirements. Here this Web application comes to help as it has several options
available for preparing itineraries, suggesting places, and showing relevant images to give the
users a proper idea about what they will be experiencing or where they will be visiting. Also,
it helps in booking stays in advance & flight tickets as well. By this, all the required work can
be done on a single web application which indirectly creates a smooth and comparatively
easy platform where one might not mind giving their time.

Key features of the Travel Itinerary Planner include:

- User registration and login functionality:

- Flight booking with filtering and sorting options:

- Hotel reservation with room type and availability management:

-Travel destination ideas and relevant images for inspiration:

- Personalized itinerary management and visualization:

-Wishlist option to save places for future reference

- Destination filtering options for bucket list

 Mountains
 Beaches
 Forests

-Footer section with all required details

 Wishlist display
 Home
 About us
 Subscribe for mail

5
2. Description of technologies used in Web application
The main objective of this project is to serve anyone who needs to plan for their trips or
vacations. This web application helps you focus less on searching and more on arranging for
your trip by selecting the best plan that application suggests to you. This web application will
be more user-friendly and helpful compared to similar applications that are usually available.
Other applications are more technical and require you to register even before you test their
application to see it’s a good fit for you. And mostly you need to pay to use their services. On
the other hand, Wayfarer is accessible for everyone, and it has an natural design.

Main technologies used-

 ReactJS: React is an open-source library that was developed in March 2013 by Facebook.
React is NOT a framework and it is a UI library platform. This UI library is created and
extended for efficient and stretchy user interfaces. This platform allows developers to
build complex UIs easily.( Fedosejev,2015)
 Architecture: Nothing like a Framework that provides model–view–controller (MVC)
architecture as a package React provides the “View” from MVC architecture. In ReactJS,
the Model and Controller are maintained by the developer. In other words, the developer
has the freedom to choose the required libraries as per the project. Hence, this feature
considerably speeds up the development of the project, mainly if developers need to
select many independent libraries. Most applications developed in ReactJS need
additional libraries to be installed along with it to satisfy API integration, data binding,
component-based routing, form validation, dependency injection and state management.
For instance, ReactJS uses Redux and React Router for state management and API
integration.
 Data Binding: Mainly any framework should provide at least some sort of data binding
coz data binding is about mapping the pre-defined endpoints to handlers and connection
points. Ultimately, the process of transferring information within a displayable object to a
programmatic form is called data binding.

We can assume that initially the template state will get updated, and then executions will
change the UI elements. However, this method won't work if you modify the UI element. For
instance, when you have a form to submit, most developers want to update just the state of
those fields that were received by user input. Most likely, developers want to use layout in
JavaScript and React and modify the DOM element size.

6
 Component-Based Functionality: The main purpose of the component-based
architecture is to divide the layout into separate logical and functional components to
ensure component reusability. The essential characteristics of components are
reusability, replaceability, not being context-specific, encapsulation, and
independence. Thus, an ideal component must provide consistency within the
application and help the process of development and debugging. (Pitt,2016)
 Languages: React uses dynamically typed scripting language, which means
developers won’t need to be worried about the variable type. As a result, if developers
know JavaScript well, it’s easy to pick up this technology because ReactJS is based
on scripting languages such as JavaScript ES6+ mixed with JSX script and XML-like
language. Thus, the code is easier to understand, and errors are much easier because
developers can compile the code in the browser.
 Performance: React uses Virtual DOM, which makes the manipulation much faster.
Also, the Virtual DOM trees are built on the server and are lightweight. Simply the
changes will be updated, and you don't need to play the full page. Thus, it’s much
faster. But in real, DOM requires rendering the whole page.

7
3. Overview of the Design & Development
Full stack web application Architecture:

Conventional Server-Based Building web applications using a traditional Server-Based

architecture can face many challenges due to its planning traits.

The traditional method has three main layers which are as follows:

• Presentation Layer (UI)- The presentation layer is in charge of displaying data as a User
Graphical Interface. This is usually done by HTML which limits the final look and feel of the
application.

• Application Layer This is a place where we have our code written and handle the
application logic, and business logic using query files. So, this layer encapsulates the
application logic and business logic.

• Database layer The Database layer is responsible for storing and retrieving application data
and it’s highly important how to set up as the application performance is highly related on
scalability and data processing power.( Christudas, 2019)

Application Programming Interface (API):

These are essential just like the highway that lets two systems communicate with each other.
In other words, APIs are the common languages that two systems use to speak and transfer
data within the system.

A typical API must have a well-written document with all the conditions so that a developer
can determine how the API works and what information can be transferred. Soap and REST
are the most famous types of API and usually render like an HTTP request. Both are the types
that can access web services. The API is all about linking two systems and their
communication. So, the touchpoint that is likely to have access to and regain or receive
information is the endpoint. For instance, when you call an API service you are requesting a
service or application to send you information. After you send the request you are waiting for
the response from that system, server, or application. The location that your request sends or
your information is called a termination.( Masse,2011)

8
4. Challenges and Solutional Implementation
While developing a travel itinerary web application various challenges that need to be
addressed to ensure seamless functionality, security, and user experience. The primary
challenges that were encountered in the early development process and their solutions are
discussed below:

Data Management and Scalability:

 Challenge: While handling large amounts of travel data, including destinations,

hotels, restaurants, and user-generated itineraries, can become complex and lead to
performance issues.
 Solution: Implementing a MYSQL database make sure that there is flexible schema
design for handling various travel data. Additionally, indexing and collecting
techniques improve query performance, and horizontal scaling of databases allows
handling increasing loads resourcefully.( MySQL,2001)

User Authentication and Security:

 Challenge: To Ensure secure user authentication, protect personal travel details, and
prevent unauthorized access to user accounts.
 Solution: Implementing JWT (JSON Web Token)-based authentication ensures secure
session management.

API Integration for Real-Time Data:

 Challenge: Fetching real-time data such as flight schedules, hotel availability, and
weather conditions vigorously.
 Solution: Using third-party APIs such as Google Places, API, and airline APIs allows
for seamless integration of real-time data into the application, enhancing the user
experience.

User Experience and Responsive Design:

 Challenge: Ensuring the application is user-friendly, accessible, and responsive

across various devices.
 Solution: Using front-end frameworks like React or Vue.js helps build an interactive
and responsive UI. Implementing UX/UI best practices, such as intuitive navigation, a
clean layout, and optimized loading times, enhances usability.

5. Description of the testing process and results

There are several applications that are available with a similar concept. However, everybody
finds them challenging for an average user, due to the following issues:

9
1) A few of them are phone applications that require you to install the applications. Installing
an application might not be a feasible option for all kinds of users, because of the Internet
data cap, and limited device storage application platform is not available for either Apple or
android users.

2) In most applications, a user is required to create an account to be able to begin planning or

any other feature in the app. It is not good practice to require users to sign up even before
letting them try to see if the application is an appropriate fit for them.

3) Filling a detailed search can be irritating for the new user and sometimes you might not
need all the options that the app provides you.

4) Almost none of the applications can suggest a stay near your destination which I believe is
significant for a vacation. Since all the system requirements for this project are designed to
improve all the above issues. The main goal is to build a planner that is user-friendly with a
simple form to fill out and then the application gives you suggestions based on that.( Hooda,
Chhillar, 2015)

Conclusion

The development of a travel itinerary web application depicts numerous challenges, from
managing large amounts of data and ensuring security to integrating third-party APIs and
enhancing user experience.
10
However, by exercising tactical solutions such as MYSQL databases, third-party API
integration, responsive design techniques, and error-handling mechanisms, these challenges
can be effectively diminished.

The implementation of horizontal scaling techniques ensures that the application remains
scalable and performs efficiently under varying loads. Moreover, optimizing UI/UX through
responsive design and availability considerations ensures a seamless experience across
different devices and platforms.

In conclusion, a well-structured and ascendable approach in developing a travel itinerary web

application ensures that users receive a reliable, secure, and efficient platform for planning
and booking their travel experiences. By rise in modern technologies and staying to best
practices, the application can accommodate to a global audience while maintaining high
performance and serviceability standards.

References
 Fedosejev, A., 2015. React. js essentials. Packt Publishing Ltd
 Masse, M., 2011. REST API design rulebook. " O'Reilly Media, Inc.".
 Hooda, I. and Chhillar, R.S., 2015. Software test process, testing types and
techniques. International Journal of Computer Applications, 111(13).

11
 MySQL, A.B., 2001. MySQL [online]
 Christudas, B. and Christudas, B., 2019. MySQL (pp. 877-884). Apress.
 Pitt, C., 2016. React Components. Packt Publishing Ltd.

12