Welcome to Couch Potato, a Chrome Extension to Watch Stuff with Friends

Have you used the Chrome extensions that let you watch movies and TV shows with your friends while safely social distancing at home? Tiger King, anyone? Well, we built one! We’re four female software engineers who recently graduated from Grace Hopper, and we’d like to tell you more about how our extension, Couch Potato, came to be.

One of the key components of the Grace Hopper program is to create a Capstone project, where teams of three to four work together to build on what we’ve already learned and explore new technologies. When Caitlyn Floyd, June Hwang, Grace Murray, and I were put together in a group, it took some brainstorming to come up with an idea for a project that we were all excited about.

Because we went remote shortly after beginning the senior phase of the program, our group eventually realized that we wanted to work together on something that made the pandemic just a little more bearable. Inspired by the popularity of Netflix Party, a Chrome extension that allows users to watch shows together on Netflix and chat about them, we decided to look at doing the same for Hulu, as nothing similar seemed to exist yet.

Starting on this project was incredibly intimidating and overwhelming, as we weren’t really sure what tools to use or where to look for them. This project went way beyond the traditional stack we learned in our program! And finding the code for Netflix Party itself only made things worse, as we didn’t understand what was happening in the code and had no concept of how to recreate something similar for Hulu.

As you’ll see through the course of this blog series, we eventually dove in by starting to play around with Chrome extensions and Socket.io, a Javascript library that enables real-time messaging. As we progressed, we started building a chat website that allows users to join a couch (got to stay on brand!) and message each other in private rooms. And eventually, we got to the point where we were able to split into groups of two and work on adding simultaneous play/pause functionality to the extension, as well as building out the user experience in the chat room. Watch our final presentation below!

So if you’re interested in learning more about how to build an extension like Couch Potato, stay tuned for future posts in this blog series! Our first post will focus on how we got started following tutorials for Chrome extensions and Socket.io, followed by posts about why we decided to specifically create a website to host our chat rooms and some of the challenges we encountered while using Socket.io.

Further down the road, we’ll cover things like deploying our website on Heroku, what our final Chrome extension looks like, how we added functionality allowing users to play and pause each other’s screens, what React libraries we used and why, how we tailored things to enhance the user experience, and more.

Check out the table of contents below for what’s been published so far. And in the meantime, don’t forget that you can download Couch Potato in the Chrome store now!

1. Getting Started With Couch Potato
2. Creating the Chat Website
3. Setting Up Message Transmission
4. Couch Potato: Converting to React
5. Adding Functionality to React
6. Deploying Couch Potato to Heroku
7. Integrating Couch Potato into Hulu with a Chrome Extension
8. Comparing Couch Potato to Hulu Watch Party
9. Collaborating Remotely
10. Gathering UX Feedback
11. Optimizing for UX
12. Couch Potato’s Additional Functionality
13. Cross-Domain Fetch Request
14. Syncing Up Play/Pause: Avoiding an Infinite Loop
15. Syncing Up Play/Pause: Ironing Out the Details
16. Maintaining Couch Potato: Fixing Things When They Break
17. Couch Potato Retrospective