SaaS · Side Project · 2026

Gritt Reports

Reportes automáticos de redes sociales para estudios creativos. Un link, no un PDF. Primer caso de referencia: Lanz World.

Rol
Design Owner · Sole Builder
Estudio
Gritt (ex AWDAZ)
Estado
MVP en construcción · 2026
Disciplinas
Product · Design System · Frontend
gritt.reports/r/lanz-2026-10-weekly
MVP · Mockup
g
Gritt Reports
para Lanz World
Compartir Imprimir
Reporte semanal · Cliente
Lanz World
SEMANA 42 · 2026
13 oct → 19 oct
IG · TK · FB
Alcance
184K
↑ +12.4% vs sem 41
Promedio 26.3K/día
IG · TK
Views
92.7K
↑ +8.1%
Avg. retention 48%
All
Interacciones
6.3K
↓ −3.2%
Likes · Comments · Shares
IG · TK · FB
Seguidores
+412
↑ +22.5%
Base total 48.2K
Engagement diario 7 días
Audiencia · Globo 14 países
Top publicaciones
IG · Reel
Última milla en 24h: así entregamos antes del almuerzo
84Kviews3.2Klikes
TK · Video
Behind the scenes: cómo rutamos 400 paquetes en Bogotá
52Kviews1.8Klikes
IG · Carousel
Nuevo centro de operaciones en Medellín. Fotos del equipo.
31Kviews1.1Klikes
Insights · 3 hallazgos Auto-generados
01 Los reels de operaciones ganan 2.3× más views que los posts estáticos. Vale la pena duplicar producción.
02 La audiencia 25-34 creció 18% esta semana. Es tu segmento de contratación B2B.
03 Las interacciones bajaron porque pausaste stories 3 días. Normal.
Inversión · Pauta Semana 42
Gastado esta semana
$ 1.2M
68% del presupuesto$ 1.76M total
Generado por Gritt Reports · 20 oct 2026 Próximo reporte · Lun 27 oct · 9 AM
Contexto

El reporte semanal que arruina las semanas de los estudios.

Capturas de Meta Business Suite, Excel frágil, un PDF que se ve amateur y se abre poco. Looker Studio es frío y necesita un data engineer. Metricool es genérico y no carga la marca del estudio. Hay un hueco: un reporte web animado, con la identidad del estudio, pensado para abrir desde el celular.

Más contexto · posicionamiento

Gritt Reports no compite con Looker. Compite con la tarde del viernes que el estudio pierde preparando el reporte, y con la impresión que deja un PDF genérico cuando el cliente paga millones mensuales por un servicio premium.

El segmento intermedio son estudios con 3-20 clientes, demasiado chicos para montar BI serio y demasiado premium para entregar un dashboard genérico. Pagan por reportes que se vean como su marca, sin diseñarlos a mano cada semana.

Decisión · 01

Reporte editorial, no dashboard admin.

Rechazo deliberado al admin template genérico. Negro cálido #1d1d1b, acento lima, blanco. Mucho aire, jerarquía clara, números grandes como protagonistas. Animaciones cortas con propósito, no decorativas.

Más detalle · sistema de motion

Entrada escalonada de las KPI cards, conteo de números al cargar, transición suave en hover. Framer Motion respetando prefers-reduced-motion. El criterio es: si el cliente abre el link desde el celular en el bus, lo tiene que entender en 15 segundos.

Decisión · 02

Capa de datos abstraída: diseñar antes que integrar.

La UI se construye contra una interfaz MetricsProvider tipada. MockMetricsProvider sirve datos ficticios de Lanz hoy; MetaMetricsProvider conectará Meta Graph API mañana sin tocar un componente.

Hoy
MockMetricsProvider
seed · Lanz
→
interface MetricsProvider
→
Siempre
UI
no se entera
Mañana
MetaMetricsProvider
Meta Graph API
Más detalle · modelo y rutas

Decisión de scope: las integraciones reales están fuera del MVP. Se diseñan como interfaz y se dejan listas para implementarse. El MVP demuestra criterio de producto y diseño; no es necesario pelearme con OAuth de Meta esta semana para probar que el reporte convence al cliente.

  • Modelo: Client, Report, Metric (serie diaria), Campaign, AudienceBreakdown (edad, género, ubicación), Insight.
  • Ruta estrella: /r/[slug] — reporte público, sin auth, compartible por link.
  • Admin: /admin con mock de auth, lista de clientes, historial y creación de reporte.
  • Email preview: /admin/email-preview/[slug] para iterar sobre el render del email semanal.
Decisión · 03

Primero el sistema, después el reporte.

Tokens Tailwind + componentes base (KpiCard, ChartCard, Delta, Badge, Skeleton) viven en /system como demo navegable. Para una vacante de Design Engineer, el design system es la prueba más honesta.

Next.js 14 · App Router TypeScript strict Tailwind + tokens Framer Motion Recharts COBE Phosphor Vercel
Más detalle · componentes del sistema

La ruta /system expone tokens y componentes como demo navegable. Es parte del case study, no un anexo técnico — el design system es la evidencia de cómo pienso un producto antes de pintarlo.

  • Tokens: color, tipografía, espaciado, radios, sombras, motion (duraciones y easings).
  • Primitivos: Button, Badge, Delta, Skeleton, EmptyState.
  • Compuestos: KpiCard, ChartCard, InsightCard, BudgetBar.
Estado · En construcción

MVP en implementación. URL pública próximamente.

Scaffolding Next.js en pie, tokens inicializados, interfaz MetricsProvider tipada. En trabajo activo: componentes base y ruta /r/[slug] con seed de Lanz. Deploy planeado en gritt.buenhombre.design.

Hipótesis en validación
Roadmap

Qué viene después del MVP.

01Meta Graph API · TikTok · YouTube
02Cron semanal · lunes 9 AM
03Emails con token + expiración
04Branding por cliente
05Multi-tenant · white-label
Siguiente proyecto
Driftway Arcade 3D · Three.js · Ranking por piloto · 2026