Skip to content

README.md

Latest commit

 

History

History
96 lines (66 loc) · 3.72 KB

README.md

File metadata and controls

96 lines (66 loc) · 3.72 KB

🪹 TaskNest

Angular Spring Boot NgRx Tailwind CSS

Organiza tu vida, sin perder la calma. TaskNest es una aplicación Full-Stack de gestión de tareas diseñada con una obsesión absoluta por la Experiencia de Usuario (UX), el rendimiento y los detalles visuales propios de un producto SaaS Premium.

✨ Características Principales

🎨 UI/UX Premium (Diseño Asistido por IA)

  • Modo Oscuro Nativo: Tema visual adaptable (Claro/Oscuro) con guardado de preferencias en localStorage.
  • Glassmorphism: Tarjetas y menús translúcidos con efecto de cristal esmerilado y desenfoques dinámicos.
  • Landing Page Interactiva: Animaciones de entrada al hacer scroll utilizando AOS y un diseño moderno tipo Bento Grid.
  • Skeleton Loaders: Transiciones de carga fluidas que evitan saltos bruscos en la interfaz simulando las tarjetas de tareas.
  • Micro-interacciones (Dopamina Visual):
    • Sistema de notificaciones propio (Toasts) flotantes con barras de progreso animadas.
    • Explosión de confeti programada (canvas-confetti) al marcar una tarea como completada.

⚡ Rendimiento y Arquitectura

  • Gestión de Estado Reactiva: Implementación de NgRx (Redux) en el frontend para cálculos en tiempo real (Dashboard de progreso) sin llamadas redundantes al backend.
  • Seguridad: Autenticación robusta basada en tokens gestionada por Spring Security.
  • Buscador en Tiempo Real: Filtrado instantáneo de tareas en milisegundos.

🛠️ Stack Tecnológico

Frontend:

Backend:

  • Spring Boot (Java)
  • Spring Security — Autenticación
  • Base de datos relacional (MySQL / PostgreSQL)

Automatización (Próximamente):

  • n8n — Preparado para integraciones con Telegram, flujos de email y recordatorios automáticos.

🚀 Instalación y Despliegue

Prerrequisitos

  • Node.js (v18+)
  • Angular CLI
  • Java 17+ y Maven
  • Base de datos configurada (MySQL / PostgreSQL)

1. Configurar el Backend (Spring Boot)

  1. Clona el repositorio.
  2. Navega a la carpeta del backend.
  3. Configura tus credenciales de base de datos en application.properties o application.yml.
  4. Ejecuta el proyecto:
mvn clean install
mvn spring-boot:run

2. Configurar el Frontend (Angular)

  1. Navega a la carpeta del frontend.
  2. Instala las dependencias:
npm install
  1. Inicia el servidor de desarrollo:
ng serve
  1. Abre tu navegador en http://localhost:4200/

🤝 Reflexión del Proyecto

Este proyecto nació como el clásico "Gestor de Tareas", pero el objetivo real fue salir de la zona de confort de las plantillas predefinidas. Combinando una arquitectura robusta (Spring Boot + NgRx) y apoyándome en herramientas de Inteligencia Artificial para potenciar y pulir el diseño frontend (HTML/CSS avanzado), el resultado es una aplicación que prioriza la interacción humana y el diseño profesional.

Desarrollado con ☕ y pasión por el código limpio.