I Built a Revenue-Generating AI Travel App in a Weekend — Here's the Full Stack
How I combined Claude AI, Stripe, and Next.js to ship a monetised SaaS that actually makes money
Imagine having a well-travelled friend who's been to every European city, knows the restaurants tourists never find, and will answer your questions at 2am for free. That's JARVIS — and I built it in a weekend.
🌐 Live app: jarvis-travel-nine.vercel.app
Here's the full breakdown: what it does, how it's built, and what I learned shipping an AI product with real monetisation.
What Is JARVIS?
JARVIS (Just A Really Very Intelligent System — yes, the name is intentional) is an AI-powered budget travel platform for Europe. Users can:
- Chat with an AI travel expert for hyper-specific advice ("€400 budget, 5 days, where do I go?")
- Browse 20+ European cities with budget scores, daily cost estimates, and hidden local tips
- Buy PDF travel guides (€4.99–€7.99) delivered instantly after Stripe payment
- Discover hidden gems — local secrets that no guidebook covers
The whole thing is live at jarvis-travel-nine.vercel.app and costs roughly €0/month to run.
The Tech Stack
I wanted to keep this lean. Every tool had to earn its place.
Next.js (Pages Router) — I didn't need the complexity of the App Router for this. Pages Router is simpler, API routes are co-located, and Vercel deploys it for free.
Claude Haiku (Anthropic) — This is the heart of the product. I chose Haiku over GPT-3.5 for two reasons: it's cheaper at scale, and its responses felt more natural for a "knowledgeable friend" persona. The system prompt was critical here — I spent more time on it than any other single piece of code.
Stripe Checkout — Zero custom payment UI. I create a checkout session server-side and redirect the user. After payment, a /api/download endpoint verifies the session and redirects to the PDF. Clean, secure, battle-tested.
Google Maps API — Powers the city exploration tab with real place data.
Supabase — Auth and database layer (used for user sessions and bookmarking features in Phase 2).
Vercel — Free tier handles everything comfortably at current traffic.
The Part That Made It Feel Real: Prompt Engineering
Most AI apps feel generic because developers treat the system prompt as an afterthought. I spent more time on JARVIS's persona than any other single piece of code — testing dozens of variations until responses felt like a person, not a product.
The prompt does three things: locks in a persona, enforces output constraints (length, format, tone), and bans the hedging phrases that make AI sound robotic. That's it. No magic — just specificity. The difference between "I'd recommend checking out..." and just saying the thing is the difference between a guidebook and a friend.
A detail users love: JARVIS remembers the last 6 exchanges, so you can ask "what about hostels there?" and it knows exactly what "there" means. Conversation history is passed with every API call — simple, but it makes the chat feel genuinely intelligent rather than stateless.
There's also voice input via the Web Speech API — tap the mic, speak your question. On mobile this feels surprisingly natural. Most travel planning happens on a phone, and typing a long query while commuting is annoying. Speaking it isn't.
Monetisation: Three Streams in One App
One of my goals was to make this self-sustaining from day one. JARVIS has three revenue streams baked in:
1. PDF Guide Sales (Stripe)
Hand-crafted itineraries sold for €4.99–€7.99. Stripe handles the entire payment flow — I just create a session and verify it on download. No subscription complexity, no user accounts required for a purchase.
2. Google AdSense
Configured via _document.js with a publisher ID. Not life-changing revenue, but it's passive and requires zero maintenance.
3. Travelpayouts Affiliate
When users click through to book hotels or flights, I earn a commission. The affiliate script is loaded once in _document.js — it quietly monetises the intent that already exists in a travel app.
The principle: build the product users love, then add monetisation that aligns with what they're already trying to do.
The UI Detail I'm Most Proud Of: HoloCards
The city cards have a 3D holographic tilt effect that responds to mouse position. When you hover, the card rotates on its X/Y axis with a radial glow that follows your cursor. On mobile, it responds to touch.
const handleMouseMove = useCallback((e) => {
const rect = card.getBoundingClientRect();
const rotX = ((e.clientY - rect.top - rect.height/2) / (rect.height/2)) * -12;
const rotY = ((e.clientX - rect.left - rect.width/2) / (rect.width/2)) * 12;
card.style.transform =
`perspective(600px) rotateX(${rotX}deg) rotateY(${rotY}deg) scale(1.02)`;
}, []);
It's a small detail, but it makes the app feel premium. In a world of flat UIs, tactile feedback stands out.
The Animated Particle Background
The background is a canvas animation — 80 particles (40 on mobile) drifting slowly with connecting lines drawn between any two within 100px. Each particle has a randomised hue in the blue-purple range.
It adds depth without being distracting, and it costs nothing performance-wise since the particles are tiny and the frame logic is simple.
What I'd Do Differently
1. Start with mobile. I built desktop-first and retrofitted mobile. Next time I'd flip that — most travel searches happen on phones.
2. Invest earlier in the city data layer. The hardest part wasn't the AI or the payments — it was curating good, accurate data for 20+ cities. This is the actual moat.
3. Add email capture before Stripe. I have no way to reach users who almost bought but didn't. A simple "get a free city guide" email capture would fix that.
Lessons for Anyone Building AI Products
The AI is not the product. Claude is a tool. The product is the curation, the UI, the system prompt, the context I've built around it. Any developer can call the Anthropic API. The work is everything else.
Cheap models are underrated. Claude Haiku is fast and inexpensive, and for a constrained persona with a tight system prompt, it's indistinguishable from more expensive models in user testing.
Monetise from day one, even if it makes you uncomfortable. If you wait until you have "enough users", you'll never ship. I added Stripe before I had a single user. It forced me to think about value early.
What's Next
Phase 2 is Booking.com and Skyscanner affiliate API integration — so when JARVIS recommends a hostel, users can book it directly in the app and I earn a commission. That's where the real travel affiliate money is.
After that: user accounts, saved itineraries, and guides for the Balkans and Nordics.
If you're building something similar or want to see the source, the project is on GitHub. Questions? Drop them in the comments — I read everything.
🌐 Live app: jarvis-travel-nine.vercel.app
Built with Next.js · Claude AI · Stripe · Vercel · ☕
Top comments (0)