-
-
Third (Final) Page
-
Second Page
-
Landing Home Page
Our app
As broke college students that wanted to be able to see the world and explore new cultures, we poured countless hours trying to balance the best sights with the cheapest costs. Furthermore, we could not find any resources online that would streamline the process. For example, TripAdvisor does not aggregate the total cost of all transportations, so we would have to manually search and calculate the total costs. Also, we were well aware of our limitations in finding new exotic places to explore. As a result, we turned to the power of Large Language Models to help solve all our issues. After 24 hours of programming, our final product is Travel.ai.
What it does
Not only is Travel.ai the ultimate cost-effective trip planner, but it also encourages exploration by recommending lesser-known vacation spots. It takes a description of the dream vacation, a budget set by the user, a starting location the user departs from, and the planned departure date for the user's ideal vacation. Travel.ai then uses OpenAI to generate a list of possible vacations, and once the user specifies their favorite vacation, Travel.ai spits out a final cost projection and traveling itinerary using BookingCOM, a RapidAPI specifically dealing with flight, hotel, and attraction costs.
How we built it
Travel.ai's front-end is built with HTML, CSS, and Bootstrap. The HTML is there to provide a platform for users to submit their inputs into, and the CSS and Bootstrap serve to be aesthetically pleasing and provide a smooth user experience. On the back-end, Travel.ai leverages Flask and Python to query data using user inputs, and sends that data back to the front-end, which then displays that data is a pleasing and easy-to-digest manner.
Challenges we ran into
Originally, our front-end was designed with React.JS to provide more functionality with animations and embedded videos, but we were unable to combine React.JS with the Flask backend. As a result, we made the call to pivot from a React.JS front-end to a HTML and CSS one. We then spent the remainder of the hackathon building up a front-end from scratch and ensuring the new front-end was compatible with our complex back-end. In addition, we struggled in our testing-phase of the back-end queries because of the limited queries we could make to our API's. We had to be extremely careful with how many times we tested our commands, as we did not want to pay money for more queries.
Accomplishments that we're proud of
Our team is proud of the fact that our program actually works; this is the first hackathon for one of the members of our group, so the fact that we got a working product shows our ability to collaborate as a team and demonstrates our expertise in various technologies and languages. Also, despite the fact that our team had to restart our entire front-end design half-way through the competition, we still finished a beautiful user interface that worked with our back-end framework.
What we learned
Some of our team members learned how to use APIs to send and fetch real-time data while others learned how to connect a front-end program with a back-end program. For instance, no one on our team knew how to bridge Python with HTML, but through hard-work and patience, we learned the proper methodology to send data between our front-end and back-end files.
What's next for Travel.ai
The next step for Travel.ai would be to investigate methods to incorporate React.JS or possibly Angular into the front-end design to provide a better user experience. We also want to handle more specific requests, such as certain attractions or accessibility options that the user desires. Ideally, our website utilizes a map API to provide a visual representation of their journey.
Log in or sign up for Devpost to join the conversation.