# CDC Brief GLM Portal web para la captura guiada y procesamiento inteligente de briefs del área CDC de GomezLee Marketing. --- ## Descripción CDC Brief GLM es una aplicación frontend desarrollada para estandarizar la recepción de solicitudes creativas mediante un flujo guiado por pasos. La plataforma permite al usuario enviar una nota de voz, imágenes de referencia, documentos de apoyo, materiales de campaña, enlaces externos y fecha límite de entrega. La información enviada desde el portal se procesa mediante un webhook de n8n, el cual recibe los archivos y datos del brief para generar una carpeta de trabajo en Google Drive y consolidar la información necesaria para continuar el flujo operativo del equipo CDC. --- ## Objetivo del proyecto Centralizar y ordenar la solicitud inicial de briefs creativos, reduciendo vacíos de información y facilitando que el equipo CDC reciba insumos completos, trazables y organizados desde el primer contacto. El portal busca: * Guiar al usuario en la captura de información mínima requerida. * Recibir audio, imágenes, documentos, archivos de campaña y enlaces externos. * Enviar todos los datos al flujo automatizado de n8n. * Mostrar una respuesta clara del portal con la carpeta generada y el resumen del procesamiento. * Mantener una experiencia visual alineada con la identidad de GomezLee Marketing. --- ## Alcance funcional La aplicación incluye los siguientes módulos y pasos: | Paso | Nombre | Descripción | | ---- | ---------------------- | -------------------------------------------------------------------------------------- | | 1 | Nota de voz | Permite grabar o adjuntar una nota de voz explicando el brief. | | 2 | Imágenes de referencia | Permite adjuntar imágenes visuales de apoyo. | | 3 | Documentos | Permite adjuntar documentos opcionales como PDF, Excel, PowerPoint o Word. | | 4 | Campaña / gráficos | Permite adjuntar archivos relacionados con campañas o elementos gráficos existentes. | | 5 | Referencias online | Permite agregar enlaces externos como referencia. | | 6 | Revisión y envío | Permite revisar la información, definir fecha límite de entrega y enviar la solicitud. | --- ## Características principales * Interfaz guiada por pasos. * Autenticación corporativa con Firebase. * Restricción de acceso según configuración del proyecto. * Carga de archivos multimedia y documentos. * Grabación y reproducción de nota de voz. * Campo obligatorio de fecha límite de entrega. * Envío de datos y archivos mediante FormData al webhook de n8n. * Visualización de respuesta del portal. * Copia y apertura directa del enlace de carpeta generada. * Diseño visual alineado al branding GLM. * Favicon corporativo GLM. * Carpeta `dist/` incluida para despliegue estático cuando aplique. --- ## Stack técnico | Componente | Tecnología | | ---------------------- | -------------------------------------------------------------- | | Frontend | React | | Lenguaje | TypeScript | | Build tool | Vite | | Estilos | CSS | | Autenticación | Firebase Auth | | Automatización backend | n8n Webhook | --- ## Estructura del repositorio ```text cdcbrief-glm/ ├── dist/ # Build de producción generado por Vite ├── public/ # Assets públicos ├── src/ # Código fuente de la aplicación │ ├── components/ # Componentes visuales y funcionales │ ├── services/ # Servicios de integración │ ├── App.tsx # Componente principal │ └── main.tsx # Punto de entrada ├── .env.example # Ejemplo de variables de entorno requeridas ├── .gitignore # Exclusiones del repositorio ├── index.html # HTML base de Vite ├── metadata.json # Metadata del proyecto ├── package.json # Dependencias y scripts ├── package-lock.json # Lockfile de npm ├── tsconfig.json # Configuración TypeScript ├── vite.config.ts # Configuración de Vite └── README.md # Documentación del proyecto ``` --- ## Requisitos Antes de instalar o correr el proyecto, validar que el ambiente tenga: * Node.js 18 o superior. * npm instalado. * Acceso al repositorio en Gitea. * Archivo `.env` configurado localmente. * Proyecto Firebase configurado. * Webhook de n8n activo y disponible. --- ## Variables de entorno El proyecto requiere un archivo `.env` en la raíz del repositorio. Tomar como base el archivo `.env.example`. ```env VITE_FIREBASE_API_KEY= VITE_FIREBASE_AUTH_DOMAIN= VITE_FIREBASE_PROJECT_ID= VITE_FIREBASE_STORAGE_BUCKET= VITE_FIREBASE_MESSAGING_SENDER_ID= VITE_FIREBASE_APP_ID= VITE_WEBHOOK_URL= ``` ### Descripción de variables | Variable | Descripción | | ----------------------------------- | ----------------------------------------------------- | | `VITE_FIREBASE_API_KEY` | API Key del proyecto Firebase. | | `VITE_FIREBASE_AUTH_DOMAIN` | Dominio de autenticación de Firebase. | | `VITE_FIREBASE_PROJECT_ID` | ID del proyecto Firebase. | | `VITE_FIREBASE_STORAGE_BUCKET` | Bucket asociado al proyecto Firebase. | | `VITE_FIREBASE_MESSAGING_SENDER_ID` | Sender ID del proyecto Firebase. | | `VITE_FIREBASE_APP_ID` | App ID del proyecto Firebase. | | `VITE_WEBHOOK_URL` | URL del webhook de n8n que recibe y procesa el brief. | --- ## Instalación local Clonar el repositorio: ```bash git clone https://git.digitalcompass.agency/Isaac_Aracena/cdcbrief-glm.git ``` Entrar a la carpeta del proyecto: ```bash cd cdcbrief-glm ``` Instalar dependencias: ```bash npm install ``` Crear el archivo `.env` local usando `.env.example` como referencia: ```bash cp .env.example .env ``` Completar las variables reales en `.env`. --- ## Correr en desarrollo Ejecutar el servidor local: ```bash npm run dev ``` Abrir el navegador en: ```text http://localhost:3000 ``` Si el puerto cambia por configuración local, usar la URL indicada por Vite en la terminal. --- ## Generar build de producción Para generar la carpeta `dist/`: ```bash npm run build ``` El resultado se genera en: ```text dist/ ``` La carpeta `dist/` contiene los archivos estáticos listos para servir desde un servidor web. --- ## Validar build local con XAMPP Para validar el build con XAMPP: 1. Ejecutar: ```bash npm run build ``` 2. Copiar el contenido de `dist/` dentro de la carpeta correspondiente de Apache/XAMPP. 3. Abrir la URL local configurada. 4. Validar: * Carga de pantalla de login. * Acceso con cuenta autorizada. * Flujo completo de los seis pasos. * Grabación y reproducción de audio. * Carga de imágenes. * Carga de documentos. * Carga de archivos de campaña. * Agregado de enlaces. * Fecha límite de entrega. * Envío al webhook. * Respuesta del portal. * Enlace de carpeta generada. * Botones de copiar y abrir. --- ## Scripts disponibles | Comando | Descripción | | ----------------- | --------------------------------------------------------------------------- | | `npm install` | Instala las dependencias del proyecto. | | `npm run dev` | Inicia el servidor local de desarrollo. | | `npm run build` | Genera el build de producción en `dist/`. | | `npm run lint` | Ejecuta validaciones de lint, si están configuradas en el proyecto. | | `npm run preview` | Sirve localmente el build generado, si está disponible en la configuración. | --- ## Flujo de procesamiento ```text Usuario autorizado | v Portal CDC Brief GLM | v Captura guiada de información | v Archivos + metadata + fecha límite | v Webhook n8n | v Procesamiento del brief | v Carpeta generada en Google Drive | v Respuesta visual en el portal ``` --- ## Datos enviados al webhook La aplicación envía la información usando `FormData`. Entre los datos principales se incluyen: * Nota de voz. * Imágenes de referencia. * Documentos de apoyo. * Archivos de campaña o elementos gráficos. * Enlaces de referencia. * Fecha límite de entrega. * Metadata del usuario autenticado. * Resumen del brief. * Campos compatibles para uso en n8n, correo, Google Drive, Google Docs o Google Sheets. La fecha límite de entrega se envía en los campos: ```text deliveryDate fechaEntrega ``` --- ## Seguridad No subir credenciales reales al repositorio. Archivos que no deben versionarse: ```text .env .env.local .env.production .env.development ``` El archivo `.env.example` sí puede mantenerse en el repositorio porque solo contiene los nombres de las variables requeridas, sin valores sensibles. --- ## Reglas de desarrollo * No modificar la pantalla de login salvo que exista una solicitud explícita aprobada. * Mantener el branding visual de GomezLee Marketing. * No romper el flujo funcional existente. * Validar `npm run build` antes de subir cambios. * Si se modifica la experiencia visual, validar el flujo completo en navegador. * Si se modifica el envío al webhook, validar con n8n antes de desplegar. * Mantener actualizado el `dist/` cuando el repositorio lo requiera para despliegue estático. * No subir `node_modules`. * No subir `.env` con credenciales reales. --- ## Checklist antes de hacer commit Antes de subir cambios a Gitea, validar: * `npm install` ejecutado correctamente. * `npm run build` completado sin errores. * La carpeta `dist/` fue generada correctamente. * El portal carga en navegador. * Login funciona. * Flujo de pasos funciona. * Audio muestra iconos correctos de play y pausa. * Adjuntos se visualizan correctamente. * Botón de copiar y abrir funcionan. * Fecha límite de entrega se muestra y se envía. * Respuesta del portal se ve correctamente. * `.env` no aparece en `git status`. * `node_modules` no aparece en `git status`. --- ## Comandos recomendados para actualizar Gitea Agregar cambios: ```bash git add -A git add -f dist ``` Revisar estado: ```bash git status ``` Crear commit: ```bash git commit -m "feat: actualizar CDC Brief con branding GLM y ajustes UX finales" ``` Subir cambios: ```bash git push origin main ``` --- ## Estado actual Versión frontend actualizada con: * Branding visual GomezLee Marketing. * UX/UI principal suavizada y menos cargada. * Favicon GLM. * Botones principales ajustados al estilo GLM. * Reproductor de audio con iconos visibles de play y pausa. * Botón final con contraste corregido. * Respuesta del portal mejorada para adjuntos, documentos y audio. * Carpeta `dist/` generada y validada localmente. --- ## Mantenimiento Responsable técnico: ```text GLM IT ``` Repositorio: ```text https://git.digitalcompass.agency/Isaac_Aracena/cdcbrief-glm ``` Proyecto: ```text CDC Brief GLM ``` Área: ```text Creative Design Center / GomezLee Marketing ``` --- *GLM IT — Automatización e IA · GomezLee Marketing · 2026*