Trip|Treat

Interactive graphs to help you plan for your trip.

Comment

Inspiration

TripAdvisor offers thousands of hotels and restaurants, but users struggle to compare options at a glance or discover hotels that match their unique preferences.
Traditional filters are rigid, and recommendations feel generic.
We envisioned:

“What if you could visually explore hotels by rating and price and the app learned your taste as you browse?”

That’s Trip|Treat, an interactive dashboard that turns raw TripAdvisor data into actionable, personalized insights.

What it does

  • Trip|Treat is an interactive web dashboard that helps users plan trips by exploring hotel ("Trip") and restaurant ("Treat") options based on their personal preferences.

    • For the "Trip Helper":
    • Users can visually filter hotels using sliders for both Rating range and Price range.
    • It displays a "Ranking graph" that groups hotels by their rating and sorts them by price, showing the min–max and average price for each group.
    • The graph is interactive:
      • Hovering shows hotel details
      • Clicking a point links directly to the TripAdvisor website to start booking
    • A "Summary table" highlights the most affordable hotel for each rating cluster.
    • Personalized Recommendations:
      • The app learns a user's taste by tracking their clicks.
      • It analyzes the "highlight" tags (like "Boutique," "Modern," or "Family") of the hotels a user clicks on.
      • It then suggests other hotels that share at least one of those same highlight tags.
    • For the "Restaurant Finder":
    • Users can filter restaurants using a price range slider (e.g., $$–$$$).
    • Clicking on any suggested restaurant links the user to its TripAdvisor page.

How we built it

  • APIs: We fetched data from TripAdvisor APIs using FastAPI
  • Backend: Our recommendation algorithm logic is written in Python
  • Database: We use DBeaver to store user data as well as the data we got from the API
  • Frontend: We built interactive websites with sliders and complex graphs using React
  • Visualization: We use plotly.js to create the interactive graph

Challenges we ran into

  • Connecting between the frontend and backend part:
    We spent a lot of time trying to figure out why certain features appear but they don’t function as expected. After trying multiple times, we learned that we need to have a stable connection between different stack components so the information can go smoothly.

  • Navigating the graph:
    Our main purpose is to demonstrate the data information in a presentable way that can help users identify and make their decision. The challenge was finding a graph that looks presentable, cohesive, and contains enough information. After different tries, we finalized the graph we have now.

  • Differences between the hotel API and the restaurant API:
    After completing the hotel part (which covers the “trip” component), we moved to develop the restaurant part (which covers the “treat” component). We thought the information within the two APIs was the same, but in fact, they are really different, so we could not apply the same logic to both.

Accomplishments that we're proud of

  • Until now, we have a running website that can:
    • Navigate between different tabs
    • Help users make decisions
    • Connect to TripAdvisor so users can start booking when their decision is finalized

What we learned

  • Using DBeaver to store data
  • Fetching data from the given API
  • Collecting user behavior based on click times

What's next for Trip|Treat

  • We want to expand Trip|Treat to a larger area.
    Right now, we only have information within the New York area, but we hope to develop the project so it can help users find more information about other cities/countries.

  • Integrating information about map/location:
    We think that having information about the place location will be very helpful for users, but we cannot figure out how to calculate and represent them using Google Maps.

Built With

Share this project:

Updates