Travex

Stress-free travel with Travex. Explore your destinations.

Comment

Inspiration 🌟

Traveling can be overwhelming, especially when it comes to planning. As a frequent traveler myself, I know how stressful it is to plan a trip. That's why the idea of digital travel exploration comes to my mind. I want to provide a service that I wish I had when I was planning my own travels - one that allows you to see what's good at where you go (or even where you are currently are) and plan from there.

What Travex does 🚀

Our website allows its users to see top hotels, restaurants, fun places around them or their choice of destination by using the search bar. Users can filter the destinations based on category and ratings. They can also view the details of those places via a sidebar information card list and their exact location on the embedded Google Map. Information about the weather at the currently selected location is also displayed on the header (this feature is not yet available).

How we built it 🔧

We’re always eager to learn something new and we like building stuffs.

For this app, we used Tailwind CSS for creating an attractive and responsive user interface, React for managing the UI states and handling user interactions, and Material-UI (MUI) to display necessary information in a card format.

We used Auth0 to provide secure authentication and authorization, and Axios to connect to external APIs like Google Maps. Google Maps API allowed us to display a map of the user's destination and add markers to display relevant information.

Challenges we ran into 🤔

Some challenges we ran into was implementation of endpoints from external APIs using Axios because this tool is relatively new to us, which requires some tinkering and reading documentation.

Secondly, we also encountered the problem of fetching quality data and clean them to display only necessary information to the users.

Finally, as the app scaled, developing the front end React was becoming slower and heavier which sometimes led unwanted bugs or rendering issues. The final step is to deploy the app on Netlify.

Accomplishments that we're proud of 🎉

Because the app is heavily front ended, we encountered a lot of problems regarding UI and UX. The moment that we were able to successfully reference correct data across the information on Google Map and the information on the sidebar view, which allows the app to have the feature where when you click a location on the map, the sidebar will automatically scroll to the correct place.

After all, what we are most proud of is that we are able to build a scalable app that have a lot room for features in just less than 2 days.

What we learned 📚

We learned...

  • How to implement external APIs to make the project consumes less time and more efficient.
  • How hackathon works (we are both first-timers)
  • How to overcome when dependencies are conflicted.
  • How to resolve merge conflicts and push/pull correctly

What's next for Travex 🔜

In the future, we plan to display the current weather at the chose location (unsucessfully implemented this time).

We also plan to create a saved location system where users after logging in can save the locations and plan their travel.

Another feature that we want to build is optimizing routes (consumes the shortest time to travel through) if users plan their travel with multiple saved locations that in a certain proximity.

Finally, we would immigrate from React to NextJS to improve efficiency.

Heads Up❗

In case you run the demo website, please allow the website to get your location.

Built With

Share this project:

Updates