The problem Code Collaborator solves

Motivation

Due to the pandemic, the distance between peer programmers increased due to which productivity got decreased a lot for them. To overcome this situation, we got the idea of building a real time peer programming platform where they could solve programming problems, edit, chat and also share codes through whatsapp right from the platform itself.

Existing solutions

Different online platforms like discord, google meet, teams etc. can be used for the problem.

Drawbacks of existing solutions

• Many platforms dont allow real time code editing and support for running codes in multiple programming languages
• Sharing screen in the platforms requires much higher bandwidth internet, which might cause lags resulting in bad user experience.
• Most platforms dont have the support for direct sharing of entire code through sharing platforms.

Features

• Secure Login/Signup system using auth0
• Support for light and dark theme
• Create password-based rooms for peers to collaborate
• Users can create/join multiple rooms
• Real time code editing, running with periodic auto save feature
• Support for multiple programming languages, font size and code editor theme, along with error and output to debug the code.
• Built in realtime chat along with timestamps, dedicated to a room
• Code sharing through WhatsApp using Twilio

Future Scope

• Add audio chat
• Collaborative drawing board like jamboard
• Sharing code through other platforms like Slack, Discord etc.
• Integrating better code formatting and styling in code editor
• Convert website to Desktop app

Challenges we ran into

• Finding a code editor complete with support for many langauges which are commonly used and finding an integrated editor which can run the code(of many langauges) and give us the output easily via an API. Many iteration of different libraries like draftjs,slatejs etc but finally decided on using react-ace which is react wrapper for Ace web editor.
• With CockroachDB initally we were new to SQL based databases and were using query strings for transactions untill we discovered the use of ORM on the CockroachDB developer website. We then decided to learn and use the Sequalize ORM supported by CockroachLabs.
• For creating a collaborative environment socket.io was used to help in websocket programming.For two or multiparty communication/chats inside one room can be done easily but for enabling multiple rooms and seperate sockets for the rooms so that the text between them can be isolated while using a single server.We discovered the availability of rooms present with socket and how we can use them to isolate and concentrate the sockets based on a roomname or id.The sockets subscribed only to the room will be responsible for listening and wont affect the global emits/broadcasts.
• Finding a suitable and quick UI solution bonding with Nextjs and also providing a Dark Mode also(which is a must for coders these days). Material UI / react-bootstrap / antd was used but Chakra-UI was decided as it bonded well with Next providing a rich UI platform.