Collaboratory

Inspiration

Amidst a global pandemic, we're all facing the consequence of a virus that has disrupted thousands of lives across the world. With this in mind, our goal was to address the newfound struggles that students, designers, and workers alike may experience with the transition to a remote working environment. Collaboratory offers students, designers, teachers, and businesses a platform to give and receive formative feedback on their visual ideas, enhancing the experience of a remote workplace.

What it does

Collaboratory is a web app that allows multiple users to collaboratively draw on a whiteboard in real-time using their mouse or touchscreen. A canvas displayed on a user’s device will define a drawing boundary and capture user input such as clicks, drags, and dropped items within the given boundary. This input will result in dynamically drawn lines and objects that are displayed to all users who are “viewing” the canvas with their personal devices. Collaboratory will be dynamically updated for all users viewing and editing them through a data stream and broadcast messaging system, which will store and receive drawing path data from multiple users who are simultaneously drawing on a given chalkboard.

How I built it

Collaboratory is an application built on the back of express.js and node.js, with a beautiful UI developed in HTML, CSS and JavaScript. The page consists of an HTML5 canvas that functions as the user’s whiteboard, with two navigation bars on either side containing the tools and available color swatches. Each navigation bar was created solely using HTML and CSS, with the functionality of each item being implemented in JavaScript. The seamless connection between clients was accomplished using a really versatile library, sockets.io.

Challenges I ran into

Building Collaboratory proved to be no easy task. Building the chalkboard itself was the easiest part, while the socketing code served us one roadblock after another. We struggled endlessly to implement channels for our sockets that would allow for different users to utilize different "rooms" on the website, until we eventually decided to focus our efforts on other aspects of the project. We had a similar array of problems trying to implement different drawing tools that ultimately caused some problems to the rest of the drawing interface.

Accomplishments that I'm proud of

Despite the many challenges we faced and our many shortcomings resulting from our overambition, we are proud of the final product. We are very satisfied with the user interface we produced, and although the webapp lacks some of the functionality we were aiming for, we can see that we built a solid foundation for future development. We learned a lot about developing webapps with socketing, and if we invested even more care into our project, we could expand it to make a fully functional drawing board for students.

What I learned

We all agreed that this was a great learning experience in developing a functioning web app. We all tried to incorporate what we believed was best for the overall representation and functionality of the project. Learning to use languages like JavaScript, HTML, and CSS proved to be a challenging yet rewarding experience. In addition we learned to use frameworks like express.js and node.js to implement the server as well as learning to use sockets in JavaScript in order to take advantage of those frameworks. Working in a team definitely posed some challenges but we were able to collaborate together quite well and produce a product that we are proud to present with given the time limit and our involvement with other activities during the hackathon.

What's next for Collaboratory

Moving forward, we'd love to continue this project and eventually implement private, shareable rooms and also fully integrate Collaboratory with Canvas. The ultimate goal is to have an elegant and seamless integration into the classroom. We see Collaboratory as a great way for both students and teachers to express their ideas with ease.

Built With

• express.js
• html5canvas
• javascript
• node.js