Building Watchlist Components
Background
The Watchlist feature allows authenticated users to add TV Shows or Movies to their own personal list. TV Shows can be added episode by episode, or by entire series. “Add to Watchlist” buttons are located on every content detail page to enable this feature. This makes it easy for users to save the content they want to watch for later. Users can find the new Watchlist landing page through a link in the Header, where they can visualize and manage all their saved content. On the landing page, an “Edit Watchlist” button lets users select and remove multiple content at a time so they can manage their lists. Through this feature, users might want to keep track of everything they have already watched, save content they intend to watch, or perhaps even use it to store only their favorites. This is just a few of the many ways Crackle brings value to its users.
Team requirements gathering
As the primary developer of this feature, I worked with Product, Design, and Back End Engineering teams to assess the Scrum Epic requirements, anticipated designs, and expected API structures.
Planning
By identifying patterns in the designs to be built, APIs to be used, and existing codebase, I was able to create top-level User Stories to group related chunks of work, and subtasks within each User Story to detail the precise changes.
| User Story | |
|---|---|
| 01 | Users can add to or remove content from their Watchlist in the movies and shows detail page through an “Add to Watchlist” button. |
| 02 | Users adding TV Show Episodes or Series can choose through a modal window. |
| 03 | Users can access their Watchlist through a link in the Header. |
| 04 | Users can view and edit their Watchlist in a landing page. |
Development
Each User Story detailed includes screenshots showcasing the features I worked on, as well as captions to describe the most typical user journey.
01. Users can add to or remove content from their Watchlist in the movies and shows detail page through an “Add to Watchlist” button.
The button was easy enough to build. For rendering purposes, it calls upon an API to determine whether the contentId of the page was in the User’s Watchlist or not, displaying “In Watchlist” if so (and authenticated), and “Add to Watchlist” if not (or unauthenticated).
The challenge here was during unauthenticated user journeys. I had to ensure that content gets added to the User’s Watchlist when clicking on the button in an unauthenticated state, after going through a Sign Up / Sign In flow and authenticating successfully. In order to solve this, I built contextual awareness into the “Add to Watchlist” button component, as well as the Sign Up / Sign In flow components. Sign Up / Sign In modals needed to know that they were being called by the “Add to Watchlist” button, and that the API request for the action was being handed off to the Sign Up / Sign In flows, rather than the button.
02. Users adding TV Show Episodes or Series can choose through a modal window.
It is common when watching TV Shows to encounter a series of many episodes. Adding movies to a User Watchlist is straightforward. The same can be said about TV show episodes. But sometimes a User may want to add an entire series to their Watchlist. This feature gives Users that choice.
The modal I built utilizes CSS Flexbox effectively to place groups of content. There is a Left Poster and Right Card type of components organized by the default flex-direction: row. The Left Poster is a self explanatory poster. The Right Card stacks 3 rows of content through flex-direction: column: 1) a Card Header consisting of a modal action title and a “close” button, 2) a group of stacked metadata, and 3) a button group inviting users to add either the full series or a single episode.
03. Users can access their Watchlist through a link in the Header.
This feature is pretty self-explanatory. Since the button link was actually a small add-on of an existing Header compnent, it made sense for me to break it out into its own User Story as a separate body of work unrelated to the other User Stories.
04. Users can view and edit their Watchlist in a landing page.
This was the biggest piece of work related to the Watchlist feature. The landing page needed components for empty and filled states. Filled states would need to reuse an existing Content Grid component that renders Content Card components. It featured an “Edit Watchlist” button that allowed users to select and remove content. This meant making modifications to Content Card components to include selected and unselected states. It also meant posting requests consisting of contentIds to remove to the API, calling another API to return the updated Watchlist contents, and re-rendering the Content Cards through the Content Grid.
![4.1. Unauthenticated User clicks on "Watchlist" button in global header and lands on Watchlist landing page. Call to action text prompts User to "Start [Your] Watchlist." A single row of Content Card components sits at the bottom of the page as recommendations for the User.](/_astro/watchlist--4.1-landing-unauthenticated.Cy9FoAdi_15eCHB.webp)
![4.2. User authenticates successfully and lands on empty Watchlist landing page. Call to action text prompts User to "Add Stuff To [Their] Watchlist." A single row of Content Card components sits at the bottom of the page as recommendations for the User.](/_astro/watchlist--4.2-landing-empty.BQBa8p5z_Z1L5eaw.webp)
Results
Challenges
There were a variety of modals that appeared mid-action when it came to developing Watchlist features. For example, the Sign Up / Sign In modals appearing for unauthenticated users clicking on “Add to Watchlist” buttons, or the Add Full Series / Add Episode modals when adding TV shows to Watchlist, and the actions that followed. Content had to be added to Watchlist after authenticating, and modals had to be closed after certain actions. In tackling these challenges, there was a familiar theme of managing control flow that arose. The key was creating contextual awareness by “lifting state up” to “higher” components that knew how to manage its children, using React Context to encapsulate shared state, or passing props and state to give context from one component to the next.
Takeaways
Overall I was able to deliver the features on time, and in the process, learned a lot about managing control flow. Watchlist is a feature that feels critical to any content streaming type of platform, so it felt exciting and rewarding to be able to work on such a meaningful piece of the product. The front end development for Watchlist proceeded without any major problems, largely because of the well thought out features, beautiful designs, efficient APIs, and many existing reusable components.