TakeTwo

Figma workspace featuring extension UI mockups and logos/icons
UI of when the extension is first clicked
Example UI of when a movie is clicked on

Inspiration

Netflix lacks a review or comment feature, making it inconvenient to find popular movies and TV shows. Normally, Netflix users have to search online for ratings, reviews, or any other information they need before starting a new watch, so we decided to make this readily available.

What it does

TakeTwo is a Chrome web extension that allows Netflix users to easily view ratings, reviews, awards, Gemini-generated fun facts, and more!

How we built it

Our tech stack is HTML, CSS, and JavaScript. We worked together using Github. Our background.js file handles the logic needed for interacting with the API and storing data. We also have a content.js file that handles the logic including finding elements in the DOM, listening for user events, modifying HTML/CSS of the sidebar, and interacting with the background script. Then we have popup.html, popup.css, and popup.js which handle the structure, style, and logic related to the user interface that appears when the extension is clicked. Lastly, sidebar.css is responsible for styling the sidebar that contains all the information about the movies and shows. We were able to recognize which movie was being clicked by sensing for the DOM elements related to the modal that appears when clicking into show info of a particular movie. Then we would query the API using the movie title for necessary information such as the ratings, awards, comments, and more.

Challenges we ran into

Learning how to work with APIs gave us some trouble, since we had not worked extensively with them prior to this project. We had to work with unfamiliar logic and functions, and it was a lot of information to take in, all in a very short period of time.

Accomplishments that we're proud of

We worked very hard on our UI design! Also, we didn't expect to implement Gemini in our program, but we added a feature using Gemini API to generate fun facts about the behind-the-scenes of the movie or TV show.

What we learned

For back-end development, we did a lot of self-studying about API keys and extracting data from APIs, and we had to work with cache to reduce the frequency of API calls. In terms of front-end development, we made more advanced designs than we previously knew how to do (using HTML and CSS).

What's next for TakeTwo

We are already thinking of new features for TakeTwo:

Change movie / TV show reviews to dropdowns, so that the user can view short previews or read the full review, depending on their interest.
Add a feature that allows users to prompt Gemini to generate more fun facts about a movie or TV show.
Add a "personal review" feature that lets users rate and review movies and TV shows on Netflix. This would require more back-end development to store the data, and it would be retrievable and displayed along with the other movie / TV show information.