Inspiration

Ahsan, one of our team members, was watching a QnA video by Ben Awad (a tech youtuber) recently, and someone asked him why does he not live stream coding on twitch more often. Ben explained that livestreaming code is not as simple as livestreaming a video game, because during a live coding session, viewers are not able to catch up with the streamer if they join in the middle of the stream. This inspired him to re-imagine what livestreaming coding should be like.

What it does

Codespace has an interactive in-browser IDE workspace, using which programmers can host live online workshops. Viewers who join can go through all the different files that the streamer has made, and can know exactly where the streamer is writing code. Viewers can also fork, or create a copy, of the streamer's code at any given instance, and make changes to their local copy directly in the browser! (Oh, and they can see the preview as well).

How we built it

We used a single page React application for the frontend. For the backend, we spun up a Node.js server and gave it a websocket layer for real time communication using Socket.IO, we hosted the server on Heroku.

Challenges we ran into

Figuring out how to live stream a face cam in under 36 hours was a bit tricky for us, therefore we came up with a nifty little hack using youtube embedding :)

What's next for Codespace?

Codespace has the potential to become the default tool for professors, teachers, speakers, etc to give online coding workshops and classes, and that is what we will strive to achieve.

Share this project:

Updates