Trello Clone

Desarrollado con

Este proyecto fue desarrollado utilizando los conocimientos adquiridos en el ruta de Aprendizaje de Desarrollo Frontend con Angular de platzi. En estos cursos consolidé mis conocimientos en Angular. Aprendí a utiliza Angular CDK para implementar funcionalidades como drag and drop, uso de overlays, acordeones, modales, entre otros.

Puedes ver el proyecto en vivo

Características Principales

Este clon de Trello incluye algunas de las características principales de trello como:

• Tableros y listas: Podemos crear múltiples tableros y dentro de ellos, puedes crear listas para organizar tus tareas.
• Tarjetas: Puedes crear tarjetas dentro de las listas las cuales representan tus tareas.
• Drag and Drop: Puedes arrastras y soltar las tarjetas entre las listas para reorganizarlas
• Ventana modal: Para mostrar el contenido de una tarjeta, se utiliza una ventana modal, en esta puedes ver los detalles como su nombre, descripción y comentarios.

Desafíos y aprendizajes

Durante el desarrollado del proyecto uno de los principales desafíos fue crear componentes reutilizables utilizando Angular CDK. Esto me permitió crear crear componentes más personalizados y adaptarlos a las necesidades del proyecto.

Agregar una librería como Swiper para implementar un carrusel en la página index, fue otros desafió interesante, pues tenia que usar la version con WebComponents y adaptarla para poder utilizarla con Angular. Esta librería la agregúe porque me permitió hacer que que el usuario pueda mover los slides con el mouse o con el tacto, lo cual es una característica que considero mejora la experiencia del usuario sobre todo en dispositivos con pantallas táctiles.

Animación al abrir un overlays. Quise agregar una animación al momento de abrir un overlay, la cual consiste en un efecto fade in, esta animación la logré utilizando animaciones de CSS