KanbanApp
Tecnologías
Descripción
KanbanApp es un proyecto que facilita la organización de actividades en distintas tablas, ofreciendo una visualización clara y ordenada. Cada tabla se adapta a las necesidades específicas de la actividad que estamos gestionando. Dentro de cada una, podemos crear y mover elementos según su contexto y requisitos particulares. Asimismo, estos elementos pueden subdividirse para una gestión más detallada.
Rol y responsabilidades
En mi búsqueda de proyectos atractivos y divertidos de realizar, me encontré con el proyecto KanbanApp. Utilicé el diseño proporcionado por “Frontend Mentor”, donde encontré los estilos base. Con este diseño como punto de partida, procedí a trabajar en el proyecto. Elegí las tecnologías adecuadas, organicé el espacio de desarrollo, realicé la maquetación y programé la aplicación en su totalidad.
Proceso de desarrollo
Al comenzar el proyecto, mi primer objetivo fue desglosar la lógica detrás del mismo. Para esta tarea, utilicé una herramienta llamada "Excalidraw", que me permitió visualizar los conceptos y las diferentes partes que conforman el proyecto de manera clara y organizada.
Una vez establecido el enfoque para la lógica principal, procedí a definir las tecnologías que utilizaría para llevar a cabo el proyecto. Siempre mantuve como prioridad la reducción de dependencias al mínimo necesario, con el fin de garantizar la escalabilidad y la simplicidad en el desarrollo.
Desafíos y soluciones
Uno de los desafíos principales al realizar este proyecto fue crear un estado global, ya que había demasiada dependencia de datos entre un gran número de componentes. Opté por utilizar solo hooks nativos de React para esto, mediante el uso de un único useReducer. Este suministraría a múltiples contextos las funciones para modificar el estado correspondiente.
Otro problema que enfrenté fue la necesidad de reescribir una lógica extensa para guardar los datos actualizados en el localStorage. Lo resolví creando un helper que validaría si existen datos almacenados en el localStorage con una clave/valor específica. En caso de no existir, el helper colocaría los valores pasados en el localStorage.
Además, tuve que validar los datos ingresados en los respectivos componentes que modificaban el estado. La falta de esta validación permitía enviar datos inválidos o nulos. Por ello, desarrollé helpers que validaban los datos según el apartado que se estuviera modificando (creación de la tabla, actualización de la tabla, creación/actualización de tareas). Estos helpers también se encargaban de resaltar en rojo el input que contenía el error y de mostrar un mensaje explicativo sobre el error cometido.
Lecciones aprendidas
Este proyecto me brindó valiosas enseñanzas y una comprensión más clara de por qué, en ocasiones, el uso de un framework puede agilizar significativamente el proceso de desarrollo, llegando a ser esencial. Además, aprendí la importancia de evaluar y considerar la utilidad de un gestor de estado, ya que en ciertas situaciones su implementación puede simplificar la escritura, lectura y, por ende, la depuración del código.
Otra lección que destaco tras completar este proyecto es la necesidad de conocer e implementar patrones de diseño. Estos no solo mejoran la legibilidad del código, sino que también establecen un marco de trabajo que, al ser seguido, simplifica notablemente la depuración. Además, permiten crear componentes más reutilizables y promueven prácticas que aseguran la calidad y claridad del código.