blog
Back

I Built a Guitar Marketplace in 5 Days Using AI Agents

Last week I decided to build a website for a small guitar shop called El Garaje de las Guitarras.

What surprised me the most is not the site itself.

It's how much can be built in just five days today when you combine modern frameworks, AI coding agents, and a bit of stubborn curiosity.

This is the story.

Day 1: The First Version

I started by building the UI using Stitch and connecting it via MCPs with Antigravity.

Within a few hours I had a working HTML, CSS, and JavaScript project.

But after looking at the requirements more carefully, I realized the architecture wouldn't scale well. The project needed reusable components, not static pages.

So I decided to migrate everything to Astro.

To do that, I used Claude Code to generate a complete migration plan.

Cost: about $5 in credits.

Worth it.

The plan was incredibly detailed — but it consumed all my credits before I could export it properly.

So I improvised.

I:

  • took screenshots
  • transcribed them with Google Keep
  • asked Gemini to reconstruct the formatting
  • exported everything to Markdown in Notion

Markdown turned out to be the perfect format for feeding the plan back into AI coding agents.

Day 2: AI Agents Doing the Heavy Lifting

I loaded the plan into Cursor and started implementing the Astro architecture.

After building several components and installing the framework, Cursor ran out of credits.

So I switched to Antigravity and continued from where Cursor had stopped.

Between both tools, the system ended up building most of the component structure.

Finally, I deployed the project using:

  • Supabase for the database
  • Vercel for SSR deployment

Supabase AI and Gemini inside the Antigravity console helped configure the database and deployment surprisingly fast.

At that point the app was already live.

Turning Voice Notes into Product Features

The client started sending feedback — mostly as WhatsApp voice messages.

Instead of listening and manually writing notes, I used a tool called TranscribeMe directly inside WhatsApp.

Then I passed the transcripts to Gemini and asked it to identify:

  • pain points
  • improvement opportunities
  • requested features

I processed the audio messages in batches.

After that, I asked Gemini to produce a structured report in Markdown.

That report was exported from Notion and fed directly into Antigravity, which implemented most of the changes automatically.

At that moment I realized something important:

The real productivity boost was not writing code faster. It was converting messy human feedback into structured engineering tasks.

The Admin Panel

Next I focused on the admin panel.

Using Supabase as the backend and Claude Opus to guide the implementation, I iterated for about six hours.

At the end of the process we had:

  • a polished UI
  • a product catalog
  • a working CRUD admin panel

The store owner could now manage guitars directly.

Solving a Real Problem: Importing the WhatsApp Catalog

The client had recently gone through three hernia surgeries, which made it difficult for him to manually upload products.

However, he already had a catalog inside WhatsApp Business.

So I tried to extract it automatically.

WhatsApp doesn't expose the catalog through a public URL, so the AI approach failed.

Instead, I opened the browser console and inspected the DOM.

Inside the page I found <div> elements containing:

  • product names
  • prices

From there the process was simple:

  1. copy a Supabase row example
  2. ask Gemini to match the schema
  3. paste the product data
  4. generate SQL INSERT statements

After running the queries in Supabase, all the products appeared on the website instantly.

The only missing part was images — which the owner could upload later.

Rethinking Checkout

Originally I implemented checkout via email messages.

The client hated it.

But he responds extremely fast on WhatsApp, so I redesigned the entire purchase flow.

Every product button now generates a pre-filled WhatsApp message.

Examples:

Reserve:

"Hi, I saw this [product_name] [product_id] and I want to reserve it."

Buy:

"Hi, I saw this [product_name] [product_id] and I want to buy it."

For a small shop, this is actually the most efficient checkout system possible.

No accounts. No payment gateway complexity. Just conversation.

My Failed AI Experiment

On Sunday I tried something ambitious.

I attempted to implement AI semantic search using OpenAI embeddings.

The idea was simple:

A user could type:

"a guitar for blues"

The system would compute embedding similarity between the query and product descriptions and return the most relevant guitar.

In practice, my implementation broke the database and several functions stopped working.

It was my first time integrating AI search into an Astro project, and I clearly underestimated the complexity.

So I stopped.

Performance Instead of Complexity

Instead of fighting the embedding system, I shifted focus to performance optimization.

I initially wrote an 80-point optimization plan covering:

  • image optimization
  • asset loading
  • caching
  • performance monitoring
  • testing

But halfway through I applied the Pareto Principle.

Focus on the 20% of changes that create 80% of the improvement.

After implementing only the most impactful optimizations, PageSpeed Insights reported:

  • Performance: 84
  • Best Practices: 100
  • SEO: 100
  • Accessibility: 91

Good enough. Improving further would probably require 5x more effort.

UX Improvements

With the remaining time I added several improvements:

  • image magnifier zoom
  • fullscreen carousel
  • lightweight shopping cart

The cart has a twist.

Checkout still happens through WhatsApp.

When the user presses buy, a message is generated like:

"Hello, I want to buy these products: [product1], [product2], [product3] that I saw on the website."

This will be useful when the store begins selling accessories like strings and small gear.

I also added a Reserve button, in case someone wants to secure a guitar quickly.

Monday: Debugging Everything

Monday started badly.

The client reported he couldn't upload images or products.

My failed AI experiment had corrupted parts of the database.

So I:

  • removed all embedding experiments
  • dropped the affected structures
  • rebuilt the database
  • re-executed the SQL import script

By 14:30 everything was working again.

A Fun Feature: Guitar Tuner

To finish the day, I added a feature I personally wanted:

A guitar tuner built directly into the website.

Using a small library called Pitchy, it was surprisingly easy to implement.

Now visitors can tune their guitars directly from the site.

I tested it immediately.

My guitar sounds great again.

Tech Stack

Here is the stack used to build El Garaje de las Guitarras in five days.

Frontend

  • Astro — component-based static + SSR framework
  • Vite — asset bundling and optimization
  • Vanilla JavaScript — lightweight client interactions

Backend

  • Supabase — PostgreSQL database + backend services
  • Supabase Storage — product image hosting

Deployment

  • Vercel — SSR hosting and edge delivery

AI & Development Tools

  • Claude Code / Claude Opus — architecture planning and code generation
  • Gemini — data transformation, SQL generation, and analysis
  • Antigravity — AI coding agent orchestration
  • Cursor — AI-assisted development environment

Media

  • Vimeo — hosting guitar review videos

Additional Features

  • Pitchy — browser-based guitar tuner
  • Web Vitals API — performance monitoring

Architecture Overview

The application follows a simple architecture optimized for speed and maintainability.

User Browser
     │
     ▼
Vercel (Astro SSR)
     │
     ▼
Supabase API
     │
     ▼
PostgreSQL Database

Key characteristics:

  • Server-side rendering with Astro
  • Supabase as backend-as-a-service
  • WhatsApp used as the checkout mechanism
  • Lightweight JavaScript for client features

Why This Architecture Works Well for Small Businesses

Many small businesses don't need complex ecommerce platforms.

Instead of adding:

  • payment gateways
  • authentication systems
  • complex checkout flows

this system uses WhatsApp as the transaction channel, which is already how the store owner communicates with customers.

This keeps the system:

  • simple
  • cheap
  • fast to maintain

What I Would Do Next

If the store grows, the next steps would probably be:

  • implement semantic search with embeddings
  • add inventory tracking
  • integrate payments
  • build analytics dashboards

But for the current size of the business, the system is already more than enough.

Final Thought

Five days ago this project didn't exist.

Now it has:

  • a full marketplace
  • an admin panel
  • a product catalog
  • WhatsApp-based checkout
  • performance optimization
  • a guitar tuner

The biggest lesson?

The future of development isn't just writing code.

It's learning how to orchestrate AI tools, agents, and ideas effectively.