🎬 Movie Explorer App

Una aplicación móvil moderna para explorar películas y series de televisión, construida con React Native, Expo y TypeScript.

✨ Características

• 🎯 Búsqueda en tiempo real de películas y series
• 📱 Diseño responsive que se adapta a diferentes tamaños de pantalla
• 🎨 Interfaz moderna con tema oscuro
• 📄 Paginación infinita para cargar más contenido
• 🔄 Pull to refresh para actualizar datos
• 🌐 Soporte multiidioma (Español/Inglés) (En Desarrollo)
• 📊 Detalles completos de películas y series
• 🎭 Información de géneros y reparto
• 📱 Navegación fluida entre pantallas

🛠️ Tecnologías Utilizadas

• React Native - Framework móvil
• Expo - Plataforma de desarrollo
• TypeScript - Tipado estático
• React Query (TanStack Query) - Gestión de estado del servidor
• Axios - Cliente HTTP
• Expo Router - Navegación
• React Native Vector Icons - Iconografía
• ESLint + Prettier - Linting y formateo de código

📱 Capturas de Pantalla

🎬 Pantalla Principal - Búsqueda y Trending

📱 Versión Móvil - Android

🍎 Versión Móvil - iOS

🚀 Instalación

Prerrequisitos

• Node.js (versión 23 o superior)
• Yarn
• Expo CLI

Pasos de instalación

1. Clonar el repositorio

   git clone https://github.com/mhatw/rn-expo-movie-tmdb.git
   cd rn-expo-movie-tmdb
   

2. Instalar dependencias

   yarn install
   

3. Configurar variables de entorno

   # Crear archivo .env en la raíz del proyecto
   EXPO_PUBLIC_API_TMDB_TOKEN=tu_api_key_de_tmdb
   

4. Obtener API Key de TMDB

   • Ve a The Movie Database
   • Crea una cuenta y solicita una API key
   • Agrega la key al archivo .env

5. Ejecutar la aplicación

   # Desarrollo
   yarn start
   
   # iOS
   yarn ios
   
   # Android
   yarn android
   
   # Web
   yarn web
   

📁 Estructura del Proyecto

rn-expo-movie-tmdb/
├── app/                    # Páginas de Expo Router
│   ├── _layout.tsx        # Layout principal
│   ├── index.tsx          # Página de inicio
│   └── movie/
│       └── [id].tsx       # Detalle de película/serie
├── components/            # Componentes reutilizables
│   ├── MediaCard/         # Tarjeta de película/serie
│   ├── MediaDetail/       # Detalle de contenido
│   ├── SearchBar/         # Barra de búsqueda
│   ├── ResponsiveGrid/    # Grid responsive
│   ├── LoadingState/      # Estados de carga
│   ├── ErrorState/        # Estados de error
│   └── EmptyState/        # Estados vacíos
├── services/              # Servicios y APIs
│   └── tmdb/             # API de The Movie Database
├── theme/                 # Configuración de tema
│   └── colors.ts         # Paleta de colores
├── constants/            # Constantes de la aplicación
├── i18n/                 # Internacionalización
├── config/               # Configuraciones
└── utils/                # Utilidades

🔧 Scripts Disponibles

# Desarrollo
yarn start          # Iniciar servidor de desarrollo
yarn ios           # Ejecutar en iOS Simulator
yarn android       # Ejecutar en Android Emulator
yarn web           # Ejecutar en navegador web

# Linting y formateo
yarn lint          # Ejecutar ESLint
yarn lint:fix      # Corregir errores de ESLint automáticamente
yarn lint:check    # Verificar sin warnings

# TypeScript
yarn check         # Verificar tipos de TypeScript

🎨 Tema y Diseño

La aplicación utiliza un tema oscuro moderno con:

• Colores principales: Azul (#0066CC) para acentos
• Fondo: Negro oscuro (#0F0F0F)
• Superficies: Grises oscuros para tarjetas
• Tipografía: Blanco y grises para texto

📊 API y Datos

The Movie Database (TMDB)

• Base URL: https://api.themoviedb.org/3
• Endpoints utilizados:
  • /trending/all/week - Contenido trending
  • /search/multi - Búsqueda de películas/series
  • /movie/{id} - Detalles de película
  • /tv/{id} - Detalles de serie

Características de la API

• Paginación automática
• Cache inteligente con React Query
• Manejo de errores robusto
• Tipado completo con TypeScript

🔄 Estado y Gestión de Datos

• React Query: Para cache y sincronización de datos
• Estado local: Para formularios y UI
• Optimizaciones: useCallback y useMemo para rendimiento

🌍 Internacionalización (En desarrollo)

Soporte para múltiples idiomas:

• Español (es)
• Inglés (en)

Los textos están centralizados en i18n/ para fácil mantenimiento.

📱 Características de Rendimiento

• Lazy loading de imágenes
• Virtualización en listas largas
• Memoización de componentes pesados
• Optimización de re-renders
• Cache inteligente de datos

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para detalles.

🙏 Agradecimientos

• The Movie Database por proporcionar la API
• Expo por la plataforma de desarrollo
• React Native por el framework
• TanStack Query por la gestión de estado

📞 Contacto

• Desarrollador: Mhatw
• Email: [contactomhatw@gmail.com]
• GitHub: @mhatw

---

⭐ Si te gusta este proyecto, ¡dale una estrella en GitHub!