SaaS

GanttHub

Proyecto personal 2026 Producción Destacado

Gestor de proyectos colaborativo: Kanban, Gantt, presupuesto, reuniones e ideas en un solo lugar. Vue 3 + Firebase.

Problema
Las tareas, las fechas, el presupuesto y las reuniones de mis proyectos vivían en herramientas distintas, y ninguna me daba el orden que quería.
Mi rol
Proyecto propio, full stack: producto, diseño, frontend, Firebase y Cloud Functions.
Resultado
Lo que empezó para mis tareas hoy organiza el trabajo de Wink y de 10 empresas más.
GanttHub

Contexto

Me gusta ser ordenado con mis proyectos. GanttHub nació para llevar el tracking de mis propias tareas; después lo usé para controlar Wink, luego RapiSites y SwiftFlow, y cada proyecto nuevo le pedía algo que no tenía. Así fue creciendo hasta ser un producto que hoy usan otros equipos.

El problema

Un tablero Kanban dice qué está en curso, pero no si vas a llegar a la fecha ni cuánto llevas gastado. Había que juntar en un solo lugar el día a día (tareas, menciones, reuniones), el plan (Gantt) y el dinero (presupuesto), y que fuera seguro dejar entrar a clientes y compañeros con distintos permisos.

Decisiones de diseño

  1. 01

    Un Gantt hecho a mano

    El cronograma usa las mismas tareas que el tablero: no hay que planificar dos veces. Las barras se arrastran para moverlas y se estiran para cambiar fechas, con vista por día, semana o mes, hitos y agrupación por responsable o estado. Hacerlo propio en lugar de usar una librería me dejó controlar cómo se ve y cómo responde, y que hable el mismo lenguaje visual que el resto de la app.

    Cronograma de un proyecto: tareas, responsables, hitos y la línea de hoy.
    Cronograma de un proyecto: tareas, responsables, hitos y la línea de hoy.
  2. 02

    Los permisos viven en el servidor

    Cuando empezaron a entrar otras empresas, esconder botones ya no alcanzaba. Cada proyecto guarda quién es miembro y con qué rol (owner, admin, editor o viewer), y las reglas de Firestore y Storage solo confían en eso: un viewer puede comentar pero no editar, un editor no toca el equipo ni el presupuesto. Las reglas tienen más de 70 tests en el emulador, con casos permitidos y denegados, y una migración que se puede repetir sin riesgo para pasar los proyectos existentes al modelo nuevo.

  3. 03

    Mi propia librería de componentes

    Con tantas pantallas —tablero, Gantt, finanzas, reuniones, flujos— cada una empezaba a verse distinta. Rehice la app sobre una librería de componentes propia (botones, campos, modales, pestañas, toasts) con tokens de diseño y tema por proyecto. Ahora una pantalla nueva sale coherente desde el primer día.

    Detalle de una tarea: contenido a la izquierda, propiedades editables en el lugar a la derecha.
    Detalle de una tarea: contenido a la izquierda, propiedades editables en el lugar a la derecha.
  4. 04

    Un inicio que responde «qué me toca»

    El panel no es una pared de gráficos: abre con lo que requiere atención, lo que cambió desde tu última visita, lo asignado a ti y tus menciones, y deja para abajo la salud de los proyectos y la carga del equipo.

    Panel de inicio: indicadores, lo de hoy y lo que te asignaron.
    Panel de inicio: indicadores, lo de hoy y lo que te asignaron.

Resultado

empresas usándolo
Wink + 10
tests de reglas de seguridad por rol
+70
interfaz bilingüe, instalable como PWA Fuente: gantt-hub.com
ES / EN

Pantallas

05 vistas · Tocá para ampliar

Vista móvil

GanttHub — vista móvil
Ingeniería: arquitectura, stack y alcance

Sobre el proyecto

GanttHub empezó como mi herramienta para llevar el control de mis propias tareas; después la usé para organizar Wink, RapiSites y SwiftFlow, y así terminó siendo un producto. Junta en un solo lugar lo que normalmente vive en varias herramientas: un tablero Kanban con drag & drop, un diagrama de Gantt hecho a mano (arrastrar para mover, estirar para cambiar fechas, vista por día, semana o mes e hitos), presupuesto y finanzas por proyecto en varias monedas, reuniones con videollamada integrada (Jitsi) y resumen, ideas, y flujos de procesos que se pueden generar con IA. El panel de inicio responde «qué cambió y qué me toca»: proyectos que requieren atención, lo asignado a ti, menciones y la carga del equipo. Cada proyecto tiene roles (owner, admin, editor y viewer) que se aplican en las reglas de Firestore y Storage, no solo en la interfaz, y que están cubiertos por tests en el emulador. La interfaz está construida sobre una librería de componentes propia, con tokens, tema por proyecto, español e inglés, y funciona como PWA. Las notificaciones —menciones, recordatorios de vencimiento, invitaciones y reportes diarios y semanales— salen por correo desde Cloud Functions. Lo diseño y desarrollo de punta a punta: Vue 3, TypeScript, Pinia, Tailwind CSS 4 y Firebase (Auth con 2FA, Firestore, Storage, Functions y Hosting).

Stack técnico

6 tecnologías
  • Vue.js
  • TypeScript
  • Firebase
  • Pinia
  • Tailwind
  • Vite

Funcionalidades destacadas

08 puntos
  • 01

    Tablero Kanban con drag & drop, subtareas, archivos, notas con menciones y actividad.

  • 02

    Diagrama de Gantt propio: mover y estirar barras, vista por día, semana o mes, hitos y agrupación.

  • 03

    Presupuesto y finanzas por proyecto (USD, HNL, EUR), por horas o precio fijo, con exportación a CSV.

  • 04

    Reuniones con videollamada integrada (Jitsi), invitaciones por correo y resumen.

  • 05

    Roles owner, admin, editor y viewer aplicados en las reglas de Firestore y Storage, con tests.

  • 06

    Panel de inicio con lo que cambió, lo asignado a ti, menciones y salud de los proyectos.

  • 07

    Correos de menciones, vencimientos, invitaciones y reportes diarios y semanales (Cloud Functions).

  • 08

    Librería de componentes propia, 2FA (TOTP), español e inglés y PWA.

Enlaces

Ver sitio en vivo

Artículos sobre este proyecto

Próximo paso

¿Querés algo así para tu producto?

Hablemos sobre cómo puedo ayudarte a llevar tu idea a producción con la misma calidad y stack que ves acá.

Hablemos Ver más proyectos