Inspiration

It's hard to believe we're nearly a full year into this awful pandemic. Two semesters of online school for students, hundreds of virtual meetings for employees, and the general monotony that is everyday life will make even Tom Hanks' character in Groundhog Day bored. Every Zoom session seems to be the same; it's nearly impossible to agree on something for the group to do, and sometimes the activity just doesn't fit the vibe. It's something we all know way too well. This introspection made us ask ourselves: How can we use technology to make virtual social spaces at school and at the workplace more unique and engaging?

What it does

For some, there are so many games to play online that choosing one is a long and drawn out endeavor. For others, virtual games are a completely foreign world. The Water Cooler Space, aptly named after the common area where employees gather to chat and forget about the stress of work life, aims to bridge that gap.

It provides an area where participants of the same organization can gather and play online games together. Joining the virtual Water Cooler Space is simple; it requires just the organization ID and PIN. Based on the number of players in that game session, the app then suggests three ideal games for the group to play, and the players can vote on which game to play. And multiple sessions can run at once, so there's no need to wait for people to join the current session. Finally, the app provides a meeting link and a link to the game. And just like that, everyone is ready to rock and roll!

How we built it

As three amateur developers with limited experience in both frontend and backend technologies, we knew from the get-go that delegating the workload would be pivotal. Therefore, we decided to use a tech stack that everyone had some familiarity with - a ReactJS frontend paired with a NodeJS backend with a Google Cloud database.

One developer began by crafting the UI and the frontend of the web application, which is not as technologically sophisticated. But each page, modal, and component had to be designed carefully, considering especially the variables that could change. For example, a basic algorithm had to be designed for splitting the array of total participants into two arrays to display on the web page.

Meanwhile, the other two developers began to work on the backend by creating the NodeJS server and connecting that server with the Google Cloud database. After the database connection was complete, the backend was programmed to communicate with the client. Because real-time updates are pivotal in any virtual space (i.e. someone who joins the room should be added immediately), the Socket.io protocol was used for updating the server and web page immediately. Messages could now be broadcast from the frontend and backend to update the server state.

Lastly, the logic of the game, which includes voting and game selection, was implemented. Again, Socket.io was heavily used in this stage because voting is also a real-time process. The games, which are stored in a Google Cloud database, can be passed back and forth between the backend and frontend as an object.

Challenges we ran into

The past two nights have been quite an adventure for our team. We faced obstacles, foreseen and unforeseen. But no matter how insurmountable these challenges seemed, we were proud that we always found a way to overcome it.

From the conception of the idea, we knew we'd encounter some major hurdles. How can we make the user experience as seamless as possible? How do we handle the case where some users are already in a session but others still want to play a game? And how in the world does Socket.io even work? Jumping past these barriers simply took some time, discussion, experimentation, and many frustrating errors. Just like learning a new language, learning new libraries is difficult at the beginning, but once we had a solid grasp of the new technologies and a clear direction in which to proceed, the workflow became much more smooth-sailing.

However, we also encountered a fair number of unanticipated problems, the biggest of which involved our initial choice of databases. Our first choice was CockroachDB, but after a few hours of tinkering around with the database, it became clear that integrating CockroachDB with NodeJS would be difficult. That prompted us to switch to Google Cloud, which was far more accessible and versatile. And to that, we say: Thank you, Google.

Accomplishments that we're proud of

As a group of relatively inexperienced hackers and developers, it goes without saying that we were immensely proud that we actually completed a complete web application using ReactJS, NodeJS, and Google Cloud. The whole experience was a fantastic learning process, and each of us came away with the sweet taste of victory.

More specifically, we felt proud that we learned and integrated a new library that has so many practical applications: Socket.io. At the beginning of uOttaHacks, nobody had even heard of the technology, but by the end of the event, we felt pretty comfortable working with the sockets and transmitting events between the server and the frontend.

What we learned

The programming and technical skills we acquired are indubitably crucial, but big picture, we learned the importance of having a good workflow. We learned to build the app starting from the bottom to the top. For instance, neither the frontend nor the backend team can lag too far behind; otherwise, the integration process would be much slower. This notion applies not just to hackathons but also to larger-scale projects, where workflow is key to success.

What's next for The Water Cooler Space

So far, The Water Cooler Space has limited functionalities. But we have many ideas on improving the web app. The app could optimize game suggestions based on previous ratings for the game and the number of people to find the ideal game for a given number of participants. It could also utilize the Zoom API or Google Calendar API to provide a custom Zoom/Google Meet link for the participants. That way, the whole virtual space experience is fully integrated into our application. Once minor bugs are fixed and these larger features are added, our app can be tested and rolled out to some clubs and members of the UPenn community. Hopefully, if all goes well, The Water Cooler Space can make virtual meetings at work or school just a tad cooler :)

Share this project:

Updates