Online Collaborative Coding System


Implemented using:

JavaScript, Express, MongoDB, Socket.io, Redis, Node.js, REST API, Docker, Materialize


What is it?

Online Collaborative Coding System is a fully-responsive web application where users can browse coding problems, collaboratively solve a selected one by accessing and editing it at the same time.

Why did I make it?

This project was inspired by LeetCode and Google Docs, two of my favorite web apps. LeetCode is one of my favorite technical websites to learn data structures and practice my coding skills — I submit my code, system sends it to backend, executes it, and tells me how I perform. I also enjoy using Google Docs because it lets users edit a file simultaneously. This project combines these two features together to become Online Collaborative Coding System.

Implementation

I developed this website using Javascript on Node.js platform, running on Docker Compose:

  • Frontend: React, Materialize
  • Server: Express
  • NoSQL Database: MongoDB
  • Socket.io: real-time data communication between frontend and backend, so that multiple users can edit a problem at the same time.
  • Cache: Redis.

Below is how I implemented it.


How does it work?

Imagine you are a software engineer. You believe in lifelong learning and sharing. In your spare time, You like to solve coding problems so that you can keep your coding skills sharp.

Today, you open Online Collaborative Coding System to see what new problems they have.

You log into Online Collaborative Coding System, so that the system can track your records.

You can also choose to be anonymous and play problem. You work on it for some time and can’t figure out the solution.

You want to ask your friend John for help. You send John link to the problem ask if he can take a look of it. Very soon, he opened the link and saw your code. He types a few lines of code and help you solve it.

After that, you think “I can also post some good problems!” so you add one after logging in. All Online Collaborative Coding System users benefit from your contribution.

A visitor without an account can only view problems and play with them, but has no capability to add a problem or edit. A logged in user at certain level (future version) can add high-quality problems or edit existing problems in the system. This rule keeps the system clean and in order.