Overview
This is an installable, Offline-first PWA built with The Movie DB API. This app allows users to search for movies and click on one movie to get some suggested movies in the same category.
When the user does a search for a movie or suggestion the app should check first in the IndexedDB Store(s) for a match before attempting the call to the Movie DB API. If there is no match then make the API call.
The features
The app has a service worker that manages all HTTP requests from the webpage.
The app has a dynamic image cache used to hold the movie poster images returned from TMDB (opens new window).
The app uses IndexedDB to save the results array from every call (both the search and the suggest). The search results go into one store and the suggestedresults go into a different store.
The PWA must work offline. When offline, the home page will work, a search will work (if previously run), a search will display a message about being unavailable if not previously run, a suggested list will work (if previously run), a suggested list will display a message about being unavailable if not previously run. The 404 page can be used instead of displaying a message on the search and suggested pages.
ScreenShots
Below you can see 3 screenshots coming from the app. The first one is the home screen presenting the main features of the app. The second screenshot is showing the Daily Checker feature asking the user about his/her feeling. The third screenshot is showing the options proposed by the app to the user according to his/her previous response.
Home Screen with main features
The Daily Checker feature
Options proposed by the Daily Checker feature
Technologies
Some of the technologies I have used during this project:
This app was an occasion to use some advanced features in HTML including (cache api, indexdb) Vanilla JavaScript including service worker Vanilla CSS.
