Main Feature

Invite

Click Invite button to create a new session.
Existing code in editor will be automatically synced to the server.
If there is no existing code, // Collaborative Editing Mode will be the initial value.
A unique session id will be provided.
Share this id to your friends/students to start collaborative editing!

Join

Click Join button and key in a valid session id to join the shared session to start collaborative editing!
Invalid id will be automatically detected and blocked.
A warning notification will be popped up.

Leave

Click Leave button to disconnect from session.
Existing code in editor will be kept as status quo.
Color indicator on Leave button indicates the connection status, green for online and red for offline.

Autorun

Click Autorun button to enter the "Autorun" mode.
Codes in editor will be auto-evaluated if syntatically correct.
This allows real-time interaction among multiple users in the same shared session.

Source Mode (Beta)

The info annotation is changed to error annotation to better suit Source instead of native JavaScript.

Development

Technique

Operational Transformation (OT) is the underlying technique used in this project.
sharedb-ace is used to provide the linkage between our backend server and the client's frontend editor.

Frontend

Frontend is developed using React.js.

Backend

Backend is developed using Koa.js, deployed on AWS.
Server is rebooted weekly on Sunday morning at 4am, so as to prevent memory overflow while minimising impacts on daily uses.
Refer to sharedb-ace-backend for more details.

Future Improvement

While this project has achieved a robust product to support collaborative editing in Source Academy, there are many more improvements that can be made to it.

Access Control

This will allow the session owner to grant read/edit permission to other different users.
This feature is useful for lecturers to demonstrate live coding in lecture setting.

Multiple Colored Cursors

This will allow users to know where the other users are currently editing.
This feature is useful in Studio setting or group project setting.

Source Mode

This will allow the ace editor to transform into truly a Source editor.

Auto-completion in Source

This will allow users a better experience coding in ace editor.
An attempt has been made to implement this feature in our project.
However, due to time constraints and complexity involved, we decided to keep it as a future improvement.
Refer to our project repository for more details.