Creé una Tienda Online GRATIS con Google AI Studio + Gemini 3.1 Pro + Supabase + Hostinger

Google AI Studio, panel de ajustes avanzados con la opción 'Framework' configurada en Next.js

Este artículo muestra cómo montar una tienda online funcional sin escribir prácticamente código: diseño automático con Google AI Studio (usando Gemini 3.1 Pro), datos reales guardados en Supabase y despliegue en Hostinger. La idea es tener una tienda de ejemplo —VibeBlend, una marca ficticia de café de especialidad— donde los productos, variantes y pedidos se conectan a una base de datos real y todo se publica en producción.

Tabla de contenidos

Qué cambió en Google AI Studio 🧭

Google AI Studio dejó de ser solo una herramienta de diseño asistido. Las novedades clave que facilitan crear aplicaciones web reales son:

  • Modelos más potentes: integración con Gemini 3.1 Pro para generación de texto e imágenes de alta calidad.
  • Soporte de frameworks: además de React y Angular, ahora se puede elegir Next.js, ideal para SEO y tráfico orgánico.
  • Variables de entorno: posibilidad de definir y usar variables públicas desde la plataforma, lo que abre integraciones con servicios externos (bases de datos, autenticación, APIs, etc.).
  • Generador de imágenes integrado: plugins como Nano Banana permiten crear assets visuales coherentes con la marca de forma automática.

Elegir Next.js como framework desde el inicio es especialmente recomendable cuando el objetivo es atraer tráfico orgánico. Con Next.js tienes mejoras automáticas de SEO y rendimiento que un sitio estático o cliente puro no ofrece.

Diseño y generación de assets con Gemini y Nano Banana 🖼️

El flujo de trabajo típico para diseño en AI Studio es: indicar el prompt, seleccionar modelo (en este caso Gemini 3.1 Pro), escoger framework (Next.js) y pulsar Build. El sistema genera la estructura del proyecto, las páginas y un mockup de la tienda.

Las imágenes que trae por defecto suelen ser de stock genérico. Para que el sitio tenga coherencia visual conviene usar generadores integrados como Nano Banana o la funcionalidad de imagen del modelo. Puedes pedir descripciones precisas (por ejemplo: “bolsa de café de especialidad sobre escritorio de madera, vista al océano, luz de mañana, ByteBlend, Fortaleza, Brasil”) y generar varias variantes hasta que quede acorde a la marca.

Generador de imágenes en AI Studio mostrando el prompt 'Una bolsa de café de especialidad...' con opciones de tamaño y relación de aspecto y botón Generar Imagen

Importante: algunos modelos de imagen son de pago. Si quieres economizar usa alternativas menos costosas o versiones gratuitas del generador. El balance entre coste y calidad es una decisión de producto.

Configurar Supabase en 10 minutos 🛠️

Supabase es la alternativa open source a Firebase que integra base de datos PostgreSQL, autenticación, almacenamiento y funciones en tiempo real. Para esta tienda vamos a usar Supabase como la fuente de verdad para productos, variantes y pedidos.

  1. Ve a supabase.com y crea una cuenta gratuita.
  2. En el dashboard crea un proyecto nuevo. Dale un nombre (por ejemplo, byblend) y elige la región más cercana a tu audiencia.
  3. Una vez creado, en Project Settings > App Keys copia la Legacy Anon (Anon Public). Esa clave es pública y se usa desde el cliente para operaciones ordinarias.
  4. En Project Overview copia la URL del proyecto (será algo como https://xxxx.supabase.co).
Formulario de creación de proyecto en Supabase con 'vibeblend' como nombre, contraseña establecida y región seleccionada

Con la URL y la clave anon listas, el siguiente paso es crear las tablas necesarias. Aquí tienes un esquema SQL útil para este ejemplo. Crea estas tablas desde el SQL Editor de Supabase y ejecútalo.

-- Esquema básico para tienda de ejemplo
  create table products (
    id uuid primary key default gen_random_uuid(),
    name text not null,
    description text,
    handle text unique,
    price numeric not null,
    created_at timestamptz default now()
  );

  create table variants (
    id uuid primary key default gen_random_uuid(),
    product_id uuid references products(id) on delete cascade,
    name text,
    sku text,
    price numeric,
    stock int default 0
  );

  create table orders (
    id uuid primary key default gen_random_uuid(),
    email text,
    name text,
    address text,
    product_id uuid references products(id),
    variant_id uuid references variants(id),
    quantity int default 1,
    status text default 'pending',
    created_at timestamptz default now()
  );
Schema visualizer de Supabase mostrando las tablas orders, variants y products conectadas

Al ejecutar el SQL verás mensajes de éxito y, en Database > Tables, las nuevas tablas creadas. Si necesitas campos adicionales (por ejemplo, dirección de envío separada, phone, o metadatos), agrégalos ahora. La ventaja de hacerlo desde el SQL Editor es que tienes control total del esquema.

Conectar AI Studio con Supabase usando variables de entorno 🔗

Gracias a la nueva funcionalidad de variables en AI Studio, es posible inyectar la NEXT_PUBLIC_SUPABASE_URL y la NEXT_PUBLIC_SUPABASE_ANON_KEY en el proyecto generado. Pasos clave:

  1. En AI Studio, al preparar la integración, indica las variables que el proyecto necesita. Normalmente se piden NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY.
  2. Pega la URL del proyecto Supabase como NEXT_PUBLIC_SUPABASE_URL.
  3. Pega la clave Anon Public como NEXT_PUBLIC_SUPABASE_ANON_KEY.
  4. Aplica los cambios y reconstruye el proyecto dentro de AI Studio.
Panel de AI Studio para introducir variables de entorno mostrando NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY

Nota importante sobre la clave anon: es de uso público para operaciones cliente seguras. Si necesitas acciones administrativas (por ejemplo, generar tokens o ejecutar funciones privilegiadas), usa claves de servicio desde el servidor y nunca las expongas en el cliente.

En este flujo, AI Studio usa esos valores para reemplazar los datos estáticos por consultas a Supabase. Un punto habitual de fricción es que los nombres de tablas o columnas generados por la IA no coincidan exactamente con los del esquema en Supabase. Si ocurre esto, hay dos caminos:

  • Modificar el esquema en Supabase para que coincida con el mapeo que la aplicación espera.
  • Modificar el código de la aplicación (o el mapeo que AI Studio genera) para apuntar a los nombres de columnas correctos.

En la práctica, cualquiera de las dos opciones funciona. Para empezar rápido, ajusta el esquema con el SQL que compartí más arriba y luego refina nombres y campos según convenga.

Validando la tienda: hacer pedidos y revisar la base de datos ✅

Con todo conectado, es momento de probar el flujo de compra. Desde la interfaz generada:

  1. Selecciona un producto y una variante.
  2. Rellena el formulario de pedido (nombre, email, dirección).
  3. Enviar pedido y confirmar que la app responde con “pedido confirmado”.
Modal de 'Completar Pedido' en la tienda VibeBlend mostrando campos nombre y email y el botón 'Confirmar Pedido'.

Después ve a Supabase > Table Editor > orders y verifica que la fila se haya creado correctamente. Comprueba que el status sea pending, la cantidad y la referencia al producto y variante sean correctas.

Editor de tablas de Supabase mostrando la tabla 'orders' con una fila visible que incluye buyer_name, buyer_email, quantity y status

Si no aparece el email o algún campo, revisa la correspondencia entre el formulario y los nombres de las columnas en la tabla orders. Habitualmente se trata de un nombre distinto (por ejemplo email_address vs email), lo que provoca errores en tiempo de ejecución. Ajusta el SQL o el mapeo como expliqué antes.

Publicar: GitHub, descarga o Hostinger 🚀

Una vez la tienda está lista, hay tres rutas principales para publicar:

  • Conectar el proyecto a GitHub directamente desde AI Studio. Esto crea un repositorio con todo el código generado y permite CI/CD.
  • Descargar el proyecto y subirlo manualmente a un hosting si prefieres no usar GitHub. Es práctico para pruebas rápidas, pero poco escalable.
  • Subir a Hostinger (u otro proveedor) y configurar las variables de entorno en el panel de control de producción.

Recomiendo conectar con GitHub desde el inicio. Mantener el código en Git facilita revertir versiones (AI Studio tiene control de versiones integradas) y automatizar despliegues. Si eliges Hostinger, el flujo es sencillo: conectar GitHub o subir archivos manualmente, indicar que es una app Node.js / Next.js, configurar variables de entorno (las mismas que usaste en AI Studio) y desplegar.

Página del repositorio 'vibeblend' en GitHub mostrando carpetas como app, components, hooks y archivos de configuración.

Cuando el deploy termine podrás acceder a la URL pública de tu tienda y comprobar que los pedidos desde la web llegan a Supabase en tiempo real.

Página pública de la tienda VibeBlend mostrando el hero con el título 'El blend que impulsa la creación' visible en el navegador.

Si usas Hostinger y quieres apoyar recursos compartidos, el enlace usado en este ejemplo es: hostinger.com/rodrigo. También existe la opción de usar Google Cloud desde AI Studio para despliegues directos.

Código esencial para conectar Supabase en Next.js 💻

Si quieres editar o entender el código generado, aquí tienes los snippets más comunes.

Instalación del cliente Supabase:

npm install @supabase/supabase-js
  # o
  yarn add @supabase/supabase-js

Crear un cliente reutilizable (ejemplo en TypeScript):

import { createClient } from '@supabase/supabase-js';

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

  export const supabase = createClient(supabaseUrl!, supabaseAnonKey!);

Ejemplo sencillo para consultar productos desde el cliente (página Next.js):

import { supabase } from '../lib/supabaseClient';

  export async function getStaticProps() {
    const { data: products, error } = await supabase
      .from('products')
      .select('id, name, price, description');

    return {
      props: {
        products: products || []
      },
      revalidate: 60
    };
  }

Y para insertar un pedido desde un formulario (client-side):

const { data, error } = await supabase
    .from('orders')
    .insert([{
      email,
      name,
      address,
      product_id: selectedProductId,
      variant_id: selectedVariantId,
      quantity
    }]);

Estos fragmentos te permiten entender cómo la app generada por AI Studio trabaja con Supabase. Si prefieres más seguridad para escribir en la base de datos, expón una API de servidor (Serverless Function o API Route en Next.js) y usa allí una clave de servicio restringida.

Consejos, límites y buenas prácticas ⚙️

A continuación algunas recomendaciones que evitan dolores de cabeza:

  • Variables públicas vs privadas: NEXT_PUBLIC_* son visibles desde el cliente. Está bien usarlas con la clave anon de Supabase, pero no expongas claves administrativas ni service_role en el cliente.
  • Usar GitHub para desplegar: evita subir archivos manualmente en cada cambio. Automatiza el flujo con GitHub Actions o el deploy integrado del host.
  • Revisar nombres de columnas: cuando la IA genera código puede usar nombres distintos. Mantén consistencia entre el esquema y el mapeo en el frontend.
  • Optimiza imágenes: si generas imágenes desde el modelo, comprímelas y usa formatos modernos. Next.js ofrece optimización de imágenes nativa.
  • SEO: aprovechar Next.js permite prerenderizar páginas de producto y mejorar títulos meta, Open Graph y velocidad, lo que impulsa tráfico orgánico.
  • Auditoría de seguridad: habilita reglas RLS en Supabase si necesitas controlar acceso a tablas por usuario autenticado.
  • Backups y migraciones: mantén scripts SQL para reproducir tu esquema y poder migrar próximamente; usa Git para versionar el código y también los scripts SQL.

Errores comunes y cómo solucionarlos 🐞

Algunos problemas vistos durante el flujo y sus soluciones:

  • Error al insertar email: suele deberse a diferencia de nombre de columnas. Solución: verificar el nombre en la tabla orders y ajustarlo en el frontend o en el SQL.
  • Imágenes de stock no relacionadas: usa prompts más específicos en el generador o cambia a un modelo de imágenes distinto (gratuito o de pago según presupuesto).
  • Deploy fallido por token: revisa que las variables de entorno en producción coincidan exactamente con las usadas en desarrollo.

Recursos y enlaces útiles 🔗

Enlaces y recursos mencionados y utilizados en este proceso:

  • Skool (comunidad y recursos): https://www.skool.com/vibe-coding-crea-apps-con-ia-5930
  • PrimeraApp (herramienta de la comunidad): https://PrimeraApp.com
  • Hostinger (enlace con descuento): https://hostinger.com/rodrigo
  • Prompt usado (documento): https://docs.google.com/document/d/1-iAoTakjiNMsH_lz7rdRIWtySrMNMtqhWRpWX_8PDro/edit?usp=sharing
  • Playlist con más proyectos similares: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI
  • Link del proyecto de ejemplo / referencia: https://www.youtube.com/watch?v=kbSkcjDu9cU
  • Supabase: https://supabase.com

Conclusión 🎯

Con las últimas mejoras en Google AI Studio y la potencia de Gemini 3.1 Pro, es posible construir prototipos y aplicaciones reales —como una tienda online de café— con integración a bases de datos y despliegue en producción sin necesidad de programar todo desde cero. Next.js mejora SEO y rendimiento, Supabase aporta una base de datos en tiempo real fácil de configurar y Hostinger permite publicar de forma económica y rápida.

El flujo completo que recomiendo: diseñar en AI Studio (usar Next.js), generar assets coherentes, crear el esquema en Supabase (SQL), conectar mediante variables de entorno públicas para pruebas, validar inserts y consultas, versionar en GitHub y finalmente desplegar en producción ajustando variables en el hosting. A partir de ahí puedes iterar: mejorar UX, añadir pagos, autenticación y más.

Si quieres replicar este proyecto, copia el prompt, crea tu Supabase, ejecuta el SQL y conecta las variables. Con un poco de paciencia tendrás una tienda funcional y publicable en cuestión de horas.

Éxito construyendo tu tienda y experimentando con estas herramientas.

Entradas relacionadas