Respira CRM: Del Vibe Coding al Pentesting usando Hacking Ético
¿Qué pasa cuando un equipo de estudiantes de ingeniería construye una aplicación web completa usando inteligencia artificial, la despliega en producción y, acto seguido, la somete a una auditoría de seguridad profesional para encontrar sus propias vulnerabilidades?
Eso fue exactamente lo que hicimos con RespiraCRM: un CRM full-stack para dispositivos médicos respiratorios, disponible en producción en https://web-production-ff1b5.up.railway.app, construido desde cero mediante la metodología del Vibe Coding y luego auditado con el OWASP Top 10 2021 en el marco de la asignatura Hacking Ético de la Universidad Central.
Este artículo cuenta esa historia completa:
- qué herramientas de IA
- usamos, cómo organizamos el código, qué construimos fase a fase, cómo
- lo desplegamos en la nube y, finalmente, qué vulnerabilidades críticas
- descubrimos al hackearlo nosotros mismos. Una historia de construcción
- y destrucción controlada que cualquier desarrollador debería leer.
Primero debemos entender algo fundamental, a partir de lo cual parte todo ¿Qué es el Vibe Coding y por qué lo usamos?

El Vibe Coding es una metodología de desarrollo de software en la que
la mayor parte del código es generado y refinado por inteligencia
artificial, mientras el desarrollador actúa como director de orquesta:
define la visión, los requerimientos, corrige errores y guía a la IA
para obtener el resultado deseado. Es como tener un programador virtual
disponible las 24 horas del día que conoce todas las tecnologías
modernas y escribe código a la velocidad del pensamiento.
Para este proyecto utilizamos cinco herramientas de IA en paralelo,
cada una con un rol específico:
- OpenAI (GPT-4): generación y corrección de código backend y frontend.
- Groq (Llama 3.3 70B): integración de funcionalidades de IA dentro del CRM, como el resumen semanal de ventas.
- Google Gemini: asistencia en procesamiento inteligente y optimización de consultas a la base de datos.
- Codex: apoyo principal para la generación de módulos completos.
- Antigravity: complemento para funcionalidades y soporte en la arquitectura del sistema.

Gracias a este enfoque, pasamos de cero a un MVP (Producto Mínimo
Viable) funcional en días, no semanas. Pero como descubriríamos más
adelante, la velocidad de desarrollo no garantiza la seguridad del
producto.
El Stack Tecnológico de RespiraCRM
Antes de ver el proceso de construcción, es importante entender las
tecnologías que forman el corazón de la plataforma, porque estas
decisiones técnicas también influirían en los hallazgos de seguridad.
- Next.js: framework React para el frontend, con App Router y renderizado híbrido.
- NestJS: framework Node.js para el backend, con arquitectura modular orientada a módulos de negocio.
- PostgreSQL: base de datos relacional para toda la persistencia del sistema.
- Prisma: ORM que conecta el backend con la base de datos mediante consultas type-safe.
- Docker: contenedores que garantizan que el entorno de desarrollo sea reproducible en cualquier máquina.
- JWT + cookies httpOnly: sistema de autenticación seguro que almacena los tokens en cookies inaccesibles desde JavaScript.
- hCaptcha: protección anti-bot en el formulario de login.
- Railway.app: plataforma cloud (PaaS) para el despliegue en producción.

La arquitectura fue un monorepo con tres carpetas principales: apps/web
(frontend), apps/api (backend) y packages/shared (código compartido).
El primer prompt que le dimos a la IA fue exactamente eso: generar esta
estructura con docker-compose.yml y README incluidos.
Construcción Fase a Fase: Cómo Creamos RespiraCRM con IA
Fase 1: Base de Datos y Backend
El diseño de datos fue el primer paso real. Le pedimos a la IA que generara un esquema de Prisma para las entidades principales: Empresa, Contacto, Producto, Oportunidad, Propuesta, Venta, Orden de Servicio, Factura, Reseña, Usuario y Rol. El prompt especificaba relaciones, soft delete (campo deletedAt), timestamps automáticos e índices de rendimiento.
Con el esquema generado, ejecutamos las migraciones y arrancamos el
desarrollo del backend. Los módulos más críticos que construimos con
asistencia de la IA fueron:
- Autenticación: login con JWT almacenado en cookies httpOnly, verificación de hCaptcha, refresh token y endpoint /auth/me. El guard de roles (ADMIN, SALES, OPERATOR) protege cada controlador.
- CRUDs de negocio: empresas, contactos, productos, oportunidades y más, cada uno con controlador, servicio y DTOs validados con class-validator.
- Dashboard de métricas: endpoint GET /metrics/dashboard que devuelve conteos, sumas y agrupaciones directamente desde la base de datos vía Prisma.
Fase 2: Frontend con Next.js
El frontend se construyó consumiendo la API del backend. Las pantallas
más relevantes fueron:
- Login con hCaptcha: formulario seguro con manejo de sesión en un AuthContext global.
- Dashboard principal: tarjetas con métricas en tiempo real y un gráfico de ventas por unidad de negocio con Recharts.
- Pipeline Kanban: tablero drag-and-drop de oportunidades de venta usando @dnd-kit, con actualización en el backend en tiempo real.
- Propuestas con PDF: formulario de propuestas comerciales con generación de PDF profesional mediante @react-pdf/renderer.
- Facturación y órdenes de servicio: gestión de estados con permisos por rol.
- Calendario y registro rápido: FullCalendar integrado con un modal global para registrar llamadas, notas y reuniones desde cualquier pantalla.
- Panel de administración: reportes avanzados con gráficos de conversión, forecast ponderado y estado del sistema.
Fase 3: Despliegue en Railway con Docker y GitHub
El despliegue fue el último paso del desarrollo. Le pedimos a la IA
que generara Dockerfiles multi-etapa para el frontend y el backend, un
entrypoint que ejecutara migraciones de Prisma al arrancar, y las
instrucciones para conectar el repositorio de GitHub con Railway para
CI/CD automático.
El proceso fue el siguiente: creamos el repositorio en GitHub, lo vinculamos a Railway, configuramos las variables de entorno (DATABASE_URL, JWT secrets, etc.) y Railway construyó y desplegó los contenedores automáticamente. La aplicación quedó accesible en: https://web-production-ff1b5.up.railway.app

RespiraCRM quedó con autenticación segura, gestión completa de
clientes y ventas, dashboard en tiempo real, pipeline Kanban, PDF de
propuestas, exportación a Excel, calendario de actividades y panel de
administración completo.
Análisis de Pentesting OWASP, OSINT y
