Witebord

A socket whiteboard

April 2018

In college, my house had a physical whiteboard that we used as a primitive social network. My roommates and I would leave notes, draw inside jokes, put out surveys, make plans and grocery lists. Looking back, whiteboards were an essential part of the college experience—from brainstorming sessions in common areas to scribbles on dorm room doors.

As I approached graduation, I wanted to create a digital version of this shared, chaotic experience. I built a real-time drawing app called Witebord, which allowed multiple people to draw on the same canvas simultaneously.

The app was built using Node.js, Express, and Socket.io. The real-time aspect was the most exciting part to develop. We simply sent all user’s mouse location, what color they were using, and wether or not they were pressing down. And then bam, shared drawing experience.

Next Steps

I originally had grand plans for Witebord that I never quite finished. I wanted to add:

• Facebook Login: This would allow users to automatically associate boards with existing Facebook chats they were already in.
• Persistent Storage: Currently, if the server restarts, the drawings are lost. I wanted to save the canvas as an image or a set of coordinates in a database to ensure the board stayed the same every time someone logged back in.
• Collaborative Replay: A feature that would let you play back the creation of a drawing from start to finish, which is always fun in a collaborative environment.

Even though it stayed a relatively simple project, Witebord was a fantastic introduction to web sockets and the complexities of real-time web applications.