RoundTable

Inspiration

We were inspired by apps such as GamePigeon (which allows you to play games together over text messages) and Gather (which allows you to have virtual interactions RPG style). We also drew inspiration from Discord’s voice chat activity feature that allows you to play games together in a call.

What it does

RoundTable is a virtual meeting platform that allows people to connect in the same way they would at a real-life round table discussion: everyone in a room can manipulate and interact with objects or games on the table as they please. However, we take this a step further by providing an easy-to-use API for any developer to create an activity plugin by submitting a single JavaScript file.

How we built it

We built the client using React and MUI, with Markdown being used to render chat messages. The client is mainly responsible for rendering events that happen on the roundtable and reporting the user’s actions to the server through Socket.io. The server is built with Typescript and also uses Socket.io to establish communication with the client. The server is responsible for managing the game states of specific instances of plugins as well as controlling all aspects of the rooms.

Challenges we ran into

One challenge we ran into was balancing participating in events and workshops during the hackathon with working on our project. Initially, we had a very ambitious idea for the final product and thought that it was possible if we worked on it as much as possible. However, it soon became clear that in doing so, we would be jeopardizing our own experiences at HTN and we should aim to have a compromise instead. So, we scaled down our idea and in return, were able to participate in many of the amazing events such as real-life among us and the silent disco.

Another challenge was that our team members had a few disagreements about the design and implementation of RoundTable. For example, we had two proposed ideas for how custom plugins could work. One of our group members insisted that we should go with an implementation involving the use of embedded iframes while the others wanted to use direct source files manipulating a canvas. Although we wasted a lot of time debating these issues, eventually a collective decision was reached.

Accomplishments that we're proud of

We’re proud of the fact that we managed our time much better this time around than in previous hackathons. For example, we were able to decide on an idea ahead of time, flesh it out somewhat, and learn some useful technologies as opposed to previous hackathons when we had to rush to come up with an idea on the day of. Also, we clearly divided our duties and each worked on an equally important part of the application.

What we learned

Through doing this project, we learned many technical things about creating an RTC web application using SocketIO (which most of us hadn’t used before), React, and Typescript. We also learned to use Material UI together with CSS stylesheets to develop an attractive front-end for the app and to design a robust plugin system that integrates with p5.js to create responsive modules.

In addition, we learned many things about collaboration and how to work better as a team. Looking back, we would not spend as much time debating the advantages and disadvantages of a specific design choice and instead pick one and prepare to implement it as much as possible.

What's next for RoundTable

Although we are satisfied with what we were able to accomplish in such a short time span, there are still many things that we are looking to add to RoundTable in the future. First of all, we will implement a voice and video chat to improve the level of connection between the participants of the roundtable. Also, we will improve our plugin API by making it more flexible (allowing for modules such as playing a shared video) and an account system so that rooms can be organized easily. Finally, we will improve the security of the application by sandboxing custom modules and doing end-to-end encryption.