Inspiration
Every year, travelers lose hundreds sometimes thousands of pounds due to avoidable booking mistakes: wrong travel dates, overlapping commitments, incorrect return directions, or duplicate trips already planned in their calendar. Existing booking platforms focus only on completing transactions, not protecting users from human error.
We wanted to build something that acts like “Grammarly for Travel Bookings” an intelligent assistant that catches mistakes before users click “Pay.” That idea became Voya.
What it does
Voya is an AI-powered browser assistant that monitors active travel booking pages in real time and checks them against a user’s calendar and booking context.
When Voya detects a potential issue — such as:
- overlapping trips,
- impossible schedules,
- wrong-direction flights,
- duplicate bookings,
- or conflicts with existing calendar events,
it instantly displays an intelligent warning popup before checkout.
The system provides:
- conflict severity levels,
- confidence scoring,
- plain-English explanations,
- and suggested fixes.
Voya also includes a fully interactive demo mode with simulated travel scenarios, allowing judges and users to experience the product instantly without authentication or API setup.
How we built it
We built Voya using Next.js 15, Supabase, Gemini flash 3, and a custom Chrome Extension (Manifest V3) architecture.
Our workflow was uniquely structured through 6 focused MeDo conversations, each dedicated to a specific product layer.
1. Core App & Backend
We used MeDo to generate:
- the complete Next.js 15 project scaffold,
- Supabase schema SQL with 7 relational tables,
- authentication setup,
- and environment configuration.
The schema included:
- users,
- bookings,
- warnings,
- feedback,
- travel_history,
- preferences,
- and integrations.
2. Chrome Extension
MeDo generated:
manifest.json,- a content script using
MutationObserver, - a background service worker,
- and an injected warning card UI with glassmorphism styling.
The extension successfully scraped dynamic booking data from React-rendered travel websites and passed it through the Chrome runtime messaging pipeline.
3. AI Conflict Engine
We built an /api/analyze route powered by Gemini flash 3.
The AI compares booking details against calendar context and returns structured conflict objects containing:
- conflict type,
- severity,
- confidence score,
- user-facing explanation,
- and suggested resolution.
We also implemented a complete rule-based fallback demo mode so the app functions live even without API keys.
4. Frontend Experience
Using:
- ShadCN UI
- Framer Motion
- and a custom Indigo design system,
we created:
- a modern landing page,
- animated feature sections,
- live dashboard analytics,
- responsive layouts,
- and polished warning popups.
5. Interactive Demo System
One of the strongest parts of the build was the /demo experience.
MeDo generated:
- three fully scripted conflict scenarios,
- animated warnings,
- live metric updates,
- and a fake user profile (“Alex Chen”).
This allowed us to demo the product instantly during judging with zero setup required.
6. Final Polish
We used MeDo to:
- improve spacing consistency,
- add loading skeletons,
- refine animations,
- standardize branding,
- and generate a production-ready README with deployment instructions.
Challenges we ran into
One of the biggest challenges was handling travel websites built with modern React architectures. Since booking data often loads dynamically after page render, standard DOM scraping approaches failed.
To solve this, we implemented a MutationObserver-based detection system inside the Chrome extension that continuously watches for booking data updates in real time.
Another challenge was making AI outputs reliable enough for live demos. GPT responses can vary, so we designed a structured JSON conflict schema and paired it with a deterministic fallback engine to ensure predictable behavior during presentations.
We also had to carefully manage:
- OAuth flows,
- extension-to-app communication,
- session persistence,
- and Supabase authentication security policies.
Accomplishments that we're proud of
We are especially proud that Voya feels like a real consumer product rather than a prototype.
Some highlights include:
- a fully functioning Chrome extension,
- real-time AI conflict detection,
- production-style Supabase architecture,
- animated onboarding and dashboard experiences,
- and a polished no-auth demo mode for judges.
We’re also proud of how effectively we leveraged MeDo as a development accelerator. By structuring our work into focused conversations, we were able to move from idea to fully interactive product extremely quickly while still maintaining strong architecture and UX quality.
What we learned
This project taught us a lot about:
- browser extension architecture,
- event-driven DOM monitoring,
- OAuth authentication systems,
- structured AI prompting,
- and designing reliable AI-assisted user experiences.
We also learned the importance of combining AI reasoning with deterministic fallback systems. The most impressive AI feature becomes useless if it fails during a live demo or edge case scenario.
Finally, we discovered how powerful conversational development workflows can be when paired with clear system design and modular planning.
What's next for Voya
Our next goal is to evolve Voya into a full AI travel safety platform.
Future features include:
- airline delay prediction,
- visa and passport expiry warnings,
- budget anomaly detection,
- smart itinerary optimization,
- and multi-user family trip coordination.
We also want to:
- support more booking platforms,
- launch a production-ready browser extension,
- integrate deeper Gmail parsing,
- and build a mobile companion app.
Long term, we envision Voya becoming the intelligent safety layer that sits between travelers and expensive booking mistakes — helping people travel smarter and more confidently.
Built With
- framer
- medo
- react
- supabase
Log in or sign up for Devpost to join the conversation.