Description

BACKGROUND

Nowadays, massive amount of movies are released each year. Majority of people tend to struggle to manages their movies. Therefor, we propose a solution to solve that problem, WatchList. WatchList, is a mobile app to discover trending movies and movies that displayed in the box office. This app will ensure to help you to managing and track down movies that catch your interest. WatchList is build with React Native for the frontend and Python with Flask for the backend of the app. For the data, I am using eksternal API, The Movie Database (TMDB) API.

USED TECHNOLOGY

1. React Native: Developed by Meta, is an open-source framework for building cross-platform mobile applications with JavaScript and React. It allows developers to write a single codebase that works on both iOS and Android, reducing development time and maintenance. It offers mobile-optimized UI components like TouchableOpacity, ScrollView, and FlatList for creating responsive interfaces. React Native enables integration with libraries like React Navigation for multi-screen applications and supports real-time data display from external APIs.
2. Python Flask: Versatile backend framework for integrating external APIs and managing MySQL databases. It ease you to fetching data, processing, and store data, allowing seamless data exchange between APIs and databases. Flask’s simplicity and flexibility make it ideal for building dynamic, data-driven applications.
3. Snack Expo: Expo is an online development platform for building and testing React Native apps directly in the browser. It provides instant feedback, easy sharing, and supports real device testing without setup. Snack enables developers to experiment with React Native code collaboratively and efficiently.

IMPLEMENTATION

Frontend With React Native

• Movie Display
  Using FlatList and VirtualizedList, the app displays a list of trending and now-playing movies. Movie data is fetched through the TMDB API using Axios. When users open the app, these two movie lists are displayed on the main page.
• Search Functionality
  To facilitate movie searches, the app includes a search feature. Users can type the name of the movie they want to find. Any change in the search input will dynamically update the display using useEffect to fetch data from the TMDB API based on the entered query.
• My Movies
  This feature allows users to add movies to their "My Movies" list. Each movie added is saved in a MySQL database through a backend API. Users can mark whether they have watched a movie or not, and the status is updated based on their selection.
• Navigation and UI
  Using React Navigation, the app manages navigation between pages, such as from the home page to the search page or "My Movies" page. The UI is designed to be responsive using components from React Native and Expo to ensure optimal display on both iOS and Android devices.

Backend With Python Flask

• API for Fetching Data
  Flask handles requests for movie data from the TMDB API and stores it in a MySQL database. APIs such as /get/trending, /get/now-playing, and /search/movie are used to fetch movie data based on the requested category.
• MySQL Database
  The backend uses MySQL to store data for movies added to "My Movies." Tables such as movies contain columns like movieId, title, poster_path, is_watched, etc. Users can add, remove, or update the watch status of movies.
• CRUD Endpoints
  Flask provides several endpoints for CRUD operations:
  1. GET /get/list: Retrieve data for movies in the user's watchlist.
  2. POST /add/list: Add a new movie to the "My Movies" list with details like movie_id, poster_path, and title.
  3. POST /remove/list: Remove a specific movie from the "My Movies" list by providing its movie_id.
  4. PUT /edit/list/<movie_id>: Update the watch status of a movie (watched or unwatched) in the "My Movies" list.
  5. GET /now_playing: Fetches a list of movies currently playing in theaters.
  6. GET /trending: Retrieves trending movies for the current week.
  7. POST /search: Searches for movies based on a user-provided query.
  8. POST /detail/movie: Retrieves detailed information for a specific movie using its movie_id.
• Security and Validation
  Flask uses basic authentication or tokens to ensure that only verified users can change movie statuses or manage their watchlists.

ATTACHMENTS

Picture 1. Home Page

Picture 2. Detail Movie

Picture 3. Search Movies Found

Picture 4. Search Movies Not Found

Picture 5. Add To Watchlist

Picture 6. Movie Already Added

Picture 7. My Movies Empty

Picture 8. My Movies 

Picture 9. Never Been Watched

Picture 10. Already Watched