Inspiration 🤗 🤩
Our team is all 4th years, and like many others, we were really disappointed when we realized our last year of college would be spent online. When brainstorming, we knew right off the bat that we wanted to create a project that would help people connect in a fun and meaningful way, even if it’s virtually! Meeting and getting to know people at an online event is just not the same as it was in person; running out of topics, accidentally talking over each other, trying to get that one quiet person in the call to talk (to no avail)- we’ve all been there before. Other solutions that we’ve seen to this issue involved having to use other applications alongside a Zoom call to supply prompts, requiring some work beforehand to prepare and forcing at least one user to have to share screen. This is a lot of work, not very scalable, and doesn’t ensure everyone participating has a voice in the conversation.
That is what really inspired us to make a video chat application that makes conversing easy and fun; all you have to do is show up, talk, and connect! We were heavily inspired by the Youtube channel Jubilee for their spectrum series for prompt topics and the visual of the spectrum for people to make their stance!
What it does 🧑🤝🧑 💗 🤝
Spectrum allows groups (sizes 2-10) to join private rooms with each other and converse about fun and meaningful topics via video chat embedded into our application. Spectrum handles the topics and gives each person the opportunity to speak. The current speaker in the room has the capability to change the prompt or pass on the speaker role to another person in the room, chosen randomly by Spectrum. When hopping on the application, you have the option to create and name your own room, or join an existing one! Once entering the room, you are placed in the lobby where every user is assigned a cute avatar to represent them on the spectrum! In the lobby, you can wait for more participants or start the activity. Once the activity is started, a random first speaker and topic are chosen and the conversation may begin! :)
How we built it 👩💻 👨💻
Essentially how Spectrum works is it uses SocketIO to manage rooms and interact with clients. We used PeerJS to handle connections between clients in the same rooms to support the video chat. How the sockets essentially work is that we have a main socket on our server that first gets requests from client sockets to join a room. Once our main socket knows about this client, we are able to emit information on the room’s state to all clients in a given room which keeps all clients synced. When an individual client makes an update on their end, they communicate it to our the socket on our server that then broadcasts it to the rest of the clients in the same room. For each client, we are able to emit to our main socket an ID associated to its peer instance to the server’s main socket, which then gets broadcasted to all other connected clients. Each client is programmed to then use its peer functionality to call the other client’s given these broadcasted IDs. That is how the videos remain in sync! Thanks to using SocketIO’s ability to separate our connections into different “rooms” we can have multiple rooms of Spectrum running at the same time. Our client code is written using React and our server code is written using Express!
Challenges we ran into 🧗 🏋️♀️
We ran into a couple different types of challenges while working on this project. The first main issue involved setting up the client’s socket to properly interact with the server’s socket in React. We had seen different examples online of projects using SocketIO and React, but they all involved frontends that were not as complex as ours. We danced around with React’s useEffect many times this weekend until we found places to put it that set listeners for our sockets correctly while maintaining the flow and state changes of our data being passed through components. Just when we’d think our client was properly emitting to our server, the server’s response would end up completely ignored by our clients. It was such a relief when we were finally able to get the clients properly interacting with our server, thus adding the room functionality that we needed! Another main issue that we ran into involved setting up PeerJS on the frontend as well. We had to make sure that each client was connected with one another, which involved new users hopping on to inform the server that they’ve joined, and the server to then inform all of the previously connected clients about the new user so the clients could all call it.
Accomplishments that we’re proud of 🌟
As a whole team, we are super proud of the product that we were able to push out in the short amount of time we had! We believe that we were able to complete a great MVP that is user friendly and pretty visually appealing with animations.
What we learned 🤓
From this project, we learned so much about sockets! We have never done a project like this where we were creating rooms and managing information between the server and multiple connected clients. We’ve had previous experience in React, but adding sockets to the mix definitely threw us in for a bit of a loop when it came to managing the state of the user and the state of the game given changes coming from the server. We also learned how to get video chat embedded into a web application which was one of our largest challenges but most worthwhile!
What's next for spectrum ⏩
Although the past weekend was full of a lot of sweat and tears, we really did fall in love with this application and plan on improving it even after this hackathon is over. Some things that we did not have time to complete but will definitely be adding in soon are user emotes, better animations, ability to join rooms via link, ability to mute yourself, countdown timers for each speaker, and expanding our source of prompts! Stay tuned for the deployed version!
Thanks for reading! We hope that you enjoy our application in its current state! We plan to work on fixing up bugs after the hackathon is over. 😃
Please note that our link to our demo is only available for 24 hours, we will be working on deploying it to a permanent place asap!