I've finally deployed draw! to a semi-publicly accessible location. There are still a lot of kinks to work out (such as the fact that it is completely bonked in Firefox) and a lot of features that I want to add (like chat support...and buttons), but the core functionality is there. I even added touch-screen support last night, so it works on mobile devices.!

What is it?

Draw!, as it is tentatively title, is a real-time collaborative doodling app. When you visit the app's base URL, a room is created for you and the URL updated with the room's ID*. You can then share this URL with your friends and enjoy a shared drawing experience.

There are two keyboard shortcuts at the moment: hit 'S' to save your work and 'C' to clear the canvas. Once there are no more users in a room, all data associated with the room is cleared, so I would suggest saving anything you want to keep before leaving!

Why

A collaboration app of this nature is inherently DIRTy - Data Intensive and Real-Time - which is Node.js's forte. Since I wanted to learn Node, it made sense to pick a project that played to the technology's strengths. Plus, who doesn't like to doodle!

When

I started working on the app right at the begning of Big Apps, when I wasn't sure if I'd be entering at all, but I knew I wanted to gain some practical experience with Node.js.

Where The app is currently being hosted on Heroku's free tier.

How

  • Node.Js + Express server
  • Socket.io for real-time client-server communication
  • Redis for caching all operations performed on the canvas. I'm not using MongoDb because said operations are not intended to be persisted long-term - at least not for now.
  • Bower for client-side dependency management

*I'm recieving feedback that the auto-updating URL feature is not working consistently. If after picking a user name you are still at the base URL, you can manually set a room name after the hash, ex /#/artcloset.