Pre-Pandemic everyone love to get together and hang with their friends. It doesn't matter if your crowd enjoyed beating each other up in Super Smash Bros, having super competitive board game competitions, going for a stroll on the town, or relaxing in the living room watching funny YouTube videos. Whatever you guys were into, it was fun because you were all together. With COVID-19 its been increasingly difficult to get good facetime with your friends. Zoom calls are fun and avenues of interaction exist, but there isn't a good one stop shop that get help foster that pre-pandemic fun.
We decided to fix this issue with Social Hub.
What it does
Our website provides an all in one toolkit for an evening of fun with your friends. Using audio and video feeds you can see your friends directly in the webpage similar to a zoom call, but you also have a synchronized playground of fun games and activities to mess around with. Everyone in the room gets the ability to change what the group sees, almost as if everyone was sitting around a table with each other. Whether you want to watch funny videos, listen to music, or play fun games with each other, this platform is an hub for it all.
How we built it
Using websockets we're able to create a responsive experience for all users connected to the room. We built the frontend using React and the backend using Flask. SocketIO is the main package we focused on learning and utilizing to create a snappy and fast webpage for all.
Challenges we ran into
Two of our three team members were not very proficient with front end development. It took some time to get them up to speed so they could help improve and add on to the React app.
Learning how websockets work was another roadblock we encountered. While we understood the basic concept, actually implementing them into a project is much much harder. Synchronizing operations across multiple clients isn't terribly hard once we learned how to do it, but keeping track of state on the backend for all the users is where the challenge started to arise.
We decided to implement Fibbage (a Jackbox game most of you are probably familiar with) and had to either create our own prompts or find someone else's prompts. To fix this issue we actually found the original Jackbox prompts in the games files and wrote a script to parse through the data and pull it in for ourselves.
Accomplishments that we're proud of
Getting multiple web browsers to synchronize together was super cool the first time we got it working. Seeing instantons change across two systems was awesome. I think that the game we chose wasn't trivial to make so implementing that in this systems is really cool. :)
What we learned
Managing state is hard. Anyone whose worked on a web project knows this. The more complex your game is, the harder it is to maintain. Luckily we were able to cut some corners for this hackathon, but going forward it'll only grow and grow.
What's next for Social Hub
Add more game and activities, better UI, and improve socket stability.