Files
tablero-cdc/README.md
T
Isaac_Aracena b4d3abc9fc agregar README inicial del Tablero CDC
Se agrega documentación inicial del proyecto, incluyendo descripción general, estado actual, funcionalidades pendientes, arquitectura prevista, variables de entorno, seguridad y notas de despliegue.
2026-05-23 16:12:56 +00:00

5.1 KiB

Tablero CDC

Aplicación interna para la gestión visual de aprobaciones de proyectos creativos del equipo CDC de GomezLee Marketing.

El objetivo de esta app es simplificar el flujo de trabajo del equipo creativo mediante un tablero tipo Trello, donde cada tarjeta representa un proyecto y centraliza sus datos principales, enlaces y estado de aprobación.


Descripción general

Tablero CDC permite crear, visualizar y gestionar proyectos creativos en una interfaz sencilla, clara y colaborativa.

Cada proyecto se representa como una tarjeta dentro del tablero. Al abrir una tarjeta, el usuario puede consultar o completar información como cliente, marca, país, solicitante, brief, enlaces de propuestas, artes finales, estatus y otros datos relevantes para el proceso interno.

La app está pensada para alimentar posteriormente el archivo de aprobaciones utilizado por el dashboard de Power BI del departamento creativo.


Objetivo del proyecto

Reducir el trabajo manual y desordenado que actualmente se realiza en hojas colaborativas, reemplazándolo por una interfaz más amigable para el equipo.

La app busca:

  • Centralizar la información de cada proyecto creativo.
  • Facilitar el seguimiento de propuestas y artes finales.
  • Permitir que el equipo agregue enlaces de trabajo de forma organizada.
  • Mantener proyectos cerrados visibles, pero diferenciados visualmente.
  • Preparar la información para ser enviada al Sheet original que alimenta Power BI.
  • Mejorar la colaboración del equipo creativo.

Estado actual

Esta versión corresponde a la base inicial limpia del proyecto.

Incluye:

  • React + Vite puro.
  • Configuración de base en vite.config.ts.
  • Favicon personalizado para la pestaña del navegador.
  • Login corporativo con Firebase.
  • Diseño visual aprobado como base del producto.

Funcionalidades principales del prototipo

  • Tablero visual de proyectos.
  • Tarjetas por proyecto.
  • Filtros por estado:
    • Todos
    • Activos
    • Cerrados
  • Buscador por datos del proyecto.
  • Modal de creación y edición de proyecto.
  • Campos para cliente, marca, país y solicitante.
  • Campo de Country Manager.
  • Links de brief.
  • Links de propuestas.
  • Links de artes finales.
  • Etiquetas de color por proyecto.
  • Visualización de estatus.
  • Preparación para control de permisos por usuario.

Funcionalidades pendientes

Las siguientes funcionalidades se implementarán en próximas fases:

  1. Control de permisos por usuario.
  2. Ocultar monto interno a usuarios que no sean Gerardo Marrero.
  3. Bloquear edición de estatus para usuarios que no sean Gerardo Marrero.
  4. Almacenamiento persistente.
  5. Sincronización multiusuario.
  6. Paginación en las vistas de Todos, Activos y Cerrados.
  7. Sincronización automática de desplegables con la hoja listas del Google Sheet original.
  8. Escritura automática de datos en el Sheet original mediante n8n u otra integración definida.
  9. Agregar una nueva columna final para enlace de brief en el Sheet original.

Arquitectura prevista

La arquitectura esperada para las próximas fases es:

Frontend React/Vite
        ↓
Firebase Auth
        ↓
Almacenamiento persistente
        ↓
n8n como capa de integración
        ↓
Google Sheets original
        ↓
Power BI

La app no debe modificar la estructura existente del Sheet original, ya que ese archivo alimenta un dashboard de Power BI. Cualquier columna nueva debe agregarse al final y validarse previamente.


Instalación local

Instalar dependencias:

npm install

Ejecutar en modo desarrollo:

npm run dev

Generar build de producción:

npm run build

Vista previa del build:

npm run preview

Variables de entorno

El proyecto utiliza variables de entorno para Firebase y futuras integraciones.

Crear un archivo .env local basado en .env.example.

Estructura esperada:

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=""

El campo VITE_WEBHOOK_URL puede permanecer vacío hasta que se defina la integración con n8n.


Seguridad

No se deben subir al repositorio:

  • .env
  • .env.local
  • .env.production
  • .env.development
  • node_modules
  • dist
  • tokens
  • credenciales
  • archivos con secretos
  • logs innecesarios

El archivo .env.example sí puede subirse, siempre que no contenga valores reales.


Despliegue

El proyecto está preparado para publicarse bajo la ruta:

base: "/tablero-cdc/"

Si la ruta final cambia, debe actualizarse vite.config.ts.


Notas importantes

  • Este repositorio representa la versión inicial del proyecto.
  • El diseño base fue aprobado antes de iniciar las integraciones técnicas.
  • Las próximas fases deben implementarse en commits separados.
  • No se debe alterar la estructura del Google Sheet original sin validación previa.
  • La integración con Power BI depende de mantener estable la estructura del Sheet.

Equipo

Proyecto interno de GomezLee Marketing.