Building interviewing.io’s collaborative & replayable whiteboard

By Aline Lerner / September 6, 2022
SilverWellwornAgouti-size_restricted.webp

Make systems design interviews not suck

Read the original article here.

6FAF87A6-127D-4A71-992B-6A94594520B7.webp

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.

IIO Golf Balls
Winning all categories of the interviewing.io code golf competition ⛳️🏌️

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, 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 }
  }]
  
  // ...
})

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.id] = 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.


Labels and descriptions:

Whiteboard in replay mode #1
Screenshot #1 - Textboxes

Shapes of course ...

Whiteboard in replay mode #1
Screenshot #2 - All the boxes

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

Example Interview Feedback
A final look at the whiteboard
Ready to practice with a mock interview?

Book mock interviews with engineers from Google, Facebook, Amazon, or other top companies. Get detailed feedback on exactly what you need to work on. Everything is fully anonymous.

Computer Dude