Movies App

Reto

Un catálogo externo castiga la percepción de velocidad: cada vista que vuelve a montarse repite peticiones, los filtros se pierden al navegar y los favoritos deben sobrevivir a la recarga. Había que explorar cientos de títulos con respuesta inmediata sin esconder el estado real de la red.

Enfoque

Organicé el proyecto alrededor de una capa de servicio (movie-service) con tipos propios y datos mock de respaldo, para que las vistas no conozcan el detalle de la API. El servidor de Next.js cachea las peticiones y cada ruta muestra sus propios skeletons, de modo que la navegación se siente continua. Los favoritos viven en Zustand y persisten; la búsqueda y los filtros se combinan en /explore, y la UI se compone con primitivas de Radix UI (diálogos, selects, tooltips) más el carrusel de Embla en el inicio.

Resultado

Una interfaz de descubrimiento rápida y consistente: el catálogo se consulta una vez y se reutiliza, los favoritos persisten entre visitas y las rutas de detalle y exploración mantienen su estado de carga. La separación entre servicio, estado y UI permite sumar vistas del catálogo sin reescribir la lógica de datos.

Responsabilidades

• - Catálogo con búsqueda y filtros combinables en la ruta /explore sobre la API pública de películas
• - Favoritos persistentes con Zustand: botón de favorito en cada título y página propia /favorites
• - Capa de servicio centralizada (movie-service) con tipos propios y datos mock de respaldo
• - Caché de peticiones con Next.js y skeletons de carga en /explore y /movie/[id]
• - Carrusel de portadas en el inicio con Embla y tarjetas de película reutilizables
• - Tema claro/oscuro con next-themes y avisos de acción con Sonner