Yet Another Movie Database – a React Native mobile application built with Expo

📱 react-yamdb

react-yamdb is a mobile movie discovery application powered by the TMDB API.

It demonstrates modern React Native development practices including scalable navigation, server-state management with React Query, theming, and performance optimization.

📑 Table of Contents

• Purpose
• Screenshots
• Features
• Tech Stack
• Architecture
• Performance Optimizations
• Project Structure
• Quick Start
• TMDB API Key
• Development & Debugging
• Future Improvements
• Resources
• License

🎯 Purpose

This project demonstrates a production-style React Native architecture including:

• Feature-based architecture
• Scalable navigation structure
• Server state management with React Query
• Mobile-first design system
• Cross-platform development using Expo

📸 Screenshots

Screenshots of the app in Dark and Light mode.

Home	Movie Details	Cast Member

✨ Features

• Browse movies and TV series using the TMDB API
• Modern mobile navigation with React Navigation
• Asynchronous data fetching
• Light / Dark theme support
• Responsive mobile UI
• Optimized mobile user experience

🧰 Tech Stack

Core

• React Native
• Expo
• TypeScript
• React 19

Navigation

• React Navigation
  • Native Stack
  • Bottom Tabs

Data & Networking

• TanStack React Query – server state management
• Axios – API requests
• TMDB REST API

UI & Mobile

• React Native Reanimated
• React Native Gesture Handler
• React Native SVG
• React Native Linear Gradient
• React Native Safe Area Context
• Expo Image

Media & Web

• React Native Video
• React Native WebView
• YouTube Iframe Player

Tooling

• Expo Dev Client
• ESLint
• TypeScript

🏗️ Architecture

The project follows a feature-based architecture to improve scalability and maintainability.

Key principles:

• Feature isolation – each feature manages its own screens, hooks, services and types
• Shared UI layer – reusable design system components
• Centralized API layer – network logic separated from UI
• React Query data management – server state handled with caching and background updates

⚡ Performance Optimizations

Several techniques are used to keep the application responsive on mobile devices:

• React Query caching – reduces unnecessary network requests and keeps data fresh in the background
• High-performance image rendering with Expo Image – improved decoding, caching and memory usage compared to the default React Native Image
• Image caching (memory + disk) – minimizes network usage and improves scrolling performance in lists and carousels
• Optimized list rendering – using FlatList virtualization for large collections

📂 Project Structure

The project is organized using a feature-based modular structure.
Each feature encapsulates its own components, navigation, screens, API layer and queries.

This structure improves:

• scalability
• maintainability
• separation of concerns
• domain isolation

src
├── api            # API clients and shared services
├── assets         # fonts, images, splash screens
├── config         # environment variables and app configuration
├── design         # design system (components, theme, tokens)
├── features       # domain-driven features
│   ├── home
│   │   ├── api
│   │   ├── components
│   │   ├── navigation
│   │   ├── queries
│   │   └── screens
│   ├── movie
│   ├── person
│   ├── profile
│   └── settings
├── navigation     # global navigation configuration
├── types          # shared TypeScript types
└── utils          # utility helpers

🚀 Quick Start

Install dependencies

npm install

Development Commands

• Start Expo – npm start
• Run on Web – npm run web
• Run on Android – npm run android
• Run on iOS – npm run ios

💡 When using npm start, the open Android/iOS option will automatically launch the first available device or emulator without prompting you to choose. To target a specific device or emulator, use npm run android/ios.

🔑 TMDB API Key

This project uses the TMDB API to fetch movie and TV data. You need an API key to run the app.

Steps to get your TMDB API Key

1. Go to TMDB Developer Portal
2. Log in or create a free account
3. Navigate to API → Create API Key
4. Fill in the required information (application name, use case, etc.)
5. Copy your API Key (v3 auth)

Add your key to the project

1. Create a new .env file at the root of the projet
2. Copy the content of the example environment file .env.example in to your .env file
3. In your .env replace the YOUR_API_KEY_HERE placeholder with your API key
4. Save the file
5. Start the app as usual

⚠️ Important: Do not commit your .env file. It is ignored by Git to protect your API key.
The API key is automatically loaded from .env and accessed via env.TMDB_API_KEY in the code.

🛠️ Development & Debugging

Build Development Version

Builds the app with all native dependencies and installs it on the connected emulator or device.

# 🤖 Android
npm run android

# 🍎 iOS
npm run ios

Dev Client Mode

Runs the app with native dependencies enabled.

npm start

Debugging Options

There are several options for debugging TypeScript/JavaScript:

Chrome DevTools

After starting the app in Dev Client mode:

• Press j or select open debugger
• Chrome will open → Console, Sources, and Network tabs available

Flipper (recommended with Hermes)

• Enable Hermes in app.json: "jsEngine": "hermes"
• Install Flipper
• Start your Dev Client
  → your app will appear in Flipper
  → set breakpoints, view logs, check performance, inspect network requests

Console Logging

console.log("Request", request);
console.log("Response", response);

→ View logs in adb logcat (Android) or the Xcode console (iOS)

Release Mode

Production builds with optimized performance and no development tools.

Build & Run Release Version

# 🤖 Android - Build and install release APK
npm run android:release

# 🍎 iOS - Build release version (requires physical device or simulator)
npm run ios:release

💡 Release builds are optimized for performance and don't include development tools like hot reloading or debugging capabilities.

Monitoring Release App Logs

Android Logs

# Clear existing logs and monitor React Native messages
adb logcat -c && adb logcat | findstr ReactNativeJS

# Monitor specific patterns (warning, errors, etc.)
adb logcat | Select-String -Pattern "(warning|error|etc|ReactNativeJS)"

# View all logs from your app package
adb logcat | findstr "com.anonymous.reactyamdb"

iOS Logs

# View iOS device logs (requires device connected)
xcrun devicectl list devices
xcrun devicectl view logs --device [DEVICE_ID] --stream

🧠 Future Improvements

Potential enhancements:

• Offline support
• Favorites / Watchlist
• Movie search
• Infinite scrolling
• Unit testing with Jest

📚 Resources

• React Native Documentation – https://reactnative.dev/docs/getting-started
• Expo Documentation – https://docs.expo.dev
• React Navigation – https://reactnavigation.org
• TanStack Query – https://tanstack.com/query/latest
• TMDB API – https://developer.themoviedb.org
• Bulletproof React Architecture – https://github.com/alan2207/bulletproof-react
• React Query Patterns (TkDodo Blog) – https://tkdodo.eu/blog

📄 License

This project is licensed under the MIT License.

---

Built with ❤️ using React Native & Expo by jfcere