🌍 Inspiration

The project was inspired by the overwhelming and fragmented process of modern trip planning, which often involves juggling dozens of tabs for flights, hotels, activities, and eco-friendly options.

We saw a clear need for a single, intelligent platform that could unify this experience, making it both simpler and more meaningful.

Our core goal was to use the power of AI not just for efficiency, but to empower people to become more conscious travelers — making it easy to discover local cultures and make sustainable choices.

We were excited by the challenge of blending powerful, server-side AI for complex planning with the new possibilities of fast, private, on-device AI for instant user assistance.

💫 What It Does 🧠 AI-Powered Trip Generation

Creates detailed, day-by-day travel itineraries based on user inputs like destination, duration, interests, and budget.

Suggests activities, restaurants, and local transport options for each day.

Uses an on-device AI (Gemini Nano) for generating instant, simple itinerary outlines directly in the browser.

✈️ Smart Booking & Suggestions

Generates real, working booking links for flights, trains, and hotels, making it easy to go from planning to purchasing.

Highlights eco-friendly travel options to help users make sustainable choices.

🏞️ Authentic & Local Experiences

Local Connect: Lets travelers chat directly with AI personas of local artisans to learn about their craft and support local communities.

Hidden Gems Explorer: Uses AI to find unique, off-the-beaten-path spots that aren't in standard guidebooks.

Local Supporters: Helps users find AI-generated local guides in their destination city for tips and assistance.

⚙️ Integrated Travel Tools

Expense Splitter: A collaborative workspace for travelers to add shared costs and automatically calculate who owes whom.

Safety Companion: An AI assistant that provides safety alerts, guidance, and nearby emergency info for any location.

✍️ Community and Inspiration

Travel Blog: A platform where users can write and publish their own travel stories, with AI-suggested cover images.

My Trips Dashboard: A personal space where all planned and booked trips are saved and managed.

🧩 How We Built It ⚙️ Core Architecture (Next.js & TypeScript)

Built with Next.js (App Router) for server-side rendering, routing, and performance.

Written entirely in TypeScript for strong type safety, scalability, and cleaner debugging.

🎨 User Interface (ShadCN/UI & Tailwind CSS)

UI crafted with ShadCN/UI — giving us elegant, accessible, composable React components.

Styled using Tailwind CSS, enabling quick iteration and responsive, modern design.

🤖 AI Integration (A Dual-AI Approach)

Server-Side AI: Powered by Genkit (Google’s open-source AI framework) and Gemini models, generating structured itineraries and booking data with JSON schemas (validated using Zod).

On-Device AI: Integrated Chrome’s built-in Prompt API (window.ai) to run Gemini Nano directly in the browser for instant, private responses.

🔥 Backend & Database (Firebase)

Firebase Authentication: Handles all sign-up, login, and session management.

Firestore: Stores user data, saved trips, blogs, and expense info in real-time.

🌐 Internationalization & Forms

Fully multilingual using next-intl with JSON-based translation strings.

React Hook Form + Zod ensure fast, validated, and type-safe forms.

🧱 Challenges We Ran Into 🧩 Git History & Large Files

We accidentally committed node_modules, breaking our GitHub push due to file size limits. Fixing this taught us deep Git surgery — removing large files across history and learning the value of a proper .gitignore.

🧠 Reliable AI-Generated JSON

Problem: The AI occasionally returned broken JSON or hallucinated fields.

Solution:

Defined strict Zod schemas.

Used prompt engineering to enforce formatting and structure.

Built fallback logic to handle malformed outputs safely.

⚡ Integrating On-Device AI

The window.ai API is still evolving. We implemented browser capability checks (canCreateTextSession and readily) to gracefully disable features on unsupported browsers.

🌀 Managing Asynchronous States

Balancing multiple async sources (Firebase, Firestore, server AI, on-device AI) required careful state management. Using React hooks (useState, useEffect, useMemo) helped maintain responsiveness without hydration issues.

🏆 Accomplishments We’re Proud Of

Dual-AI Strategy: Combined server-side Gemini with on-device Gemini Nano for speed + privacy.

Feature-Rich Web App: Real-time collaboration, blogs, and booking — all in one place.

Complex Problem Solving: AI-generated itineraries with real, valid links and contextual awareness.

Performance & Design: Fast, responsive UI with global accessibility.

Sustainable Impact: Promotes eco-conscious travel and supports local artisans.

📚 What We Learned

Dual-AI synergy is powerful. Balancing server and on-device AI gives the best mix of capability, privacy, and speed.

Modern UI stacks are game changers. Next.js + ShadCN/UI + Tailwind = rapid, beautiful prototypes.

Firebase’s real-time magic simplified complex data sync for multi-user features.

Git hygiene is non-negotiable. One node_modules mistake = hours of cleanup.

Plan for internationalization early. It made scaling globally so much easier.

🚀 What’s Next for TripMind 🧬 Deeper AI Personalization

Custom user profiles to remember preferences — e.g., “always prefer trains,” “allergic to peanuts,” or “loves street art.”

The AI will tailor future plans accordingly.

⏱️ Proactive, Real-Time Travel Assistant

A “Live Trip Mode” that sends alerts for delays, weather, or safety — your AI co-pilot throughout the journey.

💡 Enhanced On-Device AI Features

Use more of Chrome’s AI suite — Rewriter API for improving blog posts, Summarizer for condensing reviews, all privately on-device.

🗺️ Visual Trip Planning

A map-based itinerary that dynamically plots each day’s route as the AI generates plans.

💬 Community & Social Features

Add comments, likes, follows, and itinerary sharing to make TripMind a vibrant travel community.

Built With

Share this project:

Updates