TasksFlow es una aplicación moderna de gestión de tareas construida con React, Redux, Vite y TailwindCSS. Permite a los usuarios crear, organizar y realizar un seguimiento de sus tareas de manera eficiente con una interfaz atractiva y fácil de usar.

• ✅ Crear, editar y eliminar tareas
• 📋 Marcar tareas como completadas
• 🔍 Filtrar tareas por estado (todas, activas, completadas)
• 🌓 Modo oscuro/claro
• 📱 Diseño responsive para dispositivos móviles y de escritorio
• 💾 Almacenamiento local (localStorage) para persistencia de datos
• ✨ Animaciones fluidas con Framer Motion
• 🎨 Interfaz de usuario moderna con TailwindCSS y MUI

• Node.js (v18.0.0 o superior)
• npm, yarn o pnpm

1. Clonar el repositorio:

git clone https://github.com/AnderCMD/TasksFlow.git
cd TasksFlow

2. Instalar dependencias:

# Con npm
npm install

# Con pnpm
pnpm install

3. Iniciar el servidor de desarrollo:

# Con npm
npm run dev

# Con pnpm
pnpm run dev

4. Abrir http://localhost:5173 en el navegador.

tasksflow/
├── public/                 # Archivos estáticos
├── src/                    # Código fuente
│   ├── App/                # Configuración global de la aplicación
│   │   └── store.js        # Configuración de Redux store
│   ├── Assets/             # Recursos (imágenes, iconos, etc.)
│   ├── Components/         # Componentes reutilizables
│   │   ├── Layout/         # Componentes de estructura
│   │   └── Tasks/          # Componentes específicos de tareas
│   ├── Features/           # Características con sus slices de Redux
│   │   ├── Tasks/          # Gestión de tareas
│   │   └── Theme/          # Gestión del tema
│   ├── Styles/             # Estilos globales
│   ├── App.jsx             # Componente principal
│   ├── index.css           # Estilos globales
│   └── main.jsx            # Punto de entrada
├── index.html              # Plantilla HTML
├── vite.config.js          # Configuración de Vite
├── package.json            # Dependencias y scripts
└── README.md               # Documentación

Se utiliza Redux Toolkit para el manejo del estado global de la aplicación, siguiendo un patrón de arquitectura basado en características (feature-based), lo que facilita la organización y el mantenimiento del código.

Las tareas se almacenan en el localStorage del navegador, lo que permite que los datos persistan entre sesiones sin necesidad de una base de datos o API externa.

La aplicación incluye un sistema de temas que permite cambiar entre modo claro y oscuro, utilizando las capacidades de TailwindCSS para clases condicionales.

Se utiliza Framer Motion para añadir animaciones fluidas que mejoran la experiencia de usuario al interactuar con los elementos de la interfaz.

• React - Biblioteca para construir interfaces de usuario
• Redux Toolkit - Herramientas para simplificar la lógica de Redux
• Vite - Entorno de desarrollo rápido
• TailwindCSS - Framework CSS utilitario
• MUI (Material-UI) - Componentes de React basados en Material Design
• Framer Motion - Biblioteca de animaciones para React

• Integración con backend para sincronización de datos entre dispositivos
• Sistema de autenticación de usuarios
• Categorías y etiquetas para organizar tareas
• Vista de calendario para programar tareas
• Notificaciones y recordatorios
• Funcionalidad de arrastrar y soltar (drag and drop)
• Exportación e importación de datos

Este proyecto está bajo la licencia MIT. Ver el archivo LICENSE para más detalles.

AnderCMD andercmd@outlook.com Portafolio

¡Gracias por utilizar TasksFlow! Esperamos que esta herramienta te ayude a organizar tus tareas de manera eficiente. Si tienes alguna sugerencia o encuentras algún problema, no dudes en abrir un issue en GitHub.