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

spinny:~/writing $ less create-demo-claude-code-vibecoding.md

1 
2El **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."_
3 
4En 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.
5 
6## 1. Qué es el Vibecoding y por qué es revolucionario
7 
8El 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:
9 
101. **Describe** lo que quiere en lenguaje natural.
112. **El agente AI** genera el código completo.
123. **El developer** revisa, prueba e itera.
13 
14### Por qué funciona
15 
16- **Velocidad**: un proyecto que requeriría días puede construirse en horas.
17- **Accesibilidad**: incluso quien no es un developer experto puede construir productos funcionales.
18- **Iteración rápida**: puedes probar ideas y pivotar mucho más rápidamente.
19- **Foco en el producto**: te concentras en el _qué_ en lugar del _cómo_.
20 
21```mermaid
22flowchart LR
23    A[Idea] --> B[Prompt in linguaggio naturale]
24    B --> C[Claude Code genera il codice]
25    C --> D[Review e test]
26    D --> E[Iterazione]
27    E --> B
28    D --> F[Deploy su Vercel]
29```
30 
31### Cuándo usar el vibecoding
32 
33El vibecoding es perfecto para:
34 
35- **Demos y MVP**: construir rápidamente un prototipo para validar una idea.
36- **Hackathon**: crear un producto funcional en pocas horas.
37- **Side project**: explorar nuevas tecnologías sin invertir semanas.
38- **Proof of Concept**: demostrar la viabilidad técnica a stakeholders o inversores.
39 
40> **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.
41 
42## 2. El stack tecnológico: Claude Code + Supabase + Vercel
43 
44### Claude Code
45 
46Claude Code es el agente de coding AI de Anthropic. Funciona directamente en tu terminal y puede:
47 
48- Leer y comprender todo el codebase.
49- Crear, modificar y eliminar archivos.
50- Ejecutar comandos en el terminal.
51- Interactuar con APIs y servicios externos.
52- Gestionar el versionado con Git.
53- Iterar autónomamente sobre errores y bugs.
54 
55```bash
56# Installazione di Claude Code
57npm install -g @anthropic-ai/claude-code
58 
59# Avvio in una directory di progetto
60cd my-project
61claude
62```
63 
64### Supabase (Tier gratuito)
65 
66Supabase es una alternativa open source a Firebase que ofrece:
67 
68- **Base de datos PostgreSQL**: una base de datos relacional completa.
69- **Autenticación**: login con email, Google, GitHub, etc.
70- **API REST y Realtime**: generadas automáticamente desde tu schema.
71- **Storage**: para archivos e imágenes.
72- **Edge Functions**: funciones serverless.
73 
74El tier gratuito incluye:
75 
76| Recurso | Límite gratuito |
77|---------|----------------|
78| Database | 500 MB |
79| Storage | 1 GB |
80| Bandwidth | 5 GB |
81| Edge Function invocations | 500K/mes |
82| Usuarios autenticados | Ilimitados |
83| Proyectos | 2 proyectos activos |
84 
85### Vercel (Tier gratuito)
86 
87Vercel es la plataforma de deploy perfecta para aplicaciones Next.js:
88 
89- **Deploy automático** desde GitHub.
90- **Preview deployments** para cada branch y PR.
91- **CDN global** para un rendimiento óptimo.
92- **Serverless Functions** incluidas.
93- **Analytics** básicas gratuitas.
94 
95El tier gratuito incluye:
96 
97| Recurso | Límite gratuito |
98|---------|----------------|
99| Bandwidth | 100 GB/mes |
100| Serverless Function execution | 100 GB-horas/mes |
101| Builds | 6.000 minutos/mes |
102| Proyectos | Ilimitados |
103| Deploys | Ilimitados |
104 
105## 3. Setup inicial: preparar el entorno
106 
107### Prerrequisitos
108 
109Antes de comenzar, asegúrate de tener:
110 
111- **Node.js 18+** instalado.
112- **Git** configurado.
113- Una cuenta de **GitHub**.
114- Una cuenta de **Supabase** (gratuita en [supabase.com](https://supabase.com)).
115- Una cuenta de **Vercel** (gratuita en [vercel.com](https://vercel.com)).
116- **Claude Code** instalado (`npm install -g @anthropic-ai/claude-code`).
117 
118### Step 1: Crear el proyecto
119 
120Abre el terminal y lanza Claude Code:
121 
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126 
127Ahora puedes empezar a dar instrucciones a Claude Code en lenguaje natural:
128 
129```
130Tú: Crea un proyecto Next.js 15 con App Router, TypeScript, Tailwind CSS y
131shadcn/ui. Inicializa también un repositorio Git.
132```
133 
134Claude Code ejecutará automáticamente:
135 
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141 
142### Step 2: Configurar Supabase
143 
1441. Ve a [supabase.com](https://supabase.com) y crea un nuevo proyecto.
1452. Toma nota del **Project URL** y la **anon key** en la sección Settings > API.
1463. Vuelve al terminal con Claude Code:
147 
148```
149Tú: Agrega Supabase al proyecto. Crea un archivo .env.local con las variables
150NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY. Configura el cliente
151Supabase con soporte SSR para Next.js App Router.
152```
153 
154Claude Code creará la configuración completa:
155 
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159 
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167 
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172 
173export async function createClient() {
174  const cookieStore = await cookies();
175 
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194 
195## 4. Construir la demo: una app de gestión de tareas
196 
197Construyamos una demo concreta: una **app de gestión de tareas** con autenticación, CRUD completo e interfaz moderna.
198 
199### Definir el esquema de la base de datos
200 
201Da instrucciones a Claude Code para crear el esquema:
202 
203```
204Tú: Crea una migración SQL para Supabase con las siguientes tablas:
205 
2061. profiles: id (uuid, FK a auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   a profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK a projects), assigned_to (uuid, FK a profiles), due_date (timestamp),
213   created_at, updated_at
214 
215Habilita Row Level Security en todas las tablas y crea las policies apropiadas.
216```
217 
218Claude Code generará una migración completa:
219 
220```sql
221-- Crea i tipi enum
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224 
225-- Tabella profiles
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232 
233-- Tabella projects
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241 
242-- Tabella tasks
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255 
256-- Abilita RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260 
261-- Policy per profiles
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266 
267-- Policy per projects
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276 
277-- Policy per tasks
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295 
296Puedes ejecutar esta migración directamente desde el dashboard de Supabase (SQL Editor) o a través de la CLI.
297 
298### Generar los tipos TypeScript
299 
300```
301Tú: Genera los tipos TypeScript desde la base de datos Supabase y guárdalos en src/types/database.ts
302```
303 
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307 
308### Construir la interfaz de usuario
309 
310Ahora viene la parte más poderosa del vibecoding. Da instrucciones de alto nivel a Claude Code:
311 
312```
313Tú: Crea una página dashboard para la app de gestión de tareas con:
314 
3151. Sidebar con navegación entre proyectos
3162. Vista Kanban con 3 columnas (Todo, In Progress, Done) con drag & drop
3173. Modal para crear/editar tareas
3184. Header con avatar del usuario y logout
3195. Diseño moderno con shadcn/ui y Tailwind
320 
321Usa los datos de Supabase con React Server Components donde sea posible
322y Client Components solo donde se necesite interactividad.
323```
324 
325Claude Code construirá toda la interfaz, componente por componente.
326 
327### Agregar la autenticación
328 
329```
330Tú: Agrega un sistema de autenticación completo con:
331 
3321. Página de login con email/password y login con GitHub
3332. Página de registro
3343. Middleware para proteger las rutas autenticadas
3354. Redirect automático para usuarios no autenticados
3365. Creación automática del perfil después del registro
337```
338 
339Claude Code configurará el middleware de Next.js y las páginas de auth:
340 
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345 
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348 
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369 
370  const { data: { user } } = await supabase.auth.getUser();
371 
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377 
378  return supabaseResponse;
379}
380 
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385 
386## 5. Patrones avanzados de vibecoding
387 
388### El prompting iterativo
389 
390El secreto del vibecoding eficaz es la **iteración**. No intentes describir todo en un solo prompt. Procede por pasos:
391 
392```
393Step 1: "Crea el layout base con header y sidebar"
394Step 2: "Agrega la lista de proyectos en la sidebar con un botón para crear nuevos"
395Step 3: "Crea la vista Kanban en el área principal"
396Step 4: "Agrega el drag & drop entre las columnas"
397Step 5: "Implementa el modal para crear nuevas tareas"
398Step 6: "Agrega las notificaciones toast para dar feedback al usuario"
399```
400 
401> **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.
402 
403### Gestión de errores
404 
405Cuando algo no funciona (y sucederá), puedes simplemente decir:
406 
407```
408Tú: Tengo este error en la consola: "TypeError: Cannot read property 'map' of undefined"
409en el componente TaskList. Corrígelo.
410```
411 
412Claude Code analizará el código, identificará el problema y lo resolverá.
413 
414### Refactoring con AI
415 
416```
417Tú: El componente Dashboard se ha vuelto demasiado grande. Divídelo en componentes
418más pequeños y reutilizables, manteniendo la misma funcionalidad.
419```
420 
421### Testing
422 
423```
424Tú: Agrega tests con Vitest para las utility functions y tests con Playwright
425para el flujo de autenticación y creación de tareas.
426```
427 
428## 6. Deploy en Vercel: del código al mundo
429 
430### Step 1: Subir a GitHub
431 
432```
433Tú: Crea un .gitignore apropiado, haz commit de todo y sube a un nuevo
434repositorio GitHub llamado "my-demo-app".
435```
436 
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442 
443### Step 2: Conectar Vercel
444 
4451. Ve a [vercel.com](https://vercel.com) y haz clic en "Add New Project".
4462. Importa el repositorio de GitHub recién creado.
4473. Agrega las variables de entorno:
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. Haz clic en "Deploy".
451 
452```mermaid
453flowchart LR
454    A[GitHub Push] --> B[Vercel Build]
455    B --> C[Deploy Automatico]
456    C --> D[URL Pubblico]
457    D --> E[CDN Globale]
458```
459 
460### Step 3: Configurar el dominio (opcional)
461 
462Vercel proporciona una URL gratuita tipo `my-demo-app.vercel.app`. Para un dominio personalizado:
463 
464```
465Tú: Agrega la configuración para un dominio personalizado en vercel.json
466```
467 
468### Preview Deployments
469 
470Cada 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.
471 
472## 7. Optimizaciones para la demo
473 
474### Rendimiento
475 
476```
477Tú: Optimiza el rendimiento de la app:
4781. Agrega loading states con Suspense y skeleton
4792. Implementa caching con unstable_cache de Next.js
4803. Optimiza las imágenes con next/image
4814. Agrega metadata SEO para cada página
482```
483 
484### Realtime con Supabase
485 
486Una feature que siempre impresiona en las demos es el **realtime**:
487 
488```
489Tú: Agrega sincronización realtime para las tareas usando Supabase Realtime.
490Cuando un usuario actualice una tarea, todos los demás usuarios deben ver
491el cambio en tiempo real sin hacer refresh.
492```
493 
494```typescript
495'use client';
496 
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500 
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504 
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533 
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538 
539  return tasks;
540}
541```
542 
543### Modo oscuro
544 
545```
546Tú: Agrega soporte de modo oscuro con toggle en el header.
547Usa las clases dark de Tailwind y guarda la preferencia en localStorage.
548```
549 
550## 8. Buenas prácticas para un vibecoding eficaz
551 
552### 1. Sé específico en los prompts
553 
554```
555❌ "Haz una página bonita"
556✅ "Crea una landing page con hero section con gradiente violeta-azul, una sección
557   de features con 3 cards con íconos, y un CTA con botón naranja"
558```
559 
560### 2. Da contexto
561 
562```
563❌ "Agrega autenticación"
564✅ "Agrega autenticación con Supabase Auth. El proyecto usa Next.js 15 App
565   Router con TypeScript. Quiero login con email/password y OAuth con GitHub.
566   Usa el patrón SSR con @supabase/ssr"
567```
568 
569### 3. Itera en pequeños pasos
570 
571No intentes construir todo en un solo prompt. Procede por incrementos:
572 
5731. Layout base
5742. Una feature a la vez
5753. Estilos y pulido
5764. Gestión de errores
5775. Testing
578 
579### 4. Revisa el código generado
580 
581El vibecoding no significa no leer el código. Revisa siempre:
582 
583- **Seguridad**: RLS policies, validación de input, sanitización de datos.
584- **Rendimiento**: queries N+1, componentes innecesariamente client-side.
585- **Buenas prácticas**: estructura del proyecto, naming conventions.
586 
587### 5. Usa Git estratégicamente
588 
589```
590Tú: Haz commit de los cambios con un mensaje descriptivo después de cada feature completada.
591```
592 
593Esto te permite volver atrás si algo sale mal.
594 
595## 9. Costos: ¿realmente todo gratis?
596 
597Este es un resumen de los costos de cada servicio:
598 
599| Servicio | Plan gratuito | Cuándo se paga |
600|----------|---------------|----------------|
601| **Claude Code** | Requiere un plan Anthropic (a partir de $20/mes) o API key | De inmediato, pero el valor es enorme |
602| **Supabase** | Generoso free tier (2 proyectos, 500MB DB) | Al superar los límites del free tier |
603| **Vercel** | Free tier para proyectos personales | Para equipos o uso comercial |
604| **GitHub** | Gratuito para repos públicos y privados | Features enterprise |
605 
606> **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.
607 
608### Alternativas gratuitas para la IA
609 
610Si quieres mantener el costo en cero absoluto, puedes usar:
611 
612- **Cursor** (free tier con limitaciones).
613- **GitHub Copilot** (gratuito para estudiantes y open source).
614- **Codeium/Windsurf** (tier gratuito generoso).
615 
616## 10. De la demo al producto: próximos pasos
617 
618Una vez que tu demo esté en vivo, así es como proceder:
619 
620```mermaid
621flowchart TD
622    A[Demo Live] --> B{Feedback Utenti}
623    B --> C[Iterazione sul Prodotto]
624    C --> D[Product-Market Fit]
625    D --> E[Scaling]
626    E --> F[Supabase Pro Plan]
627    E --> G[Vercel Pro Plan]
628    E --> H[Dominio Personalizzato]
629```
630 
6311. **Recoge feedback**: comparte la demo con potenciales usuarios y recoge opiniones.
6322. **Itera rápidamente**: usa el vibecoding para implementar los cambios solicitados.
6333. **Monitorea las métricas**: Vercel Analytics y el Dashboard de Supabase te dan datos esenciales.
6344. **Escala cuando sea necesario**: pasa a los planes de pago solo cuando hayas validado la demanda.
635 
636 
637## Conclusión
638 
639El 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.
640 
641La 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.
642 
643El 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.
644 
645> **Checklist para tu primera demo:**
646>
647> - [x] Claude Code instalado y configurado
648> - [x] Proyecto Supabase creado con esquema de base de datos
649> - [x] Proyecto Next.js inicializado con shadcn/ui
650> - [x] Autenticación configurada
651> - [x] CRUD completo implementado
652> - [x] UI moderna y responsive
653> - [x] Deploy en Vercel realizado
654> - [x] URL compartible listo para el feedback
655

:Cómo Crear una Demo con Claude Code: Vibecoding con Supabase y Vercellines 1-655 (END) — press q to close

2El **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."_

4En 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.

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

8El 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:

101. **Describe** lo que quiere en lenguaje natural.

112. **El agente AI** genera el código completo.

123. **El developer** revisa, prueba e itera.

14### Por qué funciona

16- **Velocidad**: un proyecto que requeriría días puede construirse en horas.

17- **Accesibilidad**: incluso quien no es un developer experto puede construir productos funcionales.

18- **Iteración rápida**: puedes probar ideas y pivotar mucho más rápidamente.

19- **Foco en el producto**: te concentras en el _qué_ en lugar del _cómo_.

21```mermaid

22flowchart LR

23 A[Idea] --> B[Prompt in linguaggio naturale]

24 B --> C[Claude Code genera il codice]

25 C --> D[Review e test]

26 D --> E[Iterazione]

27 E --> B

28 D --> F[Deploy su Vercel]

29```

31### Cuándo usar el vibecoding

33El vibecoding es perfecto para:

35- **Demos y MVP**: construir rápidamente un prototipo para validar una idea.

36- **Hackathon**: crear un producto funcional en pocas horas.

37- **Side project**: explorar nuevas tecnologías sin invertir semanas.

38- **Proof of Concept**: demostrar la viabilidad técnica a stakeholders o inversores.

40> **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.

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

44### Claude Code

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

48- Leer y comprender todo el codebase.

49- Crear, modificar y eliminar archivos.

50- Ejecutar comandos en el terminal.

51- Interactuar con APIs y servicios externos.

52- Gestionar el versionado con Git.

53- Iterar autónomamente sobre errores y bugs.

55```bash

56# Installazione di Claude Code

57npm install -g @anthropic-ai/claude-code

59# Avvio in una directory di progetto

60cd my-project

61claude

62```

64### Supabase (Tier gratuito)

66Supabase es una alternativa open source a Firebase que ofrece:

68- **Base de datos PostgreSQL**: una base de datos relacional completa.

69- **Autenticación**: login con email, Google, GitHub, etc.

70- **API REST y Realtime**: generadas automáticamente desde tu schema.

71- **Storage**: para archivos e imágenes.

72- **Edge Functions**: funciones serverless.

74El tier gratuito incluye:

76| Recurso | Límite gratuito |

77|---------|----------------|

78| Database | 500 MB |

79| Storage | 1 GB |

80| Bandwidth | 5 GB |

81| Edge Function invocations | 500K/mes |

82| Usuarios autenticados | Ilimitados |

83| Proyectos | 2 proyectos activos |

85### Vercel (Tier gratuito)

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

89- **Deploy automático** desde GitHub.

90- **Preview deployments** para cada branch y PR.

91- **CDN global** para un rendimiento óptimo.

92- **Serverless Functions** incluidas.

93- **Analytics** básicas gratuitas.

95El tier gratuito incluye:

97| Recurso | Límite gratuito |

98|---------|----------------|

99| Bandwidth | 100 GB/mes |

100| Serverless Function execution | 100 GB-horas/mes |

101| Builds | 6.000 minutos/mes |

102| Proyectos | Ilimitados |

103| Deploys | Ilimitados |

104

105## 3. Setup inicial: preparar el entorno

106

107### Prerrequisitos

108

109Antes de comenzar, asegúrate de tener:

110

111- **Node.js 18+** instalado.

112- **Git** configurado.

113- Una cuenta de **GitHub**.

114- Una cuenta de **Supabase** (gratuita en [supabase.com](https://supabase.com)).

115- Una cuenta de **Vercel** (gratuita en [vercel.com](https://vercel.com)).

116- **Claude Code** instalado (`npm install -g @anthropic-ai/claude-code`).

117

118### Step 1: Crear el proyecto

119

120Abre el terminal y lanza Claude Code:

121

122```bash

123mkdir my-demo-app && cd my-demo-app

124claude

125```

126

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

128

129```

130Tú: Crea un proyecto Next.js 15 con App Router, TypeScript, Tailwind CSS y

131shadcn/ui. Inicializa también un repositorio Git.

132```

133

134Claude Code ejecutará automáticamente:

135

136```bash

137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir

138npx shadcn@latest init

139git init && git add . && git commit -m "Initial commit"

140```

141

142### Step 2: Configurar Supabase

143

1441. Ve a [supabase.com](https://supabase.com) y crea un nuevo proyecto.

1452. Toma nota del **Project URL** y la **anon key** en la sección Settings > API.

1463. Vuelve al terminal con Claude Code:

147

148```

149Tú: Agrega Supabase al proyecto. Crea un archivo .env.local con las variables

150NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY. Configura el cliente

151Supabase con soporte SSR para Next.js App Router.

152```

153

154Claude Code creará la configuración completa:

155

156```typescript

157// src/lib/supabase/client.ts

158import { createBrowserClient } from '@supabase/ssr';

159

160export function createClient() {

161 return createBrowserClient(

162 process.env.NEXT_PUBLIC_SUPABASE_URL!,

163 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

164 );

165}

166```

167

168```typescript

169// src/lib/supabase/server.ts

170import { createServerClient } from '@supabase/ssr';

171import { cookies } from 'next/headers';

172

173export async function createClient() {

174 const cookieStore = await cookies();

175

176 return createServerClient(

177 process.env.NEXT_PUBLIC_SUPABASE_URL!,

178 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,

179 {

180 cookies: {

181 getAll() {

182 return cookieStore.getAll();

183 },

184 setAll(cookiesToSet) {

185 cookiesToSet.forEach(({ name, value, options }) =>

186 cookieStore.set(name, value, options)

187 );

188 },

189 },

190 }

191 );

192}

193```

194

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

196

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

198

199### Definir el esquema de la base de datos

200

201Da instrucciones a Claude Code para crear el esquema:

202

203```

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

205

2061. profiles: id (uuid, FK a auth.users), username (text), avatar_url (text),

207 created_at

2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK

209 a profiles), created_at

2103. tasks: id (uuid), title (text), description (text), status (enum:

211 todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,

212 FK a projects), assigned_to (uuid, FK a profiles), due_date (timestamp),

213 created_at, updated_at

214

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

216```

217

218Claude Code generará una migración completa:

219

220```sql

221-- Crea i tipi enum

222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');

223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

224

225-- Tabella profiles

226CREATE TABLE profiles (

227 id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,

228 username TEXT UNIQUE,

229 avatar_url TEXT,

230 created_at TIMESTAMPTZ DEFAULT NOW()

231);

232

233-- Tabella projects

234CREATE TABLE projects (

235 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,

236 name TEXT NOT NULL,

237 description TEXT,

238 owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,

239 created_at TIMESTAMPTZ DEFAULT NOW()

240);

241

242-- Tabella tasks

243CREATE TABLE tasks (

244 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,

245 title TEXT NOT NULL,

246 description TEXT,

247 status task_status DEFAULT 'todo',

248 priority task_priority DEFAULT 'medium',

249 project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,

250 assigned_to UUID REFERENCES profiles(id),

251 due_date TIMESTAMPTZ,

252 created_at TIMESTAMPTZ DEFAULT NOW(),

253 updated_at TIMESTAMPTZ DEFAULT NOW()

254);

255

256-- Abilita RLS

257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;

259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

260

261-- Policy per profiles

262CREATE POLICY "Users can view own profile"

263 ON profiles FOR SELECT USING (auth.uid() = id);

264CREATE POLICY "Users can update own profile"

265 ON profiles FOR UPDATE USING (auth.uid() = id);

266

267-- Policy per projects

268CREATE POLICY "Users can view own projects"

269 ON projects FOR SELECT USING (auth.uid() = owner_id);

270CREATE POLICY "Users can create projects"

271 ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);

272CREATE POLICY "Users can update own projects"

273 ON projects FOR UPDATE USING (auth.uid() = owner_id);

274CREATE POLICY "Users can delete own projects"

275 ON projects FOR DELETE USING (auth.uid() = owner_id);

276

277-- Policy per tasks

278CREATE POLICY "Users can view tasks in their projects"

279 ON tasks FOR SELECT USING (

280 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

281 );

282CREATE POLICY "Users can create tasks in their projects"

283 ON tasks FOR INSERT WITH CHECK (

284 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

285 );

286CREATE POLICY "Users can update tasks in their projects"

287 ON tasks FOR UPDATE USING (

288 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

289 );

290CREATE POLICY "Users can delete tasks in their projects"

291 ON tasks FOR DELETE USING (

292 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

293 );

294```

295

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

297

298### Generar los tipos TypeScript

299

300```

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

302```

303

304```bash

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

306```

307

308### Construir la interfaz de usuario

309

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

311

312```

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

314

3151. Sidebar con navegación entre proyectos

3162. Vista Kanban con 3 columnas (Todo, In Progress, Done) con drag & drop

3173. Modal para crear/editar tareas

3184. Header con avatar del usuario y logout

3195. Diseño moderno con shadcn/ui y Tailwind

320

321Usa los datos de Supabase con React Server Components donde sea posible

322y Client Components solo donde se necesite interactividad.

323```

324

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

326

327### Agregar la autenticación

328

329```

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

331

3321. Página de login con email/password y login con GitHub

3332. Página de registro

3343. Middleware para proteger las rutas autenticadas

3354. Redirect automático para usuarios no autenticados

3365. Creación automática del perfil después del registro

337```

338

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

340

341```typescript

342// src/middleware.ts

343import { createServerClient } from '@supabase/ssr';

344import { NextResponse, type NextRequest } from 'next/server';

345

346export async function middleware(request: NextRequest) {

347 let supabaseResponse = NextResponse.next({ request });

348

349 const supabase = createServerClient(

350 process.env.NEXT_PUBLIC_SUPABASE_URL!,

351 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,

352 {

353 cookies: {

354 getAll() {

355 return request.cookies.getAll();

356 },

357 setAll(cookiesToSet) {

358 cookiesToSet.forEach(({ name, value }) =>

359 request.cookies.set(name, value)

360 );

361 supabaseResponse = NextResponse.next({ request });

362 cookiesToSet.forEach(({ name, value, options }) =>

363 supabaseResponse.cookies.set(name, value, options)

364 );

365 },

366 },

367 }

368 );

369

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

371

372 if (!user && !request.nextUrl.pathname.startsWith('/auth')) {

373 const url = request.nextUrl.clone();

374 url.pathname = '/auth/login';

375 return NextResponse.redirect(url);

376 }

377

378 return supabaseResponse;

379}

380

381export const config = {

382 matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],

383};

384```

385

386## 5. Patrones avanzados de vibecoding

387

388### El prompting iterativo

389

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

391

392```

393Step 1: "Crea el layout base con header y sidebar"

394Step 2: "Agrega la lista de proyectos en la sidebar con un botón para crear nuevos"

395Step 3: "Crea la vista Kanban en el área principal"

396Step 4: "Agrega el drag & drop entre las columnas"

397Step 5: "Implementa el modal para crear nuevas tareas"

398Step 6: "Agrega las notificaciones toast para dar feedback al usuario"

399```

400

401> **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.

402

403### Gestión de errores

404

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

406

407```

408Tú: Tengo este error en la consola: "TypeError: Cannot read property 'map' of undefined"

409en el componente TaskList. Corrígelo.

410```

411

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

413

414### Refactoring con AI

415

416```

417Tú: El componente Dashboard se ha vuelto demasiado grande. Divídelo en componentes

418más pequeños y reutilizables, manteniendo la misma funcionalidad.

419```

420

421### Testing

422

423```

424Tú: Agrega tests con Vitest para las utility functions y tests con Playwright

425para el flujo de autenticación y creación de tareas.

426```

427

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

429

430### Step 1: Subir a GitHub

431

432```

433Tú: Crea un .gitignore apropiado, haz commit de todo y sube a un nuevo

434repositorio GitHub llamado "my-demo-app".

435```

436

437```bash

438git add .

439git commit -m "feat: complete task management demo"

440gh repo create my-demo-app --public --push --source=.

441```

442

443### Step 2: Conectar Vercel

444

4451. Ve a [vercel.com](https://vercel.com) y haz clic en "Add New Project".

4462. Importa el repositorio de GitHub recién creado.

4473. Agrega las variables de entorno:

448 - `NEXT_PUBLIC_SUPABASE_URL`

449 - `NEXT_PUBLIC_SUPABASE_ANON_KEY`

4504. Haz clic en "Deploy".

451

452```mermaid

453flowchart LR

454 A[GitHub Push] --> B[Vercel Build]

455 B --> C[Deploy Automatico]

456 C --> D[URL Pubblico]

457 D --> E[CDN Globale]

458```

459

460### Step 3: Configurar el dominio (opcional)

461

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

463

464```

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

466```

467

468### Preview Deployments

469

470Cada 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.

471

472## 7. Optimizaciones para la demo

473

474### Rendimiento

475

476```

477Tú: Optimiza el rendimiento de la app:

4781. Agrega loading states con Suspense y skeleton

4792. Implementa caching con unstable_cache de Next.js

4803. Optimiza las imágenes con next/image

4814. Agrega metadata SEO para cada página

482```

483

484### Realtime con Supabase

485

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

487

488```

489Tú: Agrega sincronización realtime para las tareas usando Supabase Realtime.

490Cuando un usuario actualice una tarea, todos los demás usuarios deben ver

491el cambio en tiempo real sin hacer refresh.

492```

493

494```typescript

495'use client';

496

497import { useEffect, useState } from 'react';

498import { createClient } from '@/lib/supabase/client';

499import type { Task } from '@/types/database';

500

501export function useRealtimeTasks(projectId: string) {

502 const [tasks, setTasks] = useState<Task[]>([]);

503 const supabase = createClient();

504

505 useEffect(() => {

506 const channel = supabase

507 .channel('tasks-changes')

508 .on(

509 'postgres_changes',

510 {

511 event: '*',

512 schema: 'public',

513 table: 'tasks',

514 filter: `project_id=eq.${projectId}`,

515 },

516 (payload) => {

517 if (payload.eventType === 'INSERT') {

518 setTasks((prev) => [...prev, payload.new as Task]);

519 } else if (payload.eventType === 'UPDATE') {

520 setTasks((prev) =>

521 prev.map((t) =>

522 t.id === payload.new.id ? (payload.new as Task) : t

523 )

524 );

525 } else if (payload.eventType === 'DELETE') {

526 setTasks((prev) =>

527 prev.filter((t) => t.id !== payload.old.id)

528 );

529 }

530 }

531 )

532 .subscribe();

533

534 return () => {

535 supabase.removeChannel(channel);

536 };

537 }, [projectId, supabase]);

538

539 return tasks;

540}

541```

542

543### Modo oscuro

544

545```

546Tú: Agrega soporte de modo oscuro con toggle en el header.

547Usa las clases dark de Tailwind y guarda la preferencia en localStorage.

548```

549

550## 8. Buenas prácticas para un vibecoding eficaz

551

552### 1. Sé específico en los prompts

553

554```

555❌ "Haz una página bonita"

556✅ "Crea una landing page con hero section con gradiente violeta-azul, una sección

557 de features con 3 cards con íconos, y un CTA con botón naranja"

558```

559

560### 2. Da contexto

561

562```

563❌ "Agrega autenticación"

564✅ "Agrega autenticación con Supabase Auth. El proyecto usa Next.js 15 App

565 Router con TypeScript. Quiero login con email/password y OAuth con GitHub.

566 Usa el patrón SSR con @supabase/ssr"

567```

568

569### 3. Itera en pequeños pasos

570

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

572

5731. Layout base

5742. Una feature a la vez

5753. Estilos y pulido

5764. Gestión de errores

5775. Testing

578

579### 4. Revisa el código generado

580

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

582

583- **Seguridad**: RLS policies, validación de input, sanitización de datos.

584- **Rendimiento**: queries N+1, componentes innecesariamente client-side.

585- **Buenas prácticas**: estructura del proyecto, naming conventions.

586

587### 5. Usa Git estratégicamente

588

589```

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

591```

592

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

594

595## 9. Costos: ¿realmente todo gratis?

596

597Este es un resumen de los costos de cada servicio:

598

599| Servicio | Plan gratuito | Cuándo se paga |

600|----------|---------------|----------------|

601| **Claude Code** | Requiere un plan Anthropic (a partir de $20/mes) o API key | De inmediato, pero el valor es enorme |

602| **Supabase** | Generoso free tier (2 proyectos, 500MB DB) | Al superar los límites del free tier |

603| **Vercel** | Free tier para proyectos personales | Para equipos o uso comercial |

604| **GitHub** | Gratuito para repos públicos y privados | Features enterprise |

605

606> **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.

607

608### Alternativas gratuitas para la IA

609

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

611

612- **Cursor** (free tier con limitaciones).

613- **GitHub Copilot** (gratuito para estudiantes y open source).

614- **Codeium/Windsurf** (tier gratuito generoso).

615

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

617

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

619

620```mermaid

621flowchart TD

622 A[Demo Live] --> B{Feedback Utenti}

623 B --> C[Iterazione sul Prodotto]

624 C --> D[Product-Market Fit]

625 D --> E[Scaling]

626 E --> F[Supabase Pro Plan]

627 E --> G[Vercel Pro Plan]

628 E --> H[Dominio Personalizzato]

629```

630

6311. **Recoge feedback**: comparte la demo con potenciales usuarios y recoge opiniones.

6322. **Itera rápidamente**: usa el vibecoding para implementar los cambios solicitados.

6333. **Monitorea las métricas**: Vercel Analytics y el Dashboard de Supabase te dan datos esenciales.

6344. **Escala cuando sea necesario**: pasa a los planes de pago solo cuando hayas validado la demanda.

635

636

637## Conclusión

638

639El 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.

640

641La 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.

642

643El 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.

644

645> **Checklist para tu primera demo:**

646>

647> - [x] Claude Code instalado y configurado

648> - [x] Proyecto Supabase creado con esquema de base de datos

649> - [x] Proyecto Next.js inicializado con shadcn/ui

650> - [x] Autenticación configurada

651> - [x] CRUD completo implementado

652> - [x] UI moderna y responsive

653> - [x] Deploy en Vercel realizado

654> - [x] URL compartible listo para el feedback

655