Problema
Los equipos de newsletter suelen repartir sus datos entre exportaciones, informes de campaña, segmentos y hojas de cálculo. El reto no es ver métricas, sino entender qué cambió, qué audiencia está bajo presión y qué hacer después.
← Casos de estudio
Inteligencia de marketing / Producto de datos
Campaign Pulse
Centro de mando local-first para inteligencia de marketing.
Campaign Pulse convierte datos de newsletters, campañas, audiencias, objetivos y exportaciones CSV en diagnósticos validados por adaptadores, señales de presión, lecturas frente a objetivos e informes operativos mensuales.
Listo para portfolio / prototipo local-first
Next.jsTypeScriptTailwindRechartsLocal JSONlocalStorageFileReader CSVGitHub Actions
TipoPrototipo frontend avanzado de producto de datos
UsoRendimiento de newsletters, presión de audiencia, objetivos e informes
RolProducto, modelado de datos, UX e ingeniería frontend
DatosJSON sintético y sesiones CSV locales en navegador
Solución
Normalizar los hechos y hacer visible la decisión operativa.
Campaign Pulse convierte datos demo y exportaciones CSV en una capa analítica normalizada con diagnósticos frente a objetivos, señales de presión, movimiento de segmentos e informes operativos mensuales.
Qué construí
Un ciclo completo de análisis local-first.
Contrato de adaptador
Un límite normalizado para JSON y exportaciones CSV planas.
Adaptador Demo JSON
Valida campañas, newsletters, audiencias y objetivos sintéticos.
Adaptador CSV
Agrupa filas newsletter × segmento dentro del modelo compartido.
Mapeo editable
Alias inferidos, cambios manuales y comprobación de campos obligatorios.
Diagnóstico de rechazos
Explica filas inválidas antes de activar los datos.
Carga CSV local
FileReader procesa el archivo sin enviarlo a un servidor.
Objetivos editables
Objetivos globales, de campaña y segmento en localStorage.
Chips de comparación
Estados on track, watch y off track dentro de cada lectura.
Audiencia master-detail
Compara todos los segmentos y profundiza en uno.
Calendario + drawer
Cadencia y detalle de newsletter comparten contexto.
Comparación de campañas
Contribución, presión, mejores envíos y siguiente acción.
Informe + export pack
Memo imprimible y archivos JSON/CSV generados en navegador.
CI + despliegue
Tests enfocados, GitHub Actions y preparación para Vercel.
Arquitectura / Mapa del sistema
Ingesta, inteligencia y presentación permanecen separadas.
Los datos fuente no incluyen ratios, rankings, diagnósticos ni recomendaciones precalculadas. Los adaptadores normalizan primero; las utilidades TypeScript calculan la inteligencia después de validar.
01CSV / Demo JSON
02Adapter validation
03Normalized dataset
04Computed analytics
05Target evaluation
06UI workspaces
07Export / report
Entradas
JSON sintético o una exportación CSV local del navegador.
Contrato
Mapeo, validación, motivos de rechazo y entidades normalizadas.
Inteligencia
Ratios, rankings, presión, movimiento, objetivos, riesgos y recomendaciones.
Espacios
Overview, Calendar, Newsletters, Campaigns, Audience, Insights, Report y Data.
Pantallas clave
Un dataset, varias superficies de decisión.
La interfaz funciona como sala operativa, no como dashboard genérico. Cada espacio responde una pregunta manteniendo el mismo mes, fuente, objetivos y contexto de detalle.
Inteligencia de datos
Señales deterministas, no comentarios generados por IA.
Cada lectura se calcula desde hechos locales normalizados. Las fórmulas y umbrales son inspeccionables, repetibles y testeables.
OR
Aperturas únicas ÷ entregados. Respuesta inicial a asunto y remitente.
CTR
Clics únicos ÷ entregados. Profundidad de clic sobre la audiencia entregada.
CTOR
Clics únicos ÷ aperturas únicas. Rendimiento del contenido tras la apertura.
Conversión
Pedidos ÷ entregados. Conecta entrega con acción posterior.
RPR
Ingresos ÷ entregados. Compara valor entre envíos, campañas y segmentos.
Ingresos vs objetivo
Evalúa el valor real frente a objetivos globales o específicos.
Presión / saturación
Frecuencia, solapamiento y señales negativas muestran sobreexposición.
Movimiento de segmento
Growing, stable, declining, fatigued y recovering añaden dirección.
Filas rechazadas
Los errores permanecen visibles en vez de desaparecer.
Recomendaciones
Las acciones combinan rendimiento y restricciones de presión.
Notas de ingeniería
Un prototipo frontend creíble con límites explícitos.
El proyecto prioriza arquitectura de producto, analítica determinista, adaptadores y calidad de interacción sin añadir infraestructura innecesaria.
- Next.js 14 App Router, React, TypeScript, Tailwind CSS y Recharts.
- JSON local estático con datos sintéticos y objetivos por defecto.
- FileReader para CSV y activación de datos solo durante la sesión.
- localStorage únicamente para objetivos editables.
- Utilidades deterministas y tests de adaptadores, objetivos, carga y exportación.
- GitHub Actions y despliegue Vercel sin variables de entorno.
- Sin backend, base de datos, autenticación, API keys, OAuth ni llamadas IA/LLM.
El flujo de implementación también consultó la colección awesome-vibe-coding como recurso de desarrollo. awesome-vibe-coding ↗
Resultado
Un prototipo de herramienta interna listo para portfolio.
Campaign Pulse reúne pensamiento de producto, ingeniería frontend, modelado de datos, analítica determinista, diseño de adaptadores e iteración UX en una superficie local-first coherente.
Pensamiento de producto
Convierte métricas fragmentadas en preguntas y acciones operativas.
Ingeniería frontend
Coordina espacios analíticos densos sin depender de backend.
Modelado de datos
Separa filas fuente, hechos normalizados, inteligencia y presentación.
Iteración UX
Equilibra lectura rápida con detalle de calendario, audiencia, campaña e informe.