Babble

Landing page
Select between creating a room, joining a room, or matching with a random peer
UI for joining a room
Video/audio feed and a synchronous text editor

What was the inspiration behind Babble?

Preparing for the technical interview is difficult. Sometimes, even finding a place to perform 1:1's where you and your teammate want to collaborate on a small chunk of code or a file is tricky. Babble is a lightweight, account-free, and versatile solution for peer programming with a friend or matching with someone else to peer program with online.

Core Features

Create a room with a shareable link for another person to join
- Streams your audio/video to a peer over a PeerJS server
- Collaborate in a code/text editor with your peer (leverages Firepad/Firebase for real-time updates)
Match with a random peer to collaborate with (refer to What's Next? for more information)
- Matches you with a random peer via socket.io web sockets

Tech Stack

Open Source Projects Used

npm-lockfile: Base project lockfile
@actions/node: Building Vue client and running Jest tests as a GitHub Action

Challenges

Properly creating the peer connections and routing them through a custom peer server
Making the editor session synchronous between only the two peers having a call with each other
Styling the text editor and video stream components

Accomplishments

Coming up with a full deployment strategy using Vercel (frontend), Heroku (backend), and GitHub Actions for automatic deployments
Understanding and implementing the PeerJS middleware on the backend
Coming up with a routing solution for room hosts/peers using Vue Router and the session id provided by Firepad

What did we learn?

How to create a peer server to enable peer to peer connections on a network
Using sockets to (kind of) 'containerize' peer sessions within an application
Some of us learned a lot more about Vue.js (this was especially helpful with wiring up the editor sessions and in connecting peer audio/video in the same client)
How to write an - incredibly - basic unit test using Jest and the Vue 3 testing utilities

What's next?

Our future endeavors with Babble include leveraging it as a possible interview platform. Since the editor doesn't have compilation features, it'd be a solid option for conducting technical interviews. As well, we hope to refine our matchmaking feature via web sockets and include an option for Speed Programming. In this feature, random peers are matched up and have to solve a provided algorithm/data structure question in a certain timeframe.