Martín González

2024

Movies React Native

A cross-platform movie discovery app built with Expo and React Native, powered by the TMDB API.

Movies React Native

Movies React Native is a mobile-first movie discovery application built with Expo, React Native, and NativeWind. The app lets users explore trending, upcoming, and top-rated movies, search for titles, view detailed movie pages, browse cast information, open actor profiles, and discover similar movies. It integrates with The Movie Database API using Bearer authentication, supports image loading from TMDB, and runs across mobile and web through Expo and React Native Web.

  • Movie discovery home screen with trending, upcoming, and top-rated sections.
  • Interactive trending movie carousel using React Native Snap Carousel.
  • Movie detail pages with poster hero image, gradient overlay, metadata, genres, overview, cast, and similar movies.
  • Search flow with debounced input using Lodash and TMDB search results.
  • Actor/person profile pages with biography, personal details, popularity, and related movies.
  • Navigation between Home, Search, Movie Detail, and Person Detail using React Navigation native stack.
  • TMDB API integration using Axios with Bearer token authorization and English-language query defaults.
  • Responsive mobile-first web support with React Native Web, keeping the app centered as a mobile frame in the browser.
  • Reusable UI components for movie lists, cast rows, loading states, and carousel cards.

Movie discovery and exploration

The main screen combines a dynamic exploration flow that helps users discover movies quickly and intuitively. From the start, users can browse sections such as trending movies, upcoming releases, and top-rated titles, while interacting with a featured carousel. The interface uses reusable components to organize movie lists, keep navigation fluid, and present TMDB content in a clean vertical layout.

Movie details with cast and recommendations

The detail screen delivers a complete visual experience for each movie, featuring an impactful poster hero, a dark gradient that improves readability, title, year, runtime, genres, overview, and a cast section with images of the main actors. It also allows users to keep exploring related content through similar movie recommendations retrieved from TMDB.

Actor profile experience

The app includes a dedicated screen for actor profiles, where users can learn more about each person in the cast. This view displays relevant information such as profile photo, biography, personal details, popularity, and related movies, creating a deeper navigation path between a movie detail page, its cast, and other associated titles.

Search and navigation flow

The video shows how users can search for movies quickly and smoothly using a debounced input implemented with Lodash, avoiding unnecessary requests while they type. Results are fetched from TMDB and integrated with React Navigation to create natural transitions between the search screen, movie details, cast information, and actor profiles. This flow connects the app’s main views and reinforces a simple, dynamic, mobile-first browsing experience.