Cómo Crear una Demo con Claude Code: Vibecoding con Supabase y Vercel

El vibecoding es un nuevo paradigma de desarrollo de software en el que el programador guía a un agente de IA a través de instrucciones en lenguaje natural, dejando que la inteligencia artificial escriba el código efectivo. El término fue acuñado por Andrej Karpathy (co-fundador de OpenAI y ex Director of AI de Tesla) en un célebre tweet de febrero de 2025: "Hay un nuevo tipo de coding que llamo vibecoding, donde te rindes completamente a las vibes, abrazas los exponenciales y olvidas que el código existe."

En este artículo veremos cómo construir una demo completa y funcional usando Claude Code como agente AI, Supabase como backend (base de datos, autenticación, API) y Vercel para el deploy — todo aprovechando exclusivamente los tiers gratuitos de estos servicios.

1. Qué es el Vibecoding y por qué es revolucionario

El vibecoding representa un cambio de paradigma fundamental en el desarrollo de software. En lugar de escribir código línea por línea, el developer:

1. Describe lo que quiere en lenguaje natural.
2. El agente AI genera el código completo.
3. El developer revisa, prueba e itera.

Por qué funciona

• Velocidad: un proyecto que requeriría días puede construirse en horas.
• Accesibilidad: incluso quien no es un developer experto puede construir productos funcionales.
• Iteración rápida: puedes probar ideas y pivotar mucho más rápidamente.
• Foco en el producto: te concentras en el qué en lugar del cómo.

Cuándo usar el vibecoding

El vibecoding es perfecto para:

• Demos y MVP: construir rápidamente un prototipo para validar una idea.
• Hackathon: crear un producto funcional en pocas horas.
• Side project: explorar nuevas tecnologías sin invertir semanas.
• Proof of Concept: demostrar la viabilidad técnica a stakeholders o inversores.

Atención: El vibecoding es excelente para demos y prototipos. Para aplicaciones production-grade con requisitos de seguridad y escalabilidad elevados, sigue siendo fundamental una revisión exhaustiva del código generado.

2. El stack tecnológico: Claude Code + Supabase + Vercel

Claude Code

Claude Code es el agente de coding AI de Anthropic. Funciona directamente en tu terminal y puede:

• Leer y comprender todo el codebase.
• Crear, modificar y eliminar archivos.
• Ejecutar comandos en el terminal.
• Interactuar con APIs y servicios externos.
• Gestionar el versionado con Git.
• Iterar autónomamente sobre errores y bugs.

# Installazione di Claude Code
npm install -g @anthropic-ai/claude-code

# Avvio in una directory di progetto
cd my-project
claude

Supabase (Tier gratuito)

Supabase es una alternativa open source a Firebase que ofrece:

• Base de datos PostgreSQL: una base de datos relacional completa.
• Autenticación: login con email, Google, GitHub, etc.
• API REST y Realtime: generadas automáticamente desde tu schema.
• Storage: para archivos e imágenes.
• Edge Functions: funciones serverless.

El tier gratuito incluye:

| Recurso | Límite gratuito | |---------|----------------| | Database | 500 MB | | Storage | 1 GB | | Bandwidth | 5 GB | | Edge Function invocations | 500K/mes | | Usuarios autenticados | Ilimitados | | Proyectos | 2 proyectos activos |

Vercel (Tier gratuito)

Vercel es la plataforma de deploy perfecta para aplicaciones Next.js:

• Deploy automático desde GitHub.
• Preview deployments para cada branch y PR.
• CDN global para un rendimiento óptimo.
• Serverless Functions incluidas.
• Analytics básicas gratuitas.

El tier gratuito incluye:

| Recurso | Límite gratuito | |---------|----------------| | Bandwidth | 100 GB/mes | | Serverless Function execution | 100 GB-horas/mes | | Builds | 6.000 minutos/mes | | Proyectos | Ilimitados | | Deploys | Ilimitados |

3. Setup inicial: preparar el entorno

Prerrequisitos

Antes de comenzar, asegúrate de tener:

• Node.js 18+ instalado.
• Git configurado.
• Una cuenta de GitHub.
• Una cuenta de Supabase (gratuita en supabase.com).
• Una cuenta de Vercel (gratuita en vercel.com).
• Claude Code instalado (npm install -g @anthropic-ai/claude-code).

Step 1: Crear el proyecto

Abre el terminal y lanza Claude Code:

mkdir my-demo-app && cd my-demo-app
claude

Ahora puedes empezar a dar instrucciones a Claude Code en lenguaje natural:

Tú: Crea un proyecto Next.js 15 con App Router, TypeScript, Tailwind CSS y
shadcn/ui. Inicializa también un repositorio Git.

Claude Code ejecutará automáticamente:

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

Step 2: Configurar Supabase

1. Ve a supabase.com y crea un nuevo proyecto.
2. Toma nota del Project URL y la anon key en la sección Settings > API.
3. Vuelve al terminal con Claude Code:

Tú: Agrega Supabase al proyecto. Crea un archivo .env.local con las variables
NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY. Configura el cliente
Supabase con soporte SSR para Next.js App Router.

Claude Code creará la configuración completa:

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. Construir la demo: una app de gestión de tareas

Construyamos una demo concreta: una app de gestión de tareas con autenticación, CRUD completo e interfaz moderna.

Definir el esquema de la base de datos

Da instrucciones a Claude Code para crear el esquema:

Tú: Crea una migración SQL para Supabase con las siguientes tablas:

1. profiles: id (uuid, FK a auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   a profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum:
   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
   FK a projects), assigned_to (uuid, FK a profiles), due_date (timestamp),
   created_at, updated_at

Habilita Row Level Security en todas las tablas y crea las policies apropiadas.

Claude Code generará una migración completa:

-- Crea i tipi enum
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Tabella profiles
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tabella projects
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tabella tasks
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Abilita RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Policy per profiles
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Policy per projects
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Policy per tasks
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

Puedes ejecutar esta migración directamente desde el dashboard de Supabase (SQL Editor) o a través de la CLI.

Generar los tipos TypeScript

Tú: Genera los tipos TypeScript desde la base de datos Supabase y guárdalos en src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

Construir la interfaz de usuario

Ahora viene la parte más poderosa del vibecoding. Da instrucciones de alto nivel a Claude Code:

Tú: Crea una página dashboard para la app de gestión de tareas con:

1. Sidebar con navegación entre proyectos
2. Vista Kanban con 3 columnas (Todo, In Progress, Done) con drag & drop
3. Modal para crear/editar tareas
4. Header con avatar del usuario y logout
5. Diseño moderno con shadcn/ui y Tailwind

Usa los datos de Supabase con React Server Components donde sea posible
y Client Components solo donde se necesite interactividad.

Claude Code construirá toda la interfaz, componente por componente.

Agregar la autenticación

Tú: Agrega un sistema de autenticación completo con:

1. Página de login con email/password y login con GitHub
2. Página de registro
3. Middleware para proteger las rutas autenticadas
4. Redirect automático para usuarios no autenticados
5. Creación automática del perfil después del registro

Claude Code configurará el middleware de Next.js y las páginas de auth:

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. Patrones avanzados de vibecoding

El prompting iterativo

El secreto del vibecoding eficaz es la iteración. No intentes describir todo en un solo prompt. Procede por pasos:

Step 1: "Crea el layout base con header y sidebar"
Step 2: "Agrega la lista de proyectos en la sidebar con un botón para crear nuevos"
Step 3: "Crea la vista Kanban en el área principal"
Step 4: "Agrega el drag & drop entre las columnas"
Step 5: "Implementa el modal para crear nuevas tareas"
Step 6: "Agrega las notificaciones toast para dar feedback al usuario"

Tip: Cuanto más específico y contextualizado sea el prompt, mejor será el resultado. Claude Code tiene acceso a todo el codebase, por lo que puede integrar nuevas funcionalidades de manera coherente.

Gestión de errores

Cuando algo no funciona (y sucederá), puedes simplemente decir:

Tú: Tengo este error en la consola: "TypeError: Cannot read property 'map' of undefined"
en el componente TaskList. Corrígelo.

Claude Code analizará el código, identificará el problema y lo resolverá.

Refactoring con AI

Tú: El componente Dashboard se ha vuelto demasiado grande. Divídelo en componentes
más pequeños y reutilizables, manteniendo la misma funcionalidad.

Testing

Tú: Agrega tests con Vitest para las utility functions y tests con Playwright
para el flujo de autenticación y creación de tareas.

6. Deploy en Vercel: del código al mundo

Step 1: Subir a GitHub

Tú: Crea un .gitignore apropiado, haz commit de todo y sube a un nuevo
repositorio GitHub llamado "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

Step 2: Conectar Vercel

1. Ve a vercel.com y haz clic en "Add New Project".
2. Importa el repositorio de GitHub recién creado.
3. Agrega las variables de entorno:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Haz clic en "Deploy".

Step 3: Configurar el dominio (opcional)

Vercel proporciona una URL gratuita tipo my-demo-app.vercel.app. Para un dominio personalizado:

Tú: Agrega la configuración para un dominio personalizado en vercel.json

Preview Deployments

Cada vez que abres un Pull Request en GitHub, Vercel creará automáticamente un preview deployment con una URL única. Perfecto para mostrar los cambios antes del merge.

7. Optimizaciones para la demo

Rendimiento

Tú: Optimiza el rendimiento de la app:
1. Agrega loading states con Suspense y skeleton
2. Implementa caching con unstable_cache de Next.js
3. Optimiza las imágenes con next/image
4. Agrega metadata SEO para cada página

Realtime con Supabase

Una feature que siempre impresiona en las demos es el realtime:

Tú: Agrega sincronización realtime para las tareas usando Supabase Realtime.
Cuando un usuario actualice una tarea, todos los demás usuarios deben ver
el cambio en tiempo real sin hacer refresh.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

Modo oscuro

Tú: Agrega soporte de modo oscuro con toggle en el header.
Usa las clases dark de Tailwind y guarda la preferencia en localStorage.

8. Buenas prácticas para un vibecoding eficaz

1. Sé específico en los prompts

❌ "Haz una página bonita"
✅ "Crea una landing page con hero section con gradiente violeta-azul, una sección
   de features con 3 cards con íconos, y un CTA con botón naranja"

2. Da contexto

❌ "Agrega autenticación"
✅ "Agrega autenticación con Supabase Auth. El proyecto usa Next.js 15 App
   Router con TypeScript. Quiero login con email/password y OAuth con GitHub.
   Usa el patrón SSR con @supabase/ssr"

3. Itera en pequeños pasos

No intentes construir todo en un solo prompt. Procede por incrementos:

1. Layout base
2. Una feature a la vez
3. Estilos y pulido
4. Gestión de errores
5. Testing

4. Revisa el código generado

El vibecoding no significa no leer el código. Revisa siempre:

• Seguridad: RLS policies, validación de input, sanitización de datos.
• Rendimiento: queries N+1, componentes innecesariamente client-side.
• Buenas prácticas: estructura del proyecto, naming conventions.

5. Usa Git estratégicamente

Tú: Haz commit de los cambios con un mensaje descriptivo después de cada feature completada.

Esto te permite volver atrás si algo sale mal.

9. Costos: ¿realmente todo gratis?

Este es un resumen de los costos de cada servicio:

| Servicio | Plan gratuito | Cuándo se paga | |----------|---------------|----------------| | Claude Code | Requiere un plan Anthropic (a partir de $20/mes) o API key | De inmediato, pero el valor es enorme | | Supabase | Generoso free tier (2 proyectos, 500MB DB) | Al superar los límites del free tier | | Vercel | Free tier para proyectos personales | Para equipos o uso comercial | | GitHub | Gratuito para repos públicos y privados | Features enterprise |

Nota: Claude Code requiere una suscripción o créditos de API, pero el retorno de la inversión en términos de velocidad de desarrollo es extraordinario. Para una demo o MVP, el costo total es del orden de $20.

Alternativas gratuitas para la IA

Si quieres mantener el costo en cero absoluto, puedes usar:

• Cursor (free tier con limitaciones).
• GitHub Copilot (gratuito para estudiantes y open source).
• Codeium/Windsurf (tier gratuito generoso).

10. De la demo al producto: próximos pasos

Una vez que tu demo esté en vivo, así es como proceder:

1. Recoge feedback: comparte la demo con potenciales usuarios y recoge opiniones.
2. Itera rápidamente: usa el vibecoding para implementar los cambios solicitados.
3. Monitorea las métricas: Vercel Analytics y el Dashboard de Supabase te dan datos esenciales.
4. Escala cuando sea necesario: pasa a los planes de pago solo cuando hayas validado la demanda.

Conclusión

El vibecoding con Claude Code, Supabase y Vercel representa una combinación poderosísima para construir demos y MVPs en tiempo récord. Lo que antes requería semanas de desarrollo ahora puede realizarse en pocas horas, con un nivel de calidad sorprendente.

La clave es abordar el vibecoding con la mentalidad correcta: no se trata de "no saber programar", sino de amplificar tus capacidades con herramientas de IA. Cuanto más conozcas las tecnologías subyacentes (React, SQL, autenticación, deploy), más eficaz serás al guiar al agente AI hacia el resultado deseado.

El futuro del desarrollo de software está aquí, y el costo para comenzar nunca ha sido tan bajo. Crea tu demo, valídala con usuarios reales y construye el próximo gran producto.

Checklist para tu primera demo:

• [x] Claude Code instalado y configurado
• [x] Proyecto Supabase creado con esquema de base de datos
• [x] Proyecto Next.js inicializado con shadcn/ui
• [x] Autenticación configurada
• [x] CRUD completo implementado
• [x] UI moderna y responsive
• [x] Deploy en Vercel realizado
• [x] URL compartible listo para el feedback