<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Supreetha Devagiri</title>
    <description>The latest articles on DEV Community by Supreetha Devagiri (@supreetha_devagiri_7620c4).</description>
    <link>https://dev.to/supreetha_devagiri_7620c4</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3979990%2Fa19caaa3-db86-4eb7-80d0-d9ca5e740f2f.png</url>
      <title>DEV Community: Supreetha Devagiri</title>
      <link>https://dev.to/supreetha_devagiri_7620c4</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/supreetha_devagiri_7620c4"/>
    <language>en</language>
    <item>
      <title>From Idea to Revenue in 48 Hours — Building an AI Travel SaaS</title>
      <dc:creator>Supreetha Devagiri</dc:creator>
      <pubDate>Thu, 11 Jun 2026 18:08:55 +0000</pubDate>
      <link>https://dev.to/supreetha_devagiri_7620c4/from-idea-to-revenue-in-48-hours-building-an-ai-travel-saas-4d3a</link>
      <guid>https://dev.to/supreetha_devagiri_7620c4/from-idea-to-revenue-in-48-hours-building-an-ai-travel-saas-4d3a</guid>
      <description>&lt;h1&gt;
  
  
  I Built a Revenue-Generating AI Travel App in a Weekend — Here's the Full Stack
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;How I combined Claude AI, Stripe, and Next.js to ship a monetised SaaS that actually makes money&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.tourl"&gt;🌐 Live app: jarvis-travel-nine.vercel.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here's the full breakdown: what it does, how it's built, and what I learned shipping an AI product with real monetisation.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Is JARVIS?
&lt;/h2&gt;

&lt;p&gt;JARVIS (Just A Really Very Intelligent System — yes, the name is intentional) is an AI-powered budget travel platform for Europe. Users can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Chat with an AI travel expert&lt;/strong&gt; for hyper-specific advice ("€400 budget, 5 days, where do I go?")&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Browse 20+ European cities&lt;/strong&gt; with budget scores, daily cost estimates, and hidden local tips&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Buy PDF travel guides&lt;/strong&gt; (€4.99–€7.99) delivered instantly after Stripe payment&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Discover hidden gems&lt;/strong&gt; — local secrets that no guidebook covers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The whole thing is live at &lt;a href="https://jarvis-travel-nine.vercel.app" rel="noopener noreferrer"&gt;jarvis-travel-nine.vercel.app&lt;/a&gt; and costs roughly €0/month to run.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Tech Stack
&lt;/h2&gt;

&lt;p&gt;I wanted to keep this lean. Every tool had to earn its place.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Next.js (Pages Router)&lt;/strong&gt; — 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Claude Haiku (Anthropic)&lt;/strong&gt; — 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stripe Checkout&lt;/strong&gt; — Zero custom payment UI. I create a checkout session server-side and redirect the user. After payment, a &lt;code&gt;/api/download&lt;/code&gt; endpoint verifies the session and redirects to the PDF. Clean, secure, battle-tested.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Google Maps API&lt;/strong&gt; — Powers the city exploration tab with real place data.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Supabase&lt;/strong&gt; — Auth and database layer (used for user sessions and bookmarking features in Phase 2).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vercel&lt;/strong&gt; — Free tier handles everything comfortably at current traffic.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Part That Made It Feel Real: Prompt Engineering
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;




&lt;h2&gt;
  
  
  Monetisation: Three Streams in One App
&lt;/h2&gt;

&lt;p&gt;One of my goals was to make this self-sustaining from day one. JARVIS has three revenue streams baked in:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. PDF Guide Sales (Stripe)&lt;/strong&gt;&lt;br&gt;
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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Google AdSense&lt;/strong&gt;&lt;br&gt;
Configured via &lt;code&gt;_document.js&lt;/code&gt; with a publisher ID. Not life-changing revenue, but it's passive and requires zero maintenance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Travelpayouts Affiliate&lt;/strong&gt;&lt;br&gt;
When users click through to book hotels or flights, I earn a commission. The affiliate script is loaded once in &lt;code&gt;_document.js&lt;/code&gt; — it quietly monetises the intent that already exists in a travel app.&lt;/p&gt;

&lt;p&gt;The principle: build the product users love, then add monetisation that aligns with what they're already trying to do.&lt;/p&gt;


&lt;h2&gt;
  
  
  The UI Detail I'm Most Proud Of: HoloCards
&lt;/h2&gt;

&lt;p&gt;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.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleMouseMove&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useCallback&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;rect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;card&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getBoundingClientRect&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;rotX&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;clientY&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;rect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;top&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;rect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;rect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;rotY&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;clientX&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;rect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;left&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;rect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;rect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;card&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; 
    &lt;span class="s2"&gt;`perspective(600px) rotateX(&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;rotX&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;deg) rotateY(&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;rotY&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;deg) scale(1.02)`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It's a small detail, but it makes the app feel premium. In a world of flat UIs, tactile feedback stands out.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Animated Particle Background
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;It adds depth without being distracting, and it costs nothing performance-wise since the particles are tiny and the frame logic is simple.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I'd Do Differently
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Start with mobile.&lt;/strong&gt; I built desktop-first and retrofitted mobile. Next time I'd flip that — most travel searches happen on phones.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Invest earlier in the city data layer.&lt;/strong&gt; The hardest part wasn't the AI or the payments — it was curating good, accurate data for 20+ cities. This is the actual moat.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Add email capture before Stripe.&lt;/strong&gt; 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.&lt;/p&gt;




&lt;h2&gt;
  
  
  Lessons for Anyone Building AI Products
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The AI is not the product.&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cheap models are underrated.&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Monetise from day one, even if it makes you uncomfortable.&lt;/strong&gt; 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.&lt;/p&gt;




&lt;h2&gt;
  
  
  What's Next
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;After that: user accounts, saved itineraries, and guides for the Balkans and Nordics.&lt;/p&gt;




&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.tourl"&gt;🌐 Live app: jarvis-travel-nine.vercel.app&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Built with Next.js · Claude AI · Stripe · Vercel · ☕&lt;/em&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6fjybfm79mueavnlv62m.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6fjybfm79mueavnlv62m.jpg" alt=" " width="800" height="473"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>git</category>
    </item>
  </channel>
</rss>
