Esta es una aplicación web construida con ReactJS que permite gestionar tareas de forma facil y rapida.
- Agregar tareas con nombre y descripción
- Editar nombre y descripción de tareas
- Eliminar tareas individualmente o eliminar solo la descripción
- Barra de progreso
- Marcar y organizar tareas por prioridad
- Marcar tareas como completadas
- Filtrar tareas por estado: Todas, Completadas o Incompletas
- Buscar tareas por nombre dentro de cada filtro
- Eliminar todas las tareas según su estado actual
- Persistencia de datos
-
Componentes y Props
-
Hooks:
useState,useEffect -
useEffect+localStorage -
Inputs controlados (
value) -
Lifting state up (Hijos alteran el estado del padre)
-
Listas con
map,filter,some,sort -
crypto.randomUUID()para generar IDs únicos -
Lazy initialization, para iniciar la variable de estado con valor de localStorage
-
Renderizado y estilos condicionales
-
Módulos CSS (
CSS Modules) -
JavaScript moderno:
DestructuringSpreadyRestoperator
- react lucide ("Iconos")
- Fechas de creación y vencimiento
- Animaciones y mejoras visuales
Antes había comenzado este mismo proyecto en otro repositorio, pero decidí pausarlo al notar que necesitaba reforzar mi base de conocimientos en React y JavaScript moderno.
Luego se hizo un Todo List para practicar los fundamentos necesarios que aplicaría en el proyecto.
-
Primer repositorio de pruebas: First-ReactJS-repo-JS-exercises-and-TM
-
Proyecto base (Todo List): Todo-list-ReactJS-by-TM
Este proyecto me enseñó mucho más que código. Al principio, muchos conceptos me eran desconocidos, como Destructuring, useEffect, o spread. Y también entendí lo importante que es detenerse para construir una base sólida, en lugar de intentar ir a las carreas.
Hoy, al ver este proyecto funcionando, me hace ver que cada minuto invertido valió la pena.