CanvasX: The Collaborative AI-Powered Travel Planner

CanvasX: The Collaborative AI-Powered Travel Planner

Inspiration

Planning group trips is often chaotic—coordinating destinations, budgets, and schedules can be time-consuming and frustrating. We wanted to create a real-time, collaborative platform that visualizes the trip in a dynamic canvas and leverages AI to assist in decision-making, generate itineraries, and optimize travel plans for everyone.

What it does

CanvasX allows users to:

Create a travel canvas, invite members, and set constraints like budget and total days.
Vote on preferred destinations; AI generates a decision tree to guide group choices.
Receive AI-generated itineraries including hotels, restaurants, and attractions.
Adjust plans interactively via drag-and-drop, with AI feedback to optimize balance and feasibility.
Save the final itinerary for reference, ensuring a smooth and enjoyable trip experience.

How we built it

Front-end: Nuxt.js 3, Vue.js, Tailwind CSS for a responsive, interactive interface.
Back-end: Supabase (PostgreSQL, Realtime, Edge Functions) for collaboration, authentication, and data storage.
AI integration: FastAPI server calling OpenAI GPT-4o to generate itineraries, decision trees, and suggestions.
UX features: vuedraggable for intuitive drag-and-drop itinerary adjustments, live voting, and multi-step question flow.

Challenges we ran into

Ensuring real-time synchronization across multiple users without conflicts.
Implementing a dynamic decision tree based on AI-generated proposals and votes.
Making drag-and-drop cards visually appealing, interactive, and responsive.
Parsing AI outputs consistently into valid JSON for the frontend.
Time constraints prevented handling all edge cases and deploying a fully polished MVP.

Accomplishments that we're proud of

Built a fully interactive, collaborative planning canvas with real-time updates.
Integrated AI to generate travel itineraries and suggest optimizations based on user input.
Created a workflow that combines voting, AI decision support, and drag-and-drop adjustments in a seamless experience.

What we learned

How to merge AI intelligence with human collaboration effectively.
Advanced handling of real-time state updates, complex decision logic, and interactive UI.
Strategies for quick prototyping under hackathon time constraints, prioritizing core functionality.

What's next for CanvasX

Integrate multi-modal input (images, location data) to inspire trip ideas.
Add smarter AI recommendations for balancing days, travel time, and activity types.
Improve scalability and deployment, making it accessible for real-world users.
Explore affiliate and upsell opportunities for hotels, restaurants, and attractions.