EnIdam

Inspiration

I was fascinated by collaborative whiteboarding tools like Miro. And I always wanted to build something similar. I have been postponing for long because of the complexities in implementing a realtime server. When I saw this challenge and saw Ably's capabilities I was determined to start it.

What it does

For now this is a simple collaborative whiteboard where users would be able to draw, add shapes, add sticky notes etc. And this whiteboard can be shared to users and they can collaboratively edit it together.

How we built it

This is built with Next.js and Ably's react library. Every board is a unique Ably Space where collaboration happens. The whiteboard itself is a HTML Canvas built with Konva library. Every info of the shape drawn and edited is transmitted through the Space's channel as message. Also it uses the Live Cursor feature to show the users's location in whiteboard. While dragging or resizing a shape we lock it for other users to block them from doing the same. This is done with Component locking feature. While a invite is sent the other user gets a notification in their browser. A unique notification channel is created for each user where their invite and other notifications will be sent.

Accomplishments that we're proud of

I took this up just a couple of days back. Though this is a very basic POC I am happy to complete this in a short span of time, thanks to the wide features of Ably.

What's next for EnIdam

Winning or not I am planning to release this as a product. Need to complete the tools available, add more features like kanban, mindmapping etc. and a video call feature with WebRTC.

Built With

• ably
• konva
• nextjs