Inspiration

Trying to plan out a vacation is hard. There are so many things we have to take into account and it can get overwhelming sometimes. Imagine if you could get flight and hotel information with just one click on a map!

What it does

Our app allows users to search up hotel and flight information with just one click on the map!

Main Features

Try out our app here https://www.clicktotrip.tech/

Map Implementation and Instantaneous Results

  • A scalable map with interactive zoom and move functionalities is available for the user to find the exact destination for their vacation. Clicking on the map will instantaneously display flight and hotel options.
  • Wherever the user clicks on the map, an API is used to find the nearest airport for that location and then return the possible available flights
  • The results shown automatically account for the current availabilities of the flights and hotel bookings. For example, if a hotel is fully booked during the period of your stay, the hotel will not show up as a result.
  • If any components (start date, end date, location) is null or not filled in properly, the API is not called and therefore would not display any results.

How we built it

Our applications allows users to locally store a start date, end date, currency, and home city. We also incorporated the google maps API which allows users to click anywhere they desire to travel to, retrieving relevant metadata such as the latitude, longitude, city, state, country and more, in order to query our API calls to return flights and hotels relevant to the user. Our app then combines the flight and hotel information, sorting them based on star rating, and displays to users how much a trip would cost, where they would stay, which airline they would take, all in their selected currency. Finally, we deployed our app using Netlify and linked it to our custom domain.

Challenges we ran into

  • The main issue in the project was that the number of requests we could make was limited by the API's we used
  • We had some challenges passing data back and forth between components but we eventually were able to debug our code and make it work.
  • We had trouble buying our domain and connecting it to our application

Accomplishments that we're proud of

  • being able to pass around data between components and properly querying results from the API

What's next for click2trip

There are other features we could continue on with click2trip.

  • Having options for flights (first class, business, economy)
  • Having options for hotels (types of rooms, how many beds, seaside view?)
  • More error handling for wrong queries on the hotel and flights APIs

Built With

Share this project:

Updates