This article was originally published as part of the Building Couch Potato blog series.

After working through the challenges of converting our code to React, we were eager to incorporate all the additional functionality that React allowed.

To begin, we created React components to allow users to start or join “couches” (chat rooms) upon launching the extension. Utilizing React components for this purpose allowed for more modular and cleaner code. Notably, it also allowed users to navigate to their target couch through a single page application-style div element. By avoiding the need to navigate through separate pages in this way, we prevented any unnecessary interruptions to the user’s web player.

We designed our “home page” component to include basic instructions for users and options to either start or join a couch. Depending on which option the user selected, their state would change and trigger a re-render of the page, displaying either a “join” or “start” component with the appropriate user input fields. Users that selected to start a couch would be asked for their name, and to select an avatar before creating a couch. Users that had chosen to join a couch would be asked for the ID number of the couch they were joining, as well as their name and an avatar.

For the dual purposes of preventing backend errors and improving user interface, we added several layers of form validation. Users would not be able to submit the form unless all text fields were completed. (If no avatar was selected, a default option would be assigned.) If the user was asked for a couch ID number, only a numerical input with the expected number of digits would be accepted. Unless all these criteria were met, the submit button would be disabled, and a warning message would display over the relevant input fields to alert the user of the issue.

Upon submitting their information, all users would be redirected to a final “chat” component with the appropriate couch ID number (either the one provided by the user choosing to join an existing couch, or a randomly generated ID for the user creating a new couch).

At this stage, we were not yet ready to incorporate additional React libraries into our code, but had already begun identifying which of our planned features could be implemented with the use of React libraries. For example, we knew that we would eventually want to allow users to use emoji in the chat or to edit their user information, and we felt React would likely be useful in addressing these issues. Stay tuned to hear how our journey continued, and how we utilized some of these React libraries to solve problems we encountered.

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!