Proyecto formativo de React + Material UI para gestión de tareas.
- Node.js 18+ instalado
- npm o yarn
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm run devEl proyecto estará disponible en http://localhost:5173
taskflow/
├── src/
│ ├── components/
│ │ ├── Header.jsx # Barra de navegación con búsqueda y toggle de tema
│ │ ├── Sidebar.jsx # Menú lateral con filtros
│ │ ├── TaskCard.jsx # Tarjeta con subtareas, tags y acciones
│ │ ├── TaskDialog.jsx # Modal para crear/editar tareas con tags
│ │ ├── StatsCards.jsx # Estadísticas resumidas
│ │ ├── SortControls.jsx # Controles de ordenación (incluye drag & drop)
│ │ ├── ActionToolbar.jsx # Botones de exportar/importar/limpiar
│ │ └── NotificationSnackbar.jsx # Notificaciones toast
│ ├── context/
│ │ └── TaskContext.jsx # Estado global completo
│ ├── theme/
│ │ └── theme.js # Configuración del tema (light/dark)
│ ├── App.jsx # Componente principal con DnD
│ ├── main.jsx # Punto de entrada
│ └── index.css # Estilos base
├── package.json
└── README.md
| Componente | Uso |
|---|---|
AppBar + Toolbar |
Barra de navegación superior |
Drawer |
Menú lateral responsive |
Card |
Tarjetas de tareas |
Dialog |
Modales de formulario y confirmación |
TextField, Select |
Campos de formulario |
Chip |
Etiquetas de prioridad/categoría/fecha/tags |
Fab |
Botón flotante para añadir |
Grid |
Layout responsive |
IconButton, Badge, Tooltip |
Iconos interactivos |
useMediaQuery |
Detectar preferencia de tema |
Snackbar + Alert |
Notificaciones toast |
LinearProgress |
Progreso de subtareas |
List, ListItem |
Lista de subtareas |
Collapse |
Expandir/contraer subtareas |
Menu, MenuItem |
Menú de acciones |
- ✅ Crear, editar y eliminar tareas
- ✅ Marcar tareas como completadas
- ✅ Filtrar por estado (todas/pendientes/completadas)
- ✅ Filtrar por categoría
- ✅ Búsqueda por texto
- ✅ Persistencia en localStorage
- ✅ Diseño responsive
- ✅ Estadísticas en tiempo real
- ✅ Fechas de vencimiento - Cada tarea puede tener una fecha límite
- ✅ Modo oscuro - Toggle claro/oscuro/automático con
useMediaQuery - ✅ Confirmación de eliminación - Diálogo antes de borrar
- ✅ Ordenación de tareas - Por fecha, prioridad o título
- ✅ Indicador de tareas vencidas - Borde rojo y badge de alerta
- ✅ Etiquetas/tags personalizadas - Crea etiquetas con colores personalizados
- ✅ Duplicar tareas - Botón para copiar tareas existentes
- ✅ Limpiar completadas - Eliminar todas las tareas completadas de una vez
- ✅ Drag & drop - Arrastra tarjetas para reordenar (con @hello-pangea/dnd)
- ✅ Subtareas - Añade subtareas con barra de progreso
- ✅ Exportar/importar JSON - Backup y restauración de datos
- ✅ Notificaciones Snackbar - Feedback visual de todas las acciones
- Al crear/editar una tarea, selecciona etiquetas del desplegable
- Pulsa "Nueva etiqueta" para crear una con color personalizado
- Las etiquetas aparecen en las tarjetas de tareas
- Selecciona "Orden manual (arrastrar)" en el selector de ordenación
- Asegúrate de estar en el filtro "Todas las tareas"
- Arrastra las tarjetas para reordenar
- En cualquier tarjeta, pulsa "Añadir subtarea"
- Escribe el título y pulsa Enter o el botón +
- Marca subtareas como completadas individualmente
- Expande/contrae la lista con el botón de flecha
- Pulsa el icono ⋮ (más opciones) en la barra de título
- "Exportar tareas" descarga un archivo JSON
- "Importar tareas" permite cargar un archivo JSON previo
npm run dev # Servidor de desarrollo
npm run build # Compilar para producción
npm run preview # Vista previa de producción
npm run lint # Verificar código- React 18+
- Material UI 5+
- @hello-pangea/dnd (drag & drop)
- Vite (bundler)
- Context API (estado global)
- localStorage (persistencia)