████████╗ █████╗ ███████╗██╗  ██╗███████╗██╗      ██████╗ ██╗    ██╗
╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝██╔════╝██║     ██╔═══██╗██║    ██║
   ██║   ███████║███████╗█████╔╝ █████╗  ██║     ██║   ██║██║ █╗ ██║
   ██║   ██╔══██║╚════██║██╔═██╗ ██╔══╝  ██║     ██║   ██║██║███╗██║
   ██║   ██║  ██║███████║██║  ██╗██║     ███████╗╚██████╔╝╚███╔███╔╝
   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═╝     ╚══════╝ ╚═════╝  ╚══╝╚══╝

Gestión de tareas fullstack con tablero Kanban

TaskFlow es una aplicación fullstack de productividad con tablero Kanban,
drag & drop nativo, autenticación segura y sincronización en tiempo real.

  

---

📸 Capturas de pantalla

🖥️ Vista de escritorio — Tablero Kanban

📱 Vista móvil — Diseño responsive

---

✨ Funcionalidades

🔐 Autenticación Registro con email y contraseña Login / Logout seguro Sesión persistente entre recargas Rutas protegidas automáticas Row Level Security — cada usuario solo ve sus datos	📋 Tablero Kanban 3 columnas: Pendiente · En Progreso · Completado Drag & drop nativo (sin librerías externas) Actualización automática al soltar tarjeta Sincronización en tiempo real con Supabase
✏️ Gestión de tareas Crear / Editar con modal elegante Eliminar con confirmación Campos: título, descripción, prioridad, fecha Cambio de estado desde el formulario	🎨 UI / UX Tema oscuro profesional Badges de prioridad con código de colores Indicador visual de tareas vencidas Filtros en tiempo real por prioridad Diseño responsive (desktop + mobile)

---

🛠️ Tech Stack

Capa	Tecnología	Uso
⚛️ UI	React 18 + Vite	Componentes, estado, routing
🎨 Estilos	CSS puro + variables	Sin frameworks de UI
🗄️ Base de datos	Supabase (PostgreSQL)	Almacenamiento de tareas
🔐 Auth	Supabase Auth	Registro, login, sesiones
⚡ Realtime	Supabase Realtime	Sincronización en vivo
🚀 Deploy	Vercel	Hosting del frontend
🖱️ Drag & Drop	HTML5 nativo	Sin librerías externas
🔡 Fuentes	Syne + DM Sans	Google Fonts

---

🚀 Inicio rápido

Prerrequisitos

• Node.js v18 o superior
• Cuenta en Supabase (gratuita)
• Cuenta en Vercel (gratuita)

Instalación local

# 1. Clona el repositorio
git clone https://github.com/tu-usuario/task-manager.git
cd task-manager

# 2. Instala las dependencias
npm install

# 3. Configura las variables de entorno
cp .env.example .env
# → Edita .env con tus credenciales de Supabase (ver sección abajo)

# 4. Ejecuta en modo desarrollo
npm run dev

Abre http://localhost:5173 en tu navegador. 🎉

---

🗄️ Configuración de Supabase

▶ Ver instrucciones completas paso a paso

Paso 1 — Crear proyecto

1. Ve a supabase.com → "New Project"
2. Nombre del proyecto: task-manager
3. Elige una contraseña para la base de datos y guárdala
4. Selecciona la región más cercana a ti
5. Espera ~2 minutos a que se inicialice

Paso 2 — Crear la tabla

1. En el dashboard → menú izquierdo → "SQL Editor"
2. Click en "New query"
3. Copia y pega el contenido del archivo supabase.sql del proyecto
4. Click en "Run" (o Ctrl + Enter)

Paso 3 — Obtener credenciales

1. En el dashboard → "Project Settings" (ícono engranaje)
2. Click en "API" en el menú lateral
3. Copia:
   • Project URL → para VITE_SUPABASE_URL
   • anon public → para VITE_SUPABASE_ANON_KEY

---

🔐 Variables de entorno

Crea un archivo .env en la raíz del proyecto:

VITE_SUPABASE_URL=https://xxxxxxxxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

⚠️ Importante: El archivo .env ya está en .gitignore. Nunca lo subas a tu repositorio público.

---

🌐 Deploy en Vercel

▶ Ver instrucciones de deploy

Paso 1 — Subir a GitHub

git init
git add .
git commit -m "feat: TaskFlow inicial"
git branch -M main
git remote add origin https://github.com/tu-usuario/task-manager.git
git push -u origin main

Paso 2 — Importar en Vercel

1. Ve a vercel.com → "Add New Project"
2. Selecciona tu repositorio task-manager
3. Click en "Import"

Paso 3 — Configurar variables de entorno En la pantalla de configuración, antes de hacer deploy:

• VITE_SUPABASE_URL → tu URL de Supabase
• VITE_SUPABASE_ANON_KEY → tu anon key

Paso 4 — Deploy Click en "Deploy" y espera ~1 minuto.

Tu app estará disponible en https://task-manager-xxx.vercel.app 🚀

💡 Cada git push a main hace un redeploy automático.

---

📁 Estructura del proyecto

task-manager/
├── 📂 src/
│   ├── 📂 components/
│   │   ├── 📂 Auth/
│   │   │   ├── Login.jsx          # Pantalla de inicio de sesión
│   │   │   └── Register.jsx       # Pantalla de registro
│   │   ├── 📂 Board/
│   │   │   ├── Board.jsx          # Tablero principal con filtros
│   │   │   ├── Column.jsx         # Columna con drag & drop
│   │   │   └── TaskCard.jsx       # Tarjeta individual de tarea
│   │   ├── 📂 Task/
│   │   │   ├── TaskModal.jsx      # Modal de crear/editar
│   │   │   └── TaskForm.jsx       # Formulario con campos
│   │   └── 📂 UI/
│   │       ├── Navbar.jsx         # Barra de navegación
│   │       ├── FilterBar.jsx      # Filtros de prioridad
│   │       └── PriorityBadge.jsx  # Badge de color por prioridad
│   ├── 📂 hooks/
│   │   ├── useAuth.js             # Autenticación con Supabase
│   │   └── useTasks.js            # CRUD + suscripción realtime
│   ├── 📂 lib/
│   │   └── supabase.js            # Cliente de Supabase
│   ├── App.jsx                    # Rutas y protección de páginas
│   ├── main.jsx                   # Punto de entrada React
│   └── index.css                  # Variables CSS y estilos globales
├── supabase.sql                   # SQL para crear la base de datos
├── .env.example                   # Plantilla de variables de entorno
└── README.md

---

🎨 Paleta de colores

Token	Color	Uso
--bg-base	#0d0d0d	Fondo principal
--bg-card	#1a1a1a	Tarjetas y modales
--accent	#6366f1	Color de acento principal
--accent-bright	#818cf8	Links y highlights
Prioridad Alta	#ef4444	Badge rojo
Prioridad Media	#f59e0b	Badge amarillo
Prioridad Baja	#22c55e	Badge verde

---

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Si encuentras un bug o tienes una idea:

1. Haz un fork del repositorio
2. Crea una rama: git checkout -b feature/nueva-funcionalidad
3. Haz commit de tus cambios: git commit -m 'feat: agrega nueva funcionalidad'
4. Haz push: git push origin feature/nueva-funcionalidad
5. Abre un Pull Request

---

📄 Licencia

Distribuido bajo la licencia MIT. Consulta el archivo LICENSE para más información.

---

Hecho con ☕ y 🎵 por Juan Florian