Dyna
Una herramienta para creadores de planners y agendas: sube tu diseño, define las fechas y Dyna genera automáticamente los PDFs con días, semanas y meses numerados. Sin trabajo manual, sin errores de fecha.
- React
- TypeScript
- Tailwind
- PDF generation
El problema
Los creadores de planners diseñan en Canva o Illustrator, pero rellenar manualmente cada fecha en cada página es un proceso lento y propenso a errores. Si el año cambia, hay que rehacerlo todo.
La solución
Dyna separa el diseño de los datos. Subes tu diseño una vez, defines qué áreas son dinámicas (fechas, meses, días de la semana) y el sistema genera el PDF completo automáticamente para cualquier rango de fechas.
Decisiones técnicas
Canvas interactivo con drag & drop y resize
Implementé un canvas donde el usuario puede colocar y redimensionar bloques de fecha sobre su diseño. Gestionar el estado de cada bloque (posición, tamaño, tipo de dato) con precisión de píxel — y que luego esas coordenadas se tradujeran fielmente al PDF — fue el problema técnico central del proyecto.
Generación de PDF con coordenadas reales
El mayor reto fue la conversión entre el sistema de coordenadas del canvas (píxeles de pantalla) y el sistema de coordenadas del PDF (puntos). Un error aquí desplazaba todos los elementos. Lo resolví estableciendo constantes de conversión por tamaño de página (A4, A5) y validando con exports reales en cada iteración.
Componentes con slot de contenido personalizado
Para los diálogos y modales reutilizables en varias partes del producto, diseñé un patrón donde el botón de apertura acepta un customComponent como wrapper. Esto permite reutilizar la lógica del dialog sin acoplar el trigger a un diseño concreto.
Arquitectura hexagonal (en progreso)
Estoy migrando el proyecto a arquitectura hexagonal para separar la lógica de dominio (gestión de planners, bloques, fechas) de la infraestructura (almacenamiento local, exportación PDF). El objetivo es que el core sea testeable de forma aislada.
Roadmap
| Fase | Descripción | Estado |
|---|---|---|
| Fase 1 | Creación local, subida de imágenes, áreas dinámicas, export PDF | ✅ Completado |
| Fase 2 | Building blocks de pago: calendarios extra, selectores avanzados | ⏳ Próximo |
| Fase 3 | Assets premium: tipografías, plantillas, herramientas de diseño | ⏳ Próximo |
| Fase 4 | Cloud sync y cuentas de usuario | ⏳ Planificado |
| Fase 5 | Colaboración: compartir y coeditar planners | ⏳ Planificado |