CodeFriends: A Collaborative Real-time Coding Enviroment

Collaborative real time programming environment with git integration, video chat, and text chat. Users can create projects from scratch, from a .zip or by cloning a git repository. We build a virtual filesystem on top of MongoDB which handles file contents and project file structures. I personally wrote all the API methods for the virtual filesystem. Users can invite users through their GitHub handles and work on project together in real-time. We built text and video chat that can be used to communicated with anyone on the project at any point. Text chat uses a socket connection to communicate with the server and save messages to MongoDB and video chat uses a WebRTC connection to reduce bandwidth on the server side. Users can also run their code and display it in the browser console. For security reasons, we use compilebox to compile our in the cloud and send it back to the client. For our stack, we use a single page application built on Angular.js. It communicates with our server through http. Our server is built as a REST API that provides information like users, all users projects, and detailed project information. Once the user is authenticated, 3 socket connections are setup. Our first socket connection handles chat messages and project-wide events (a file being created, a folder being moved). With this events system built with sockets, we can keep all users in a project completely synced at all times. Our files server handles the real time reading/writing of documents and handles conflicts between these through operational transformations. This is abstracted away through the use of ShareJS. Finally, we communicate with another service to run our user's code. All this is deployed using docker containers for the different parts of our application, making replicating our server environment on our local environment relatively easy. One of the things I'm most proud of is our testing suite. Because of the importance of our RESTful API, we decided to run a full suite of integration tests for every API endpoint. We have multiple tests for every single route, totaling around 40 tests. It took a lot of work to convince my team to take these seriously, but the testing suite proved itself very useful every time we ran into bug. Running our testing suite and making it pass meant that the bug was fixed, and when we noticed there was still a bug, we wrote another test for it. We automated this to the point where the test would delete the complete testing database and re-create for the test.  

Omnigraph: City-by-city Sentiment Analysis using the Instagram API

Omnigraph is a visualization of positive and negative emotions through the USA, using the Instagram API. Ominigraph uses the Instagram API and sentiment analysis to analyze captions in Instagram photos for any city in America. It employs a recursive algorithm that queries the API and, when provided enough data, provides how many positive, negative and neutral captions it found. This is shown through an interactive map built on top of D3.js. Users can also zoom into a particular city and see the results more closely. When entering the site, users are only shown the top 30 cities in the USA, but the can search for any city and see what the results for that city are.

N! Possible Routes: A Travelling Salesman Game

N! Possible Routes is an extension of a very basic question: “What’s the quickest way to get there?”. Using web technologies, a bit of math and a lot of computer processing N! Possible Routes takes regions of the worlds and tries to find out all the possible ways to go between several places. Then, it lets users try to find the quickest (or slowest) way around and provides duration and distance information for every single route. Instead of providing the user with the answer to this question, the project provides a way for the user to find out for himself. The question turns into a game of finding out the quickest route between several places.

Click On Jorge: An HTML5 Canvas Game With My Face

ClickOnJorge is a simple game made around the wonderful Jorge (Yes, myself!).  The user has 20 seconds to  click on the highlighted Jorge as many time as possible. If he gets a high score, he gets to be on the high-scores page.

Wordpress Plugins

Somtimes, I also make plugins for Wordpress. Not necessarily because I like making plugins, but because most of them are really bad.

JSJ Gallery Slideshow

JSJ Code Highlight

Experiments

I also like to experiment with new technology in small, short, and often unrefined projects.

JSass: A Sass Compiler Written In JavaScript

NQueens Distributed Web Worker

Three.Js Experiments