Macy's Code Pad

https://macys-code-pad.vercel.app/

Developed by George Karagkiaouris

Introduction

Macy's Code Pad is a tool that aims to replace the need for coderpad.io when interviewing candidates for technical positions. It has a few main features:

Allows employee sign-in through Azure AD
Contains a question bank for easy access and consistency
- Anyone can contribute questions
- Anyone can use questions already created
- Questions can have starter code samples in multiple languages (main focus is Kotlin and Swift)
Pad functionality which is a collaborative area with sync live editing (like google docs), where interviewers and candidate and interact and see each other's edits
Syntax highlighting support (currently Kotlin, Java, Swift, Objective-C but can add more if needed)
Ability to create empty pads or pads based on question from the question bank
It's free, has no monthly code pad limits (cough cough coderpad.io), and internally maintained and developed 😁

Suggestions and Notes

Familiarize yourself a bit with the UI a couple of days before you use it for the first time (only need to do this once)
The server that handles the sync live editing is on a free-tier, so it takes a bit to warm up on cold boot, so if you create a pad but you don't see the content, refresh after a few seconds
For the above reason, create the pad a few minutes before the interview, and refresh a bit to make sure your content loads
You can simply send the pad link in the Teams meeting chat when it's time for the coding interview
Using the questions is highly suggested, but you can always create an empty pad and use it as a free collaboration space
If you see a question you want to use but has no snippet for your language, consider adding one. It'll help future uses of that question
If you have a questions that you think is good or that you use for interviews, consider adding it so others can use it as well
For any feedback, feature requests or bugs please contact George Karagkiaouris or create an issue here: https://mobile-code.devops.fds.com/B008822/macys-code-pad/-/issues
This was a weekend project, so the UI/UX might not be the best, but I'll work on improving it as it goes

Guide

Signing in

To sign in, simply visit https://macys-code-pad.vercel.app/ and click login. You should be prompted to log in with your Macy's Microsoft account.

The only data pulled from Azure AD and used in the site is:

Name
Email
Profile Picture
Job Title

Question Bank

To visit the question back, click Questions at the top of the nav bar, or visit: https://macys-code-pad.vercel.app/questions

You can use the left panel to search questions, filter based on language (language filter is based on code samples added for each question) and select a question.

Once a question is selected, you should see the details on the right hand side. Use the language dropdown to cycle through the code samples.

Note: Just because a question might not have a sample for the language you're looking for doesn't mean you can't use it. You can still load the prompt and set the language to you desired one in the pad, and just have the candidate write from scratch. The goal of the code snippets is to save some time by having some initial setup already loaded in.

Editing or Creating Questions

To edit a question, when you have it selected, click on Edit on the top right corner. Edit any details you want and then click Done to save or Cancel to discard the changes.

To add a new code snippet or to edit an existing one, you can click at the language select in the edit screen.

The description field supports Markdown formatting.

To create a question, click on the orange action button at the top-right of the screen, and click New Question

Creating Pads

To create an empty pad, just click on the action button and press New Pad.

To preload a question into that pad, select the question first, then through action button select New Pad with this Question

Note: The code snippet and selected language of the pad will depend on the code snippet you had selected in the question details screen when you created the pad

Using Pads

The pad layout is simple.

On the left is the question prompt (if a question was selected)
On the right is the editor with syntax highlighting enabled
On bottom left, is the language toggle which allows you to change highlighting
On the bottom right is a list of currently connected users along with their color indicator for the editor

To change a language simply click on the language toggle and select the new language.

Note that it won't change any of the contents in the editor, so if the code was written in a different language, the highlighting will not be accurate.

Load a Question in an existing Pad

If you've created an empty pad, or you have a pad but you want to replace the question, click on the action button and select Load Question.

This will bring up a Question selection modal that allows you to once again search and filter through the Question Bank.

Once you have one selected, you can use the toggle at the bottom to load it into the pad. There's a few options:

Load just the prompt will only update the prompt panel without affecting any of the existing code
Load and replace code will load the prompt and also replace any existing code with the selected code snippet
Load and append code will load the prompt and append the snippet at the bottom of the existing content

Note that in the last two cases the language of the pad will change to match the new code snippet (if it's different).

Inviting Users to the Pad

Once the pad is created, all you have to do is copy the url, and share it with anyone you want to join.

When they click it, they will be presented with two options:

Enter their name and continue (for candidates)
Login through SSO (for employees) - If you are already logged in you won't be presented with the prompt again

When you are done with the pad, simply close the page. All pads are kept for 14 days after their last edit, so you can always revisit using the link.

Tech Details

This project has quite a few parts. Mostly split into two codebases:

Macy's Code Pad website

Contains the code that creates, runs and displays the website
Contains all the authentication logic and protection, since Question Bank is only accessibly to employees

Repository: https://mobile-code.devops.fds.com/B008822/macys-code-pad

Technologies it uses:

Next.js (SSR Rect.js) for frontend
TailwindCSS for styling
Azure AD for authentication
RedisDB for short term data persistence
Algolia for long term persistence and search
Microsoft Monaco Editor for syntax highlighting

Hosting:

Website is hosted on Vercel (serverless deployments)
RedisDB is hosted on Lambda Store (serverless redis provider)
Algolia is self hosted

Macy's Code Pad server

Socket server that handles and facilitates the live editing and pad state
Has no authentication logic since anyone can access a pad (signed in or guest)

Repository: https://mobile-code.devops.fds.com/B008822/macys-code-pad-server