Skip to content

Latest commit

 

History

History
128 lines (90 loc) · 5.95 KB

README.md

File metadata and controls

128 lines (90 loc) · 5.95 KB

QuickTask

QuickTask es una aplicación web diseñada para gestionar tareas de manera eficiente y visual. Permite a los usuarios añadir tareas con una descripción, prioridad (alta, media, baja), y una fecha y hora programadas. Además, los usuarios pueden registrarse e iniciar sesión, tanto mediante Google como con una cuenta propia, utilizando autenticación basada en JWT para asegurar sus datos y acceso.

📝 Características principales:

  • Creación de tareas: Añade nuevas tareas con una descripción, prioridad y fecha personalizada.
  • Edición: Modifica tareas existentes de manera sencilla.
  • Eliminación: Confirma antes de eliminar una tarea con un modal interactivo.
  • Visualización intuitiva: Muestra las tareas en tarjetas organizadas, con colores distintivos para cada nivel.
  • Gestión de usuarios: Crea nuevos usuarios, tanto a través de Google como mediante un registro propio en la plataforma.

🔧 Tecnologías utilizadas:

  • React y Vite para el desarrollo frontend.
  • DatePicker para la selección de fechas y horas.
  • React-Select para la elección de prioridades.
  • React-Bootstrap para implementar modales interactivos.
  • React-Toastify para notificaciones visuales.
  • Laravel para el desarrollo backend.
  • JWT para la gestión de autenticación de usuarios.
  • Autenticación con Google: Integración con la API de Google para permitir el registro e inicio de sesión.

📌 Instalación y Configuración

⚙️ Ver configuración

🖥️ Configuración del Backend:

  1. Copia el archivo de configuración del ejemplo (.env.example) y renómbralo a (.env)

  2. En el archivo .env, completa los siguientes valores:

      -> DB_CONNECTION=mysql
      -> DB_HOST=127.0.0.1
      -> DB_PORT=3306
      -> DB_DATABASE=nombre_de_base_de_datos
      -> DB_USERNAME=root
      -> DB_PASSWORD=

      -> JWT_SECRET: Clave secreta para generar los tokens JWT. 
      -> JWT_ALGO: Algoritmo utilizado para firmar los tokens JWT (por defecto HS256).

      -> GOOGLE_CLIENT_ID: ID de cliente de Google obtenido en la consola de Google Cloud.
      -> GOOGLE_CLIENT_SECRET: Clave secreta del cliente de Google.
      -> GOOGLE_REDIRECT_URI: URL de redirección configurada en Google para la autenticación.

  3. Instalar y configurar JWT (si no está instalado)

      -> composer require tymon/jwt-auth  
      -> php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"  
      -> php artisan jwt:secret   

  4. Configuracion de Google

      -> Debes ir a la consola de Google Cloud y crear un proyecto.
      -> Habilita la API de autenticación de Google.
      -> Obtén el Client ID y Client Secret en la sección de Credenciales.
      -> Luego, agrega esos valores en el archivo .env bajo las variables GOOGLE_CLIENT_ID y GOOGLE_CLIENT_SECRET.
      -> Configurar la URL de redirección (GOOGLE_REDIRECT_URI) para que apunte a la ruta de tu aplicación donde recibirás la respuesta de Google después de la autenticación.

🎨 Configuración del Frontend:

  Debes modificar el archivo config.js con tus datos.

🔄 Cambios por versión

Versión 1.0

  • Implementación básica de la aplicación con las funcionalidades principales:
    • Crear, editar y eliminar tareas.
    • Guardado de tareas en LocalStorage para garantizar persistencia entre sesiones.
    • Visualización de tareas organizadas en tarjetas con colores según la prioridad.
    • Validaciones:
      • La fecha de la tarea debe ser posterior a la fecha actual.
      • No se permite guardar tareas sin texto en el campo de descripción.

Versión 2.0

  • Refactorización del proyecto: División del código en múltiples componentes para mejorar la organización y mantenibilidad.
  • Modal interactivo: Uso de React-Bootstrap para añadir un modal de confirmación antes de eliminar tareas.
  • Efectos visuales mejorados: Las tarjetas de tareas se elevan al pasar el cursor por encima, ofreciendo una experiencia de usuario más atractiva.

Versión 3.0

  • Integración de Laravel como backend :
    • La aplicación ahora cuenta con un backend completo desarrollado con Laravel, que se comunica con React a través de una REST API.
    • Se han implementado endpoints para la gestión de tareas y usuarios.
  • Autenticación de usuarios :
    • Se añadió la funcionalidad de registro e inicio de sesión de usuarios.
    • Se utiliza JWT (JSON Web Token) para gestionar la autenticación y proteger las rutas del backend.
  • Persistencia en base de datos :
    • Todas las tareas y los usuarios se almacenan en una base de datos MySQL.
    • Las tareas ahora se guardan en el backend en lugar de LocalStorage.

Versión 4.0

  • Implementación del inicio de sesión mediante Google para facilitar el registro e inicio de sesión.
  • Se añadió el archivo "config.js" en el frontend para gestionar la URL base y el ID público de Google.
  • Autenticación simplificada con JWT, eliminando la combinación con la sesión para mejorar la seguridad.

Versión 5.0

  • Refactorización de estilos :

    • Se eliminaron los archivos CSS globales y se crearon archivos module.css específicos para cada componente.

  • Animaciones mejoradas :

    • Se añadieron animaciones a los botones y al texto del modal de "Crear/Modificar tareas" para mejorar la experiencia de usuario.

  • Nuevo sistema de filtrado :

    • Ahora es posible filtrar las tareas por fecha o por prioridad (de mayor a menor).

  • Actualización de iconos :