Teamcode: Online Judge Collaborative System

Summary

  • Implemented a web-based collaborative code editor which supports multiple users editing simultaneously (ACE, Socket.io, Redis)
  • Designed and developed a single-page web application for coding problems (Angular2, Node.js, MongoDB)
  • Built a user-code executor service which can build and execute user’s code (Flask, Docker)
  • Refactored and improved system throughput by decoupling services using RESTful API and loading balancing by Nginx (REST API, Nginx)

Stack

Technologies

Frontend – client

Angular4 : views, components, services
Socket.io : maintain and response client-side socket events for coding room, code editor, message box, timers, room members, etc.

Frontend – server

Node.js: javascript engine
Express: Node.js web framework
Socket.io: maintain collaboration data structure and a list of socket events
Redis: cache codes when all of the users leave room MongoDB: store problem list and details

Backend – executor

Nginx: load-balancer
Flask: backend framework for code executing
Docker: code executing environment


Architecture

screenshot


REST API Process

screenshot.png

Socket IO Communications

screenshot.png


Github Link

https://github.com/XinxinHE/online-code-collaborative-system


Screenshots

This slideshow requires JavaScript.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: