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! 🚀

Overview video

How it works

How the data is stored:

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

Keys are generates like messages:{roomKey}. For each generated key, data is stored by running the ARRAPPEND command like: JSON.ARRAPPEND messages:{roomKey} {...data}.

How the data is accessed:

When the user enters a new room, a PUT request is sent to the server with the room key.

• If the room exists,
  • We return the existing data to the user by running JSON.GET on the messages and canvas JSON documents.
• Otherwise,
  • We instantiate a new room by creating those two JSON documents with the command JSON.SET and fill them with two empty arrays, respectively.

For real-time funcionality, Redis Pub/Sub is used to transmit data between existing users without running JSON.GET every time that happens.

How to run it locally?

Prerequisites

• Node - v12.19.0
• NPM - v6.14.8

Local installation

Get started by installing Redis on your machine.

Next, go to the project's root directory and run the following commands in order:

• npm install or yarn
• npm run dev or yarn dev

Open your browser and navigate to localhost:3000. You're running a local version of Redis, so you won't have access to the production database.

Deployment

To make deploys work, you need to create free account on Redis Cloud

Heroku

Vercel

Collanvas is using WebSockets, which are unforunately unsupported by Vercel's Serverless Functions.

More Information about Redis Stack

Here some resources to help you quickly get started using Redis Stack. If you still have questions, feel free to ask them in the Redis Discord or on Twitter.

Getting Started

1. Sign up for a free Redis Cloud account using this link and use the Redis Stack database in the cloud.
2. Based on the language/framework you want to use, you will find the following client libraries:
   • Redis OM .NET (C#)
     • Watch this getting started video
     • Follow this getting started guide
   • Redis OM Node (JS)
     • Watch this getting started video
     • Follow this getting started guide
   • Redis OM Python
     • Watch this getting started video
     • Follow this getting started guide
   • Redis OM Spring (Java)
     • Watch this getting started video
     • Follow this getting started guide

The above videos and guides should be enough to get you started in your desired language/framework. From there you can expand and develop your app. Use the resources below to help guide you further:

1. Developer Hub - The main developer page for Redis, where you can find information on building using Redis with sample projects, guides, and tutorials.
2. Redis Stack getting started page - Lists a