Jair Rivera · Blog

Task Manager — Aplicación de Tareas

Task Manager es una aplicación web desarrollada con React y TailwindCSS, diseñada para gestionar tareas de forma simple y eficiente. Este proyecto demuestra el dominio de estados locales, renderizado condicional, manejo de eventos y persistencia de datos mediante localStorage.

Ver proyecto en vivo

Objetivo del proyecto

Implementar un flujo CRUD completo (crear, leer, actualizar y eliminar) utilizando componentes funcionales y hooks de React, aplicando un diseño minimalista y moderno.

Tecnologías y herramientas

  • React — manejo de componentes y estado con useState y useEffect.
  • TailwindCSS — diseño responsivo basado en utilidades.
  • Lucide Icons — íconos SVG integrados vía CDN.
  • localStorage — persistencia automática en el navegador.

Estructura del proyecto

src/
├── components/
│   ├── TodoForm.jsx
│   ├── TodoList.jsx
│   └── TodoItem.jsx
├── App.jsx
└── main.jsx

Principales funcionalidades

  • Agregar nuevas tareas mediante un formulario controlado.
  • Marcar tareas como completadas o pendientes.
  • Eliminar tareas individuales o limpiar todas.
  • Guardar automáticamente las tareas en localStorage.

Diseño e interfaz

Se priorizó un estilo minimalista, accesible y visualmente limpio, utilizando tarjetas blancas con esquinas redondeadas, botones negros contrastantes y la tipografía Figtree para mantener coherencia con la línea estética del portafolio.

Resultados y aprendizajes

Este proyecto consolida el entendimiento del ciclo de vida de los componentes, el manejo del estado en React y las buenas prácticas de modularización. Además, refuerza el uso de TailwindCSS para prototipado rápido y escalable.