DEV Community

Cover image for RedBoard: a collaborative whiteboard driven by Redis
Luke Westby
Luke Westby

Posted on

RedBoard: a collaborative whiteboard driven by Redis

Image description

Overview of My Submission

RedBoard is a demonstration of a collaborative whiteboard app driven by Redis's real-time features.

I've been fascinated by Figma's multiplayer editing technology since 2019 when they published this article about how it works. I wanted to use this hackathon as an opportunity to attempt to implement a minimal reproduction of that technology using as much as I could infer from that article and some other material that Figma has shared publicly. I am grateful to their engineering team for taking the time to share what they have built and learned with all of us!

The high-level design of RedBoard is based heavily on this architecture diagram shared by the Figma team to demonstrate using FigJam to make such diagrams, but is of course greatly simplified and uses only Redis for storage and messaging. Journaling is implemented using Redis Streams, and checkpointing folds those streams into RedisJSON values. Not depicted in that diagram is presence, or the real-time broadcasting of actions taken by other users on the same board. Presence is implemented using Pub/Sub.

The backend is implemented using Redis and Rust, and the frontend is implemented with React and Recoil, a.k.a. the RRRR stack 🙂. The two communicate using a two-phase protocol over a WebSocket connection, and the backend app essentially constitutes a very simple real-time document store using Figma's multiplayer change coordination strategy.

This project was a great learning experience and if nothing else it helped to me truly recognize just how difficult it is to build a system like this with production quality and at large scale. Furthermore, using Redis to handle all of the data needs provided inspiration for some new ways I plan to use Redis in my professional work at StructionSite.

Submission Category:

Wacky Wildcards

Language Used

Rust

Link to Code

GitHub logo lukewestby / redboard

Submission for the 2022 Redis/DEV hackathon

RedBoard

A collaborative whiteboard driven by Redis, inspired by Figma. Please see my submission post for an explanation of my goals and inspiration for this project.

Very short demo of application behavior

How it works

The backend application is essentially a very simple, generic real-time JSON store. It allows multiple clients to modify a group JSON by ID such that the last write received by the server always wins, and all clients are incrementally notified of the correct state of the objects. The visual functionality of the end-user application is built on top of this store, but the store knows nothing about the meaning of the objects that it stores.

Some important terms:

  • Board: a collection of viewable objects that many people can edit at once
  • Object: an individual visual item in a board
  • Change: a structured representation of an edit for an object
    • { type: "Insert", id: "<UUID>", "object": { "property1": "hello", ... } }

Additional Resources / Info


Top comments (0)