1. Abstract

The Travel and Tour App is a multi-page React application designed to help users explore various travel destinations and view related trip details. The app utilizes React Router for navigation between different pages and Bootstrap for styling the layout. The app features a homepage showcasing premium travel packages, a travel page displaying available destinations, and a pricing page that calculates the cost of selected trips.

This project demonstrates how to implement routing in React, how to display dynamic content, and how to style a React app using Bootstrap. Users can explore travel destinations, view travel packages, and check pricing details based on their selected trips.

2. Objectives

The main objectives of this project are:

• To build a multi-page React app for exploring travel destinations

• To implement React Router for routing between different pages

• To display premium travel packages and popular destinations

• To calculate and display the total cost for selected trips

• To use Bootstrap for layout and styling

• To add a video to the homepage for better user engagement

• To enhance knowledge of React Router and Bootstrap integration

3. Existing System

Existing systems include:

• Travel Agency Websites that display available destinations and trip details

• Online travel booking platforms (e.g., Expedia, Kayak)

• Other travel apps with pricing and destination browsing

• Static websites displaying travel destinations and prices

Limitations of Existing Systems

• Limited interactivity or dynamic content

• Static pages without real-time user input

• Complex layouts and UI elements that may overwhelm users

• Lack of seamless navigation between multiple pages or sections

4. Proposed System

The proposed system is a multi-page React-based Travel and Tour App where users can explore travel destinations, view premium packages, and check the total cost of selected trips. The app uses React Router Dom for page navigation and Bootstrap for responsive design and styling.

Key Features:

• Multi-page navigation using React Router

• Homepage with hero section, premium packages, and popular destination video

• Travel page displaying available destinations

• Pricing page showing total cost and selected destinations

• Responsive and attractive UI designed with Bootstrap

• Ability to add a video on the homepage to engage users

• Dynamic routing and page rendering based on user selection

5. Implementation Procedure

Step 1: Project Setup

• Create React app using npx create-react-app

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

• Install React Router Dom for routing:

npm install react-router-dom

Step 2: Setting Up Routing with React Router

• Use React Router to create routes for the following pages:

1. Home Page
2. Travel Page
3. Pricing Page

• Define routes and setup BrowserRouter, Route, and Link components for navigation

Step 3: Homepage Layout

• Create a hero section with an engaging message and call-to-action buttons

• Display premium packages in a visually appealing section

• Embed a video of popular destinations on the homepage

Step 4: Travel Page

• Create a page to display a list of available destinations (e.g., Australia, New York, Paris, etc.)

• Each destination will be displayed with an image and description

• Implement clickable cards that link to the Pricing Page

Step 5: Pricing Page

• Create a page that displays the total cost based on the selected destinations

• Dynamically calculate the total based on the number of selected destinations

• Display the list of selected destinations and their respective costs

Step 6: Using Bootstrap for Styling

• Use Bootstrap classes to style the app and make it responsive

• Style the hero section, destination cards, and pricing table

• Ensure the layout adjusts appropriately for various screen sizes

Step 7: Video Embedding

• Embed a video of popular destinations in the homepage to engage users

• Use the