Codebooks

Codebooks is an online IDE that supports real-time collaboration

Comment 1

Inspiration

We wanted our friends to be able to easily join a room and have fun together, so we drew inspiration from kahoot quiz. Kahoot quiz provides a quick access to join a room using 4 digit pin and we wanted to integrate that idea into our online code editor. We also find it tiring when we have to send each other links to join friend's code editor and would wish to cut down on this hassle as well

What it does

Our online code editor is a collaboration tool for developers. With just a simple 4-digit code, friends can join in and work on code together in real-time. Whether you're working on a group project or just want to share your leetcode solution, our code editor makes it easy to work together and get things done faster. We have included features such as syntax highlighting, automatic indentation and provide languages such as C, C++, Golang and Python3

How we built it

Frontend was built using JavaScript and React

We use bootstrap and react-bootstrap to style our webapp

Backend was built using Golang and Gin backend framework

Connection between the frontend and backend was through http endpoints and websockets provided by go-socket.io library in Go and socket.io library in JavaScript.

Hosted our frontend and backend on amazon ec2 cloud instance so others can get to try our application

Code execution engine is Judge0 running on a Docker container.

Code editor is a react component, react-simple-code-editor which is customised to allow for the real time collaboration.

Challenges we ran into

Configuring the network and firewall of the amazon ec2 instance

Struggling to find a compatible version between Javascript's socket.io and Golang implementation of socket.io (go-socket.io) so that both the client and server is connected via websockets. We had to downgrade our client side socket.io library to match the backend server

Accomplishments that we're proud of

We achieved real time connections of our code editor with multiple connections, multiple collaborators on the same document and maintaining multiple connections, showing the "live" connections requires good knowledge of concurrency and synchronization techniques.

What we learned

socket.io programming concurrency programming challenges using Golang sync.Mutex{} for sharing of critical resources and Goroutines for concurrent thread execution

What's next for Codebooks

Show cursors for multiple users More feature rich editor Integration with leetcode problems so we can instantly generate leetcode problems onto our code editor

Share this project:

Updates