← Blog
Claude Code11 may 20269 min de lectura

Construir una app real con Claude Code en 1 día: caso real con cifras

Una landing con backend, base de datos, autenticación y emails — en 7 horas reales de trabajo, no en “1 hora con demo bonita”. Qué se acelera, qué no, y cuánto cuesta en tokens.

Hay muchos vídeos de "he construido una app en X minutos con IA".

Casi todos hacen trampa.

Demo bonita, sin backend de verdad, sin auth, sin tests, sin datos. Una pantalla en localhost que se cae el minuto que la enseñas a un cliente.

Esto es lo contrario. Caso real con cifras. Una herramienta para mí mismo construida en un sábado, con todo el stack que necesita una app pequeña pero seria que se pueda mirar a la cara. 7 horas reales. ~$8 en tokens. Funcionando en producción ahora mismo.

La app

Llamémosla tracker. Es una herramienta privada que uso para llevar registro semanal de:

  • KPIs del producto (signups, pagos, churn)
  • Tiempo gastado por área (product, marketing, soporte)
  • Notas de aprendizaje de la semana

Stack: Next.js 16 + Supabase + Tailwind. Magic-link auth. Solo yo y mi mujer accedemos. No es complejo — pero es real: tiene base de datos con RLS, autenticación, emails de magic-link, dashboard con charts y exports a CSV.

Setup inicial — 25 minutos

  1. Skill new-app (Kursear factory): le digo a Claude “entrevista de negocio para esta app”. Genera BUSINESS_LOGIC.md con las 6 user stories.
  2. Skill add-login: setup completo de Supabase Auth + magic-link + cookies httpOnly + middleware.
  3. Skill supabase: 4 tablas con RLS habilitada (kpis, time_log, notes, users).
  4. agent-browser ya instalado: para verificar UI en cada fase.

Output del setup: app funcionando con login y dashboard vacío en localhost:3000. 25 minutos. Si lo hubiera hecho a mano, calculo unas 4-5 horas.

Fase 1 · KPIs CRUD — 1h 40min

Le pido a Claude el flow básico: formulario para añadir un KPI semanal + lista + edit + delete.

Aquí donde la mayoría de tutoriales hacen trampa: se quedan con el CRUD genérico. Yo le pedí más:

  • Validación con Zod en cliente y servidor
  • Optimistic UI (la lista se actualiza antes de que el servidor responda)
  • Empty state con CTA cuando no hay datos
  • Loading skeleton
  • Error toasts
  • Atajos de teclado (N para nuevo, Esc para cancelar)

Resultado: 4 archivos nuevos, ~280 líneas de TS+JSX. Funciona, typecheck pasa, agent-browser verifica el flow entero. 1h 40min.

Fase 2 · Charts del dashboard — 1h 15min

Aquí asumí que iba a tardar más, pero fue más rápido de lo esperado. Pedí 3 gráficas: línea temporal de signups, barra apilada de tiempo por área, sparkline mini de pagos.

Claude eligió Recharts. Hizo el data shaping, el componente reutilizable, los tooltips y los empty states. Lo único donde tuve que insistir: que no hiciera tooltips con texto inventado cuando no hay datos.

1h 15min.

Fase 3 · Exports CSV + descarga — 45min

“Botón ‘Descargar CSV’ que exporte los KPIs del trimestre actual o un rango custom.” Claude propuso usar la lib papaparse — le dije que no añadiera deps. Lo escribió a mano (CSV es trivial, no necesita lib). Resultado: 1 endpoint server-side, escapa comillas, descarga con nombre kpis-2026-q2.csv.

45min.

Fase 4 · Emails de magic-link branded — 1h 30min

Aquí me ralenticé porque quise el email bonito, no funcional-mínimo. Aproveché las primitivas de email de Kursear (EmailLayout, EmailButton, etc.) y creé un template específico.

Claude:

  • Refactorizó las primitivas para hacer un import limpio
  • Renderizó el preview en localhost para iterar
  • Verificó render en Gmail + Apple Mail con agent-browser (snapshots de los HTML compilados)

1h 30min.

Fase 5 · Tests E2E mínimos — 50min

Sin tests, no pasa a producción. Le pedí a Claude:

  • 1 test de magic-link (login)
  • 1 test de crear KPI (con validación de error)
  • 1 test de exportar CSV (parsea el blob y compara)

Playwright + assertions. Pasó al primer intento solo el de CSV. Los otros 2 fallaron por timing (magic-link emails son async). Lo arreglé con un mock de email service en modo test. 50min.

Deploy a Vercel — 12min

vercel --prod. Falló porque me faltaba SUPABASE_SERVICE_ROLE_KEY en producción. Lo añadí. Redeploy. Funcionó.

Verifiqué con agent-browser que el flow magic-link funciona en prod (no solo en local).

12min.

Total

| Fase | Tiempo | |------|--------| | Setup inicial | 25min | | Fase 1 KPIs CRUD | 1h 40min | | Fase 2 Charts | 1h 15min | | Fase 3 CSV export | 45min | | Fase 4 Emails branded | 1h 30min | | Fase 5 Tests E2E | 50min | | Deploy | 12min | | TOTAL | 6h 47min |

Coste en tokens: ~$8 según mi dashboard de Anthropic (mezcla de Sonnet/Opus, dirigido por skills que usan modelos baratos cuando se puede).

Qué se acelera vs qué no

Se acelera bestialmente

  • Plantilla / boilerplate (RLS, auth, middleware, etc.) — 80% más rápido
  • CRUD con validación — 70% más rápido
  • Componentes UI estándar (formularios, listas, charts) — 60% más rápido
  • Tests E2E con flow conocido — 70% más rápido

No se acelera tanto

  • Decisiones de producto: qué quieres exactamente, qué métricas, qué empty states. Esto te lo ganas tú. No hay atajo.
  • Diseño visual fino: los choices de spacing, tipografía, color. Claude propone, pero el "look final" lo eliges tú con tu mejor criterio o con tu peor criterio. Esa es otra historia.
  • Debugging de problemas raros: cuando algo falla por una interacción rara entre Vercel + Supabase + cookies, Claude adivina, no diagnostica. Ahí te toca a ti, con la consola abierta.
  • Conocer el dominio: si no sabes qué KPIs quieres trackear, Claude no te lo va a decir. Te va a sugerir genéricos. Y los genéricos en tu propio negocio son ruido.

Cuándo tiene sentido este patrón

Tiene sentido cuando:

  • Conoces el stack (no aprendes Next.js a la vez que lo construyes).
  • Sabes qué quieres construir (no descubres el producto a la vez).
  • Tienes CLAUDE.md decente con tu setup técnico.
  • Estás dispuesto a verificar cada fase con agent-browser antes de decir “hecho”.

Si te faltan 1-3 de esas condiciones, no es Claude Code lo que te falta — es práctica con tu stack o con tu producto. Y aquí volvemos a lo de siempre: práctica deliberada con un plan que sí persiste.

Si quieres aprender a hacer esto en serio

He convertido este workflow en una formación de Kursear sobre Claude Code. 30 días, 99€, plan personalizado para tu nivel y stack, Profesor IA durante el mes, perfil acreditativo al completar. (El sistema entero detrás —los cuatro pilares— está en formación IA personalizada en 30 días.)

Ver formación Claude Code →

O empieza por el diagnóstico — 10 min, sin tarjeta.

— Javier Mancera, fundador de Kursear. Madrid, mayo 2026.

PS · Si vienes del post de setup de Claude Code, este post enseña la práctica que sale después de tener el setup en orden.