🗺️ Roadmap Manager

Un gestor de roadmaps interactivo con funcionalidades avanzadas de colaboración en tiempo real.

✨ Características

🎯 Gestión de Roadmaps

• Versiones organizadas: Crea y gestiona múltiples versiones de tu producto
• Secciones categorizadas: Organiza tareas en secciones lógicas
• Tareas priorizadas: Sistema de prioridades (low, medium, high) con códigos de color
• Estado de progreso: Marca tareas como completadas o pendientes
• Nombre de proyecto editable: Personaliza el título de tu roadmap

🚀 Funcionalidades Avanzadas

• Drag & Drop inteligente: Reordena tareas entre secciones y versiones
• Tiempo real: Sincronización automática entre múltiples usuarios
• Modo oscuro: Interface adaptable con tema claro/oscuro
• Filtros dinámicos: Busca por texto y filtra por prioridad
• Barras de progreso: Visualización del avance por sección y versión
• Sistema de modales: Interface intuitiva para crear/editar elementos

🔄 Colaboración

• SSE (Server-Sent Events): Actualizaciones automáticas sin refrescar
• Multi-usuario: Soporte para equipos trabajando simultáneamente
• Persistencia: Datos guardados automáticamente en YAML

🛠️ Tecnologías

Backend

• FastAPI: Framework web moderno y rápido
• Uvicorn: Servidor ASGI de alto rendimiento
• PyYAML: Manejo de archivos de configuración
• Lifespan Events: Gestión moderna del ciclo de vida

Frontend

• Alpine.js: Framework reactivo ligero
• Tailwind CSS: Estilos utilitarios con modo oscuro
• SortableJS: Drag & drop avanzado
• Server-Sent Events: Comunicación en tiempo real

🚀 Instalación y Uso

Requisitos

# Crear entorno virtual
python3 -m venv .venv
source .venv/bin/activate

# Instalar dependencias
pip install -r requirements.txt

# Iniciar servidor
python backend.py

Acceso

Abre tu navegador en: **http://127.0.0.1:8000**\ Documentación de la API: **http://127.0.0.1:8000/docs**\ Documentación alternativa: http://127.0.0.1:8000/redoc

📁 Estructura del Proyecto

roadmap/
├── backend.py          # Servidor FastAPI con SSE
├── roadmap.html        # Frontend completo
├── roadmap.yml         # Datos persistentes
├── requirements.txt    # Dependencias Python
└── README.md          # Documentación

🎮 Uso de la Interface

Gestión de Elementos

• 📌 Proyecto: Click en el título para editarlo
• 📦 Versiones: Botón "+" para crear nuevas versiones
• 📋 Secciones: Click en nombres de sección para editar
• ✅ Tareas: Botones "+" para crear, click para editar

Drag & Drop

• 🔗 Handle: Usa el icono de puntos para arrastrar
• 📍 Posicionamiento: Arrastra entre cualquier sección/versión
• 🔄 Tiempo real: Los cambios se sincronizan automáticamente

Filtros y Búsqueda

• 🔍 Búsqueda: Campo de texto para filtrar tareas
• 🎯 Prioridad: Dropdown para filtrar por prioridad
• 🗑️ Limpiar: Botón para resetear todos los filtros

Modos y Temas

• 🌙 Modo Oscuro: Toggle en la esquina superior derecha
• 📊 Progreso: Barras visuales del avance del proyecto

🔧 Configuración

Variables de Entorno

El servidor usa configuración por defecto, pero puedes modificar:

• Host: 0.0.0.0 (todas las interfaces)
• Puerto: 8001
• Archivo de datos: roadmap.yml

Personalización

• Edita roadmap.html para cambios en la UI
• Modifica backend.py para funcionalidades del servidor
• Ajusta requirements.txt para dependencias adicionales

🐛 Solución de Problemas

Puerto en Uso

# Encontrar proceso usando el puerto
lsof -i :8000

# Detener proceso específico
kill -TERM <PID>

Cache de Python

# Limpiar cache si hay problemas
find . -name "*.pyc" -delete
find . -name "__pycache__" -type d -exec rm -rf {} +

Conexiones SSE

Si las actualizaciones en tiempo real no funcionan:

1. Verifica que no hay bloqueadores de popup/scripts
2. Revisa la consola del navegador para errores
3. Reinicia el servidor

📈 Características Técnicas

Arquitectura

• Backend: API REST + SSE para tiempo real
• Frontend: SPA con Alpine.js reactivo
• Persistencia: Archivos YAML legibles
• Comunicación: JSON sobre HTTP/SSE

Rendimiento

• Lazy Loading: IDs únicos para elementos
• Batch Updates: Actualizaciones optimizadas
• Memory Management: Cleanup automático de conexiones

Seguridad

• CORS: Configurado para desarrollo
• Input Validation: Sanitización de datos
• Safe Shutdown: Cierre limpio de conexiones

🔄 Ciclo de Vida

Startup

1. Inicializar variables globales
2. Crear evento de shutdown
3. Iniciar monitor de archivos
4. Configurar middleware CORS

Runtime

1. Servir frontend estático
2. API REST para CRUD operations
3. SSE para sincronización
4. Monitor de cambios en archivos

Shutdown

1. Señalizar parada
2. Cancelar tareas de monitoreo
3. Cerrar conexiones SSE activas
4. Cleanup de recursos

👥 Contribución

Este es un proyecto diseñado para ser:

• Fácil de entender: Código documentado y estructurado
• Fácil de extender: Arquitectura modular
• Fácil de desplegar: Dependencias mínimas

Ideas de Mejora

• 🔐 Autenticación de usuarios
• 💾 Base de datos SQL/NoSQL
• 📱 Interface móvil optimizada
• 🔔 Notificaciones push
• 📊 Analytics y métricas
• 🎨 Temas personalizables
• 📤 Exportación a formatos externos
• 🌐 Internacionalización (i18n)
• 🗃️ Historial de versiones y backups
• 🧩 Integración con herramientas externas (Trello, Jira)
• 🛠️ Plugins y extensiones
• 🧪 Tests unitarios e integración
• 🚀 Despliegue en la nube (Docker, Kubernetes)
• 🛡️ Seguridad avanzada (RBAC, 2FA)
• 🧑‍🤝‍🧑 Colaboración en tiempo real mejorada (chat, comentarios)
• 🧹 Limpieza automática de datos obsoletos
• 📝 Gestor de varios proyectos

📄 Licencia

Este proyecto está disponible bajo una licencia MIT. Consulta el archivo LICENSE para más detalles.

---

¡Disfruta gestionando tus roadmaps! 🚀