A Cinematic Movie Discovery & Personalization App Built with React Native, Expo, Appwrite, and TMDB API.
|
🎬 Discover Movies 
|
🔍 Smart Search 
|
|
⭐ Personal Watchlist 
|
✨ Details View 
|
"CineNative leverages high-resolution imagery from TMDB with smooth, native transitions for a premium viewing experience."
CineNative follows a modular Atomic Design Pattern combined with a Serverless Backend-as-a-Service (BaaS) architecture. Here is the high-level system design for CineNative:
%%{init: {'theme': 'dark', 'themeVariables': { 'lineColor': '#FFFFFF', 'arrowheadColor': '#FFFFFF', 'mainBkg': '#030014', 'nodeTextColor': '#FFFFFF' }}}%%
graph TB
subgraph Mobile_Application ["Client Layer: React Native / Expo"]
direction TB
UI[NativeWind UI Components]
Logic[Business Logic Hooks]
Router[Expo File-based Router]
end
subgraph API_Orchestration ["External Services"]
TMDB[(TMDB Movie API)]
end
subgraph Backend_Infrastructure ["Backend: Appwrite Cloud"]
Auth[Authentication Service]
Database[(NoSQL Document Store)]
Storage[Image/Blob Storage]
end
%% Standardized Arrows with High Visibility
UI <==> Logic
Logic <==> Router
Logic -- "Fetch Metadata" --> TMDB
Logic -- "Sync State" --> Backend_Infrastructure
%% Link & Box Styling
linkStyle default stroke:#FFFFFF,stroke-width:2.5px;
style Mobile_Application fill:#1a365d,stroke:#007acc,stroke-width:3px,color:#ffffff
style API_Orchestration fill:#4a3712,stroke:#d4a017,stroke-width:3px,color:#ffffff
style Backend_Infrastructure fill:#1c3d1c,stroke:#52c41a,stroke-width:3px,color:#ffffff
%%{init: {'theme': 'base', 'themeVariables': { 'lineColor': '#FFFFFF', 'primaryColor': '#007acc', 'primaryTextColor': '#fff', 'primaryBorderColor': '#FFFFFF' }}}%%
flowchart TD
Start([App Initialized]) --> AuthCheck{Session Active?}
AuthCheck -- No --> Login[Prompt Login/Signup]
Login --> AuthSuccess[Appwrite Auth Success]
AuthSuccess --> FetchData
AuthCheck -- Yes --> FetchData[Fetch TMDB Latest Movies]
FetchData --> Loading{Is Loading?}
Loading -- Yes --> Shimmer[Show Skeleton UI]
Loading -- No --> DataExists{Data Received?}
DataExists -- No --> Error[Show Error State]
DataExists -- Yes --> Render[Render Movie Cards]
Render --> UserAction([User Interaction])
%% Arrow Styling
linkStyle default stroke:#FFFFFF,stroke-width:2px;
%%{init: {'theme': 'dark', 'themeVariables': { 'actorBkg': '#007acc', 'actorTextColor': '#FFFFFF', 'signalColor': '#FFFFFF', 'labelBoxBkgColor': '#030014', 'labelTextColor': '#FFFFFF' }}}%%
sequenceDiagram
autonumber
participant U as 👤 User
participant App as 📱 CineNative App
participant TMDB as 🎬 TMDB API
participant AW as ☁️ Appwrite Cloud
U->>App: Opens Movie Details
App->>TMDB: GET /movie/{id}
TMDB-->>App: Return HD Metadata
Note over App,AW: Cloud Check
App->>AW: ListDocuments (UserWatchlist)
AW-->>App: User Data Found
U->>App: Tap 'Save Movie'
App->>AW: CreateDocument (MoviePayload)
AW-->>App: 201 Created (Success)
App-->>U: Trigger Haptic + UI Success
How data moves between the client and the cloud.
graph LR
User([User Interface]) -- Inputs/Searches --> Client[React Native App]
Client -- GET Request --> TMDB[(TMDB API)]
TMDB -- Poster/Meta Data --> Client
Client -- User Session --> Appwrite[Appwrite Cloud]
Appwrite -- JSON Web Token --> Client
Client -- CRUD Operations --> DB[(Appwrite NoSQL)]
DB -- Profile/Watchlist --> Client
CineNative is built using a modern, serverless mobile stack designed for scalability and high-performance UI rendering.
This diagram illustrates how the core technologies interact within the system lifecycle.
%%{init: {'theme': 'dark', 'themeVariables': { 'lineColor': '#61DAFB', 'mainBkg': '#030014', 'nodeTextColor': '#FFFFFF' }}}%%
graph LR
subgraph UI_UX [Frontend Framework]
A[React Native] --- B[Expo SDK 51]
B --- C[NativeWind UI]
end
subgraph LOGIC [State & Routing]
D[Expo Router] --- E[React Hooks]
end
subgraph BACKEND [Backend as a Service]
F[Appwrite Auth] --- G[Appwrite NoSQL]
end
subgraph DATA [External Data]
H[TMDB API 3.0]
end
%% Connections
UI_UX ==> LOGIC
LOGIC ==> BACKEND
LOGIC ==> DATA
%% Styling
style UI_UX fill:#1a1a1a,stroke:#61DAFB,stroke-width:2px
style BACKEND fill:#1a1a1a,stroke:#FD366E,stroke-width:2px
style DATA fill:#1a1a1a,stroke:#01B4E4,stroke-width:2px
| Layer | Technology | Usage |
|---|---|---|
| Framework | React Native (Expo) | Cross-platform mobile architecture. |
| Navigation | Expo Router | Type-safe, file-based routing. |
| Styling | NativeWind | Utility-first CSS for mobile (Tailwind). |
| Backend | Appwrite Cloud | Managed Auth, NoSQL DB, and Storage. |
| Data Source | TMDB API | Real-time global movie metadata. |
| Build Tool | EAS Build | Cloud-based Android APK compilation. |
Follow these steps to set up the development environment and run CineNative on your local machine or physical device.
- Node.js 20+ (LTS recommended)
- npm or pnpm
- Expo Go app (installed on your Android/iOS device)
- Appwrite Cloud account
- TMDB API Key
- Clone the Repository:
git clone [https://github.com/salonyranjan/CineNative.git](https://github.com/salonyranjan/CineNative.git)
cd CineNative- Install Dependencies:
npm install- Configure Environment Variables: Create a .env file in the root directory and populate it with your credentials:
Code snippet
EXPO_PUBLIC_MOVIE_API_KEY=your_tmdb_api_key
EXPO_PUBLIC_APPWRITE_ENDPOINT=[https://cloud.appwrite.io/v1](https://cloud.appwrite.io/v1)
EXPO_PUBLIC_APPWRITE_PROJECT_ID=your_project_id
EXPO_PUBLIC_APPWRITE_DATABASE_ID=your_database_id
EXPO_PUBLIC_APPWRITE_COLLECTION_ID=your_collection_id- Initialize Expo: Start the development server with a clean cache:
npx expo start -cPhysical Device: Scan the QR code displayed in the terminal using the Expo Go app.
Android Emulator: Press a in the terminal (Requires Android Studio & AVD).
Web: Press w to view the responsive layout in your browser.
To generate a new standalone Android build via EAS:
eas build --platform android --profile preview- AI-Powered Recommendations: Implementing a RAG pipeline to suggest movies based on user watchlist sentiment.
- Social Watch-Parties: Real-time synchronization for friends to track movies together.
- Offline Mode: Local database persistence for viewing saved movies without an internet connection.
Salony Ranjan
© 2026 CineNative Project. All Rights Reserved.