Proyecto Moderne
Moderne es una aplicación para una empresa ficticia de construcción de propiedades de alta tecnología, en este proyecto el foco está en animaciones utilizando tanto Framer Motion como CSS, consumir apis utilizando React Query además de utilizar Context api para tener un estado global interno.
App
React JS
Styled Components
Framer Motion
React Query
Objetivos & Meta
En este proyecto el objetivo fue el de construir una aplicación donde el foco esta más en el contenido y no hay tanta funcionalidad , cuando diseñe la aplicación tome inspiración de varios sitios de Awwwards , sobre todo en cuanto a animaciones y en especial en lo que son las transiciones de página.
En esta aplicación hay muchos tipos diferentes de animaciones como animaciones de layout , transiciones de página , animaciones en scroll , parallax etc.
Stack y Explicación
Como el foco de la aplicación está en lo que son las animaciones y CSS una tecnología de mucha ayuda fue Framer Motion (me parece más versátil que GSAP en el contexto de React) , en especial porque esta otorga mucha flexibilidad en cuanto a transiciones de página que era uno de los puntos claves del proyecto.
Otra tecnología que utilice fue React Query, esta es una muy buena librería para trabajar con apis, mantienen la data de la UI en sincronía con la de la api, guarda en cache etc., como las imágenes que se utilizan son pesadas (incluso minificadas) que se puedan guardar en cache me permitió mantener la velocidad de la aplicación.
Problemas & Soluciones
Uno de los problemas con los que me encontré fue el de la animación de entrada , cada ruta tiene una animación que corre cuando se monta la aplicación , esta animación se tenía que ejecutar solo una vez en la ruta por la que el usuario este accediendo a la aplicación.
El problema era como saber cuándo la animación ya se ejecutó, para poder hacer esto utilice Context Api para tener un state global que me permitiera rastrear la animación de entrada para saber si esta se tenía que ejecutar o ya se había ejecutado porque si este es el caso la transición de página es la animación que debería ejecutarse.
Otros Proyectos
Snapcode App
Snapcode es una aplicación para crear snippets de código , descargarlos , guardarlos y borrarlos usando GitHub como provider de autenticación & Supabase. En este proyecto el foco está en la interacción con el backend , autenticación , rutas privadas y micro interacciones usando Framer Motion.
Ver proyecto
Portfolio App
Decidí incluir el portfolio porque me pareció un proyecto interesante por las tecnologías que utilicé para construirlo, Next JS (como Static Site Generator), Strapi CMS para construir una api rest con la información de los proyectos entre otras tecnologías.
Ver proyecto