Overview
Explore how to develop a cross-platform Ionic application that uses TheMovieDB API for movie search, filtering, and favorites. Learn to implement RxJS Observables, Capacitor storage, and custom Angular components within a tabbed interface to deliver a user-friendly movie management app.
We'll cover the following...
What will we develop in this case study?
In the previous case study, we learned how to plug into a third-party API to retrieve and display remote data within our Ionic applications.
Let’s extend that further in our second case study where we’ll create a cross-platform Ionic application that runs across iOS, Android, and the Web. It will offer users the following functionality:
- Search TheMovieDB API and display returned results
- Allow search results to be saved collectively or individually
- Allow users to select their favorite movies and save these
- Filter search results by specific genres
- Allow search results to be sorted in ascending or descending order
- Display cast and crew details for a selected film
We’ll make use of RxJS Observables, the Capacitor storage plugin, custom Angular components and services, as well as Ionic UI components, and wrap all of this within a Tabs project interface.
The application
By the end of the case study, we should be greeted with the following application:
Movies rendered to the screen can display the cast and crew details within an Ionic Modal UI component, and each movie can be saved as a favorite or removed from the displayed search results:
Searches are able to be saved from the results screen and recalled for viewing on the saved searches screen:
Favorite movies can be accessed via the “Favorites” tab and are able to be displayed in ascending or descending order as the user sees fit: