Rick & Morty
Realizado durante el año 2021
Este proyecto nació con la idea de pensar en arquitectura. Quería construir una aplicación que pudiera escalar, donde el estado no fuera un caos y las animaciones ayuden a la interacción.
1. Redux
Al principio, pasar datos de un componente padre a un nieto mediante props parece inofensivo. Pero a medida que la aplicación crecía (filtros, paginación, favoritos), el prop-drilling se volvía inmanejable.
Decidí implementar Redux para tener centralizada la información. En lugar de tener pedazos de información dispersos, centralicé todo en un store. Esto hace que el flujo de datos sea predecible:
// La lógica no vive en la vista, vive en el Reducer
const charactersReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_CHARACTERS_SUCCESS:
return {
...state,
loading: false,
items: action.payload, // Los datos de la API
error: null
};
// ... otros casos
}
};
Gracias a esto, cualquier componente de la interfaz puede “suscribirse” a los cambios. Si actualizo la lista en el buscador, la grilla de personajes se entera automáticamente sin que yo tenga que forzar la actualización manualmente.
2. GSAP
No quería que las tarjetas de los personajes simplemente “aparecieran” de golpe al cargar. Quería tener un mínimo control de los detalles.
Las transiciones de CSS se quedaban cortas para secuenciar elementos, así que opté por GSAP (GreenSock). Esta librería me permitió crear una línea de tiempo (Timeline) para controlar exactamente cuándo y cómo entra cada elemento al DOM.
// Animación escalonada (Stagger) para las tarjetas
gsap.from(".character-card", {
duration: 0.8,
y: 50, // Vienen desde abajo
opacity: 0, // Aparecen suavemente
stagger: 0.1, // Uno tras otro con 0.1s de diferencia
ease: "power3.out"
});
El resultado es una interfaz que responde al usuario, guiando su vista a través del contenido de manera fluida en lugar de abrumarlo con información estática.
3. Fetch
La integración con la API de Rick and Morty no fue solo hacer un fetch. Tuve que manejar la asincronía pensando en la experiencia de usuario (UX): ¿Qué pasa mientras cargan los datos? ¿Qué pasa si la API falla?
Implementar estados de loading y error dentro de la arquitectura de Redux me permitió mostrar feedback visual inmediato al usuario, para que el usuario tenga una noción de lo que sucede.
Stack Tecnológico:
- Core: React
- Librería: React
- UI: ChakraUI
- Estado: Redux
- Animación: GSAP
- Datos: Rick & Morty API