WesselSmit / real-time-web-1920

Realtime code collaboration with a twist, collaboration happens through pull-requests.

Concept

This app allows people to troubleshoot and improve your code.

It's a platform where programmers can help peers through a real-time connection; all users in the same room can see the host's code (updated in real-time). Users can then improve the code by suggesting improvements/solutions/fixes through pull-requests

Core-Concept

The concept uses multiple rooms to keep parties & coding languages separated. Every room has 1 host and X amount users, the host can edit the source-code which automatically updates (with debounce) for all users in the room, this way users can see what you're doing and help troubleshoot.

If an user wants to change/improve a part of the source-code they can submit a pull-request. This is done by selecting some of the source-code and attaching a edited code-snippet. Additionally users can attach messages to explain or elaborate on their solution!

When submitted the pull-request will be shown in the feed which is shared across all clients, the user has the option to either accept or decline the pull-request.If accepted the referenced part of the source-code is overwritten with the suggested code, the status (and changes) of the pull-request are reflected visually in the feed.

Features

Language support

HTML, CSS & JS are supported.

Syntax highlighting

All syntax is highlighted to help notice typos.

Pull-requests

Users can reference code and offer replacement suggestions, a pull-request consists of:

• reference; reference (multiple) lines of code (required)
• suggestion; suggest a replacement for the referenced code (required)
• message; attach a message to explain your suggested changes (optional)

Only referencing whitespace adds suggested code at position of the referenced code

Syntax examples

Allow users to lookup syntax and receive examples/snippets from mdn by entering a keyword. On the server, using puppeteer, a headless-chromium browser instance is launched to find a mdn page and scrapes the associated syntax-example snippet.

Real-time

All content in the interface is updated in real-time;

• list of rooms
• list of users
• code
• pull-request (and all it's status updates)
• syntax snippets

Install Notes

To install this application follow these steps:

Clone the repo

git clone https://github.com/WesselSmit/real-time-web-1920.git

Navigate to the local repo

cd real-time-web-1920

Install all dependencies

npm install

Run the application

npm start

Data Life Cycle

I didn't have enough time to integrate a database so all data is stored on the server for now, however the structure would pretty much be the same except all data would live in the database and additional calls would have to be made between server and database before sending the data back to the client.

v3.0 (sunday May 3rd)

The data on the server looks like this:

const data = {
	rooms: [{
		name: "string",
		language: "string",
		host: {
			name: "string",
			id: "string"
		},
		users: [{
			name: "string",
			id: "string"
		}, {...}],
		code: "string",
		pullRequests: [{
			coordinates: {
				from: {
					line: 1,
					char: 3
				},
				to: {
					line: 5,
					char: 10
				}
			},
			message: "string",
			reference: "string",
			suggestion: "string",
			id: "string",
			sender: "string",
			status: "string"
		}, {...}]
	}, {...}]
}

Real-Time Events

users refers to everyone in room except host, clients refers to all users in room including host

Event	Trigger	Usage
join-room	when script loads	save user in database, subscribe to channel (fires room-list, user-list, update-code & get-pull-requests)
room-list	when a client joins/leaves room	send list of all rooms & update list of rooms in interface
user-list	when a client joins/leaves room	send list of all users in current room & update list of users in interface
update-code	when a client joins room / host edits code	get most recent code & update displayed code
get-pull-requests	when a client joins room	get all pull-requests in room & update list of pull-requests in interface
code-edit	when host edits code	save code in database (fires update-code)
pull-request-submit	when user submits pull-request	saves pull-request to database (fires pull-request-pending)
pull-request-pending	when user submits pull-request	updates interface for all clients with submitted pull-request
pull-request-review	when host accepts/declines pull-request	updates pull-request status in database (fires pull-request-reviewed)
pull-request-reviewed	when host accepts/declines pull-request	updates interface for all clients with reviewed pull-request (reflecting review status) & if accepted also overwrites the code
syntax-lookup	when user submits keyword input	searches for [keyword] syntax example on mdn (fires syntax-snippet)
syntax-snippet	when user submits keyword input	updates interface for client with syntax-snippet

External API

I ended up not using an api, instead I use puppeteer to scrape mdn for syntax snippets. Users can enter a keyword to get a syntax example.

How it works

1. User enters keyword they want the syntax snippet for.

2. Puppeteer launches a headless browser instance, navigates to google and enters the following search query:

mdn [keyword] site:developer.mozilla.org

site:developer.mozilla.org ensures that all results are from mdn

3. Puppeteer navigates to the first google-result link. (which'll navigate to mdn)

I decided to use google's search engine instead of the mdn search functionality because mdn's search function doesn't take popularity in account when searching which means you can end up with mismatches (e.g. first result for append on mdn is headers.append instead of parentNode.append)

4. Every page that has a syntax sxample on mdn follows the same structure (which makes this possible); the syntax snippet always comes right after a title "Syntax".

5. Puppeteer waits for the #Syntax selector to be available and then grabs the next <pre> element's textContent. (this is the syntax snippet)

6. This snippet is send to the client, the javascript code creates a card which is appended to the DOM.

If at any point an error occurs the client is send an card which contains a error message.

Expansion

If I had more time I would've liked to expand the syntax-lookup feature, there are a lot of possibilities and it's a really cool package. If I had more time I would've made a interface and help users lookup the syntax examples through offering addition search settings such as: choosing a website, choosing from the results after querying, get additional info such as (return-) values, and maybe examples in context.

The pull-request feature is very robust as of now and could be improved bt making it more intuitive.

Credits

codemirror

Library used to make the code-editor

socketIO

Package used to establish real-time connection

puppeteer

Package used to scrape mdn for syntax examples

Debounce Function

I used their javascript debounce function

Generate UID Function

I used jsmithdev's UID generator function

Particle Animation

Animation by tutsplus for the particles used in the register screen

Input Animation

Animation by lucsayem for the input used in the register screen

MIT © Wessel Smit