Crear un e-commerce completo con Claude Code (paso a paso)
Hoy en día crear un e-commerce ya no es un problema técnico, el verdadero reto está en saber qué pedirle a la IA y en qué orden.
En este artículo te muestro exactamente cómo construir un e-commerce funcional de principio a fin usando Claude Code, incluyendo:
- Frontend con Next.js
- Backend y API
- Base de datos con PostgreSQL + Prisma
- Autenticación
- Panel de administración
- Pagos con Stripe
- Subida de imágenes con Cloudinary
Todo esto guiando a la IA, no simplemente dejándola “hacer magia”.
El resultado final: un e-commerce real, no una demo
El proyecto final no es una plantilla estática. Incluye:
- Catálogo de productos con categorías
- Página de detalle de producto
- Carrito de compras
- Registro e inicio de sesión
- Checkout con Stripe
- Página de pedidos por usuario
- Panel de administrador con:
- Estadísticas
- Gestión de productos
- Subida de imágenes
- Historial de ventas
Es decir: frontend, backend y base de datos trabajando juntos.
Por qué usar Claude Code para este proyecto
Claude Code está pensado para trabajar desde la terminal, lo que le da ventajas clave:
- Mejor control del contexto del proyecto
- Posibilidad de planificar antes de generar código
- Ejecución directa de cambios sin confirmaciones constantes
- Ideal para proyectos medianos y grandes
Además, permite alternar entre distintos modos:
- Modo plan (pensar antes de ejecutar)
- Modo ejecución directa
- Modo con reglas persistentes
Paso 1: preparar el entorno
Claude Code puede instalarse fácilmente usando npm u otro gestor de paquetes.
Una vez instalado:
- Creas una carpeta para el proyecto
- Abres esa carpeta desde la terminal
- Ejecutas Claude Code con permisos extendidos para evitar aprobaciones constantes
Esto permite que la IA cree y modifique archivos sin fricción.
Paso 2: empezar siempre con planificación (clave)
Un error muy común al usar IA es pedir directamente:
“Crea un e-commerce”
El enfoque correcto es:
- Pedir una planificación
- Revisarla
- Ajustarla
- Guardarla en un archivo Markdown
Claude Code genera un plan estructurado donde se define:
- Stack tecnológico
- Estructura inicial
- Páginas necesarias
- Flujo de usuario
- Panel de administración
Este archivo se convierte en la fuente de verdad del proyecto.
Paso 3: construir solo la UI primero
Antes de tocar backend o base de datos:
- Se crean solo interfaces
- No hay lógica real
- No hay conexiones externas
Esto permite validar:
- Navegación
- Flujo de usuario
- Páginas necesarias
- Componentes faltantes
También es recomendable usar referencias visuales (por ejemplo, diseños de Dribbble) para guiar mejor a la IA.
Paso 4: definir reglas del proyecto con cloud.md
Claude Code permite generar un archivo de reglas para definir cómo debe trabajar la IA.
Ejemplos de reglas útiles:
- No usar modales para formularios grandes
- Usar páginas dedicadas para CRUD
- Usar React Hook Form para formularios
- Usar Zustand para manejo de estado
- Evitar Server Actions
Estas reglas se aplican automáticamente en futuras generaciones de código.
Paso 5: diseñar el modelo de datos antes del backend
Antes de crear la API, se define el modelo de datos:
- Usuarios
- Productos
- Categorías
- Órdenes
- Roles (admin, vendedor, cliente)
Claude Code hace preguntas clave:
- ¿Habrá registro público?
- ¿Qué tipo de autenticación?
- ¿Habrá control de stock?
- ¿Cupones o wishlist?
El resultado se guarda como documentación y luego se traduce a Prisma Schema.
Paso 6: base de datos con PostgreSQL y Docker
Para simplificar el entorno:
- Se crea un
docker-compose.yml - Se levanta PostgreSQL localmente
- Prisma se conecta a la base de datos
- Se generan migraciones automáticamente
Con Prisma Studio puedes:
- Ver tablas
- Insertar datos
- Validar órdenes y usuarios
- Comprobar que todo funcione antes del frontend
Paso 7: crear la API y conectar el frontend
En modo planificación, Claude Code:
- Analiza el frontend existente
- Define endpoints necesarios
- Genera rutas API
- Conecta el frontend a la base de datos
- Maneja estados y peticiones
Todo se hace por fases para evitar errores grandes.
Paso 8: autenticación y flujo de compra
El flujo completo queda así:
- Usuario navega productos
- Añade productos al carrito
- Intenta pagar
- Se le pide iniciar sesión o registrarse
- Vuelve al carrito
- Paga con Stripe
- Se registra la orden
- Puede ver sus pedidos
Nada es “mock”: todo queda guardado en la base de datos.
Paso 9: integración con Stripe
La integración incluye:
- Claves públicas y privadas
- Webhooks
- Endpoint para recibir eventos de pago
- Redirección post-pago
- Registro de órdenes
Para desarrollo local se expone el servidor usando:
- Forward Ports (VS Code)
- Ngrok
- Cloudflare Tunnel
Stripe envía eventos reales al backend.
Paso 10: subida de imágenes con Cloudinary
Las imágenes no deben guardarse en la base de datos.
Se integra Cloudinary para:
- Subir imágenes desde el panel admin
- Arrastrar y soltar archivos
- Manejar galerías de productos
- Guardar solo URLs en la base de datos
Esto hace la app más rápida, escalable y profesional.
Qué demuestra este proyecto
Este proyecto deja algo muy claro:
La IA no reemplaza al desarrollador, cambia su rol
Ahora el trabajo consiste en:
- Planificar
- Revisar
- Corregir
- Decidir arquitectura
- Integrar servicios
- Validar flujos reales
Claude Code acelera todo, pero la responsabilidad sigue siendo tuya.
Conclusión
Con Claude Code puedes crear un e-commerce completo en mucho menos tiempo que antes, siempre que:
- Planifiques bien
- Entiendas arquitectura básica
- Definas reglas claras
- Iteres paso a paso
Este enfoque no solo sirve para tiendas online, sino también para SaaS, dashboards, CRMs y aplicaciones reales.
El código, los prompts y el repositorio quedan como base para:
- Continuarlo
- Adaptarlo
- Reutilizarlo en otros proyectos
Si dominas este flujo, prácticamente puedes construir cualquier producto web moderno con ayuda de IA.