GitHub - iamnocodeveloper/content-command-center: Dashboard de contenido para creadores sobre la API de Zernio. Hooks, analiticas, competidores, programacion multiplataforma, calendario y tendencias de IA.

Seis secciones para capturar hooks, medir lo que funciona, vigilar a tu competencia y publicar en todas tus cuentas con un clic.

Construido sobre la API de Zernio · Next.js 15 · TypeScript · Tailwind · shadcn/ui · modo oscuro con acentos terracota

por nocodeveloper · Joel Araujo

Arranque rápido · Las seis secciones · Arquitectura · Despliegue · Documentación

⚡ Respuestas rápidas

Pregunta	Respuesta
¿Se puede compartir en GitHub?	Sí. No hay secretos ni binarios en el repo: `.env.local`, `.data/` y `.commandcode/` están en `.gitignore`.
¿Se despliega rápido?	Sí. Un clic en Vercel o `docker compose up`. Ambos caminos están probados y documentados.
¿La memoria es local?	Sí. El store de hooks, competidores, tendencias y plan vive en memoria del proceso Node (colgado de `globalThis`). Persiste entre recargas en desarrollo, pero se pierde al reiniciar y no se comparte entre instancias. Está aislado en un único archivo para poder cambiarlo.
¿Se conecta a alguna base de datos?	No por defecto. Funciona sin base de datos: Zernio es la fuente de verdad de publicaciones y métricas, y el resto vive en memoria con datos semilla. Si necesitas persistencia real, hay una ruta de migración a Postgres con el modelo completo en `docs/03-bases-de-datos.md`.
¿Necesita credenciales para arrancar?	No. Arranca en modo demo con datos semilla deterministas, así que las seis secciones son navegables desde el primer segundo.
¿Dónde se guardan las credenciales?	En `.data/settings.json` con permisos `0600`, o en variables de entorno. Nunca se envían al navegador: la API sólo devuelve una versión enmascarada.

📸 Las seis secciones

#	Sección	Ruta	Qué resuelve
1	Biblioteca de Hooks	`/hooks`	Cada hook guardado se transcribe y se normaliza a plantilla — `[X] acaba de destruir [Y]`, `Deja de hacer [X]`, `[NÚMERO] cosas que me hubiera gustado saber`. Búsqueda por nicho, tipo de hook y visualizaciones, con creador original, views y botón «Usar este hook».
2	Analíticas	`/analytics`	Vistas, guardados, nuevos seguidores y volumen de interacción con tendencia a 7 / 30 / 90 días. Marca como contenido destacado todo reel que supere 2× la media de 30 días y explica el top 5 según sus propias señales.
3	Seguimiento de Competidores	`/competitors`	Cada domingo a las 06:00 analiza los 5 mejores Reels de 8 cuentas: transcribe el audio y extrae el hook y el texto en pantalla, ordenados por views, con seguidores del creador y botón «Guardar en el Banco de Hooks».
4	Programador	`/scheduler`	Publicación multiplataforma con un solo clic y generación automática de captions por red (12 hashtags en Instagram, 2 en X). Programar, publicar ahora o guardar borrador.
5	Calendario de Contenido	`/calendar`	Vista mensual completada automáticamente por scripts que cruzan hooks con ángulos de contenido y colocan cada pieza en el mejor hueco de engagement. Al hacer clic, panel lateral con el guion completo y la caption.
6	Tendencias	`/trends`	Noticias de IA de 12 fuentes, clasificadas con un hook score 0-100, ángulo de contenido y hook sugerido listo para producción.

Rutas de apoyo: /script (estudio de guiones donde aterriza «Usar este hook») y /settings (conexiones con Zernio y con el modelo de IA).

🚀 Arranque rápido

git clone https://github.com/iamnocodeveloper/content-command-center.git
cd content-command-center

npm install --include=dev
npm run dev

Abre http://localhost:3000. Arranca en modo demo: verás 22 hooks clasificados, 8 competidores con 40 reels transcritos, 180 días de analíticas y las 12 fuentes de tendencias, todo sin configurar nada.

Nota sobre NODE_ENV: si tu shell tiene NODE_ENV=production, npm omite las devDependencies y tsc/eslint desaparecen. Usa siempre npm install --include=dev.

Conectar datos reales

Ve a /settings y pega:

API key de Zernio (sk_…, desde zernio.com/dashboard/api-keys) y el Profile ID que agrupa tus cuentas. Pulsa Probar conexión — llama de verdad a GET /v1/accounts antes de guardar.
Modelo de IA (OpenAI o Anthropic) para que los guiones, captions y variaciones se escriban con IA. Sin él, el generador heurístico local sigue funcionando.

🏗 Arquitectura

flowchart TB
    subgraph Client["Navegador"]
        RSC["Server Components<br/><i>HTML ya renderizado</i>"]
        CC["Client Components<br/><i>React Query + Recharts</i>"]
    end

    subgraph API["Route Handlers · app/api"]
        Z["/api/analytics · /api/schedule<br/>/api/accounts · /api/calendar"]
        A["/api/ai/script · /api/ai/hooks<br/>/api/ai/rewrite · /api/captions"]
        S["/api/settings"]
        C["/api/cron/*<br/><i>protegido con CRON_SECRET</i>"]
    end

    subgraph Domain["lib/domain"]
        GW["zernio-gateway<br/><i>real vs demo + degradación</i>"]
        REPO["repository<br/><i>store en memoria</i>"]
        HE["hook-engine<br/><i>clasificación determinista</i>"]
        AS["analytics-service<br/><i>destacados y top 5</i>"]
    end

    subgraph Services["lib/services"]
        AI["ai.ts<br/><i>OpenAI / Anthropic / heurístico</i>"]
        CAP["captions.ts"]
        TR["transcription.ts"]
        CAL["calendar-service.ts"]
        TC["trend-classifier.ts"]
    end

    Zernio["☁️ API de Zernio<br/>zernio.com/api/v1"]
    Disk[("💾 .data/settings.json<br/><i>0600</i>")]
    LLM["☁️ OpenAI · Anthropic"]
    Feeds["📡 12 feeds RSS/Atom"]

    RSC --> Domain
    CC --> API
    RSC --> API
    Z --> GW
    A --> AI
    S --> Disk
    C --> TC
    C --> TR

    GW --> Zernio
    GW --> REPO
    AI --> LLM
    AI -.->|fallback| CAP
    TR --> LLM
    TC --> Feeds
    REPO --> HE
    REPO --> AS
    CAP --> CAL

Flujo completo: del feed a la publicación

sequenceDiagram
    autonumber
    actor Creador
    participant Lib as Biblioteca de Hooks
    participant Engine as Motor de hooks
    participant Script as Estudio de guiones
    participant IA as Modelo de IA
    participant Sched as Programador
    participant Z as API de Zernio
    participant Redes as Instagram · TikTok · YouTube · …

    Creador->>Lib: Guarda un hook (o lo importa de un competidor)
    Lib->>Engine: clasificar texto libre
    Engine-->>Lib: plantilla + tipo + nicho + tier
    Creador->>Lib: «Usar este hook»
    Lib->>Script: inserta el hook (localStorage)
    Script->>IA: generar guion + caption
    IA-->>Script: beats, CTA, hashtags
    Creador->>Sched: Enviar al Programador
    Sched->>Z: POST /v1/posts (una entrada por cuenta)
    Note over Sched,Z: cabecera x-request-id → reintento idempotente
    Z->>Redes: publica o programa
    Redes-->>Z: estado por plataforma
    Z-->>Sched: post { _id, status }

Resiliencia: cada integración tiene una versión local

flowchart LR
    A["API de Zernio"] -->|falla o sin credencial| A2["🟡 Datos semilla deterministas"]
    B["OpenAI / Anthropic"] -->|falla o sin key| B2["🟡 Generador heurístico local"]
    C["Whisper / Deepgram"] -->|falla o sin key| C2["🟡 Transcripción simulada"]
    A2 --> D["La UI nunca queda en blanco<br/><i>muestra el motivo en `warning`</i>"]
    B2 --> D
    C2 --> D

🧩 Stack

Capa	Elección	Por qué
Framework	Next.js 15 (App Router)	Server Components leen la API sin exponer la key; Route Handlers para las integraciones.
Lenguaje	TypeScript 5.7 `strict`	El contrato de Zernio está modelado a mano en `lib/zernio/types.ts`.
UI	React 19 + shadcn/ui	Componentes copiados al repo, no instalados: control total, cero sorpresas de versionado.
Estilos	Tailwind CSS 3.4	Tokens en variables HSL, tema oscuro cálido con acento terracota.
Gráficas	Recharts 2	Área + barras responsivas en Analíticas.
Datos cliente	TanStack Query 5	`initialData` desde el servidor y refetch por filtros.
Validación	Zod 3	Todos los route handlers validan su body.
IA	OpenAI · Anthropic · heurístico	Un único punto de entrada con degradación garantizada.
Despliegue	Vercel · Docker · Node	`output: standalone` para una imagen mínima.

Cada decisión está razonada en CLAUDE.md, incluidas las alternativas descartadas.

📦 Despliegue

Vercel (el más rápido)

Añade ZERNIO_API_KEY, ZERNIO_PROFILE_ID y CRON_SECRET en Environment Variables. vercel.json ya declara los dos cron.

Importante en serverless: el sistema de archivos es efímero, así que .data/settings.json no persiste. En Vercel usa variables de entorno en lugar del panel; la precedencia está pensada para esto.

Docker

docker compose up -d --build     # el volumen ccc-data persiste las credenciales

O manualmente:

docker build -t content-command-center .
docker run -p 3000:3000 -v ccc-data:/app/.data \
  -e ZERNIO_API_KEY=sk_... -e CRON_SECRET=... content-command-center

Checklist de producción

ZERNIO_API_KEY y ZERNIO_PROFILE_ID verificados con Probar conexión.
Al menos una cuenta conectada en Zernio.
Add-on de Analytics activo (necesario para seguidores y métricas completas).
CRON_SECRET definido — sin él /api/cron/* queda público.
Almacenamiento persistente para .data o credenciales sólo por variables de entorno.
Autenticación añadida si el dashboard se expone en internet.

Guía completa, cron en UTC y solución de problemas: docs/08-despliegue.md.

📚 Documentación

Documento	Contenido
`CLAUDE.md`	Empieza aquí. Stack, arquitectura y las 13 decisiones técnicas con su motivo.
`docs/01-proyecto.md`	Visión, alcance y recorrido de usuario por las seis secciones.
`docs/02-arquitectura.md`	Capas, flujos de datos y frontera servidor/cliente.
`docs/03-bases-de-datos.md`	Modelo de datos completo, store actual y migración a Postgres.
`docs/04-diseno.md`	Design system: tokens, terracota, tipografía, accesibilidad.
`docs/05-reglas-negocio.md`	Todos los umbrales y fórmulas: 2× la media, hook score, tiers, huecos óptimos.
`docs/06-integraciones.md`	Zernio y transcripción: endpoints, errores, idempotencia y cron.
`docs/07-ia-generativa.md`	Proveedores de IA, prompts y estrategia de degradación.
`docs/08-despliegue.md`	Local, Docker, Vercel y problemas frecuentes.
`docs/09-api-referencia.md`	Referencia de los 18 endpoints propios.
`docs/10-publicar-en-github.md`	Publicar el repo, revisión de seguridad previa y checklist posterior.
`docs/11-atribucion.md`	El crédito de autoría del sidebar y el verificador que impide quitarlo sin romper el build.

🗂 Estructura

app/
  (dashboard)/              9 páginas: hooks, analytics, competitors,
                            scheduler, calendar, trends, script, settings
  api/                      18 route handlers + 2 cron
  icon.tsx                   favicon generado en build
  opengraph-image.tsx        tarjeta social generada en build
components/
  ui/                       22 primitivos shadcn/ui
  <feature>/                un directorio por sección
lib/
  zernio/                   cliente tipado de la API de Zernio
  domain/                   modelo propio, motor de hooks, analíticas, repositorio
  services/                 IA, captions, transcripción, calendario, clasificador
  server/                   configuración persistida y guardas de cron
docs/                       documentación + assets
scripts/                    ingesta manual por CLI

🎨 Detalles de diseño

Modo oscuro cálido por defecto. Superficies con matiz 24 (naranja apagado), no gris frío, para que el terracota no se vea sucio al lado.
Terracota como único acento (#c65d3b / #d9694a), aclarado en oscuro para cumplir contraste AA.
Cero librerías de gráficas en los KPI: las sparklines son SVG propio.
Fuentes self-hosted (geist): el build no depende de la red.

👤 Autor

nocodeveloper · Joel Araujo

Construí esto para organizar mi propio contenido y lo dejo abierto por si te sirve.

☕ Invítame un café… o una birra 🍺

El proyecto es open source y sin ánimo de lucro. Si te ahorra tiempo cada semana, puedes invitarme a un café — o directamente a una birra, que también se agradece 😄

Binance Pay → joeldavidar@gmail.com

PayPal → paypal.me/nocodeship2024

📄 Licencia

_{nocodeveloper · Joel Araujo}
_{Construido con la API de Zernio · 16 plataformas, una sola API}
_{Si te sirvió, invítame una birra 🍺}

Name		Name	Last commit message	Last commit date
app		app
components		components
docs		docs
lib		lib
public		public
scripts		scripts
.dockerignore		.dockerignore
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
components.json		components.json
docker-compose.yml		docker-compose.yml
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Navigation Menu

Repository files navigation

⚡ Respuestas rápidas

📸 Las seis secciones

🚀 Arranque rápido

Conectar datos reales

🏗 Arquitectura

Flujo completo: del feed a la publicación

Resiliencia: cada integración tiene una versión local

🧩 Stack

📦 Despliegue

Vercel (el más rápido)

Docker

Checklist de producción

📚 Documentación

🗂 Estructura

🎨 Detalles de diseño

👤 Autor

☕ Invítame un café… o una birra 🍺

📄 Licencia

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

⚡ Respuestas rápidas

📸 Las seis secciones

🚀 Arranque rápido

Conectar datos reales

🏗 Arquitectura

Flujo completo: del feed a la publicación

Resiliencia: cada integración tiene una versión local

🧩 Stack

📦 Despliegue

Vercel (el más rápido)

Docker

Checklist de producción

📚 Documentación

🗂 Estructura

🎨 Detalles de diseño

👤 Autor

☕ Invítame un café… o una birra 🍺

📄 Licencia

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages