Docs Index

Engineer’s guide to multi-file frameworks

It’s now easier to conduct more realistic interviews in CoderPad – watch candidates make API calls, render user interfaces, connect to databases, and create a fully-functioning application all from the browser – with nine popular multi-file frameworks.

A multifile pad with the file tree on the left, the file contents in the middle, and the rendered output and log console on the right.

What you need to know

  • Available in React, Vue, Angular, HTML/CSS/JS, Svelte, Node, Django, Spring, and Ruby on Rails.
  • Add files and directories in the file tree on the left side of the pad.
  • Select files to display the contents in the middle of the pad.
  • The UI of the webapp renders on the right. You can copy the link at the top to open this view in its own browser tab.
  • In the bottom right corner you have access to the web server, an interactive shell, and a console.

What a frameworks pad looks like

A pad is displayed. the following is shown:

See it in action:

How to get started

✅ You can try out the multi-file framework UI now in the sandbox below.

You have three options to create a multi-file pad:

1. Create a blank pad and select a framework

In your CoderPad dashboard, navigate to your Pads List and select Create Pad.

Coderpad dashboard with an arrow pointing to the "create pad" button in the pads list.

Then select the Languages tab in the left nav menu and click on one of the frontend or backend frameworks.

A pad is open with a 1 pointing to the "languages" tab in the left nav bar and a 2 in the frameworks section.

ℹ️ More information for creating pads can be found here.

2. Create a pad from a framework question

First, create a multi-file question using the question wizard – you can find detailed instructions here. It’s similar to creating a regular question, except you’ll add files, file contents, and folders in the Edit Starter Code screen.

The "Edit starter code" question creation window is shown with a sample node js question highlighted.

Once you’ve finished your question and hit Save, you’ll have the option to immediately create a pad from that question.

3. Load in a question

Start by creating a blank pad like in the first option above. 

On the left nav menu, you can click on Questions to pull up your list of questions (1); from there you can select a framework question that you previously created (2) and it will populate the pad. You can also choose a question from the CoderPad Example questions list (3). 

A pad is open with a 1 pointing to the "questions" tab in the left nav bar and a 2 pointing to the "my content" tab and a 3 pointing to the "examples" tab in the question selection window.

ℹ️ More information for creating questions can be found here.

Additional resources