https://github.com/harshsahuu1234/reactnative_movieapp
Built a mobile movie app from scratch and learnt essential skills for mobile development along the way in ReactNative
https://github.com/harshsahuu1234/reactnative_movieapp
appwrite nativewind react-native typescr
Last synced: 2 months ago
JSON representation
Built a mobile movie app from scratch and learnt essential skills for mobile development along the way in ReactNative
- Host: GitHub
- URL: https://github.com/harshsahuu1234/reactnative_movieapp
- Owner: HarshSahuu1234
- Created: 2025-08-26T07:51:15.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-28T13:45:15.000Z (11 months ago)
- Last Synced: 2025-08-28T20:46:07.235Z (11 months ago)
- Topics: appwrite, nativewind, react-native, typescr
- Language: TypeScript
- Homepage:
- Size: 544 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A Movie Finding App with Extensive Search
## đź“‹ Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🕸️ [Snippets (Code to Copy)](#snippets)
5. đź”— [Assets](#links)
Built 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.
- **[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.
- **[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.
- **[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.
- **[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.
- **[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.
- **[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.
### Features of the Mobile Movie AppProject
👉 **Real-time data**: Fetching and displaying real-time movie data
👉 **Home Page**: Featured and discover movies
👉 **Search Page**: Search for your favorite movies
👉 **Popularity algorithm**: Track user searches to display the most popular movies
and many more, including code architecture and reusability.
**Cloning the Repository**
```bash
git clone https://github.com/adrianhajdin/rn-movie-app.git
cd rn-movie-app
```
**Installation**
Install the project dependencies using npm:
```bash
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](https://jsm.dev/rn25-appwrite), [TMDB](https://www.themoviedb.org/login).
**Running the Project**
```bash
npx expo start
```
Open your ExpoGO app on your phone and scan the QR code to view the project.
tailwind.config.js
```typescript
/** @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
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
interfaces/interfaces.d.ts
```typescript
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;
}
```
## đź”— Assets
Assets and snippets used in the project can be found in the **[video kit](https://jsm.dev/rn25-movie)**.