📋 TaskFlow - Gestión Moderna de Tareas

Una aplicación moderna de gestión de tareas inspirada en Trello, construida con React, TypeScript y Firebase

🚀 Demo en Vivo · 🐛 Reportar Bug · 💡 Solicitar Feature

---

✨ Funcionalidades Implementadas

🔐 Autenticación y Usuarios

• ✅ Registro con email/password
• ✅ Login con email/password
• ✅ Login con Google OAuth
• ✅ Cierre de sesión
• ✅ Rutas protegidas
• ✅ Persistencia de sesión

📋 Gestión de Tableros

• ✅ Crear tableros con colores personalizados
• ✅ Listar todos los tableros del usuario
• ✅ Ver detalles de tablero
• ✅ Buscar tableros
• ✅ Cambiar color del tablero
• ✅ Eliminar tableros (elimina listas y tarjetas)
• ✅ Descripciones opcionales

📝 Listas y Organización

• ✅ Crear listas dentro de tableros
• ✅ Eliminar listas (elimina tarjetas asociadas)
• ✅ Contador de tarjetas por lista
• ✅ Ordenamiento de listas

🎯 Gestión de Tarjetas

• ✅ Crear tarjetas en listas
• ✅ Editar título de tarjeta
• ✅ Editar descripción de tarjeta
• ✅ Eliminar tarjetas (menú contextual)
• ✅ Drag & drop entre listas
• ✅ Modal de detalles completo
• ✅ Actualización en tiempo real

🏷️ Características Avanzadas

• ✅ Sistema de etiquetas con colores personalizados
• ✅ Crear/eliminar etiquetas
• ✅ Fechas de vencimiento con selector datetime
• ✅ Indicadores visuales (vencido, próximo a vencer)
• ✅ Estados de tarjeta (Por Hacer, En Proceso, Completado)
• ✅ Cambio de estado con un click

🎨 UI/UX

• ✅ Modo oscuro/claro
• ✅ Diseño 100% responsive
• ✅ Loading states y skeleton loaders
• ✅ Notificaciones toast
• ✅ Animaciones fluidas
• ✅ Menús contextuales
• ✅ Interfaz completamente en Español

---

🚧 Funcionalidades Pendientes (Para Retomar Desarrollo)

🔜 Alta Prioridad

• Sistema de comentarios - Agregar/editar/eliminar comentarios en tarjetas
• Asignar miembros a tarjetas - Sistema de colaboración multi-usuario
• Invitar miembros al tablero - Por email con roles (Owner, Member)
• Notificaciones en tiempo real - Push notifications para cambios
• Búsqueda global - Buscar tarjetas en todos los tableros
• Filtros avanzados - Por etiqueta, estado, asignado, fecha

📌 Media Prioridad

• Adjuntar archivos - Upload de imágenes y documentos a tarjetas
• Vista de calendario - Visualizar tarjetas por fecha de vencimiento
• Activity log - Historial completo de cambios del tablero
• Archivar tarjetas/listas - En lugar de eliminar permanentemente
• Duplicar tablero/lista/tarjeta - Clonación rápida
• Templates de tableros - Plantillas predefinidas (Kanban, Scrum, etc)
• Menciones en comentarios - @usuario para notificar
• Editar descripción del tablero - Modal de edición

🔮 Baja Prioridad

• Roles y permisos - Admin, Editor, Viewer por tablero
• Checklists en tarjetas - Subtareas con barra de progreso
• Custom fields - Campos personalizados por tablero
• Exportar tablero - JSON, CSV, PDF
• Integraciones - Slack, Google Calendar, GitHub
• Time tracking - Registro de tiempo en tarjetas
• Analytics dashboard - Métricas de productividad y reportes
• Modo offline - PWA con Service Worker
• Temas personalizados - Más allá de dark/light
• Atajos de teclado - Productividad avanzada

---

🛠️ Stack Tecnológico

Frontend

• React 18 - Biblioteca UI con hooks
• TypeScript - Tipado estático
• Vite - Build tool ultra-rápido
• React Router - Enrutamiento del lado del cliente
• Tailwind CSS - Estilos utility-first
• Lucide React - Iconos modernos

Estado y Datos

• Zustand - State management ligero
• React Query - Server state & caching
• @hello-pangea/dnd - Drag and drop accesible

Backend & Base de Datos

• Firebase Auth - Autenticación de usuarios
• Cloud Firestore - Base de datos en tiempo real
• Firebase Storage - Almacenamiento de archivos

Utilidades

• date-fns - Manipulación de fechas
• react-hot-toast - Notificaciones toast
• nanoid - Generación de IDs únicos

---

🚀 Instalación y Configuración

Prerrequisitos

• Node.js 18+ y npm 9+
• Cuenta de Firebase (plan gratuito)
• Git

1. Clonar el Repositorio

git clone https://github.com/tuusuario/taskflow.git
cd taskflow

2. Instalar Dependencias

npm install

3. Configurar Firebase

3.1 Crear Proyecto en Firebase

1. Ve a Firebase Console
2. Crea un nuevo proyecto
3. Habilita Google Analytics (opcional)

3.2 Configurar Authentication

1. Ve a Authentication → Get Started
2. Habilita Email/Password
3. Habilita Google Sign-In

3.3 Crear Firestore Database

1. Ve a Firestore Database → Create database
2. Selecciona modo producción
3. Elige una ubicación cercana

3.4 Configurar Reglas de Firestore

Ve a Firestore → Rules y pega:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Click "Publish"

3.5 Crear Índices Compuestos

Ve a Firestore → Indexes → Composite y crea:

Índice 1 - Boards:

• Collection ID: boards
• Fields:
  • memberIds → Arrays
  • updatedAt → Descending
• Query scope: Collection

Índice 2 - Lists:

• Collection ID: lists
• Fields:
  • boardId → Ascending
  • order → Ascending
• Query scope: Collection

3.6 Obtener Credenciales

1. Project Settings → General
2. Scroll a "Your apps"
3. Click en el ícono </> (Web)
4. Registra la app
5. Copia la configuración

4. Configurar Variables de Entorno

Crea un archivo .env en la raíz:

VITE_FIREBASE_API_KEY=tu_api_key_aquí
VITE_FIREBASE_AUTH_DOMAIN=tu-proyecto.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=tu-proyecto-id
VITE_FIREBASE_STORAGE_BUCKET=tu-proyecto.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789012
VITE_FIREBASE_APP_ID=1:123456789012:web:abcdef123456

5. Iniciar en Desarrollo

npm run dev

Abre http://localhost:5173

---

🚢 Deploy a Producción

Deploy en Vercel (Recomendado)

1. Push a GitHub (ver sección siguiente)

2. Importar en Vercel

   • Ve a vercel.com
   • Click "New Project"
   • Importa tu repositorio de GitHub
   • Agrega las variables de entorno del .env
   • Click "Deploy"

3. Configurar dominio (opcional)

   • En Vercel, ve a Settings → Domains
   • Agrega tu dominio personalizado

---

📁 Estructura del Proyecto

taskflow/
├── src/
│   ├── components/          # Componentes reutilizables
│   │   ├── ui/             # Componentes UI base
│   │   ├── layout/         # Layout components
│   │   └── board/          # Componentes de tablero
│   ├── pages/              # Páginas de la app
│   ├── hooks/              # Custom hooks
│   ├── store/              # Zustand store
│   ├── lib/                # Utilidades
│   ├── types/              # TypeScript types
│   ├── App.tsx
│   └── main.tsx
├── .env.example
├── package.json
└── README.md

---

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

---

👨‍💻 Autor

Tu Nombre

• GitHub: @tomasvergaraj
• LinkedIn: Tomas Vergara

---

📊 Estado del Proyecto

Estado Actual: ✅ En Desarrollo Activo

Versión: 1.0.0 (Beta)

Última Actualización: Enero 2026

---

⭐ Si te gusta este proyecto, dale una estrella en GitHub!

Hecho con ❤️ usando React + TypeScript + Firebase