Building's collaborative & replayable whiteboard, or making systems design interviews not suck

By Shehbaj Dhillon | Published: September 6, 2022; Last updated: May 1, 2023

Read the original article here.

Screenshot of the new whiteboard

During the spring of 2022, I went from being a user of to being one of the engineers on the team.

I discovered in 2021 while preparing for my internship interviews, little did I know that I would end up interviewing for via an interview conducted on to receive an internship opportunity at upon passing the said interview. Yes.

During my 11 weeks, I solved an important business problem, quadrupled my problem-solving skills, and collaborated with the fantastic folks who built the product made for engineers, by engineers.

Winning all categories of the code golf competition

Virtual & collaborative whiteboarding is hard

While solutions such as CoderPad have allowed companies including to conduct virtual interviews easily, CoderPad has one significant shortcoming: Drawing Mode.

And companies know this too.

Text works fine for normal coding questions but it falls flat on its face for systems design interviews which typically involve drawing shapes and lines which might be hard to depict using text in an IDE and CoderPad’s attempt at solving this problem using their Drawing Mode is lackluster. This is why companies have resorted to using Excalidraw for systems design interviews.

Excalidraw is an open-source whiteboard tool and is feature-rich compared to CoderPad’s drawing mode, some of its valuable features include importing user-made shapes, dark mode (yes), support for real-time user collaboration, and adaptability to different screen sizes.

You can go to right now and jump into multiplayer mode and start collaborating with your peers.

So, if the solution to the CoderPad’s drawing mode is just as simple as dropping a link to an Excalidraw board, then what’s left, Shehbaj?

Neither CoderPad’s drawing mode nor Excalidraw’s self-hosted solution is replayable

One of the ways provides the most value to its customers is by allowing them to watch their mock interview replays, and with the rest of the world by sharing these mock interviews.

Example of a systems design interview conducted via text. Imagine how many more high-quality replays we could have gotten if the Drawing Mode worked?

So by allowing customers to use CoderPad’s Drawing Mode or Excalidraw’s self-hosted solution, not only does rob their customers of a core product feature, but it also prevents from sharing amazing replays of systems design interviews conducted with these tools with the rest of the world.

So, to deal with all this, we made our own whiteboard! 🚀

System overview

Diagram showing how drawing data flows from one participant to the other

Excalidraw lets us embed their whiteboard in our React frontend through their npm package. With that, we set up the wiring to connect everything in the full stack together. We use WebSockets to transfer changes between the client and the server and store changes in a MongoDB document.


Our whiteboard supports real-time user collaboration, mobile screens, and most importantly, the ability to watch replays.

Real-time user collaboration

Wasn’t that the whole point of making this thing???

Screencast animation showing two users collaborating on a drawing

Mobile friendly

Coding on a mobile screen is hard, but making beautiful drawings isn’t. Now, our users can join from their tablets and other touch screen devices that will allow them to prep for their systems design interviews in style.

Screencast animation showing the whiteboard on a smaller mobile screen

Replay support

To get the replay to work, we store all the elements which are added, updated, or deleted based on the timestamp of the event.

const whiteboardSchema = new Schema({
  // ...
  elements: [{
    createdAt: { type: Date, default:, required: true },
    addedElements: { type: [ExcalidrawElement], required: true }
  // ...
Pseudocode of a Mongoose Schema for storing an Excalidraw Scene in MongoDB

Then on the frontend, we fetch all the scene data for replay and sync the current scene with the current timestamp in the replay.

const replayElements = fetch(...); // Fetch all the sceneData from the server
const excalidrawCanvas = useRef(...);

const syncReplay = (timestamp: number) => {
  // ...
  const currentSceneElements: Map<string, ExcalidrawElement>() = new Map();
  replayElements.forEach(replayData => {
    if (replayData.createdAt <= timestamp) {
      replayData.changedElements.forEach(element => {
        currentSceneElements[] = element;
  excalidrawCanvas.updateScene({ elements : currentSceneElements });
  // ...

Pseudocode for syncing the Excalidraw scene on the frontend for replay

To try out the whiteboard in production and test out the replay functionality, I did a mock systems design interview with a Senior Software Engineer (SDE III) from Amazon. We discussed how to build a feed system similar to Facebook. Here are some clips of the replay.

Screencast animation showing the whiteboard in replay mode and the use of drawing and text tools

Screenshot #1 - Replay mode with drawing and text tools

Screencast animation showing the whiteboard in replay mode zoomed out

Screenshot #2 - Replay mode zoomed out

Not bad for a college student doing a systems design interview for the first time 🥱🥱🥱🥱🥱🥱

Screenshot showing interviewer feedback on an interview where the whiteboard was put to use

The whiteboard is now live, so go check it out and let us know if you have any feedback!!!

We know exactly what to do and say to get the company, title, and salary you want.

Interview prep and job hunting are chaos and pain. We can help. Really.