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

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.

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:

git clone https://git.digitalcompass.agency/Isaac_Aracena/cdcbrief-glm.git

Entrar a la carpeta del proyecto:

cd cdcbrief-glm

Instalar dependencias:

npm install

Crear el archivo .env local usando .env.example como referencia:

cp .env.example .env

Completar las variables reales en .env.

Correr en desarrollo

Ejecutar el servidor local:

npm run dev

Abrir el navegador en:

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/:

npm run build

El resultado se genera en:

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:

Ejecutar:

npm run build

Copiar el contenido de dist/ dentro de la carpeta correspondiente de Apache/XAMPP.
Abrir la URL local configurada.
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

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:

deliveryDate
fechaEntrega

Seguridad

No subir credenciales reales al repositorio.

Archivos que no deben versionarse:

.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:

git add -A
git add -f dist

Revisar estado:

git status

Crear commit:

git commit -m "feat: actualizar CDC Brief con branding GLM y ajustes UX finales"

Subir cambios:

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:

GLM IT

Repositorio:

https://git.digitalcompass.agency/Isaac_Aracena/cdcbrief-glm

Proyecto:

CDC Brief GLM

Área:

Creative Design Center / GomezLee Marketing

GLM IT — Automatización e IA · GomezLee Marketing · 2026