kosmos
kosmos - gestión de equipos y tareas
kosmos es una aplicación web enfocada en la gestión de proyectos y equipos, diseñada específicamente para cubrir las necesidades de pequeñas empresas y startups que buscan una alternativa más sencilla y con menor curva de aprendizaje que herramientas complejas como Jira. El nombre, de origen griego, evoca los conceptos de orden, estructura y armonía, que son los pilares de la experiencia de usuario del producto
Características principales
Dashboard Integral: Una vista global con indicadores clave (KPIs) sobre la productividad mensual, tareas pendientes y actividad reciente.
Gestión de Proyectos mediante Stepper: Un sistema de creación de proyectos en tres pasos (detalles, tareas y resumen) que garantiza la integridad de los datos antes de su publicación.
Sistema de Tareas Dinámico: Permite el seguimiento en tiempo real de la "tarea en curso", con funcionalidades para ajustar tiempos, editar documentación y filtrar por prioridad o departamento.
Diseño de Alta Fidelidad y Dark Mode: Interfaz responsive escalable (1440px) que incluye un modo oscuro nativo, priorizando la accesibilidad y el contraste.
Desafíos técnicos y soluciones
A lo largo del proyecto, surgieron retos complejos que requirieron soluciones creativas:
El Desafío del Stepper: La creación del flujo de "Nuevo Proyecto" en tres pasos fue la parte más difícil a nivel de código. Fue necesario gestionar validaciones que cambiaban en cada paso (por ejemplo, obligar a crear al menos una tarea en el paso 2) y asegurar que los datos se guardaran correctamente si el usuario retrocedía o avanzaba.
Gestión del Modo Oscuro: Implementar un Dark Mode que no sacrificara la accesibilidad fue un reto. Se solucionó mediante el uso de
localStoragepara persistir la preferencia del usuario y la inserción de un script al inicio de cada HTML para evitar el "destello" visual (efecto desagradable de cambio de color al cargar la página).Conflictos con Librerías Externas:
Bootstrap: Surgieron dificultades para ajustar el color de los iconos dentro de componentes y el tamaño de ciertos elementos (como los switches) en el modo oscuro.
Chart.js: La implementación de los gráficos de métricas presentó problemas inesperados de responsividad en pantallas pequeñas.
El Uso de la IA como "Ayuda Peligrosa": Aunque la IA agilizó el trabajo, presentó "eventos de alucinación" que obligaron a una revisión constante. En un punto estratégico, se decidió limitar su uso para evitar la creación de "variantes de componentes" excesivamente complejas, prefiriendo una lógica más comprensible mediante interpolación directa en el HTML.
Limitaciones de Tiempo: Debido a la ambición del proyecto, algunas interacciones deseadas (como funciones más visuales en la página de tareas) tuvieron que ser pospuestas para futuras versiones, priorizando la limpieza y estabilidad del código actual.
Uno responsable de la IA
La inteligencia artificial se integró como una herramienta de soporte para la ideación y generación de wireframes, así como para la corrección y sugerencia de fragmentos de código, permitiendo acelerar el proceso de desarrollo sin comprometer la autoría del trabajo estructural y de diseño.
Stack tecnológico
HTML
CSS
Javascript
Bootstrap
Chart.js
Lodash
Vue.js
Lecciones clave
El proyecto demostró que una arquitectura bien planificada y un diseño previo sólido en Figma son fundamentales para gestionar la complejidad y evitar código duplicado. Además, el aprendizaje de Lodash resultó vital para manejar de forma eficiente el filtrado y ordenamiento de las colecciones de datos en la aplicación.
Herramientas utilizadas
Figma
Visual Studio Code