-
-
Landing page (Desktop version)
-
Discover page (Search baseon taste) (Desktop version)
-
Discover page - Plan the trip with detail (Desktop version)
-
Travel tips tab (Desktop version)
-
My trips tab (Desktop version)
-
Discovery dashboard page (Desktop version)
-
My profile page (Desktop version)
-
My favourites page (Desktop version)
-
My trips page (Desktop version)
-
My profile page (Mobile version)
-
Discovery dashboard page (Mobile version)
-
Base on taste, search result with single choice (Good behavior)
-
Base on taste, search result with multiple choice (Good behavior)
-
Fallback to mockdata of searched result (NG behavior)
-
Fallback to mockdata of searched result (NG behavior)
Project Story: Travel like an Artist
Inspiration
The inspiration behind Travel like an Artist came from the desire to make travel planning more efficient and personalized. Too often, travelers struggle with fragmented information and generic itineraries. I wanted to create a tool that not only recommends travel itineraries but does so based on smart recommendations and real user input. The idea was sparked during a hackathon, where the challenge was to blend data-driven recommendations with intuitive user experience.
What it does
Travel like an Artist is a travel itinerary recommendation platform. Users can input their travel preferences, and the app intelligently generates personalized itineraries. It leverages Qloo's API for data-driven recommendations, offering users tailored suggestions for destinations, activities, and experiences. The platform aims to solve common travel pain points such as indecision, information overload, and the need for dynamic planning.
How we built it
The project was built primarily with TypeScript (98.1%), with some CSS for styling and minimal JavaScript. Next.js was used for the frontend framework, providing server-side rendering and API routes. The integration with Qloo's API required careful handling of authentication and data parsing. The development process included:
- Setting up Next.js with TypeScript for maintainable code.
- Designing user-friendly forms to collect travel preferences.
- Building API endpoints to interact with Qloo.
- Handling data mapping and UI synchronization.
- Continuous deployment for rapid iteration and testing.
Challenges we ran into
Throughout the build, several challenges surfaced, as documented in our GitHub Issues:
- API Integration: Issues with authentication and endpoint correctness (Qloo API Authentication, Found the correct endpoint).
- UI/UX glitches: Mismatches between API data and UI rendering (The API raw data is okay, the UI is not along with it).
- Build and Deploy Errors: Compilation failures and compatibility issues (Deploy error: Failed to compile, Build error: Error: export const dynamic).
- React-specific errors: Invalid hook calls, duplicate keys, and hydration errors (Invalid hook call, Encountered two children with the same key).
- DevOps friction: Git problems and deployment differences between local and production (Git problem, Research result differ from deployed ver and local ver).
Accomplishments that we're proud of
- Successfully integrating Qloo API for dynamic travel recommendations.
- Building a robust TypeScript codebase for scalability.
- Iteratively improving UI/UX based on real error logs and issues.
- Creating a deployment workflow that catches and resolves build errors quickly.
- Learning to debug and resolve intricate React and Next.js problems.
What we learned
- Deepened understanding of API integration, authentication flows, and data mapping.
- Mastered Next.js deployment processes and troubleshooting.
- Improved debugging skills for React, especially around hooks and hydration.
- Learned to prioritize user experience by quickly iterating on feedback and issues.
- The importance of logging issues and tracking them for project learning.
What's next for Travel like an Artist
- Enhance Recommendation Algorithms:
We plan to upgrade the core recommendation engine by exploring advanced machine learning techniques such as collaborative filtering, neural networks, and reinforcement learning. This will allow the platform to better understand user preferences, adapt to individual travel styles, and dynamically optimize itineraries based on real-time feedback and contextual data (e.g., seasonality, local events, group composition). Incorporating explainable AI will also help users understand why certain recommendations are made. - Improve UI/UX:
Addressing remaining UI glitches is a top priority, including fixing navigation menu display issues on desktop and pop-up visibility on mobile. We will conduct usability studies and implement adaptive layouts, micro-interactions, and animation to make the interface smoother and more engaging. Accessibility improvements and a consistent design language will ensure that every user, regardless of device or ability, enjoys a seamless experience. - Expand API Integrations:
To offer richer and more diverse recommendations, we will connect with additional travel-related APIs beyond Qloo, such as local transportation, weather, restaurant reviews, event calendars, and mapping services. This will allow us to deliver more comprehensive itineraries that include logistics, up-to-date attraction details, and contextual suggestions based on real-time data. - Mobile Optimization:
We intend to refine the web experience for mobile browsers, including responsive design tweaks and touch-friendly interactions. In parallel, we will scope and prototype a native mobile app (iOS/Android) to deliver push notifications, offline support, and device-specific features (e.g., GPS, camera integration), further enhancing the travel planning experience on-the-go. - Community Features:
Future releases will introduce social functionality, allowing users to share their itineraries, rate recommendations, and provide feedback on destinations and activities. We will implement user profiles, trip galleries, and collaborative planning tools so groups can co-create trips and benefit from collective experience. Gamification elements, such as badges and leaderboards, will encourage engagement and community contribution. ---
Travel like an Artist is a step toward smarter, data-driven travel. The journey of building it has been challenging but rewarding, and the project is poised for further growth and innovation.
Built With
- api
- css
- gpt-4
- next.js
- node.js
- openai
- qloo
- react
- tailwind
- typescript
- vercel

Log in or sign up for Devpost to join the conversation.