2024

Movies React Native

App mobile-first para descubrir películas, creada con Expo y React Native e integrada con la API de TMDB.

Movies React Native es una aplicación mobile-first para descubrir películas, desarrollada con Expo, React Native y NativeWind. La app permite explorar películas en tendencia, próximos estrenos y películas mejor calificadas, buscar títulos, ver páginas de detalle, consultar el reparto, abrir perfiles de actores y descubrir películas similares. Integra The Movie Database API mediante autenticación Bearer, carga imágenes desde TMDB y funciona tanto en mobile como en web usando Expo y React Native Web.

Pantalla principal de descubrimiento con secciones de películas trending, upcoming y top rated.
Carrusel interactivo de películas en tendencia usando React Native Snap Carousel.
Páginas de detalle con poster hero, gradiente, metadata, géneros, descripción, reparto y películas similares.
Flujo de búsqueda con input debounced usando Lodash y resultados desde TMDB.
Perfiles de actores/personas con biografía, datos personales, popularidad y películas relacionadas.
Navegación entre Home, Search, Movie Detail y Person Detail usando React Navigation native stack.
Integración con TMDB API mediante Axios, autorización Bearer y parámetros por defecto en inglés.
Soporte web mobile-first con React Native Web, manteniendo la app centrada como marco mobile dentro del navegador.
Componentes reutilizables para listas de películas, reparto, estados de carga y cards del carrusel.

Descubrimiento y exploración de películas

La pantalla principal combina un flujo de exploración dinámico para descubrir películas de forma rápida e intuitiva. Desde el inicio, los usuarios pueden navegar por secciones como tendencias, próximos estrenos y películas mejor calificadas, mientras interactúan con un carrusel. La interfaz utiliza componentes reutilizables para organizar listas de películas, mantener una navegación fluida y presentar el contenido de TMDB en un diseño vertical limpio.

Detalles de películas con reparto y recomendaciones

La pantalla de detalle presenta una experiencia visual completa para cada película, con un poster hero de gran impacto, gradiente oscuro para mejorar la lectura, título, año, duración, géneros, sinopsis y una sección de reparto con imágenes de los actores principales. También permite continuar explorando contenido relacionado mediante recomendaciones de películas similares obtenidas desde TMDB.

Experiencia de perfil de actor

La app cuenta con una pantalla dedicada para perfiles de actores, donde los usuarios pueden conocer más sobre cada persona del reparto. Esta vista muestra información relevante como fotografía, biografía, datos personales, popularidad y películas relacionadas, creando una navegación más profunda entre el detalle de una película, su elenco y otros títulos asociados.

Flujo de búsqueda y navegación

El video muestra cómo los usuarios pueden buscar películas de forma rápida y fluida gracias a un input con debounce implementado con Lodash, evitando consultas innecesarias mientras escriben. Los resultados se obtienen desde TMDB y se integran con React Navigation para permitir una transición natural entre la pantalla de búsqueda, los detalles de cada película, el reparto y los perfiles de actores. Este flujo conecta las principales vistas de la app y refuerza una experiencia mobile-first simple, dinámica y fácil de explorar.