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!
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!
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.
The app is currently being hosted on Heroku's free tier.
- 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.