{"id":28339,"date":"2023-01-10T07:14:50","date_gmt":"2023-01-10T15:14:50","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=28339"},"modified":"2024-02-16T12:15:20","modified_gmt":"2024-02-16T20:15:20","slug":"multi-file-frameworks-for-engineers","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/resources\/docs\/interview\/quick-start-guides\/multi-file-frameworks-for-engineers\/","title":{"rendered":"Engineer&#8217;s guide to multi-file frameworks"},"content":{"rendered":"\n<p>It\u2019s now easier to conduct more realistic interviews in the Interview platform- watch candidates make API calls, render user interfaces, connect to databases, and create a fully-functioning application all from the browser &#8211; with <a href=\"https:\/\/coderpad.io\/languages\/\" target=\"_blank\" rel=\"noreferrer noopener\">nine popular multi-file frameworks<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd750712d5c.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd750712d5c.png\" alt=\"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.\"\/><\/a><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav aria-label=\"Table of Contents\"><ul><li><a href=\"#what-you-need-to-know\">What you need to know<\/a><\/li><li><a href=\"#what-a-frameworks-pad-looks-like\">What a frameworks pad looks like<\/a><\/li><li><a href=\"#how-to-get-started\">How to get started<\/a><\/li><li><a href=\"#additional-resources\">Additional resources<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-you-need-to-know\">What you need to know<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Available in <strong><a href=\"https:\/\/coderpad.io\/languages\/react\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/vue\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vue<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/html-css-js\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML\/CSS\/JS<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/svelte\/\" target=\"_blank\" rel=\"noreferrer noopener\">Svelte<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/node\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/python-3\/django\/\" target=\"_blank\" rel=\"noreferrer noopener\">Django<\/a>, <a href=\"https:\/\/coderpad.io\/languages\/java\/spring\/\" target=\"_blank\" rel=\"noreferrer noopener\">Spring<\/a>, <\/strong>and <strong><a href=\"https:\/\/coderpad.io\/languages\/ruby\/rails\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ruby on Rails<\/a>.<\/strong><\/li>\n\n\n\n<li>Add files and directories in the file tree on the left side of the pad.<\/li>\n\n\n\n<li>Select files to display the contents in the middle of the pad.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>In the bottom right corner you have access to the web server, an interactive shell (where you can import packages using <code>npm<\/code> or <code>pip3<\/code>, a console, and &#8212; if it&#8217;s a backend framework &#8212; an <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/api-client\/\" target=\"_blank\" rel=\"noreferrer noopener\">API client<\/a>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-a-frameworks-pad-looks-like\">What a frameworks pad looks like<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd7508ba6d1.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd7508ba6d1.png\" alt=\"A pad is displayed. the following is shown: \"\/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"see-it-in-action\">See it in action:<\/h3>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"928\" style=\"aspect-ratio: 1916 \/ 928;\" width=\"1916\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/onboardingvid.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-get-started\">How to get started<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>\u2705 You can try out the multi-file framework UI now in the <a href=\"#sandbox\">sandbox below<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>You have three options to create a multi-file pad:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-create-a-blank-pad-and-select-a-framework\">1. Create a blank pad and select a framework<\/h3>\n\n\n\n<p>In your Interview dashboard, navigate to your <em>Pads List<\/em> and select <strong>Create Pad<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd7509e1aab.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd7509e1aab.png\" alt=\"Interview dashboard with an arrow pointing to the &quot;create pad&quot; button in the pads list.\"\/><\/a><\/figure>\n<\/div>\n\n\n<p>Then select the <strong>Languages<\/strong> tab in the left nav menu and either click on the <em>Frontend Frameworks<\/em> or <em>Backend Frameworks<\/em> filters, locate your language in the list, or use the search bar at the top to find your desired language.<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-1024x574.png\" alt=\"A pad is open with the languages menu shown.\" class=\"wp-image-37270\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-1024x574.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-300x168.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-768x431.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14-18x10.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-14.png 1257w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/creating-a-pad\/\">More information for creating pads can be found here<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-create-a-pad-from-a-framework-question\">2. Create a pad from a framework question<\/h3>\n\n\n\n<p>First, create a multi-file question using the question wizard \u2013 <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-and-editing-a-question\/#creating-multi-file-questions\">you can find detailed instructions here<\/a>. It\u2019s similar to creating a regular question, except you\u2019ll add files, file contents, and folders in the <em>Edit Starter Code<\/em> screen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-45.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-45-1024x500.png\" alt=\"\" class=\"wp-image-32340\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-1024x500.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-300x146.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-768x375.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-1536x750.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-45.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Once you\u2019ve finished your question and hit <strong>Save<\/strong>, you\u2019ll have the option to immediately create a pad from that question.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-load-in-a-question\">3. Load in a question<\/h3>\n\n\n\n<p>Start by creating a blank pad like in the first option above.&nbsp;<\/p>\n\n\n\n<p>On the left nav menu, you can click on <strong>Questions<\/strong> 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 <strong>Examples <\/strong>questions list (3).&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd750cbe82d.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/01\/img_63bd750cbe82d.png\" alt=\"A pad is open with a 1 pointing to the &quot;questions&quot; tab in the left nav bar and a 2 pointing to the &quot;my content&quot; tab and a 3 pointing to the &quot;examples&quot; tab in the question selection window.\"\/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-and-editing-a-question\/\">More information for creating questions can be found here.<\/a><\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"additional-resources\">Additional resources<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/example-react-interview-questions\/\">React interview questions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\">Creating a perfect frontend interview experience<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/languages\/\">Languages &amp; Frameworks list<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/using-pad-features\/\">Pad features<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-and-editing-a-question\/#creating-multi-file-questions\">Multi-file questions<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sandbox\">Sandbox<\/h3>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed \"\n\tstyle=\"padding-top: 85%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?pt=react\" width=\"640\" height=\"544\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"parent":22419,"menu_order":5,"template":"","class_list":["post-28339","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/28339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":64,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/28339\/revisions"}],"predecessor-version":[{"id":38640,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/28339\/revisions\/38640"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/22419"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=28339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}