Descripción general

Un gestor de tareas basado en web que ayuda a los usuarios a organizar sus tareas diarias con categorías, prioridades y fechas de vencimiento. Construido para aprender desarrollo full-stack y practicar el trabajo con bases de datos.

Demo en vivo: demo-link.com GitHub: github.com/yourusername/task-manager

El problema

Estaba usando múltiples aplicaciones para rastrear tareas, tareas personales y fechas límite de proyectos. Quería un solo lugar para gestionar todo con una interfaz limpia y la capacidad de personalizar categorías para diferentes áreas de mi vida.

Stack tecnológico

  • Frontend: React, CSS Modules
  • Backend: Node.js, Express
  • Base de datos: PostgreSQL
  • Autenticación: JWT
  • Despliegue: Vercel (frontend), Railway (backend)

Características principales

  • ✅ Autenticación y autorización de usuarios
  • ✅ Crear, editar y eliminar tareas
  • ✅ Organizar tareas por categorías personalizadas
  • ✅ Establecer prioridades y fechas de vencimiento
  • ✅ Funcionalidad de filtrado y búsqueda
  • ✅ Diseño responsivo para móvil y escritorio

Lo que aprendí

Diseño de bases de datos

Esta fue mi primera vez diseñando un esquema de base de datos relacional. Aprendí sobre:

  • Claves primarias y foráneas
  • Relaciones uno a muchos (usuarios a tareas)
  • Indexación para rendimiento de consultas

Seguridad en autenticación

Implementar autenticación JWT me enseñó sobre:

  • Hash de contraseñas con bcrypt
  • Autenticación basada en tokens
  • Protección de rutas y endpoints de API
  • Manejo de expiración de tokens

Gestión de estado

Gestionar el estado de la aplicación en React fue un desafío. Aprendí:

  • Cuándo usar estado local vs. contexto
  • Cómo evitar el prop drilling
  • Optimización de re-renderizados para rendimiento

Desafíos

Desafío 1: Actualizaciones en tiempo real Inicialmente, los usuarios tenían que actualizar la página para ver nuevas tareas. Resolví esto implementando polling cada 30 segundos y luego exploré WebSockets para actualizaciones verdaderamente en tiempo real.

Desafío 2: Responsividad móvil El diseño inicial se rompía en dispositivos móviles. Aprendí CSS Grid y Flexbox correctamente y adopté un enfoque mobile-first.

Desafío 3: Consultas a la base de datos Algunas consultas eran lentas con muchas tareas. Agregué índices a la base de datos y aprendí sobre optimización de consultas.

Resultados

  • 🎯 Desplegado exitosamente y usado por 5 amigos para pruebas beta
  • 📈 Maneja más de 100 tareas por usuario sin problemas de rendimiento
  • 💡 Recibí retroalimentación que mejoró significativamente la interfaz
  • 🚀 Aprendí el ciclo completo de desarrollo desde el diseño hasta el despliegue

Mejoras futuras

  • Agregar funciones de compartir tareas y colaboración
  • Implementar tareas recurrentes
  • Agregar visualización de datos (tendencias de completado de tareas)
  • Versión de aplicación móvil usando React Native
  • Recordatorios por correo electrónico para fechas de vencimiento

Conclusiones

Este proyecto me enseñó que construir algo de principio a fin es la mejor manera de aprender. Cada característica requirió resolver problemas reales, desde el diseño de la base de datos hasta la experiencia del usuario. La lección más valiosa fue aprender a dividir grandes funcionalidades en tareas pequeñas y manejables.

Si te interesa el código o quieres contribuir, ¡visita el repositorio en GitHub!