-
About the Project
-
Features
-
Getting Started
- Pre-requisites
- Installation Instructions
- Get API Key
-
App Preview
- Register Screen
- Login Screen
- Home Screen
- Search Screen
- Details Screen
- Favorites Screen
- Watchlist Screen
- User Menu Screen
- My Profile Screen
- About Screen
-
App Architecture
-
Folder Structure
-
Known Bugs
-
Future Updates
-
Tech Stack
-
Contribution
-
License Information
-
Credit and Acknowledgement
-
Further Reading
PopcornTime is a free, cross-platform mobile application for Android and iOS which can be used to discover, manage, organize and share movies that users enjoy. Built as a training project to learn React Native, it is intended for non-commercial use only.
It provide a user-friendly, intuitive interface to its users to manage their catalog of movies. A user can start by registering for a profile or an account in the app. It provides a seamless experience in terms of application usage to browse through the list of movies sorted by popularity and view details about the movie such as the plot summary, runtime and release year of the movie. A user can organize the movies into Favorites and Watchlist. It also allows the users to view similar titles below for the movie that they are interested in.
- Create Account: The user will create an account and log in to the account.
- Search Title: The user will use the search bar to search for any movie or tv show.
- View Details: The user will be able to view details for the title such as plot summary, cast members, number of seasons, and episodes.
- Add to Lists: The user can add a title to a list to watch later or mark it as a favorite.
- View Recommendations: The user will be shown recommended titles for a selected title.
The app is developed and tested for Android 11 or iOS 15 and higher versions of the mobile Operating Systems.
- Install the latest Node
- Install Expo -
npm install expo-cli --global - Clone the repo
git clone https://github.com/rinku-s/popcorntime-android
cdinto this project directory- Install the dependencies by running
npm installoryarn install - Run
expo start
TMDB has more than 700,000 movies in its database. to access movies data for free, create an account on TMDB to generate a unique API key. It is free to use provided it is cited as the source when used.
Login
Logout
The overall architecture of PopcornTime is based on the Container and Presentational Pattern. It splits the code into two parts -
- Container: the logic layer of the application
- Presentation: the view layer of the application
The container component is concerned with how the application works such as any data processing, logic, API calls, state management, etc.
The presentational component is stateless and contains the layout of the UI which displays the data passed to it via props.
Each screen in PopcornTime has two files associated with it - a .js file under presentation folder which contains the code for the layout of the screen, and a corresponding .js file is under screens folder which is the container component of the screen. A third file which may be associated with any screen is under the styles folder which contains the design of the layout of a particular screen in the application.
This pattern was selected as it provides an easy to understand code structure which follows Separation of Concerns principle. The layout can be easily modified without any modifications to the logic of the application and vice versa. Further, it increases code reusability as the same presentational component can be used to display data from different sources.
The folder structure in React Native with a list of all files is mentioned below:
code
.
C:.
│ .gitignore
│ App.js
│ app.json
│ babel.config.js
│ package.json
│ README.md
│
├───assets
│ adaptive-icon.png
│ app-icon.png
│ favicon.png
│ heart-icon.png
│ icon.png
│ like-icon.png
│ popcorn-icon.png
│ search-icon.png
│ snack-icon.png
│ splash.png
│ user-icon.png
│ watchlist-icon.png
│
├───helpers
│ Colors.js
│
├───presentation
│ AboutUI.js
│ AppIconUI.js
│ DetailsUI.js
│ FavoritesUI.js
│ HomeUI.js
│ LoginScreenUI.js
│ ProfileIconUI.js
│ RegisterUI.js
│ SearchUI.js
│ UserDetailsUI.js
│ UserProfileUI.js
│ WatchlistUI.js
│
├───screens
│ About.js
│ Details.js
│ FavoritesList.js
│ Home.js
│ LoginScreen.js
│ RegisterScreen.js
│ SearchScreen.js
│ UserDetails.js
│ UserProfile.js
│ Watchlist.js
│
└───styles
DetailsStyle.js
HomeStyle.js
ListStyle.js
LoginStyle.js
MenuStyle.js
SearchScreenStyle.js
- Search bar size issue on Android The search bar on Home screen shrinks when the keyboard comes up on the screen. This is due to the flex layout of the Home screen. This issue was resolv ed by wrapping the entire layout in keyboard-aware-scrollview. However, using this package on the Home screen adversely affected the performance of the application resulting a significant slowdown in loading poster images of movies which are displayed on the Home screen by fetching them through network calls. Therefore, this fix was rolled back and the issue is open until it can be resolved without any side-effects.
- Search bar does not work on iOS The search bar does not work on iOS. The root cause of the issue is unknown. Due to unavailability of Apple devices, it has been tested only once on iOS and the issue has not been fixed yet.
- Navigation issue on pressing back button on Home Screen On pressing the back button of the device on Android, the app navigates back to Login screen.
| Version | Issue | Status |
|---|---|---|
| 0.1 | Search bar size issue on Android | Open |
| 0.1 | Search bar does not work on iOS | Open |
| 0.1 | Navigation issue on pressing back button on Home Screen | Open |
Features not implemented in current version (v0.1) but planned for later versions due to time constraints -
- Create Multiple Lists: A user can create their own custom lists.
- Share Lists: A user can collaborate with friends to create and edit common lists to make plans together.
- Profile Picture: A user can add a custom photo as profile picture for their profile.
- Add Friends: A user can add other active users as friends.
The tech stack used for implementation of PopcornTime is described briefly in the following section:
| Technology | Description |
|---|---|
| React Native | React Native is an open-source, cross-platform software framework that can be used to develop apps that work on desktop, web and mobile using a single codebase. It is used to develop the frontend of PopcornTime. |
| Expo | Expo is an open-source framework for React applications which is used to build PopcornTime. |
| Django REST Framework | Django REST is a framework written in Python Django for building Web APIs to fetch data about movies and users from the database. |
| PostgreSQL | Postgres is a free, open-source relational database that is used to store all the data of PopcornTime. |
| Pandas | Pandas is an open-source data manipulation and analysis tool written in Python which is extensively used in pre-processing and cleaning the data fetched from TMDB API to be stored in the database and also in writing the algorithm for generating recommendations for movies. |
This application was developed as a final project for the graduate course CS 855 Mobile Computing at University of Regina.
🧙♀️ Rinku Ansari
Email: raf122@uregina.ca
GitHub: @rinku-s
This software is freely distributable under the MIT License. Please see License.md for more information.
The following open-source packages were used in development of PopcornTime:
- @react-navigation/native
- @react-navigation/stack
- @react-native-async-storage/async-storage
- @react-native-community/datetimepicker
- react-native-safe-area-context
- react-native-keyboard-aware-scroll-view
Flaticon - Images & icons used in PopcornTime.
emojis cheatsheet - Emojis used in README file.
markdown-badges - Pre-made badges used in README file.
shields Custom badges in README file.