wboard

wboard is an online whiteboard which allows all the participants in a room to have their own individual whiteboard where they can create or edit content, while monitoring others board simultaneously.

Comment

Inspiration

Microsoft teams whiteboard was a big inspiration. But wanted that same experience without hopping onto video calls.

What it does

Realtime Whiteboard Drawing Collaboration. In the pre covid era it was easy for students to create and showcase their creativity among their friends and with teachers with the help of a pen and paper, but now unfortunately it is not possible to do this in realtime. Wboard thus, enables students, professionals and friends to collaborate virtually and create amazing stuff together in real time.

How I built it

Used ejs,html5 and bootstrap for front-end. Ofcourse CSS3 for styling. Made the entire backend using node.js and deployed firebase for google sign-in OAuth and its real-time database to generate common whiteboard platform links.

Challenges I ran into

  • Matching the aspect ratio of canvas on different screen sizes with the output shown to participants.
  • Capturing and sending real time drawing events of canvas to other participants was affecting the performance and was becoming laggy.
  • Since there are quite a few features to manage, the UI could easily have been messed up.

Accomplishments that I'm proud of

  • Instead of having multiple canvas on screen there is only one canvas for the user who is currently drawing and rest are just rendered images of other participants' canvas.
  • Instead of recording the mousemove event we recorded the mouseup event and updated database after user lifted the pen.
  • We tried to make it as minimalistic as possible yet attractive for the user at first glance.

What I learned

Probably test the waters and have a team beforehand, working alone was hectic. But I learnt a lot of new things throughout. It was my first time using node which was a little indimidating but cheers, I learnt a lot. Also, hadn't used ejs previously but it made my work rather easier so I was happy to use it. Designed the card images on adobe illustrator which was an arduous task but I had a lot of fun.

Built With

Share this project:

Updates