Volver al blog

How I Created the VanTrip Landing Page Using Only AI (and what I learned from the multilingual disaster)

#development#astro#AI
Featured image: How I Created the VanTrip Landing Page Using Only AI (and what I learned from the multilingual disaster)

Can you imagine creating your app's landing page without writing almost any code?
That's what I tried to do for VanTrip, my travel app (https://vantrip.app/), and although it was challenging, I learned valuable lessons about AI, modern stacks, and how important it is to understand the infrastructure before getting carried away by the "magic".

It all started with wanting to try Astro (without having any idea how it worked) and using AI as a copilot. The goal? To see how far I could get in a workday.


The Experiment: Can AI Create the Landing Page for Me?

My first attempt was direct:
I passed a design screenshot hoping that "magic would happen".
Total failure. The AI wasn't able to generate anything even remotely similar.

So I changed my approach: I asked it to structure the page by sections (hero, features, FAQ...), and that worked. In less than a day, I had a functional, clean, and modular landing page. I even thought about reusing it for other projects by just changing the text and branding.


What Went Wrong? The Problem with Astro + Firebase Hosting

I was deploying on Firebase Hosting, which works as a static CDN:

  • It only serves already generated files (.html, .css, .js).
  • It doesn't process requests in real-time.
  • It doesn't execute server code to detect language or customize content.

The AI kept suggesting impossible solutions, based on the official Astro documentation (which assumes a serverless environment or with middleware). And since I didn't make intermediate commits, the AI ended up breaking what was already working, and I couldn't go back.


How Did I Finally Solve It?

I implemented a physical folder structure with language-specific routes:

/dist/
  index.html        # English (default language)
  about.html        # "About" page in English
  /es/
    index.html      # Spanish
    about.html      # "About" page in Spanish

Additionally, I created reusable components that receive currentLang as a parameter, avoiding code duplication.

This solution works perfectly on static CDNs like Firebase Hosting because:

  • It doesn't require a server or real-time logic.
  • Each URL points to a real static file.
  • Better performance (less TTFB, no cold starts).
  • Simpler to cache and easier to maintain.
  • Predictable cost (no cloud functions running).

🛠️ Extra Tip: Guide the AI, Don't Let It Take Control

Before asking it to "do things", ask for a checklist of tasks and have it execute them one by one.
This allows you to:

  • Review each step before moving forward.
  • Make small and frequent commits.
  • Maintain total control of the structure.

Believe me, you'll avoid a lot of headaches.


Final Reflection: What I Learned from All This

  • AI accelerates, but it doesn't understand your project's architecture.
  • Official solutions aren't always the best for your specific case.
  • What seems like "a workaround" sometimes works better than complex solutions.
  • Make frequent commits. Otherwise, when something breaks, there's no going back.
  • Understanding the infrastructure before starting is key.
  • And most importantly: AI is a tool, not an architect.

Would I use AI for web development again?
Absolutely.

But now I know that I should keep key decisions under control and use AI as an executor, not as the architecture designer.


Have you experienced something similar? Has it happened to you that the simplest solution ends up working better than the "official" one?
I'll read you in the comments or via contact@monti.dev!