Capstone — Panel MKT

El objetivo

No es una landing: es una herramienta

Todos los módulos anteriores te entrenaron para hacer páginas que comunican. El capstone es otra liga: una aplicación interna que la usás vos y tu equipo todos los días. Una landing busca un click; un panel busca que trabajes sobre datos.

El Panel MKT es exactamente lo que un equipo de marketing necesita: ver cuántos leads entraron, qué campaña rinde mejor, el costo por lead, y poder cargar una campaña o un contacto nuevo sin pedírselo a nadie. La buena noticia: lo armás con las mismas habilidades que ya practicaste, sin escribir código a mano.

Hay una app aparte (panel-mkt)

Esta página es el brief: te explica qué construir y con qué prompts. La construcción real vive en un proyecto separado (la app panel-mkt), que es la que vas a publicar en panel.iebia.xyz.

La meta

Cómo se ve lo que vas a construir

Esta es la foto del resultado. Pasá el mouse por las barras del gráfico. Cuando termines el capstone, vas a tener algo así de pulido — online y funcionando:

panel.iebia.xyz

Resumen

Septiembre 2026

Buscar… Nueva campaña

+18%

815

Leads del mes

-9%

$ 1.920

Costo por lead

Campañas activas

+0,6 pts

4,7%

Tasa de conversión

Leads por mes

420

Abr

510

May

480

Jun

640

Jul

590

Ago

815

Sep

Campañas

Campaña	Canal	Leads	Estado
Cuenta Comitente Q3	Meta Ads	312	Activa
Fondos — Renta Fija	Google	198	Activa
Webinar Cripto	LinkedIn	87	Pausada
App IEB Mobile	Meta Ads	154	Activa
Newsletter Inversores	Email	64	Borrador

No copies pixel por pixel

Usá esto como norte, no como molde. La gracia del vibe coding es que vos le das tu impronta: tus campañas reales de IEB, tus colores, tus métricas. La IA construye; vos dirigís.

El mapa

Las partes del panel (y qué módulo aplica)

Un dashboard no se pide de una. Se arma por partes, y cada parte usa lo que ya aprendiste. Este es el mapa de qué módulo te sirve para cada pieza:

Sidebar + layout

La navegación lateral y la estructura general de pantallas (Inicio, Campañas, Leads, Reportes).

01 Estructura · 04 Componentización · 07 Frameworks

Stat cards

Las tarjetas con los números grandes: leads del mes, costo por lead, conversión.

03 Diseño UI · 04 Componentización · 06 Animaciones

Gráfico

El gráfico de leads por mes que cuenta la evolución de un vistazo.

03 Diseño UI · 06 Animaciones · 07 Frameworks

Tabla de campañas

El listado de campañas con canal, leads, costo y estado. El corazón de datos del panel.

04 Componentización · 05 Responsive · 08 Integraciones

Form en modal

El formulario para cargar una campaña o un lead nuevo, dentro de un modal.

04 Componentización · 08 Integraciones

Datos + publicación

Que el panel se vea bien en cualquier pantalla, cargue rápido y quede online.

05 Responsive · 09 SEO/Performance · 10 Publicación

Las herramientas

El stack que usa el panel

No tenés que dominar esto: la IA lo maneja. Pero saber qué hace cada pieza te ayuda a pedir mejor y a entender qué te responde (esto es el módulo 07 en acción). Es el mismo stack de este sitio.

stack

Next.js + React   → la app y sus pantallas (rutas: /, /campanias, /leads)
Tailwind CSS      → los estilos (espaciado, colores, responsive)
shadcn/ui         → los componentes base (botón, tabla, modal, inputs)
Recharts          → el gráfico de leads por mes
Vercel            → donde se publica, gratis y en minutos
(opcional) datos  → al principio, datos de ejemplo; después, una hoja
                    de cálculo o una base real conectada por la IA

Empezá con datos de mentira

No esperes a tener la base de datos lista. Arrancá con datos de ejemplo (“mock”) escritos a mano. Cuando el panel se vea y funcione bien, recién ahí conectás los datos reales. Primero la forma, después el motor.

Paso a paso

La secuencia de prompts para construirlo

Esta es la receta. Un prompt por paso, en orden. Copiá, pegá, mirá el resultado, ajustá, y recién ahí pasá al siguiente. No pidas todo junto: la IA rinde mucho mejor cuando vas por capas (módulo 02).

Paso 1 · El esqueleto

Crear el proyecto y el layout con sidebar

Creá un proyecto nuevo en Next.js con Tailwind y shadcn/ui llamado "panel-mkt".
Es un dashboard interno de marketing (no una landing). Identidad: navy oscuro + un acento verde-teal, fondo claro, tipografía Inter, estilo minimalista y premium como un backoffice corporativo.

Armá el layout base: una sidebar fija a la izquierda con los items "Inicio", "Campañas", "Leads", "Reportes" y "Ajustes" (con íconos), y un área de contenido a la derecha con una barra superior que tenga el título de la sección y un botón "Nueva campaña".
Por ahora el contenido puede estar vacío. No conectes datos todavía.

Paso 2 · Las métricas

Stat cards con los KPIs principales

En la pantalla "Inicio", agregá una fila de 4 tarjetas de métrica (stat cards), responsive (4 en desktop, 2 en mobile).
Cada tarjeta muestra: un ícono, el nombre de la métrica, el número grande, y un porcentaje de variación (verde si sube, ámbar si baja).
Usá estos datos de ejemplo por ahora:
- Leads del mes: 815 (+18%)
- Costo por lead: $ 1.920 (-9%)
- Campañas activas: 3 (+1)
- Tasa de conversión: 4,7% (+0,6 pts)

Paso 3 · El gráfico

Gráfico de leads por mes con Recharts

Debajo de las tarjetas, agregá un gráfico de barras "Leads por mes" usando Recharts.
Datos de ejemplo (mes, leads): Abr 420, May 510, Jun 480, Jul 640, Ago 590, Sep 815.
Que las barras usen el color de acento de la marca, tengan tooltip al pasar el mouse, y se vean limpias (sin grilla recargada). Que sea responsive.

Paso 4 · La tabla

Tabla de campañas con estados

Al lado del gráfico, agregá una tabla "Campañas" con las columnas: Campaña, Canal, Leads y Estado.
El Estado se muestra como un chip de color: "Activa" en verde, "Pausada" en ámbar, "Borrador" en gris.
Datos de ejemplo:
- Cuenta Comitente Q3 · Meta Ads · 312 · Activa
- Fondos Renta Fija · Google · 198 · Activa
- Webinar Cripto · LinkedIn · 87 · Pausada
- App IEB Mobile · Meta Ads · 154 · Activa
- Newsletter Inversores · Email · 64 · Borrador
La tabla tiene que verse bien en mobile (scroll horizontal si hace falta).

Paso 5 · El formulario en modal

Modal para cargar una campaña nueva

El botón "Nueva campaña" de la barra superior tiene que abrir un modal (dialog) con un formulario para cargar una campaña.
Campos: Nombre (texto), Canal (select: Meta Ads / Google / LinkedIn / Email), Presupuesto (número), Estado (select: Activa / Pausada / Borrador).
Validá que el nombre no esté vacío. Al guardar, que la campaña nueva aparezca arriba de la tabla. Botones "Cancelar" y "Guardar campaña".
Usá los componentes de shadcn/ui (Dialog, Input, Select, Button).

Paso 6 · Pulido y responsive

Repaso de detalle, responsive y microinteracciones

Repasemos el panel completo para que se vea premium:
1. Revisá que TODO se vea bien en mobile: la sidebar puede colapsar a un menú, las tarjetas se apilan, la tabla scrollea.
2. Agregá microinteracciones sutiles: las tarjetas y filas con un leve hover, y una animación suave de entrada cuando carga el dashboard.
3. Chequeá espaciado y jerarquía: que los números importantes resalten y nada se vea apretado.
No rompas lo que ya funciona: solo ajustá estilo e interacción.

Paso 7 · Datos reales (opcional)

Conectar datos de verdad

Quiero reemplazar los datos de ejemplo por datos reales.
Tengo mis campañas en {{una planilla de Google Sheets / un export CSV / una base de datos}}.
Explicame paso a paso la forma más simple de conectarlo a este panel, y armá el código necesario.
Mantené los datos de ejemplo como respaldo por si la conexión falla.

Si algo se rompe, no entres en pánico

Pegale a la IA el error tal cual aparece y el contexto: “Después de pedirte X, me sale este error: [pegás el error]. ¿Qué pasó y cómo lo arreglamos?”. Iterar es parte del proceso, no una señal de que algo salió mal (módulo 02).

A la cancha

Publicar y entregar

Una web que vive solo en tu compu no le sirve a nadie. El último paso es ponerlo online — y es más fácil de lo que pensás (módulo 10):

flujo

Tu proyecto (panel-mkt)
   ↓  subís el código
GitHub  (el repositorio)
   ↓  lo conectás
Vercel  (lo publica solo en cada cambio)
   ↓
panel.iebia.xyz  ← tu panel, online y compartible

Prompt para guiar la publicación

Mi panel ya funciona en local. Quiero publicarlo en Vercel con el dominio panel.iebia.xyz.
Guiame paso a paso: cómo subir el código a GitHub, conectar el repo a Vercel, y qué configurar para que el deploy salga bien.
Avisame si hay algo que tenga que cargar (variables de entorno, claves, etc.).

Checklist de entrega del Panel MKT

0/7

Cierre del curso

Mirá lo que ya sabés hacer

Arrancaste sin saber por dónde empezar. Ahora podés imaginar una herramienta, describírsela a la IA con criterio, iterar sin romper nada y publicarla para que la use todo el equipo. Eso no es poco: es exactamente lo que hace que el marketing de IEB se mueva más rápido que el de cualquiera.

Pensar un proyecto antes de tocar nada

Pedirle bien a la IA, por capas

Reconocer un buen diseño de uno pobre

Armar interfaces con componentes

Hacer que todo funcione en mobile

Conectar formularios, métricas y datos

Publicar y mantener una web viva

Seguir mejorándola prompteando

El curso no termina acá

El Panel MKT es tu primer proyecto, no el último. Cada idea que tengas —un tablero de reportes, una landing de campaña, una mini-app interna— ahora está a un buen prompt de distancia. Bienvenida/o al vibe coding.

Demo en vivo