Application based on The Movie Database (TMDB) API allows users to search their favourite movies based on queries or categories. Furthermore app gives an option to add, delete and update bookmarks. Website is fully responsive, easy to use on mobile or tablet.
Tech Stack: HTML, CSS, JS ES6, Parcel, NPM, GIT
Architecture: MVC
API: The Movie Database (https://developers.themoviedb.org/3/getting-started/introduction)
App allows user to search his favourite movies by query and shown categories. To perform long API requests, all the API calls are handled by asynchronous Javascript with async/await functions, promises and error handling.
Search is handled in the model module with leadSearchResults() or model.LoadCategory() functions. Then if the call is successful app starts to render result by resultsView.renderResults() function (handled in the view module). If not app will show descriptive error in the same section.
App allows users to add and delete their favourite movies to the bookmark section or rate (add, delete and update).
Each time user clicks on bookmark button (heart or star), state object is updated depending on type of bookmark (favourite or rate) by use of bookmarksView.addHandlerBookmark and model.updateBookmarkSummary functions.
User also has an option to check his bookmark summary which will show all added/rated bookmarks (in BookmarkSummaryView module).
Application also comes with an ability to store added bookmarks. Storing functionality is handled by LocalStorage functions which save updated state and restore data after loading event.
Application is fully responsive. Module mobileView.js help to handle Events in mobile/tablet viewport.