DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for I Built an Open-Source Collaborative Whiteboard for your Teams using Redis as my Primary Database ๐ŸŽจ
Eluda
Eluda

Posted on

I Built an Open-Source Collaborative Whiteboard for your Teams using Redis as my Primary Database ๐ŸŽจ

Overview of My Submission

Collanvas demo

This week, I built Collanvas, a collaborative drawing platform with no login required, and where every user has access to only one color.

๐Ÿง  I created Collanvas for various reasons, one of them is brainstorming. Go draw the next big thing!

๐ŸŽจ You can also use Collanvas for art. With one color per person, each one can focus on a specific part of the design.

๐Ÿ†๏ธ And of course, you can also play games on Collanvas. With the chat feature, play draw-and-guess with your mates until your energy is full again.

Submission Category: Wacky Wildcards

Overview video

Language Used

JS/TS/Node.js

Link to Code

GitHub logo eludadev / collanvas

Your whole team, changing the world one stroke at a time.

Collanvas โ€” Your whole team, changing the world one stroke at a time ๐ŸŽจ

With an online whiteboard, you can brainstorm ๐Ÿง , draw art ๐Ÿ–Œ๏ธ, and even play games ๐Ÿ•น๏ธ with your teammates and your friends. No login is required, and each user has access to the chatroom, a real-time messaging platform to have all kinds of discussions. Choose your own username, pick your own color palette, and go draw the next big thing! ๐Ÿš€

Collanvas Home Page

Collanvas Room Page with a drawing of the text 'Redis' and a smiley face, and 2 chat messages from different people spelling 'Woohoo!'

Overview video

I Built an Online Collaborative Canvas using Redis as my Primary Database

How it works

How the data is stored:

Strokes data model

Data Description Type
Color The color of the stroke String (HEX)
Thickness The thickness of the stroke Number (1 to 10)
Type Whether stroke is pen or eraser String ('Pen' or 'Eraser')
Points The points that make up the stroke {x: Number,y: Number}[]

Keys are generates like canvas:{roomKey}. For each generated key, data is stored by running the ARRAPPEND command likeโ€ฆ

Additional Resources / Info

How did I build Collanvas? Let's get technical.
Weโ€™re storing two JSON documents per room:

Strokes db model

The first one is strokes, a collection of every stroke on the canvas. We collect the stroke color, thickness, type, and the set of points that make it up. Type dictates whether the stroke is in โ€œpenโ€-mode or โ€œeraserโ€-mode.

Messages db model

Next and last document is messages, an array of every sent message in the room. We collect the user-name, user-color and the content of the message.

Weโ€™re using Redis Insight to inspect our database and confirm our data modeling strategy.

Drawing Done event

But when should we start saving data in these documents? Well, firstly, when the user lifts their pointer from the canvas, we add the drawn stroke to the Redis JSON store with the arrAppend command.

Message event

Lastly, when the user sends a new message, thatโ€™s when we save their thoughts to the document with the same command.

API Route

Okay, but why are we saving all this data? Well, when the user first joins a room, we get them started by reading every stroke and message from the database and inserting them in their website.

Websockets

Sounds good, but how do we update Collanvas for every user in real-time? Well, weโ€™re using web-sockets to create a channel of communication between the server and the browser. When the server receives information that, say, a new message just got sent, it will feed that information back into the browser and it will be added without reloading the page.

Redis PubSub

But how do we make different socket connections talk with each other? Redis solves this problem through their Publisher-Subscriber service. Each connection subscribes and publishes to its own two channels of messages and strokes, relaying all information to the browser.

RedisInsight

With Redis Insight, we can also see all messages sent in relation with our project.

Thatโ€™s it! Check out the source-code behind this project in Collanvasโ€™ well-documented Github repository. And donโ€™t forget to try-out Redis in your own high-performance projects with their new limited offer.

And thanks to Redis and DEV for organizing a great hackathon that gave many developers the opportunity to learn new technology and to take their skills to the next level!

Thank you!


Top comments (7)

Collapse
 
kasuken profile image
Emanuele Bartolesi

good starting point for a real product/project.

Collapse
 
rohitmore07 profile image
Rohit More

That's Really Awesome!

Collapse
 
eludadev profile image
Eluda Author

Thanks!

Collapse
 
skmbatha profile image
SK Mbatha (Software and Electronic Engineer)

I like this project! It's very similar to something our team is currently working on.

Collapse
 
arunran30008245 profile image
arun rana

And here i am struggling with remembering Redis commands.

Collapse
 
arunran30008245 profile image
arun rana

๐Ÿ˜ฎ๐Ÿ˜ฎ๐Ÿ˜ฎ๐Ÿ˜ฎ

Collapse
 
theharshsingh profile image
Harsh Singh

It is Really Awesome! I also made a toyish ExcaliDraw clone called LowCalorieDraw

What image format should you use in your next project? ๐Ÿค”