TRAVLR AI

home page
journey planner page
generating your journey
your personalized trip planner
your personalized trip planner
your personalized trip planner
your personalized trip planner
your personalized trip planner
LIVE MODE with chatbot , spent counting and checkbox
LIVE MODE with chatbot , spent counting and checkbox used here

Inspiration

When people travel, they switch between many apps : Google Maps and places for directions and exploring places. Zomato for food order. District for places to visit. MakeMyTrip for hotels and transport booking . This is such a waste of time.

What it does

Our web app does everything important but in an easy way . Suppose a user enters: "I want to go from Digha to Newtown." The app shows ✅ Safest route ✅ Traffic ✅ Accident-prone areas ✅ Road construction ✅ Flooded roads (if available) ✅ Nearby restaurants ✅ Nearby cafes ✅ Tourist attractions ✅ Budget hotels ✅ Bus/train/flight options Everything under one specific platform .

How we built it

Frontend: A modern web interface built using React and Vite for rapid rendering and hot module reloading. It uses Tailwind CSS and modular UI components for a premium, responsive design, along with interactive maps to visualize locations and hotel recommendations. Backend: A lightweight Node.js and Express server that handles client requests, communicates with external APIs, and manages a local JSON database to save, update, and retrieve generated travel itineraries. AI Engine: Powered by the OpenAI API (using models like gpt-4o-mini). The AI dynamically processes user preferences (such as destination, budget, travel companion type, and trip duration) to structure detailed day-by-day itineraries, estimate costs, and power an interactive, context-aware chatbot assistant to answer traveler queries.

Challenges we ran into

JSON Parsing Failures: Sometimes the AI returned Markdown or conversational text alongside the itinerary data. Solved by using strict prompts to enforce a clean JSON schema. Serverless File Storage: Serverless hosting (like Vercel) has a read-only filesystem, preventing local database writes. Solved by routing file database writes to the environment's temporary directory (/tmp). AI Latency: Generating a detailed multi-day plan takes a few seconds, which can hurt UX. Solved by implementing visual loading states and skeleton screens. Chatbot Context Limits: Feeding the entire itinerary details into the chat companion for every message was inefficient. Solved by compressing the trip details into a compact system context. Coordinate Inaccuracy: The AI would occasionally generate inaccurate latitude/longitude values for map pins. Solved by validating coordinates before rendering the map.

Accomplishments that we're proud of

Zero-to-Hero Travel Planning: Users can generate a complete, fully customized multi-day vacation plan under 10 seconds. Context-Aware Chat Companion: The AI assistant doesn't just chat. It understands the generated itinerary, allowing users to ask context-specific questions about their current trip. Seamless Map & Itinerary Sync: Successfully mapping out travel activities visually, creating a seamless dual-view experience. Polished User Experience: Achieving a premium, highly responsive UI/UX, smooth loading skeletons, and interactive states. Serverless-Ready Deployment: Building a production-ready application that works out-of-the-box on serverless environments, making it cheap to host and highly scalable.

What we learned

Prompt Engineering & Output Control: We learned how to write system instructions that constrain LLMs (such as OpenAI) to return structured JSON rather than raw text, thereby avoiding runtime crashes. Designing for API Latency: We discovered how critical perceived performance is; using placeholder skeletons and engaging loaders drastically improves the user experience while waiting for AI generation. Managing Ephemeral Environments: We gained a solid understanding of how serverless platforms (like Vercel) manage storage and routing, forcing us to write adaptive data-saving logic using /tmp. Effective Context Management: We learned how to pass large datasets into LLM chat models efficiently without hitting rate limits or driving up API token costs. Integrating AI with Interactive Maps: We learned how to bridge structural text coordinates returned by an AI with frontend mapping APIs to display dynamic, interactive visual components.

What's next for TRAVLR AI

Direct Booking Integration: Connect with flight and hotel APIs (like Skyscanner or Amadeus) to allow users to book their generated recommendations directly inside the app. Real-Time Collaborative Planning: Add support for shared workspaces, allowing friends or families to edit and plan the same itinerary together in real time. Offline Mode & PWA Support: Enable travelers to download itineraries offline or export them to PDF, ensuring access to schedules and maps even without cellular data. Expense & Budget Tracker: Integrate a live budgeting feature where users can log actual expenses during their trip and compare them to the AI's initial estimate. Community Hub & Social Sharing: Allow users to publish their generated itineraries to a community feed where other travelers can browse, upvote, and customize them.