Whiteboarding and collaborative drawing in general.

What it does

It allows you to whiteboard and/or draw with other connected users in real-time, as well as to save your board for later retrieval, restore a previous board, share your board with others (all using unique IDs/URLs), and more.

How we built it

We used d3.js in order to support drawing with SVGs, and Meteor provided the real-time updating/sharing capabilities (since we store the drawing in a collection that is synchronized between client and server). FlowRouter supported the ability to specify a board ID in the URL, and we used Meteor's collections both to retrieve the matching canvas using the URL parameters and to save canvases as unique documents in collections.

Challenges we ran into

Learning enough d3 to produce a working canvas was difficult (all of it was learned on-the-spot), as was working under a very limited time period (we were not able to work for the whole 24 hours). We also faced some bugs early on with respect to getting d3 to update the canvas reactively in response to changes to the Meteor collections. Because of the time limit, we also didn't get to implement all of the planned features or do some of the cleanup and reorganization that we would have liked to have done (or kill some bugs we're aware of -- see our GitHub page for that). Finally, we were all pretty new to Meteor, so this was a real "learning on your feet" experience.

Accomplishments that we're proud of

Even though we were all pretty new to both Meteor and d3, we were able to integrate these technologies to produce a basic working product. We learned a lot, and we now have a clear path forward for planned improvements.

What we learned

We learned that Meteor is capable of handling rapid collaborative reading and writing from/to a database, that its latency compensation is awesome, and that it eliminates a lot of boilerplate. We also learned how to integrate Meteor with other popular JavaScript libraries, such as d3.

What's next for GraffitiWall

Authentication and authorization support (e.g., password protection), validation of user input, and better security in general. Support for real-time chat connected to boards, and support for Facebook integration (login, sharing, etc.).

Packages Used (also available at

meteor-base mobile-experience mongo blaze-html-templates session jquery tracker standard-minifiers es5-shim ecmascript biasport:facebook-sdk accounts-facebook d3js:d3 twbs:bootstrap kadira:flow-router kadira:blaze-layout arillo:flow-router-helpers bojicas:bootstrap-alerts

Built With

Share this project: