1. Abstract

The Travel Advisor App is a React-based application that helps users discover popular travel destinations based on their current location. By using two external APIs, the app displays a list of nearby destinations and renders an interactive map to show the geographical locations of those destinations. The app provides an intuitive user experience by allowing users to input their location and view the corresponding destinations with the distance calculated.

This project integrates React Router for navigation, OpenTripMap API for destination data, and TomTom Map API for rendering the map. The app helps demonstrate how to combine multiple APIs and handle dynamic content in a React app.

2. Objectives

The main objectives of this project are:

• To create a React app that recommends popular travel destinations based on the user's location

• To integrate React Router for navigation between pages

• To fetch and display destination data using the OpenTripMap API

• To render a map based on user input using the TomTom Map API

• To display the distance between the user’s current location and nearby destinations

• To enhance understanding of API integration, state management, and routing in React

3. Existing System

Existing systems include:

• Travel advisor apps that recommend destinations based on user preferences (e.g., TripAdvisor)

• Online travel platforms providing maps and travel data (e.g., Google Travel, Kayak)

• Location-based apps providing personalized travel recommendations

• Map-based apps for showing places and their locations

Limitations of Existing Systems

• Complex interfaces with too many options for users

• Limited dynamic content and personalization

• Lack of real-time interaction with the map or current location

• Not all platforms provide seamless integration with external APIs

4. Proposed System

The proposed system is a React-based Travel Advisor App that provides users with real-time information about popular travel destinations based on their current location. The app uses the OpenTripMap API to fetch nearby destinations and the TomTom Map API to display interactive maps.

Key Features:

• React Router for navigation between pages

• OpenTripMap API to fetch travel destinations based on location

• TomTom Map API to display maps and show destination locations

• Ability to input and submit a location (e.g., city name) to get recommendations

• Real-time distance calculations between the user’s location and destinations

• Simple and intuitive user interface

5. Implementation Procedure

Step 1: Project Setup

• Create a React app using npx create-react-app

• Open the project in VS Code or any preferred code editor

• Install React Router Dom for routing between pages:

npm install react-router-dom

Step 2: Home Page Layout

• Create an input field for the user to input their location (e.g., city name)

• Add a search button that triggers the routing to the main page with the destination results

• Use React Router to route the user to the results page once the search is triggered

Step 3: Fetching Data from OpenTripMap API

• Use the OpenTripMap API to get a list of popular destinations based on the user's input location

• Implement a GET request to the API and handle the response data

• Map through the response data and display the list of destinations on the main page

Step 4: Rendering the Map with TomTom API

• Use the TomTom Map API to render an interactive map on the main page

• Add functionality to show the user's input location on the map

• Display the locations of the recommended destinations on the map using longitude and latitude

• Enable users to input custom longitude and latitude values to dynamically update the map

Step 5: Distance Calculation

• Use JavaScript or an API method to calculate the distance between the user's location and each destination

• Display this distance along with the destination name and other details

Step 6: Routing with React Router

• Set up React Router to manage navigation between the home page, main page, and map display

• Create routes for the home page, the list of destinations page, and the map page

Step 7: UI Styling with CSS

• Use CSS to style the app and make it visually appealing

• Ensure that the app is responsive and works well across different screen sizes

• Style the input bar, buttons, destination list, and map display

Step 8: Testing

• Test routing to ensure smooth navigation between pages

• Verify the map functionality and real-time location updates

• Test the responsiveness of the layout and user interactions (search input, map interaction)

• Handle edge cases, such as no results or invalid locations

6. Software Requirements

• React.js – Frontend framework

• React Router Dom – For routing between pages

• OpenTripMap API – For fetching nearby destinations

• TomTom Map API – For rendering maps and locations

• CSS – For styling the app

• Axios or Fetch API – For making GET requests to the APIs

• Visual Studio Code – Code editor

7. Hardware Requirements

Minimum Requirements:

• Processor: Intel i3 or above

• RAM: 4 GB or more

• Storage: 50 GB free space

• Internet connection

8. Advantages of the Project

1. Provides a user-friendly interface for discovering popular travel destinations
2. Allows users to dynamically search for destinations based on their location
3. Integrates with OpenTripMap API and TomTom Map API for real-time data and map rendering
4. Real-time distance calculation between user location and recommended destinations
5. Helps learn how to use React Router for page navigation and API integration
6. Simple and clean design that is easy to use and understand
7. Enhances React development skills with live API calls, state management, and dynamic routing
8. Can be expanded with additional features such as filtering destinations, showing more details, or providing user reviews