Uriel JarethandClaude Opus 5
15d31b5d6b
Desplegada y verificada de punta a punta contra el dominio público, en Chromium y en WebKit a 375px: sitio, catálogo filtrado, acceso al panel, persistencia de sesión y captura de leads con atribución de campaña. No quedó como recurso de Coolify, y está documentado por qué: la API de esa instancia no expone creación de aplicaciones (las rutas /applications/* responden 404 con cuerpo vacío y /openapi.yaml devuelve el HTML del panel), y al crear un servicio por /services la tarea de despliegue quedó colgada sin escribir nada en disco. El servidor está sano; el problema es la instancia. El contenedor corre en el Docker del LXC 102, en la red coolify, con las etiquetas de Traefik que replican el patrón de las apps que ya sirven con TLS ahí, y con coolify.managed=false para que nadie lo confunda con un recurso del panel. La imagen se construye dentro del LXC desde el repo público de Gitea. El costo de esta ruta está escrito en la documentación: un push no redespliega. Se agregó el procedimiento de tres comandos para publicar una versión nueva sin tocar el volumen, y la vía para migrar a app git-based si se consigue el acceso al panel web. Se documenta también una carrera que provocó un diagnóstico equivocado: el acceso usa una acción de servidor, y pulsar el botón antes de que React hidrate no hace nada ni da error. La primera verificación fallaba solo por el dominio público y funcionaba contra Traefik directo, lo que parecía señalar a Cloudflare. No era: los chunks son idénticos por ambos caminos y la hidratación es igual. Era la espera de la prueba. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
FSPM — sitio comercial y micro CRM
En línea: https://fspm-demo.urieljareth.org · Panel en /admin/login, que
no se enlaza desde el sitio a propósito. Cómo está desplegado y cómo publicar
una versión nueva: docs/DESPLIEGUE.md.
Demostración construida por Consultoría E3 para Fire Service Plus México. Sitio público orientado a venta consultiva, con un CRM interno que registra cada envío de formulario y de widget de WhatsApp como oportunidad, con su atribución de campaña.
No es un maquetado: los formularios escriben en base de datos, el panel lee de ella, y las reglas de asignación reparten los leads entre vendedores.
De dónde salió el contenido
El sitio implementa las recomendaciones de una auditoría de marca y mercado previa. Los hallazgos que dirigieron el diseño:
| Hallazgo de la auditoría | Cómo se resuelve aquí |
|---|---|
| Propuesta demasiado amplia, ocho categorías sin rutas | Inicio con tres rutas —industria, riesgo y cumplimiento— y cinco páginas por segmento prioritario |
| El visitante debe inferir qué solución le toca | Clasificador de riesgo en el héroe: elige operación y clases de fuego, y el sitio lo enruta |
| Claims sin condiciones ni evidencia por modelo | Aislados en claimsPorVerificar y presentados como compromiso de documentación, nunca como característica |
| Sin meta description ni Open Graph | Metadatos por página, sitemap derivado de los datos, JSON-LD y tarjeta social generada |
| Conversión poco consultiva | El formulario pide lo que un ingeniero necesita para cotizar, no "solicita información" |
| Sin forma de medir efectividad comercial | Atribución de primer toque que sobrevive a la navegación, y analítica por campaña en el panel |
Los datos de producto provienen de la extracción del sitio público de FSPM. Lo que la fuente no sostiene está marcado como pendiente de verificar; nada se inventó para rellenar.
Stack
Next.js 15 App Router · React 19 · TypeScript estricto · Tailwind CSS v4 ·
Prisma 6 + SQLite · sesiones propias con jose · Playwright para pruebas.
Sin librería de gráficas: el tablero dibuja SVG a mano.
Arrancar en local
npm install
cp .env.example .env # ajusta AUTH_SECRET
npx prisma db push
npm run db:seed # datos de demostración
npm run dev
Sitio en http://localhost:3000. El panel en /admin/login — no está
enlazado desde el sitio público, es intencional.
Las credenciales del seed se imprimen al final de npm run db:seed. En la
pantalla de acceso hay además entrada rápida por perfil para la demostración,
que se apaga con DEMO_ACCESO_RAPIDO=false.
Estructura
src/app/(sitio)/ páginas públicas
src/app/admin/ panel comercial, con noindex y fuera del sitemap
src/app/api/leads/ captura: deduplica contacto, crea oportunidad, asigna
src/data/ catálogo, industrias, clases de fuego, datos de empresa
src/lib/crm/ dominio, sesiones, consultas, acciones, asignación
src/components/marca/RielClases.tsx el elemento firma del diseño
tests/ Playwright, incluidos dos proyectos WebKit
docs/CONTRATO.md sistema de diseño y reglas de contenido
docs/DESPLIEGUE.md variables, Docker y despliegue
Cómo funciona la captura
- El visitante llega con parámetros de campaña.
src/lib/utm.tsguarda el primer toque y no lo sobreescribe. - Navega. Envía el formulario en una ficha de producto, ya sin parámetros en la URL.
POST /api/leadsdeduplica el contacto por correo o teléfono normalizado, crea una oportunidad nueva —un mismo contacto acumula varias— y guarda la campaña del primer toque junto con el producto y la URL exactos.- Las reglas de asignación eligen vendedor; si ninguna coincide, se reparte por turno entre los activos.
- El widget de WhatsApp hace lo mismo antes de abrir la conversación, así el lead existe aunque la persona nunca mande el mensaje.
Pruebas
npm run test:e2e # todos los proyectos
npm run test:webkit # solo Safari e iOS
Cubren rutas y metadatos, responsividad de 320 a 1440 sin desborde horizontal, el circuito de captura con atribución, el aislamiento entre roles del panel y accesibilidad básica.
Alcance
Los datos del panel son ficticios. Los logotipos de clientes se muestran sin atribuirles testimonio ni resultado: la auditoría pide confirmar la relación antes de usarlos comercialmente. La información normativa es de referencia y no sustituye dictamen técnico ni jurídico.