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

Read the original article here.

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

I discovered interviewing.io in 2021 while preparing for my internship interviews, little did I know that I would end up interviewing for interviewing.io via an interview conducted on interviewing.io to receive an internship opportunity at interviewing.io 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.

Virtual & collaborative whiteboarding is hard

While solutions such as CoderPad have allowed companies including interviewing.io 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 excalidraw.com 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 interviewing.io 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.

So by allowing customers to use CoderPad’s Drawing Mode or Excalidraw’s self-hosted solution, not only does interviewing.io rob their customers of a core product feature, but it also prevents interviewing.io 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

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.

Features

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???

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.

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: Date.now, required: true },
    addedElements: { type: [ExcalidrawElement], required: true }
  }]
  
  // ...
})

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.id] = element;
      }
    };
  });
  
  excalidrawCanvas.updateScene({ elements : currentSceneElements });
  
  // ...

};

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.

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

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