This article was originally published as part of the Building Couch Potato blog series.
So you’ve decided to create a piece of technology that lets people watch shows together from the comfort of their own homes and chat while doing so. Where do you start? That’s the daunting question we faced when deciding to create Couch Potato for our bootcamp’s Capstone project.
Once we had a clear vision of what we wanted our product to be, we knew pretty immediately that we would be most effective with a Chrome extension, since this would allow us to overlay the chat next to the user’s streaming content and also pull information about the user’s streaming activity. With some cursory research, it also became clear that if we wanted to incorporate real-time chat features, socket.io was the way to go.
Since we didn’t have experience with either socket.io or Chrome extensions, we decided to tackle the technologies one at a time and begin by creating a web app that incorporated socket.io. Before we could do any coding on our project, we needed to research, watch tutorials, and read articles about socket.io. In addition to reading the official socket.io documentation, we also came across the below video and corresponding repo which helped us to understand some of the mechanics of socket.io.
Once we familiarized ourselves with socket.io, our first step was to create a very basic chat room. Putting fingers to the keyboard for the first time was a little intimidating for me; up until that point I had almost always worked with some sort of starter code, so facing a blank .js file was a little overwhelming. Having literally anything on the screen is a lot less scary, so if you’re feeling the same way, just get started and worry about debugging later! The initial iteration of our chat room came together relatively easily, but as you’ll hear in a future post, we definitely came back to it a lot more to add features. We knew that we eventually wanted users to be able to create private chat rooms to use with their friends, but initially, we wanted to create one universal chat room, which would allow us to have a starting point that could be incorporated into our Chrome extension.
To begin developing a Chrome extension, another new-to-us technology, we started by following the tutorial in the Chrome documentation. The documentation was extremely easy to follow, and in less than twenty minutes, we had each created the basic extension outlined in the tutorial. The extension allowed us to change the background color of any website, and it was really fun to be able to implement it so quickly.
Incorporating our chat functionality into our Chrome extension was a little more daunting, but we did come across a video (below) and repo on using socket.io within a Chrome extension. There were some key differences between the chat extension from the demo and the chat feature we were building, but it was a very helpful starting point.
After watching and discussing the video and examining the source code, we needed to consider: 1) how to auto-generate new rooms for users, rather than requiring them to create new rooms themselves; 2) how to keep rooms private from other users; 3) how to “garbage collect” old rooms that were no longer being used; and 4) how to embed the chat window into the browser window rather than existing as a pop-up.
Stay tuned to continue following our journey towards building Couch Potato! In our next post, we’ll take a deeper dive into our chat room and the process of converting it into React.
Interested in learning more about Couch Potato? Start this blog series from the beginning! And don’t forget to download Couch Potato from the Chrome store so you can start watching shows with friends now!