Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kelvinleandro/movie-app
A movie app using React Native, TMDB API and Firebase
https://github.com/kelvinleandro/movie-app
axios expo expo-cli firebase firebase-auth firestore firestore-database javascript movie-app movies-api react react-native react-native-paper reactjs styled-components tmdb tmdb-api typescript typescript-react
Last synced: 3 days ago
JSON representation
A movie app using React Native, TMDB API and Firebase
- Host: GitHub
- URL: https://github.com/kelvinleandro/movie-app
- Owner: kelvinleandro
- License: mit
- Created: 2024-03-09T23:01:59.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-06-25T19:32:35.000Z (6 months ago)
- Last Synced: 2024-11-05T12:18:01.596Z (about 2 months ago)
- Topics: axios, expo, expo-cli, firebase, firebase-auth, firestore, firestore-database, javascript, movie-app, movies-api, react, react-native, react-native-paper, reactjs, styled-components, tmdb, tmdb-api, typescript, typescript-react
- Language: TypeScript
- Homepage:
- Size: 26.5 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Movie App (ClapperFlix)
A comprehensive React Native application for exploring movies, featuring authentication and user data storage using Firebase. Utilizes the TMDB API, styled with styled-components, and built with Expo and TypeScript. This app allows users to browse movies, view detailed information, and mark movies as favorites.
## Preview
## Features
- **Explore Movies:** Browse through a list of movies fetched from the TMDB API.
- **Movie Details:** View detailed information about the movies, including synopsis, cast and crew, year, runtime, and similar movies.
- **Favorites:** Mark movies as favorites and save them using Firebase Firestore.
- **Search Functionality:** Search for movies using the TMDB API.
- **Authentication:** Handle user authentication with Firebase Authentication.
## Tech Stack
- **Framework:** React Native (Expo)
- **Programming Language:** TypeScript
- **Styling:** Styled-Components
- **API Integration:** Axios for TMDB API requests
- **UI Components:** React Native Paper
- **Backend:** Firebase (Authentication and Firestore)
## Getting Started
### Prerequisites
- Node.js installed on your machine
- An API access token from TMDB for fetching movies
- Expo Go installed on your phone or an Android/iOS emulator
- A Firebase project with Authentication enabled and Firestore with a collection called `users`
### Installation
1. Clone the repository:
```sh
git clone https://github.com/kelvinleandro/movie-app.git
```
2. Install dependencies:
```sh
npm install
```
3. Add your TMDB API access token in `src/api/instance.ts`:
```js
const ACCESS_TOKEN = "place_your_access_token_here";
```
4. Set up Firebase in the project:
- Create a Firebase project in the Firebase console.
- Enable Authentication and Firestore in your Firebase project.
- In the Firestore database, create a collection named `users`.
- Add your Firebase project configuration in `./firebaseConfig.ts`:
```js
const firebaseConfig = {
// your firebase project configuration
};
```
- You can find your firebaseConfig in the Firebase console under project settings.
5. Start the app:
```sh
npm start
```
## Project Structure
- `src/api`: Contains the API instance and helper functions for TMDB API requests.
- `src/assets`: Static assets like icons and splash screen images.
- `src/components`: Reusable components structured by screens and UI elements.
- `src/constants`: Application constants, e.g., color definitions.
- `src/context`: React contexts, e.g., for managing favorite movies.
- `src/hooks`: Custom React hooks, e.g., for API calls.
- `src/navigation`: Navigation setup using React Navigation.
- `src/screens`: Individual screens of the app.
- `src/types`: TypeScript type definitions specific to the app.
- `src/utils`: Utility functions.
## Note
This app is for practice purposes and now includes Firebase to persist favorites data across app reloads. To fully utilize the TMDB API and Firebase features, you must obtain and configure your own API access token and Firebase project configuration.
## License
This project is licensed under the MIT License - see the LICENSE file for details.