🎬 MoviFlix App

A mobile app to search, discover, and rank movies.

---

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🕸️ Snippets

---

🤖 Introduction

The MoviFlix App is built with Expo, React Native, TypeScript, Tailwind CSS (NativeWind), and Appwrite.
It fetches real-time movie data, implements a popularity algorithm, and delivers a smooth browsing experience.
The app follows modern UI/UX practices to ensure scalability, performance, and cross-platform support.

---

⚙️ Tech Stack

• Expo – Universal platform for React Native apps.
• React Native – Cross-platform mobile UI framework.
• Appwrite – Backend services (auth, database, storage).
• TypeScript – Strongly typed superset of JavaScript.
• Tailwind CSS / NativeWind – Utility-first styling for React Native.

---

🔋 Features

• 📡 Real-time data fetching (from external API)
• 🏠 Home Page with featured and discover sections
• 🔍 Search Page to find movies quickly
• 📊 Popularity algorithm that tracks user searches
• 🎨 Responsive UI/UX using Tailwind (NativeWind)
• 📦 Scalable architecture with reusable components

---

🤸 Quick Start

Prerequisites

• Git
• Node.js
• npm

Clone & Setup

git clone https://github.com/your-username/movie-finder-app.git
cd movie-finder-app
npm install


**Set Up Environment Variables**

Create a new file named `.env` in the root of your project and add the following content:

```env

EXPO_PUBLIC_MOVIE_API_KEY=

EXPO_PUBLIC_APPWRITE_PROJECT_ID=

EXPO_PUBLIC_APPWRITE_DATABASE_ID=

EXPO_PUBLIC_APPWRITE_COLLECTION_ID=

Replace the placeholder values with your actual TMDB API key, Appwrite project ID, Database ID, and Collection ID. You can obtain these credentials by signing up on the Appwrite, TMDB.

Running the Project

npx expo start

Open your ExpoGO app on your phone and scan the QR code to view the project.

🕸️ Snippets

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        primary: "#030014",
        secondary: "#151312",
        ratingBox: "#221F3D",
        searchBar: "#0F0D23",
        text: "#9CA4AB",
        darkAccent: "#AB8BFF",
        accentText: "#A8B5DB",
        secondaryText: "#D6C7FF",
      },
    },
  },
  plugins: [],
};

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

interfaces/interfaces.d.ts

interface Movie {
  id: number;
  title: string;
  adult: boolean;
  backdrop_path: string;
  genre_ids: number[];
  original_language: string;
  original_title: string;
  overview: string;
  popularity: number;
  poster_path: string;
  release_date: string;
  video: boolean;
  vote_average: number;
  vote_count: number;
}

interface TrendingMovie {
  searchTerm: string;
  movie_id: number;
  title: string;
  count: number;
  poster_url: string;
}

interface MovieDetails {
  adult: boolean;
  backdrop_path: string | null;
  belongs_to_collection: {
    id: number;
    name: string;
    poster_path: string;
    backdrop_path: string;
  } | null;
  budget: number;
  genres: {
    id: number;
    name: string;
  }[];
  homepage: string | null;
  id: number;
  imdb_id: string | null;
  original_language: string;
  original_title: string;
  overview: string | null;
  popularity: number;
  poster_path: string | null;
  production_companies: {
    id: number;
    logo_path: string | null;
    name: string;
    origin_country: string;
  }[];
  production_countries: {
    iso_3166_1: string;
    name: string;
  }[];
  release_date: string;
  revenue: number;
  runtime: number | null;
  spoken_languages: {
    english_name: string;
    iso_639_1: string;
    name: string;
  }[];
  status: string;
  tagline: string | null;
  title: string;
  video: boolean;
  vote_average: number;
  vote_count: number;
}

interface TrendingCardProps {
  movie: TrendingMovie;
  index: number;
}