Creating the Chat Website
We knew all along the Couch Potato application — our Chrome extension allowing users to watch shows with friends while social distancing—would have a chat room feature. We wanted our users to be able to watch Hulu with their friends and talk about what they were watching, because let’s be honest, it wouldn’t be a true experience without the commentary. So now the question was how to implement a chat room in a Chrome extension. At this point we had done our research on socket.io, which has a very helpful guide to setting up a chat room on their website: https://socket.io/get-started/chat/.
In the image above, you can see the product of the socket.io chat tutorial, a very basic chat room, which is all we needed to get going on ours. The decision we now faced was whether or not we wanted to create a separate web application to host our chat room or if we wanted to code it directly into our extension. As far as we could tell, user experience and interface would ultimately be the same for these two options, so it really came down to what else we wanted this chat room to do. We had talked about allowing users to send emojis, choose avatars, even play drinking games with each other while using this chat room, all things that would set our application apart and create a unique experience for the user. These are features we felt confident we could implement using React, which we had been learning over the course of our 13-week immersive bootcamp. Because of this, we decided to create a separate website for our chat room, which we would load into our extension and layer over the Hulu video player. We built the website using Node.js, Express.js, and of course socket.io, and we deployed it using Heroku.
None of us had ever made a Chrome extension before Couch Potato, so we all felt a bit in over our heads in the beginning. When we began talking about how to implement the chat room, splitting it out into its own website really felt like something we could handle, and after a day or so of feeling like none of this was manageable for the time we had, we welcomed this gratefully.
Follow along with us in our next post as we implement chat rooms using socket.io in our website.
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!
