De Idea a Producción en 48 Horas: Así Creamos Apps con Claude Code

48 Horas: Del “¿Y Si…?” al “Ya Está Live”

El viernes a las 6pm me llegó la idea: un sistema de reservas para salones de belleza con diseño premium y gestión integral. El domingo a las 6pm, GlamBook estaba live en producción, con 26 servicios configurados, 4 perfiles de staff, sistema de citas funcional y booking público. 48 horas exactas.

Este no es un artículo de “cómo construir apps en teoría”. Es el registro hora por hora de cómo realmente construimos GlamBook usando Claude Code, el CLI de Anthropic para desarrollo con IA. Con decisiones, errores, frustraciones y el momento exacto en que todo empezó a funcionar.

Si eres desarrollador y quieres entender cómo se ve el desarrollo asistido por IA de verdad, desde la trinchera y sin filtros, sigue leyendo.

Hora 0-2: La Definición (Viernes 6pm – 8pm)

Todo proyecto en iAmanos empieza igual: un documento de contexto. No PowerPoint, no Figma, no Jira. Un archivo de texto llamado CLAUDE.md que será el cerebro del proyecto.

El Documento de Contexto

Para GlamBook, el documento inicial tenía esto:

• Problema: Los salones de belleza en México agendan citas por WhatsApp o teléfono — caótico, pierden clientes, no hay historial
• Usuario objetivo: Dueños de salones de belleza y estéticas en México, 1-10 empleados
• Funcionalidades core: Catálogo de servicios, gestión de staff con horarios, sistema de citas con calendario, perfil público de booking, dashboard de métricas
• Design system: Inspiración L’Oréal — ivory (#FFFFF0), onyx (#353839), gold (#D4AF37), tipografía Cormorant Garamond + Archivo + Inter
• Modelos de datos: Salon, Service, Staff, Client, Appointment, Schedule
• Monetización: SaaS mensual, demo gratuita

Esto tomó 2 horas. La mayor parte del tiempo fue investigando salones reales: qué servicios ofrecen (corte, tinte, mechas, keratina, manicure, pedicure…), cuánto cobran, cómo manejan sus turnos. Conocimiento de dominio que ninguna IA te puede dar — tienes que buscarlo tú.

La Decisión del Stack

No hubo decisión. En iAmanos, el stack es estándar: Next.js 16 + Prisma 7 + PostgreSQL + NextAuth v5 + Tailwind CSS. Cada app nueva usa el mismo stack. Esto no es pereza — es estrategia. Cuando tu stack es predecible, Claude Code es 10x más efectivo porque ya “conoce” los patrones.

Hora 2-6: Scaffold + Autenticación (Viernes 8pm – 12am)

Con el CLAUDE.md listo, abrí una terminal y empecé la primera sesión de Claude Code.

Creación del Proyecto

El primer prompt fue directo: crear el proyecto Next.js con todas las dependencias. En 15 minutos, Claude Code generó:

• Proyecto Next.js 16 con TypeScript estricto y App Router
• Tailwind CSS configurado con los colores del design system (ivory, onyx, gold)
• Prisma 7 con schema inicial: 6 modelos (Salon, User, Service, Staff, Client, Appointment)
• NextAuth v5 con provider de credentials (email + password)
• Layout base con sidebar y header responsive

El Schema Prisma Inicial

Claude Code generó los modelos basándose en el CLAUDE.md. El modelo Appointment incluía relaciones con Client, Staff y Service, con estados (pending, confirmed, completed, cancelled) y timestamps. El modelo Staff tenía horarios por día de la semana como JSON field.

Aquí hubo un primer ajuste manual: Claude Code sugirió guardar los horarios como campos separados (mondayStart, mondayEnd, tuesdayStart…), pero yo preferí un JSON field schedule más flexible. Le expliqué por qué y lo corrigió en segundos.

Autenticación Funcionando

Para las 12am, tenía:

• Login y registro funcional con NextAuth v5
• Middleware que protege rutas /dashboard/*
• Seed de base de datos con un salón demo, 4 staff y 8 clientes ficticios
• La app corriendo en localhost:3000 con diseño L’Oréal aplicado

Tiempo real invertido: 4 horas. De las cuales ~45 minutos fueron Claude Code generando código y ~3 horas fueron yo revisando, ajustando decisiones y probando manualmente.

Hora 6-14: Core Features (Sábado 8am – 4pm)

Desperté el sábado con la app base lista. Era el momento de construir las funcionalidades que hacen a GlamBook útil.

Catálogo de 26 Servicios

Primera sesión del sábado: generar el CRUD completo de servicios. Le di a Claude Code una lista de 26 servicios reales de salón (con nombres, descripciones, duraciones y rangos de precio) y en una sola sesión generó:

• Página de listado con grid de cards
• Formulario de creación/edición con validación Zod
• Categorización (Corte, Color, Tratamientos, Manos & Pies, Estética Facial)
• Toggle de activo/inactivo
• Seed con los 26 servicios precargados

Tiempo: 45 minutos. Manualmente esto me hubiera tomado medio día fácil.

Gestión de Staff

Segundo módulo: gestión de personal. 4 perfiles de staff con:

• Foto, nombre, especialidades (vinculadas a servicios)
• Horarios por día de la semana con breaks
• Estado activo/vacaciones/inactivo
• Vista de agenda individual

Claude Code generó todo el módulo en una hora. La parte más lenta fue la lógica de horarios: calcular slots disponibles considerando duración del servicio, breaks y citas existentes. Tuve que intervenir manualmente para un edge case donde dos servicios se podían traslapar si uno terminaba al minuto exacto que empezaba otro.

Sistema de Citas con Calendario

Este fue el módulo más complejo. Un sistema de citas necesita:

• Selección de servicio → staff disponible → fecha → hora disponible
• Verificación de disponibilidad en tiempo real
• Creación con estado “pending” → confirmación por staff
• Cancelación y reagendamiento
• Vista de calendario semanal y diaria para el staff

Claude Code generó la estructura base, pero la lógica de disponibilidad requirió 3 iteraciones:

1. Primera versión: No consideraba la duración del servicio — solo verificaba si el slot de inicio estaba libre
2. Segunda versión: Verificaba duración pero no breaks del staff
3. Tercera versión: Correcta — verifica que todo el rango (inicio + duración) esté libre, considerando breaks y citas existentes

Tiempo para el módulo completo: 3 horas. La mitad fue debugging de la lógica de disponibilidad.

Gestión de Clientes

CRUD estándar con historial de citas, notas y datos de contacto. Claude Code lo generó en 20 minutos sin problemas. Módulos simples como este son donde la IA realmente brilla — no hay lógica compleja, solo un CRUD bien hecho con UI profesional.

Hora 14-22: UI Premium + Imágenes IA (Sábado 4pm – 12am)

Con la funcionalidad core lista, era momento de hacer que GlamBook se viera como un producto de $500K, no como un proyecto de fin de semana.

El Design System L’Oréal

Le pedí a Claude Code que aplicara el design system definido en el CLAUDE.md de forma consistente en todas las páginas. Esto incluyó:

• Tipografía: Cormorant Garamond para títulos (elegante, serif), Archivo para subtítulos (moderna, sans-serif), Inter para cuerpo (legible, neutral)
• Colores: Ivory (#FFFFF0) para fondos, Onyx (#353839) para texto y acentos, Gold (#D4AF37) para CTAs y detalles premium
• Bordes y sombras: Bordes sutiles dorados, sombras suaves, transiciones hover elegantes
• Cards y containers: Esquinas redondeadas, glassmorphism sutil en ciertos elementos

Claude Code aplicó todo esto en una sola sesión de 2 horas, modificando más de 15 archivos de componentes simultáneamente. El resultado parecía diseñado por un estudio de UX profesional.

50 Imágenes con IA

GlamBook necesitaba fotos de salones, tratamientos, staff trabajando… fotos que comprar en stock costaría $500+ USD. En lugar de eso, usamos Google Imagen 4 para generar 50 imágenes custom:

• 12 imágenes de servicios (corte, tinte, manicure, etc.)
• 8 fotos de ambiente de salón premium
• 15 retratos de staff (estilistas diversos, aspecto profesional)
• 10 imágenes de detalle (herramientas, productos, texturas)
• 5 imágenes hero para páginas principales

Todas generadas con prompts en español, comprimidas a máximo 1280px con calidad 72% JPEG. Costo total: menos de $5 USD en API de Google.

Carrusel y Ficha Técnica

Agregamos un carrusel tipo INV (invitational design) en la página principal con las mejores fotos generadas, y fichas técnicas de servicio con descripción, duración, precio, y galería de antes/después (simulada con IA).

Hora 22-36: Booking Público + Refinamiento (Domingo 8am – 10pm)

La Página de Booking Público

La killer feature: un URL público tipo glambook.iamanos.com/book/glambook-demo donde cualquier persona puede reservar una cita sin necesidad de crear cuenta.

El flujo:

1. Selección de servicio (con fotos, descripción y precio)
2. Selección de estilista (con especialidades y rating)
3. Selección de fecha en calendario (solo días con disponibilidad)
4. Selección de hora (solo slots disponibles)
5. Formulario de datos del cliente (nombre, teléfono, email)
6. Confirmación con resumen y opción de agregar a calendario

Claude Code generó este flujo completo como un wizard multi-step en 2 horas. La parte más desafiante fue el calendar picker que mostraba días disponibles en verde y no disponibles en gris, consultando la disponibilidad real de cada staff.

Dashboard de Métricas

Para el dueño del salón: dashboard con citas del día, citas de la semana, ingresos estimados, staff más ocupado, y servicios más populares. Claude Code lo generó con gráficas simples en 1 hora.

Pulido Final

Las últimas 6 horas del domingo fueron de refinamiento:

• Responsive testing en móvil (ajustes de padding, font sizes, layout)
• Loading states en todas las páginas que hacen fetch
• Empty states cuando no hay datos (“Aún no tienes citas esta semana”)
• Manejo de errores con toasts informativos
• Favicon y meta tags para SEO básico

Hora 36-48: Deploy a Producción (Domingo 10pm – Lunes 6pm)

El deploy en iAmanos sigue un proceso estándar para todas las apps:

Preparación del Contenedor

Claude Code generó el Dockerfile multi-stage:

• Stage 1 (builder): Node.js 20, instala dependencias, genera Prisma client, hace build de Next.js
• Stage 2 (runner): Node.js 20 slim, copia solo los artifacts necesarios, expone puerto 3000

El docker-compose.yml define dos servicios: glambook (la app) y postgres-glambook (base de datos aislada). Traefik labels para enrutamiento automático por dominio.

Subida al VPS

El proceso de deploy:

1. rsync del código local al VPS (excluyendo node_modules, .next, postgres data)
2. docker build -t glambook:latest . en el VPS
3. docker compose up -d glambook postgres-glambook
4. Traefik detecta los labels y configura SSL automático con Let’s Encrypt
5. docker exec para ejecutar migraciones Prisma en producción
6. docker exec para ejecutar el seed con datos demo

El Momento de la Verdad

Abrí glambook.iamanos.com en el navegador. La página de login cargó con el diseño L’Oréal. Entré con las credenciales demo. El dashboard mostró las citas del día. Fui a la página de booking público. Reservé una cita. Funcionó.

48 horas. De cero a producción.

Las Herramientas Exactas que Usamos

Para completar el panorama, aquí está la lista exacta de herramientas utilizadas en las 48 horas de GlamBook:

Desarrollo

• Claude Code (CLI): Copiloto principal — generó ~80% del código
• VS Code: Editor para revisiones rápidas cuando prefiero ver el código visualmente
• Terminal (zsh): Ejecución de comandos, npm, docker, git
• Prisma Studio: Inspección visual de datos durante testing

Diseño e Imágenes

• Google Imagen 4: Generación de 50 imágenes (clave API de Google Cloud)
• ImageMagick: Compresión batch a 1280px / 72% JPEG
• Google Fonts: Cormorant Garamond, Archivo, Inter

Infraestructura

• Docker Desktop (local): Testing del contenedor antes de subir al VPS
• rsync: Sincronización de archivos al VPS
• SSH: Acceso directo al servidor para docker build y compose
• Traefik: Reverse proxy y SSL automático (ya configurado en el VPS)

Testing y QA

• Chrome DevTools: Responsive testing, network tab, performance
• iPhone real: Testing en dispositivo móvil (el emulador no es suficiente)
• Postman: Testing de API routes para verificar respuestas

Nota lo que NO usamos: Figma, Jira, Slack, Confluence, Jenkins, AWS, Kubernetes, GraphQL, Storybook, Cypress. No porque sean malas herramientas — sino porque para un sprint de 48 horas, la complejidad adicional restaría velocidad en vez de sumar.

Lo que Aprendí (y Lo que NO Funcionó)

Lo que Funcionó Perfecto

• El stack estandarizado: Cero tiempo perdido en decisiones de arquitectura
• Claude Code para CRUD: Brutal. Módulos completos en minutos
• Imágenes IA: Apariencia premium sin costo de stock photography
• Docker deployment: Predecible, reproducible, reversible

Lo que Falló o Costó Más de lo Esperado

• Lógica de disponibilidad: 3 iteraciones para que funcionara correctamente. Los edge cases de scheduling son un infierno
• Responsive en booking público: El wizard multi-step se veía mal en móviles pequeños. 2 horas extra de ajustes
• Seed de datos: Claude Code generó nombres de staff en inglés la primera vez. Tuve que especificar “nombres mexicanos reales” en el prompt
• SSL delay: Let’s Encrypt tardó 10 minutos en generar el certificado. Parecieron 10 horas a las 2am

Los Números Finales de GlamBook

Para los que les gustan los datos duros, aquí está el desglose completo del proyecto:

Métricas de Desarrollo

• Tiempo total: 48 horas de trabajo efectivo (viernes pm → domingo pm)
• Líneas de código: ~8,500 (incluyendo tipos TypeScript y configuración)
• Archivos creados: 65+ (componentes, rutas, utilidades, configuración)
• Modelos Prisma: 25+ (Salon, Service, Staff, Client, Appointment, Schedule, etc.)
• Páginas/Rutas: 12 completas con CRUD
• Componentes React: 40+ (incluyendo reutilizables)

Métricas de Contenido

• Servicios configurados: 26 (5 categorías)
• Perfiles de staff: 4 con horarios y especialidades
• Clientes demo: 8 con historial de citas
• Imágenes IA generadas: 50

Métricas de Costo

• Costo de IA (Claude Code API): ~$8 USD para las 48 horas de desarrollo
• Costo de imágenes (Google Imagen 4): ~$5 USD por 50 imágenes
• Costo de VPS (prorrateado): ~$6 USD/mes por app
• Costo total del proyecto: ~$19 USD + tiempo humano

Si le pones un valor al tiempo humano de $50 USD/hora (tarifa de desarrollador senior en México), las 48 horas suman $2,400 USD. Una agencia tradicional cobraría $8,000-15,000 USD por el mismo proyecto en 3 meses. La diferencia es abismal.

Métricas de Performance

• Build time: 45 segundos (Next.js production build)
• Docker image size: 380 MB (multi-stage optimizado)
• First Contentful Paint: 1.2 segundos
• Time to Interactive: 2.1 segundos
• Lighthouse Score: 92/100 (performance), 98/100 (accessibility)

Lo que Hubiera Hecho Diferente

Con la honestidad que caracteriza estos artículos desde la trinchera, esto cambiaría si empezara de cero:

Empezar por el Booking Público

Construí el admin primero y el booking público al final. Error. El booking público es lo que el cliente del cliente ve primero. Debí empezar por ahí y construir el admin después. La próxima app de reservas que hagamos empezará por la experiencia del usuario final.

Usar un Calendar Component Existente

Construí el calendario desde cero con Tailwind. Funciona bien, pero un componente como react-big-calendar me hubiera ahorrado 3-4 horas. A veces el orgullo de “hacerlo todo custom” cuesta más que la dependencia.

Testing Automatizado desde el Inicio

No escribí tests en las 48 horas. Todo fue testing manual. Esto funciona para un sprint de fin de semana, pero cuando empiezas a iterar y agregar features, la falta de tests te pasa factura. Ahora agrego tests para la lógica de negocio crítica (como disponibilidad de citas) desde el primer día.

Documentar Decisiones de Diseño

El design system (L’Oréal inspiration, colores, tipografía) solo existía en mi cabeza y en el CLAUDE.md. Cuando quise hacer ajustes semanas después, tuve que recordar por qué elegí ciertos valores. Ahora documento las decisiones de diseño en un archivo separado dentro del proyecto.

El Impacto en el Negocio

GlamBook no es solo un proyecto técnico — es un producto de negocio. Desde su lanzamiento:

• Demos realizadas: 12 salones de belleza en CDMX han probado el modo demo
• Feedback recibido: “Se ve increíble” (literal, varias veces), peticiones de integración con WhatsApp y MercadoPago
• Features más valoradas: Booking público (link compartible en redes) y el diseño premium
• Feature más solicitada: Recordatorios automáticos por WhatsApp (en roadmap)

Este tipo de feedback solo lo obtienes cuando tienes un producto real en producción. No con mockups, no con wireframes, no con presentaciones. Con software funcionando que la gente puede tocar.

¿Puedes Replicar Esto?

Si tienes experiencia con React, TypeScript y bases de datos, sí. El secreto no es magia — es:

1. Un stack que ya conoces (no experimentes con tecnologías nuevas en un sprint de 48 horas)
2. Claude Code como copiloto real (no como chatbot para preguntas sueltas)
3. Un documento de contexto claro (CLAUDE.md con modelos, funcionalidades y design system)
4. Disciplina para no agregar features (el scope creep mata los sprints rápidos)
5. Un pipeline de deploy probado (Docker + tu servidor favorito)

Si no tienes la experiencia o el tiempo, pero necesitas una app para tu negocio, eso es exactamente lo que hacemos en nuestra fábrica de apps. Construimos tu solución completa con la misma metodología.

Preguntas Frecuentes

¿GlamBook realmente se construyó en 48 horas?

Sí. 48 horas de trabajo efectivo repartidas entre viernes por la noche, sábado completo y domingo. El código, las imágenes, el deploy — todo en un fin de semana. El repositorio de Git tiene los timestamps que lo confirman.

¿Qué pasa con el mantenimiento después del deploy?

Docker hace que el mantenimiento sea mínimo. Actualizaciones se hacen con rsync + rebuild. Backups de PostgreSQL con cron jobs automatizados. El tiempo promedio de mantenimiento por app es ~2 horas/mes.

¿Claude Code es gratuito?

Claude Code tiene diferentes planes. Para desarrollo profesional como el que hacemos en iAmanos, usamos un plan que cuesta aproximadamente $150 USD/mes en API. El ROI se justifica con la primera app que entregas.

¿Se pueden construir apps más complejas que GlamBook en 48 horas?

Para apps más complejas (marketplace, ERP con múltiples módulos, integraciones con hardware), el timeline se extiende a 1-2 semanas. Pero la metodología es la misma: CLAUDE.md → scaffold → core features → UI → deploy.

¿Ofrecen este servicio para negocios que necesitan apps custom?

Absolutamente. iAmanos es una agencia de inteligencia artificial especializada en construir apps a medida para negocios mexicanos. Desde SaaS veterinarios hasta CRMs, ERPs y plataformas de reservas.