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:

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:

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:

Además, permite alternar entre distintos modos:

Paso 1: preparar el entorno

Claude Code puede instalarse fácilmente usando npm u otro gestor de paquetes.
Una vez instalado:

  1. Creas una carpeta para el proyecto
  2. Abres esa carpeta desde la terminal
  3. 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:

  1. Pedir una planificación
  2. Revisarla
  3. Ajustarla
  4. Guardarla en un archivo Markdown

Claude Code genera un plan estructurado donde se define:

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:

Esto permite validar:

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:

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:

Claude Code hace preguntas clave:

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:

Con Prisma Studio puedes:

Paso 7: crear la API y conectar el frontend

En modo planificación, Claude Code:

  1. Analiza el frontend existente
  2. Define endpoints necesarios
  3. Genera rutas API
  4. Conecta el frontend a la base de datos
  5. 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í:

  1. Usuario navega productos
  2. Añade productos al carrito
  3. Intenta pagar
  4. Se le pide iniciar sesión o registrarse
  5. Vuelve al carrito
  6. Paga con Stripe
  7. Se registra la orden
  8. 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:

Para desarrollo local se expone el servidor usando:

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:

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:

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:

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:

Si dominas este flujo, prácticamente puedes construir cualquier producto web moderno con ayuda de IA.