Learning App - Netflix-Style Movie App

A React Native movie application built with Expo Router, featuring a Netflix-like interface with trending movies, search functionality, and movie details.

Features

• 🎬 Netflix-style Trending Section - Horizontal scrolling movie cards with numbered badges
• 🔍 Movie Search - Search for movies with real-time results
• 💾 Save Movies - Save your favorite movies to a personal collection
• 📱 Responsive Design - Beautiful UI with smooth animations
• 🎯 Movie Details - Detailed movie information with genres and ratings

Tech Stack

• React Native with Expo Router
• TypeScript for type safety
• NativeWind (Tailwind CSS for React Native)
• React Native Reanimated for smooth animations
• Appwrite for backend services
• TMDB API for movie data

Setup Instructions

1. Install Dependencies

npm install

2. Environment Variables

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

# TMDB API Configuration
EXPO_PUBLIC_MOVIE_API_KEY=your_tmdb_api_key_here

# Appwrite Configuration
EXPO_PUBLIC_APPWRITE_PROJECT_ID=your_appwrite_project_id
EXPO_PUBLIC_APPWRITE_PROJECT_NAME=your_appwrite_project_name
EXPO_PUBLIC_APPWRITE_ENDPOINT=your_appwrite_endpoint
EXPO_PUBLIC_APPWRITE_DATABASE_ID=your_appwrite_database_id
EXPO_PUBLIC_APPWRITE_COLLECTION_ID=your_appwrite_collection_id
EXPO_PUBLIC_APPWRITE_SAVED_COLLECTION_ID=your_appwrite_saved_collection_id

3. Get API Keys

TMDB API

1. Go to TMDB
2. Create an account and request an API key
3. Add your API key to the .env file

Appwrite Setup

1. Create an Appwrite project
2. Set up a database with two collections:
   • trending_movies - for tracking search trends
   • saved_movies - for user's saved movies
3. Add your Appwrite credentials to the .env file

4. Run the App

# Start the development server
npm start

# Run on iOS
npm run ios

# Run on Android
npm run android

# Run on Web
npm run web

Project Structure

learning_app/
├── app/                    # Expo Router pages
│   ├── (tabs)/            # Tab navigation
│   ├── movies/            # Movie details pages
│   └── onboarding.tsx     # Onboarding screen
├── components/            # Reusable components
│   ├── MovieCard.tsx      # Movie card component
│   ├── SearchBar.tsx      # Search input component
│   └── Trending.tsx       # Netflix-style trending section
├── services/              # API and data services
│   ├── api.ts            # TMDB API integration
│   ├── appwrite.ts       # Appwrite backend services
│   └── useFetch.ts       # Custom fetch hook
├── interfaces/            # TypeScript interfaces
└── constants/            # App constants and assets

Key Components

Trending Component

The trending section features:

• Horizontal scrolling movie cards
• Numbered badges (01, 02, 03, etc.)
• Netflix-style "NETFLIX FILM" badges
• Interactive buttons (My List, Play, Explore)
• Smooth animations and scaling effects

MovieCard Component

• Displays movie posters with fallback images
• Shows movie title, rating, and release year
• Navigates to movie details on tap

Search Functionality

• Real-time search with debouncing
• Tracks search trends in Appwrite
• Displays search results in a grid layout

Recent Fixes

✅ Fixed component naming (MoiveCard → MovieCard)
✅ Removed duplicate folders (moives → movies)
✅ Fixed TypeScript interface exports
✅ Updated Trending component to match Netflix design
✅ Fixed API configuration and endpoints
✅ Resolved all linting issues
✅ Added proper environment variable setup

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run npm run lint to check for issues
5. Submit a pull request

License

This project is licensed under the MIT License.