Roadmaps Hub

Use this page as the planning index for active initiatives.

Active Roadmaps

Metadata generation and Notion sync: ROADMAP_PATTERNS_METADATA
Chatbot MCP capabilities: ROADMAP_CHATBOT_MCP
Chatbot auth and paywall readiness: ROADMAP_CHAT_AUTH
Shared libraries strategy: ROADMAP_SHARED_LIBS
Multi-library product direction: ROADMAP_MULTILIBRARY
Static login architecture: ROADMAP_STATIC_LOGIN

Supporting Setup Docs

Cache and artifact flow: CACHE_PIPLINE
Auth and login behavior: AUTH_SETUP, LOGIN_FLOW

Legacy Migration Plan (Archived Context)

🚀 Migración Netlify → Vercel (En Progreso)

Objetivo: Migrar a Vercel aprovechando fin de semana con bajo tráfico de usuarios.
Ventana Estimada: Viernes – Lunes
Estado Actual: Preparación (Viernes)

📋 Fase 1: Hoy - Preparación y Baseline

Duración Estimada: 2-3 horas
Responsable: Pablo

Entregables:

Baseline.md con métricas actuales.
env.checklist.txt con variables confirmadas.
rollback.plan.txt con pasos exactos.

🔧 Fase 2: Sábado - Deploy Técnico en Vercel (Sin cambio de DNS)

Duración Estimada: 3-4 horas
Responsable: Pablo

2.1 Configuración Inicial

Crear proyecto en Vercel:
- Ir a https://vercel.com/new
- Importar repositorio “patttterns-next” desde GitHub.
- Seleccionar rama: main
- Framework: Next.js (auto-detectado).
Configurar build settings:
- Build command: npm ci && npm run build (o auto-detectado).
- Output directory: .next (auto-detectado).
- Install command: npm ci (auto-detectado).

Cargar variables de entorno en Vercel:

Environment: Production + Preview

Variables requeridas:

NOTION_API_KEY=ntn_...
NOTION_HOMEPAGE_ID=84b89b2059f54c58882c69613e003099
NOTION_UX_PATTERNS=b0b42a6bb3784d2d9f63715402428995
NOTION_UI_PATTERNS=4b5061ca621648c4baab6686d7ad6264
NOTION_ALL_PATTERNS_DATABASE_ID=e642abc6cc7b43e1a2eef35a0e0ccbae
NOTION_TOKEN=v03%3A...
NEXT_PUBLIC_GA_ID=G-K1F96PRZNS
NEXT_PUBLIC_POSTHOG_KEY=phc_ILjkzP4q7Xfx95JCcMUAXlQc4bOg1QosNPk2QhaHTEU
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
NOTION_FETCH_RETRY_ATTEMPTS=5
NOTION_FETCH_MAX_DELAY_MS=8000
NOTION_FETCH_TIMEOUT_MS=30000
NOTION_FAIL_FAST=1

Confirmar que Vercel propone variables auto-detectadas de .env.example.

2.2 Deploy Inicial y Validación de Build

Ejecutar primer deploy:
- Click “Deploy” en Vercel UI.
- Observar logs de build en tiempo real.
- Confirmar build exitoso (sin errores críticos).
- Anotar URL preview autogenerado (ej: patttterns-pablo.vercel.app).
Validar arranque y conectividad Notion:
- Ver logs de deployment (pestaña “Logs”).
- Confirmar que no hay errores de API_KEY, conexión a Notion.
- Verificar que Notion data fluye (no es null/undefined).

2.3 Validación Funcional de Rutas Críticas

Acceder a preview URL y verificar cada una:

2.4 Validación de Redirects y Legacy Routes

Probar rutas antiguas que deberían redirigir (via proxy en src/proxy.ts):

/pattern/[slug] → /patterns/[slug] (HTTP 308)
/all-patterns/[slug] → /patterns/[slug] (HTTP 308)
/[notion-id-raw] → /patterns/[canonical-slug] (HTTP 308)
Notion IDs en form UUID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx → redirección correcta.

2.5 Validación de Features Transversales

Analytics:
- Abrir DevTools → Console.
- Clickear “Save” en un patrón.
- Ver evento save_pattern_from_footer en console (o GA si production).
- PostHog beacon visible en Network tab.
OG Tags (Open Graph):
- Inspeccionar una URL de detalle:
```
curl -I https://patttterns-xxxxx.vercel.app/patterns/grid-pattern-12345 | grep og:
```
- Confirmar presencia de og:title, og:image, og:url.
Dark Mode / Theme:
- Toggle dark/light en header.
- Estilos applicados correctamente.
Responsividad Mobile:
- DevTools → Mobile view (iPhone 12).
- Layout readable y funcional.
- Hamburger menu funciona (si aplica).

2.6 Documentar Findings

Activar Vercel Analytics
Activar Vercel Speed Performance

Entregables:

Vercel project URL.
Validation report (SAT_validation.md).
Lista de issues encontrados (si hay).

✅ Fase 3: Domingo - Pre-Cutover y Cutover de DNS

Duración Estimada: 2-3 horas
Responsable: Pablo

3.1 Configuración de Dominio en Vercel

En Vercel dashboard:
- Ir a Project Settings → Domains.
- Agregar dominio: patttterns.com
- Copiar registros DNS que Vercel propone (puede ser nameservers o registros A/CNAME).
Preparar DNS provider (GoDaddy, Namecheap, etc.):
- Acceder a panel de DNS.
- Bajar TTL a 5 minutos (para cutover ágil).
- Preparar pasos exactos para cambiar registros (pero no apretaras todavía).
- Se configuró un dominio temporal: vercel.patttterns.com

3.2 Smoke Test Final (30 min antes de cutover)

Con la preview URL aún en Vercel y Netlify activo:

Ejecutar test rápido en preview:
- Home carga: ✓/✗
- Patrón abre: ✓/✗
- Redirect legacy funciona: ✓/✗
- OG tag correcto: ✓/✗
Confirmar que Netlify sigue respondiendo en patttterns.com (baseline actual).
Validar rollback fácil: ¿puedo volver DNS a Netlify en <5 min? ✓/✗

3.3 Cutover de DNS (Ventana: Entre 22:00 DOM y 04:00 LUN)

Definir hora exacta (ej: domingo 23:30 UTC).
Notificar a stakeholders (si hay) 30 min antes.
Cambiar registros DNS en provider:
- Si Vercel propone nameservers: cambiar NS en provider.
- Si Vercel propone A/CNAME: actualizar registros.
- Guardar cambios (click “Save”).
Esperar propagación (~5-15 min típico, máximo 1 hora).

Validar que DNS apunta a Vercel:

nslookup patttterns.com
# Debe retornar IPs de Vercel (ej: 76.76.19.165)
dig patttterns.com @8.8.8.8
# Debe resolver a Vercel.

3.4 Validación Inmediata Post-Cutover (30-60 min)

Repetir validación de Fase 2.3, pero ahora en dominio real:

Home: https://patttterns.com/ carga sin errores.
Patrón: /patterns/[slug] funciona.
Categoría: /ux-patterns y /ui-patterns funcionan.
Redirects legacy: /pattern/[slug] redirige correctamente.
Analytics: eventos se envían correctamente.
OG tags: correctos en prod.

Status codes:

curl -I https://patttterns.com/ | grep HTTP
# Debe ser 200
curl -I https://patttterns.com/pattern/old-slug | grep HTTP
# Debe ser 308 (redirect)

3.5 Monitoreo Activo (30-60 min post-cutover)

Abrir Vercel dashboard → Analytics/Logs.
- ¿Hay errores 5xx? → Escalera a rollback.
- ¿Latencia es razonable? (comparar vs Netlify baseline).
- ¿Notion API calls están dentro de límites?
Abrir Google Analytics (si aplica).
- ¿Eventos llegan? ¿Tráfico es normal?
Abrir PostHog (si aplica).
- ¿Eventos PostHog llegan?
Revisar correos/alertas de errores (si tienes setups).

3.6 Decisión Go / No-Go para Mantener

Entregables:

Cutover log (fecha/hora exact, cambios DNS).
Post-cutover validation report.
Incidentes encontrados (si hay).

📊 Fase 4: Lunes - Estabilización y Cierre

Duración Estimada: 2-3 horas (distribuidas durante el día)
Responsable: Pablo

4.1 Monitoreo 24h Post-Cutover

Mañana del lunes (office hours):
- Revisar Vercel analytics y logs.
- Comparar baseline (viernes Netlify) vs lunes (Vercel).
- ¿Errores nuevos? ¿Latencia peor?
- ¿Invocaciones/costo dentro del presupuesto?
Revisar alertas/reports:
- Google Analytics: tráfico normal.
- PostHog: eventos llegan sin delays.
- Email alerts de Vercel (si tiene).

4.2 Validación SEO Técnica

4.3 Ajustes de Configuración (si necesario)

4.4 Limpiar y Documentar

4.5 Retrospectiva (Opcional)

¿Qué salió bien?
¿Qué fue inesperado?
¿Qué podríamos mejorar para futuras migraciones?
¿Hay deuda técnica que arreglar? (ej: pages /debug, proxy rules).

Entregables:

MIGRATION_SUMMARY.md
Documentación actualizada (DEPLOY.md, README.md)
GitHub Issues (si hay acciones pendientes)

📈 Métricas de Éxito

Métrica	Baseline (Netlify)	Target (Vercel)	Status
Latencia p50 (ms)	___	< baseline	⏳
Latencia p99 (ms)	___	< baseline * 1.2	⏳
Errores 5xx/semana	___	0	⏳
Errors 4xx esperados	___	Mismo	⏳
Invocaciones Notion/día	___	Similar	⏳
Costo mensual	___	TBA	⏳
Analytics OK	✓	✓	⏳
SEO indexing	✓	✓	⏳

🆘 Rollback Rápido

Si algo falla durante cualquier fase,:

Identificar problema:
- Error 5xx masivo → Vercel logs.
- Redirects rotos → Test rutas legacy.
- Notion timeout → Revisar vars env.
- Analytics roto → Console DevTools.
Si es quick-fix (<5 min):
- Arreglar variable de env en Vercel.
- Restart deployment (botón en Vercel UI).
- Retest.
Si es critical (>5 min para arreglar):
- Revertir DNS a Netlify:
```
# En tu DNS provider, cambiar registros de vuelta a Netlify IPs
# O restaurar nameservers anteriores
```
- Esperar propagación (~5-15 min).
- Verificar que patttterns.com responde desde Netlify.
- Abrir GitHub Issue con:
  - Qué salió mal.
  - Logs de error.
  - Próximos pasos para fix.
- Reprogamar cutover cuando problem esté resuelto.

📝 Notas Operacionales

Apagar debuggers antes de cutover: NOTION_API_DEBUG=0 y NOTION_API_STATS=0 en Vercel env para no contaminar logs.
Mantener .env.local sincronizado con Vercel env vars para future changes.
Verificar que Netlify.toml no se sincroniza a Vercel (Vercel lee next.config.ts, no netlify.toml).
Timeouts de Notion: Si ves timeouts durante prime-time, considerar aumentar NOTION_FETCH_TIMEOUT_MS en Vercel.

Última Actualización: Viernes, 23 Marzo 2026

🔐 Próximo: Identity & Persistence

Ver ROADMAP_SOCIAL_LOGINS.md para el plan detallado de Social Login, Cloud Sync y Plan Pro.

Roadmaps Hub

Active Roadmaps

Supporting Setup Docs

Legacy Migration Plan (Archived Context)

🚀 Migración Netlify → Vercel (En Progreso)

📋 Fase 1: Hoy - Preparación y Baseline

🔧 Fase 2: Sábado - Deploy Técnico en Vercel (Sin cambio de DNS)

2.1 Configuración Inicial

2.2 Deploy Inicial y Validación de Build

2.3 Validación Funcional de Rutas Críticas

2.4 Validación de Redirects y Legacy Routes

2.5 Validación de Features Transversales

2.6 Documentar Findings

✅ Fase 3: Domingo - Pre-Cutover y Cutover de DNS

3.1 Configuración de Dominio en Vercel

3.2 Smoke Test Final (30 min antes de cutover)

3.3 Cutover de DNS (Ventana: Entre 22:00 DOM y 04:00 LUN)

3.4 Validación Inmediata Post-Cutover (30-60 min)

3.5 Monitoreo Activo (30-60 min post-cutover)

3.6 Decisión Go / No-Go para Mantener

📊 Fase 4: Lunes - Estabilización y Cierre

4.1 Monitoreo 24h Post-Cutover

4.2 Validación SEO Técnica

4.3 Ajustes de Configuración (si necesario)

4.4 Limpiar y Documentar

4.5 Retrospectiva (Opcional)

📈 Métricas de Éxito

🆘 Rollback Rápido

📝 Notas Operacionales

🔐 Próximo: Identity & Persistence

Table of contents