Viviana Blog

Blog de Psicología - Viviana Poveda

Skill personalizado para la implementación del blog dinámico con Supabase.

📋 Contexto del Proyecto

Cliente: Ps. Viviana Poveda - Psicóloga Clínica Proyecto: Blog profesional para atraer pacientes Tech Stack: Supabase + Webpack 5 + Tailwind CSS + jQuery Timeline: 9 semanas en 5 fases Supabase Project: lakuiqqqrbvdjfmcnqho.supabase.co

🎯 Objetivo de Negocio

Crear un blog que:

• ✅ Demuestre expertise en temas psicológicos (ansiedad, depresión, relaciones)
• ✅ Capture leads vía newsletter y recursos descargables
• ✅ Genere confianza con casos de estudio y testimonios
• ✅ Facilite conversión a citas con CTAs estratégicos
• ✅ Sea 100% gestionable sin código (admin panel)

🗄️ Arquitectura de Base de Datos

10 Tablas principales:

1. posts - Contenido del blog (con SEO meta tags)
2. categories - Temas psicológicos (Ansiedad, Depresión, etc.)
3. tags - Cross-referencing de contenido
4. post_tags - Relación many-to-many
5. authors - Viviana + posibles invitados
6. comments - Sistema moderado (pending/approved/rejected)
7. subscribers - Newsletter con confirmación por email
8. resources - PDFs descargables (lead magnets)
9. resource_downloads - Tracking de descargas
10. post_views - Analytics de visitas

Funciones SQL:

• increment_view_count(post_id)
• get_comment_count(post_id)
• get_top_posts(days, limit_count)

Para schema completo, ver database-schema.md

📁 Estructura de Archivos

Se ha implementado una arquitectura modular en JavaScript, separando la lógica en utils, components y admin.

Archivos clave creados (+30 archivos):

✅ JavaScript Modules:

• src/assets/js/supabase-client.js - Core connection + helpers API
• src/assets/js/blog.js - Lógica del listado del blog
• src/assets/js/blog-post.js - Lógica del post individual
• src/assets/js/utils/ - Helpers para formato, SEO, UI, caché y widgets.
• src/assets/js/components/ - Módulos para header, footer y sidebar dinámicos.
• src/assets/js/admin/ - Lógica completa del panel de administración (auth, posts, comments, etc.).

✅ HTML & CSS:

• src/admin.html - Panel de administración completo.
• src/assets/css/admin.css - Estilos del panel de admin.

✅ Scripts de Build/Test:

• scripts/generate-sitemap.js - Generador de sitemap dinámico.
• scripts/run-integration-tests.js - Runner para tests de integración.
• scripts/populate-posts.js - Seeder de contenido.

Ver estructura completa y estado de cada archivo en file-structure.md.

🚀 Fases de Implementación

Estado Global: 98% Completado - Actualizado: 30/12/2025

✅ Fase 1: Infraestructura Base - COMPLETADA (100%)

• ✅ Supabase database (10 tablas + RLS policies)
• ✅ Storage buckets (blog-images, resources, etc.)
• ✅ Cliente Supabase y conexión verificada.
• ✅ Funciones SQL y scripts de seeding.

✅ Fase 2: Blog Público Dinámico - COMPLETADA (100%)

• ✅ Listado de blog con paginación, búsqueda y filtros.
• ✅ Vista de post individual con SEO, comentarios y vistas.
• ✅ Widgets de sidebar (posts recientes, categorías) dinámicos.

✅ Fase 3: Admin Panel - COMPLETADA (100%)

• ✅ Login con Supabase Auth.
• ✅ Dashboard con estadísticas.
• ✅ CRUD completo para posts con editor de texto enriquecido y subida de imágenes.
• ✅ Moderación de comentarios.
• ✅ Gestión y exportación de suscriptores.

✅ Fase 4: Email Marketing - COMPLETADA (100%)

• ✅ Sistema de comentarios implementado y funcional
• ✅ Formularios de Newsletter integrados en footer
• ✅ Lógica de suscripción con tokens de confirmación
• ✅ Edge Function desplegada para envío automático de emails con Resend
• ✅ Trigger de DB configurado (envío automático al suscribirse)
• ✅ Plantilla de email profesional en HTML
• ✅ Botón de confirmación manual en admin panel
• ✅ Sistema de recursos descargables (PDFs, MP3s, etc.)

✅ Fase 5: Analytics & Optimización - COMPLETADA (90%)

• ✅ Sitemap dinámico generado con scripts/generate-sitemap.js
• ✅ Script de tests de integración (run-integration-tests.js) creado
• ✅ Dashboard con gráficos avanzados (Chart.js)
• ✅ Gráficos de visitas y suscriptores (últimos 7 días)
• ✅ Auditoría de seguridad completada (RLS, search_path fix)
• ✅ Optimización de imágenes configurada (WebP, lazy loading)

Ver checklist detallado en phase-checklist.md

🎨 Estrategia de Contenido

Categorías Implementadas: Ansiedad, Depresión, Relaciones, Autoestima, Duelo, Terapia, Mindfulness, Estrés. Lead Magnets Planeados: Guía de Ansiedad (PDF), Diario de Gratitud (PDF), Audios de Respiración (MP3). CTAs: Implementados en el blog para agendar sesiones.

Ver estrategia completa en content-strategy.md

💡 Convenciones de Código

Supabase Queries Pattern

// Helpers en supabase-client.js
import { supabase } from './supabase-client.js';

export async function getPublishedPosts(page = 1, limit = 6) {
  const offset = (page - 1) * limit;
  const { data, error, count } = await supabase
    .from('posts')
    .select('*, author:authors(*), category:categories(*)', { count: 'exact' })
    .eq('status', 'published')
    .order('published_at', { ascending: false })
    .range(offset, offset + limit - 1);
  return { data, error, count };
}

Naming Conventions

• Archivos JS: kebab-case.js
• Funciones: camelCase()
• Database: snake_case

🔧 Comandos Útiles

# Servidor de desarrollo con Hot Reload
npm run dev

# Build para producción
npm run build

# Ejecutar tests de integración
npm run test:integration

📊 Métricas Actuales (30/12/2025)

• Posts publicados: 3+
• Archivos JS creados/modificados: ~25
• Fases Completadas: 3 de 5
• Build time: ~5-7 segundos
• Hot reload: < 2 segundos

🎯 Cuándo Usar Este Skill

Actívame cuando:

• Trabajas en cualquier archivo del blog de Viviana.
• Necesitas consultar el schema de la base de datos o la estructura de archivos.
• Escribes queries de Supabase.
• Implementas features del admin panel o del blog público.
• Tienes dudas sobre la arquitectura, convenciones o estado del proyecto.
• Estás trabajando en cualquiera de las fases del plan.