{"id":30701536,"url":"https://github.com/harshsahuu1234/reactnative_movieapp","last_synced_at":"2026-05-07T01:03:15.578Z","repository":{"id":311768154,"uuid":"1044784284","full_name":"HarshSahuu1234/ReactNative_MovieApp","owner":"HarshSahuu1234","description":"Built a mobile movie app from scratch and learnt essential skills for mobile development along the way in ReactNative","archived":false,"fork":false,"pushed_at":"2025-08-28T13:45:15.000Z","size":557,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-28T20:46:07.235Z","etag":null,"topics":["appwrite","nativewind","react-native","typescr"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HarshSahuu1234.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-26T07:51:15.000Z","updated_at":"2025-08-28T16:14:57.000Z","dependencies_parsed_at":"2025-08-26T16:40:44.595Z","dependency_job_id":"1c9e1352-cd91-49d2-b7e0-391a7642c888","html_url":"https://github.com/HarshSahuu1234/ReactNative_MovieApp","commit_stats":null,"previous_names":["harshsahuu1234/reactnativeprojects","harshsahuu1234/reactnative_movieapp"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/HarshSahuu1234/ReactNative_MovieApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarshSahuu1234%2FReactNative_MovieApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarshSahuu1234%2FReactNative_MovieApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarshSahuu1234%2FReactNative_MovieApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarshSahuu1234%2FReactNative_MovieApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HarshSahuu1234","download_url":"https://codeload.github.com/HarshSahuu1234/ReactNative_MovieApp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarshSahuu1234%2FReactNative_MovieApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273295007,"owners_count":25079904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appwrite","nativewind","react-native","typescr"],"created_at":"2025-09-02T14:00:43.160Z","updated_at":"2026-05-07T01:03:15.544Z","avatar_url":"https://github.com/HarshSahuu1234.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-React_Native-black?style=for-the-badge\u0026logoColor=white\u0026logo=react\u0026color=61DAFB\" alt=\"React Native\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Expo-black?style=for-the-badge\u0026logoColor=white\u0026logo=expo\u0026color=000020\" alt=\"Expo\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-TypeScript-black?style=for-the-badge\u0026logoColor=white\u0026logo=typescript\u0026color=3178C6\" alt=\"TypeScript\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"Tailwind CSS\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Appwrite-black?style=for-the-badge\u0026logoColor=white\u0026logo=appwrite\u0026color=F02E65\" alt=\"Appwrite\" /\u003e\n  \u003c/div\u003e\n\n  \u003ch3 align=\"center\"\u003eA Movie Finding App with Extensive Search\u003c/h3\u003e\n\u003c/div\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n\n2. ⚙️ [Tech Stack](#tech-stack)\n\n3. 🔋 [Features](#features)\n\n4. 🕸️ [Snippets (Code to Copy)](#snippets)\n\n5. 🔗 [Assets](#links)\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nBuilt with Expo, TypeScript, and Tailwind CSS, this app fetches movies and creates a popularity algorithm using Appwrite. It provides users with a seamless browsing experience, ranking movies based on various engagement metrics. The app leverages modern UI/UX principles for a responsive and visually appealing interface, ensuring real-world scalability and performance.\n\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- **[Expo](https://expo.dev/)** is an open-source platform for building universal native apps (Android, iOS, web) using JavaScript/TypeScript and React Native. It features file-based routing via Expo Router, fast refresh, native modules for camera/maps/notifications, over-the-air updates (EAS), and streamlined app deployment.\n\n- **[React Native](https://reactnative.dev/)** is a framework for building mobile UIs with React. It enables component‑based, cross-platform development with declarative UI, deep native API support, and is tightly integrated with Expo for navigation and native capabilities.\n\n- **[Appwrite](https://jsm.dev/rn25-appwrite)** is an open-source backend-as-a-service platform offering secure authentication (email/password, OAuth, SMS, magic links), databases, file storage with compression/encryption, real-time messaging, serverless functions, and static site hosting via Appwrite Sites—all managed through a unified console and microservices architecture.\n\n- **[TypeScript](https://www.typescriptlang.org/)** is a statically-typed superset of JavaScript providing type annotations, interfaces, enums, generics, and enhanced tooling. It improves error detection, code quality, and scalability—ideal for robust, maintainable projects.\n\n- **[Tailwind CSS](https://tailwindcss.com/)** is a utility-first CSS framework enabling rapid UI design via low-level classes. In React Native/Expo, it’s commonly used with NativeWind to apply Tailwind-style utilities to mobile components.\n\n- **[NativeWind](https://www.nativewind.dev/)** brings Tailwind CSS to React Native and Expo, allowing you to style mobile components using utility-first classes for fast, consistent, and responsive UI design.\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n### Features of the Mobile Movie AppProject\n\n👉 **Real-time data**: Fetching and displaying real-time movie data\n\n👉 **Home Page**: Featured and discover movies\n\n👉 **Search Page**: Search for your favorite movies\n\n👉 **Popularity algorithm**: Track user searches to display the most popular movies\n\nand many more, including code architecture and reusability.\n\n**Cloning the Repository**\n\n```bash\ngit clone https://github.com/adrianhajdin/rn-movie-app.git\n\ncd rn-movie-app\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env` in the root of your project and add the following content:\n\n```env\n\nEXPO_PUBLIC_MOVIE_API_KEY=\n\nEXPO_PUBLIC_APPWRITE_PROJECT_ID=\n\nEXPO_PUBLIC_APPWRITE_DATABASE_ID=\n\nEXPO_PUBLIC_APPWRITE_COLLECTION_ID=\n```\n\nReplace 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](https://jsm.dev/rn25-appwrite), [TMDB](https://www.themoviedb.org/login).\n\n**Running the Project**\n\n```bash\n\nnpx expo start\n\n```\n\nOpen your ExpoGO app on your phone and scan the QR code to view the project.\n\n## \u003ca name=\"snippets\"\u003e🕸️ Snippets\u003c/a\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003ccode\u003etailwind.config.js\u003c/code\u003e\u003c/summary\u003e\n\n```typescript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\"./app/**/*.{js,jsx,ts,tsx}\", \"./components/**/*.{js,jsx,ts,tsx}\"],\n  presets: [require(\"nativewind/preset\")],\n  theme: {\n    extend: {\n      colors: {\n        primary: \"#030014\",\n        secondary: \"#151312\",\n        ratingBox: \"#221F3D\",\n        searchBar: \"#0F0D23\",\n        text: \"#9CA4AB\",\n        darkAccent: \"#AB8BFF\",\n        accentText: \"#A8B5DB\",\n        secondaryText: \"#D6C7FF\",\n      },\n    },\n  },\n  plugins: [],\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003ccode\u003eapp/globals.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003ccode\u003einterfaces/interfaces.d.ts\u003c/code\u003e\u003c/summary\u003e\n\n```typescript\ninterface Movie {\n  id: number;\n  title: string;\n  adult: boolean;\n  backdrop_path: string;\n  genre_ids: number[];\n  original_language: string;\n  original_title: string;\n  overview: string;\n  popularity: number;\n  poster_path: string;\n  release_date: string;\n  video: boolean;\n  vote_average: number;\n  vote_count: number;\n}\n\ninterface TrendingMovie {\n  searchTerm: string;\n  movie_id: number;\n  title: string;\n  count: number;\n  poster_url: string;\n}\n\ninterface MovieDetails {\n  adult: boolean;\n  backdrop_path: string | null;\n  belongs_to_collection: {\n    id: number;\n    name: string;\n    poster_path: string;\n    backdrop_path: string;\n  } | null;\n  budget: number;\n  genres: {\n    id: number;\n    name: string;\n  }[];\n  homepage: string | null;\n  id: number;\n  imdb_id: string | null;\n  original_language: string;\n  original_title: string;\n  overview: string | null;\n  popularity: number;\n  poster_path: string | null;\n  production_companies: {\n    id: number;\n    logo_path: string | null;\n    name: string;\n    origin_country: string;\n  }[];\n  production_countries: {\n    iso_3166_1: string;\n    name: string;\n  }[];\n  release_date: string;\n  revenue: number;\n  runtime: number | null;\n  spoken_languages: {\n    english_name: string;\n    iso_639_1: string;\n    name: string;\n  }[];\n  status: string;\n  tagline: string | null;\n  title: string;\n  video: boolean;\n  vote_average: number;\n  vote_count: number;\n}\n\ninterface TrendingCardProps {\n  movie: TrendingMovie;\n  index: number;\n}\n```\n\n\u003c/details\u003e\n\n## \u003ca name=\"links\"\u003e🔗 Assets\u003c/a\u003e\n\nAssets and snippets used in the project can be found in the **[video kit](https://jsm.dev/rn25-movie)**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshsahuu1234%2Freactnative_movieapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharshsahuu1234%2Freactnative_movieapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshsahuu1234%2Freactnative_movieapp/lists"}