Movie Watchlist
// React, Typescript & TMDB API
Obstacles
Loading States & Placeholders
Because this project relies on api calls to the movie database, I needed to make sure to communicate to the user when content was being fetched/loaded. I had to create placeholders for nearly every component, manage edge cases like no content being available for images, and sort out placeholder flickering when content is loaded too quickly.
Dynamic Theme
Wanting to inject some fun into the design, I wanted to dynamically adjust the theme of the website to match the primary color of the movie or watchlist you most recently visited.
First, I got the average rgb value of a movie's poster using a package called colorThief. Then I converted from rgb to hsl, and finally matched the poster's hue value to the closest of the 9 pre-made themes I had created
It was important to create a selection of pre-made themes for a few reasons, first and foremost in order to comply with accessibility standards for color contrast, and secondly to still have some authorship over the look and style of the website.
Responsive Design
The project involved displaying a wide variety of movie names as well as the names of people who worked on the films, so I had to battle with the fact that titles and names could be both very short as well as very long, leading to design challenges and many iterations. My biggest lesson learned here was cementing what I already knew to be true, it's very important to nail down a design in figma before starting to code.