React Native Movie App Development

Portfolio project

React Native Movie App 🎬

A modern, cross-platform mobile application built with React Native and Expo that allows users to discover, search, and save their favorite movies. The app features a beautiful UI with smooth animations and integrates with popular movie APIs and cloud services.

🚀 Features

Movie Discovery: Browse trending and popular movies

Advanced Search: Search movies by title with real-time results

Movie Details: View comprehensive movie information including ratings, cast, and synopsis

Save Favorites: Save movies to your personal collection

Trending Analytics: View most searched movies based on user activity

Cross-Platform: Works on iOS, Android, and Web

Modern UI: Beautiful design with smooth animations and gradients

Offline Support: Cached data for better user experience

🛠 Tech Stack

Core Framework

React Native (0.76.7) - Cross-platform mobile development

Expo (52.0.31) - Development platform and build tools

TypeScript (5.3.3) - Type-safe JavaScript development

Navigation & Routing

Expo Router (4.0.17) - File-based routing system

React Navigation (7.0.14) - Navigation library

React Navigation Bottom Tabs (7.2.0) - Tab navigation

UI & Styling

NativeWind (4.1.23) - Tailwind CSS for React Native

Tailwind CSS (3.4.17) - Utility-first CSS framework

Expo Linear Gradient (14.0.2) - Gradient components

Expo Blur (14.0.3) - Blur effects

React Native Heroicons (4.0.0) - Icon library

Animation & Interactions

React Native Reanimated (3.16.1) - Smooth animations

React Native Gesture Handler (2.20.2) - Touch gestures

Expo Haptics (14.0.1) - Haptic feedback

Backend & APIs

TMDB API - The Movie Database API for movie data

Appwrite (react-native-appwrite 0.7.0) - Backend-as-a-Service for user data and analytics

Development Tools

Jest (29.2.1) - Testing framework

Babel (7.25.2) - JavaScript compiler

Metro - React Native bundler

📱 Project Structure

react-native-movie-app-main/
├── app/                    # Expo Router pages
│   ├── (tabs)/            # Tab navigation screens
│   │   ├── index.tsx      # Home screen
│   │   ├── search.tsx     # Search screen
│   │   ├── save.tsx       # Saved movies
│   │   └── profile.tsx    # User profile
│   ├── movie/
│   │   └── [id].tsx       # Movie details page
│   └── _layout.tsx        # Root layout
├── components/            # Reusable UI components
│   ├── MovieCard.tsx      # Movie card component
│   ├── SearchBar.tsx      # Search input component
│   └── TrendingCard.tsx   # Trending movie card
├── services/              # API and external services
│   ├── api.ts            # TMDB API integration
│   ├── appwrite.ts       # Appwrite backend service
│   └── usefetch.ts       # Custom fetch hook
├── interfaces/            # TypeScript type definitions
├── constants/             # App constants and configurations
├── assets/               # Images, icons, and fonts
└── types/                # Additional type definitions

🚀 Getting Started

Prerequisites

Node.js (v18 or higher)

npm or yarn

Expo CLI (npm install -g @expo/cli)

iOS Simulator (for iOS development)

Android Studio (for Android development)

Installation

Clone the repository

git clone <repository-url>
cd react-native-movie-app-main

Install dependencies

npm install

Environment Setup Create a .env file in the root directory with the following variables:

EXPO_PUBLIC_MOVIE_API_KEY=your_tmdb_api_key
EXPO_PUBLIC_APPWRITE_PROJECT_ID=your_appwrite_project_id
EXPO_PUBLIC_APPWRITE_DATABASE_ID=your_appwrite_database_id
EXPO_PUBLIC_APPWRITE_COLLECTION_ID=your_appwrite_collection_id

Start the development server

npm start

Run on your preferred platform

# iOS
npm run ios

# Android
npm run android

# Web
npm run web

🔧 Available Scripts

npm start - Start the Expo development server

npm run ios - Run on iOS simulator

npm run android - Run on Android emulator

npm run web - Run on web browser

npm test - Run tests in watch mode

npm run lint - Run ESLint

📊 API Integration

TMDB API

The app integrates with The Movie Database (TMDB) API to fetch:

Movie search results

Movie details and metadata

Popular and trending movies

Movie posters and images

Appwrite Backend

Appwrite is used for:

Storing user search analytics

Tracking trending searches

User preferences and saved movies

🎨 UI/UX Features

Responsive Design: Adapts to different screen sizes

Dark/Light Mode: Automatic theme switching

Smooth Animations: Reanimated for fluid interactions

Gradient Backgrounds: Modern visual appeal

Haptic Feedback: Enhanced user experience

Loading States: Proper loading indicators

🧪 Testing

The project includes Jest testing setup with:

Component testing

API integration testing

Custom hooks testing

Run tests with:

npm test

📦 Building for Production

iOS

expo build:ios

Android

expo build:android

Web

expo build:web

🤝 Contributing

Fork the repository

Create a feature branch (git checkout -b feature/amazing-feature)

Commit your changes (git commit -m 'Add some amazing feature')

Push to the branch (git push origin feature/amazing-feature)

Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

TMDB for providing the movie data API

Appwrite for the backend services

Expo for the development platform

React Native community

📞 Support

If you encounter any issues or have questions, please:

Check the Issues page

Create a new issue with detailed information

Contact the development team

Made with ❤️ using React Native and Expo

0 likes · 4 views · Jul 7, 2025

Built a cross-platform movie app using React Native and Expo.