"Gestión colaborativa y sincronización en la nube para equipos productivos."
TaskZenith es una plataforma avanzada de gestión de tareas corporativas diseñada para equipos que necesitan colaboración en tiempo real, sincronización multiplataforma y personalización completa de su espacio de trabajo.
- ✅ Dashboard Adaptativo: Sistema de grid libre (48 columnas) con widgets redimensionables y reorganizables
- 🔐 Autenticación Robusta: Códigos de acceso con roles diferenciados (Admin/Operador)
- ☁️ Sincronización en la Nube: Configuración personal guardada en Firestore para acceso desde cualquier dispositivo
- 🎨 Temas Personalizables: 8 paletas de colores predefinidas con guardado automático
- 📊 Múltiples Vistas: Todo List, Kanban, Calendario, Historial y Estadísticas
- ⏱️ Pomodoro Timer: Temporizador integrado para gestión de tiempo
- 🔔 Alertas Inteligentes: Notificaciones de tareas vencidas y próximas
- 📱 Responsive Design: Optimizado para escritorio, tablet y móvil
- Frontend: Next.js 15.5.9 (App Router) + React 19 + TypeScript 5
- UI Framework: TailwindCSS + shadcn/ui components
- Base de Datos: Firebase Firestore (sincronización en tiempo real)
- Autenticación: Firebase Authentication con roles personalizados
- Estado Global: React Context API con persistencia en Firestore
- Interactividad: Sistema drag-and-drop personalizado con detección de colisiones
El dashboard utiliza un sistema de grid adaptativo de 48 columnas virtuales:
- Posicionamiento fluido: Basado en porcentajes para responsividad total
- Altura libre: Definida en píxeles para máxima flexibilidad
- Drag & Drop: Movimiento libre con colisiones opcionales
- Snap magnético: Alineación automática cada 10px
- Persistencia: Guardado automático en Firestore por usuario
// Ejemplo de configuración de widget
{
id: "stats",
x: 0, // columna inicial (0-47)
y: 0, // posición Y en píxeles
width: 48, // ancho en columnas
height: 180, // altura en píxeles
minW: 16, // ancho mínimo
minH: 140 // altura mínima
}TaskZenith/
├── public/
│ └── logo.png
├── src/
│ ├── app/
│ │ ├── (auth)/
│ │ │ ├── login/page.tsx
│ │ │ └── signup/page.tsx
│ │ ├── dashboard/
│ │ │ ├── page.tsx # Dashboard principal con grid
│ │ │ ├── todo/page.tsx
│ │ │ ├── kanban/page.tsx
│ │ │ ├── schedule/page.tsx
│ │ │ └── history/page.tsx
│ │ ├── globals.css
│ │ ├── grid-layout.css # Estilos del grid adaptativo
│ │ └── layout.tsx
│ ├── components/
│ │ ├── layout/
│ │ │ ├── app-shell.tsx # Sidebar + navegación
│ │ │ └── page-wrapper.tsx
│ │ ├── tasks/
│ │ │ ├── task-stats-cards.tsx # Widgets responsive
│ │ │ ├── todo-list.tsx
│ │ │ ├── kanban-board.tsx
│ │ │ ├── calendar-widget.tsx
│ │ │ ├── due-tasks-widget.tsx
│ │ │ └── pomodoro-timer.tsx
│ │ └── ui/ # Componentes shadcn/ui
│ ├── contexts/
│ │ ├── auth-context.tsx # Autenticación + roles
│ │ ├── task-context.tsx # Estado de tareas
│ │ └── theme-context.tsx # Temas + sincronización
│ ├── hooks/
│ │ └── use-toast.ts
│ ├── lib/
│ │ ├── firebase.ts # Configuración Firebase
│ │ ├── types.ts # Definiciones TypeScript
│ │ └── utils.ts
│ └── ai/ # (Funcionalidad futura)
├── package.json
├── tailwind.config.ts
├── next.config.ts
└── tsconfig.json
- Node.js 18.17+
- npm o yarn
- Proyecto Firebase configurado
git clone https://github.com/sjaquer/TaskZenith.git
cd TaskZenithnpm installCrea un archivo .env.local en la raíz del proyecto:
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=tu_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=tu_proyecto.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=tu_proyecto_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=tu_proyecto.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abcdef- Ve a Firebase Console
- Crea un nuevo proyecto o usa uno existente
- Habilita Authentication (Email/Password)
- Habilita Firestore Database
- Configura las reglas de seguridad de Firestore:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
match /tasks/{taskId} {
allow read, write: if request.auth != null;
}
match /projects/{projectId} {
allow read, write: if request.auth != null;
}
match /userPreferences/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
}
}npm run devAbre tu navegador en http://localhost:3000
npm run build
npm startLa aplicación usa códigos de acceso para diferenciar roles:
- TASKZENITH-ADMIN: Acceso de administrador (todas las funcionalidades)
- TASKZENITH-CORP: Acceso de operador (funciones estándar)
Estos códigos se validan en el registro (signup). Puedes modificarlos en src/app/(auth)/signup/page.tsx.
El sistema incluye 8 temas predefinidos:
- Default Dark - Tema oscuro base
- Lavanda Suave - Tonos violetas relajantes
- Bosque Neón - Verdes brillantes
- Océano Profundo - Azules intensos
- Café Caliente - Marrones cálidos
- Rojo Escarlata - Rojos dramáticos
- Menta Fresca - Verdes agua
- Atardecer Neón - Rosas y amarillos
Los temas se configuran en src/contexts/theme-context.tsx y se guardan automáticamente en Firestore por usuario.
Puedes activar/desactivar widgets desde el botón "Configuración":
- Estadísticas: Resumen de tareas
- Lista de Tareas: Gestión principal
- Vencimientos: Tareas próximas
- Pomodoro: Temporizador
- Calendario: Vista mensual
Cada widget es:
- ✅ Redimensionable: Ajusta ancho y alto libremente
- ✅ Movible: Arrastra a cualquier posición
- ✅ Responsive: Se adapta automáticamente al tamaño de pantalla
- ✅ Persistente: Tu configuración se guarda en la nube
El sistema de grid permite una personalización total:
// Modo Edición
- Click en "Editar" para activar modo de edición
- Arrastra widgets desde la barra de título (azul)
- Redimensiona desde la esquina inferior derecha
- Los cambios se guardan automáticamente en Firestore
// Configuración
- Botón "Configuración" para acceder a:
- Selector de temas (8 paletas)
- Activar/desactivar widgets
- Auto-ordenar (compactación vertical)
- Reset a configuración por defectoTodas las preferencias se sincronizan automáticamente:
- Layouts del dashboard: Posición y tamaño de cada widget
- Temas: Paleta de colores seleccionada
- Tareas y Proyectos: Datos completos en tiempo real
- Configuración de widgets: Cuáles están activos
Inicia sesión desde cualquier dispositivo y encontrarás tu espacio exactamente como lo dejaste.
La aplicación se adapta completamente a diferentes tamaños de pantalla:
- Desktop (>1024px): Sidebar lateral fijo + grid completo
- Tablet (768-1024px): Navegación adaptada + grid optimizado
- Mobile (<768px): Bottom navigation + grid en columna única
Los widgets internos también son responsive:
- Grid adaptativo en estadísticas (2x2 en móvil, 4x1 en desktop)
- Pomodoro con texto fluido (
clamp()) - Listas con scroll vertical automático
- Calendario con layout flexible
- Autenticación Firebase: Sistema robusto con gestión de sesiones
- Roles personalizados: Control de acceso basado en códigos
- Reglas Firestore: Validación de permisos en servidor
- Validación de formularios: Zod + React Hook Form
- Variables de entorno: Configuración sensible protegida
Distribuido bajo la Licencia MIT. Consulta LICENSE para más información.
Desarrollado por Sebastián Jaque
- GitHub: @sjaquer
- Proyecto: TaskZenith
Las contribuciones son bienvenidas. Para cambios importantes:
- Fork el proyecto
- Crea una rama (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
Si encuentras algún problema o tienes sugerencias, abre un issue.
Hecho con ❤️ usando Next.js, React y Firebase