MovieVault
Bookmark all your favorite movies and films in one place
Team
1 Developer (Youkwhan Kim)
Live
My Role
Designer, Prototyper, Coder
Stack
HTML, CSS, JavaScript, Figma, REST API
01
BACKGROUND
MovieVault is a versatile website designed for users to curate and manage their personalized watchlist, encompassing movies, TV shows, and more. The platform empowers users to add, track, and efficiently remove items from their watchlist as they engage with different titles. Utilizing the robust Open Movie Database (OMDb) API, MovieVault seamlessly fetches comprehensive movie data based on titles, names, and IDs. This integration provides users with a vast reservoir of information, enhancing their ability to explore and select desired content for their watchlist.
02
OUTCOME
Features
API Integration for Movie Data:
Utilizing OMBd API, the application makes seamless API calls to retrieve movie data based on user search queries. This feature enhances the platform's content availability by accessing a wide range of movie information.
Dynamic Rendering of Searched Movies:
The application dynamically renders searched movies to the DOM, providing users with an immediate display of their queried movie results.
Watchlist Functionality with localStorage:
Users can effortlessly store desired movies to their watchlist using localStorage. This feature enables easy management and personalized curation of movies the user intends to track.
Retrieval and Rendering of Stored Movies:
Leveraging localStorage, the application fetches stored movies and renders them directly to the DOM. This functionality ensures users have access to their saved movie selections upon revisiting the platform.
Seamless Movie Removal from Watchlist:
Empowering user control, the application grants the ability to effortlessly remove movies from the watchlist. This feature streamlines the management of stored movies based on user preferences.
Approach
The MovieVault project emerged from the need for a centralized platform to track my ongoing TV show interests. Dissatisfied with the reliability of website bookmarking features, I embarked on creating a personalized application.
My primary aim throughout the development phase was to bolster my proficiency in API methodologies, particularly GET and POST. Employing class-based components, I sought to enhance the project's structural coherence.
03
REFLECTION
Key Takeaways
Challenges and Solutions:
Implementing the "remove from watchlist" feature posed a notable challenge. I addressed this by establishing associations between buttons and corresponding cards using data attributes.
Simultaneously removing a card from both the DOM and local storage presented another hurdle. I circumvented inefficient solutions by leveraging the built-in remove() method, facilitating the removal of cards from their parent elements without full page re-rendering or data refetching.
Troubleshooting the search page revealed an issue with multiple event listeners accumulating during multiple title searches. To resolve this, I ensured the removal of existing event listeners before introducing new ones, guaranteeing a single event listener per card at any given time.
Overcoming CSS hover effect inconsistencies demanded a strategic approach. Utilizing grid layout to stack elements, I employed align-self: end to position content at the bottom, while @media (hover) and translate functions facilitated non-sticky hover effects. Augmenting user experience, I integrated opacity delay animations.
Next Steps
Enhanced Interaction: Implement interactive functionality for the Add/Remove watchlist buttons, allowing seamless toggling of titles within the watchlist.
Mobile Compatibility: Refactor hover-based functionalities to ensure smooth user interaction on mobile devices without interference.
Database Integration: Transition from localStorage to a robust database system, enabling the utilization of complete REST methods and establishing a clear separation between client and server functionalities. This upgrade will enhance scalability and enable comprehensive RESTful implementation.