{"id":34641,"date":"2023-06-09T10:14:35","date_gmt":"2023-06-09T17:14:35","guid":{"rendered":"https:\/\/coderpad.io\/?p=34641"},"modified":"2023-06-13T07:13:37","modified_gmt":"2023-06-13T14:13:37","slug":"prompt-engineering-for-technical-interview-questions","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/interviewing\/prompt-engineering-for-technical-interview-questions\/","title":{"rendered":"Prompt Engineering for Technical Interview Questions\u00a0"},"content":{"rendered":"\n<p>As the use cases for Large Language Model (LLM) Artificial Intelligence (AI) flood the internet as more and more people get access, you\u2019ll start to hear more and more talk on <strong>prompt engineering<\/strong>.<\/p>\n\n\n\n<p>One of the lesser-known buzzwords surrounding products like ChatGPT and Google Bard, <strong>prompt engineering is creating and refining your input (i.e., prompts) to get the responses you\u2019re looking for<\/strong>.<\/p>\n\n\n\n<p>As advanced as they are, LLM AIs still cannot detect nuance. And much like asking humans to give you answers, you sometimes need to provide feedback to make sure your question is understood so that you can get an appropriate response.<\/p>\n\n\n\n<p>That\u2019s the goal of prompt engineering \u2013 to make sure ChatGPT (or whatever product you\u2019re using) understands precisely what you\u2019re asking so you don\u2019t end up with a response that is either incorrect or insufficient for what you want.<\/p>\n\n\n\n<p>The blog post will be broken up into three sections:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Understanding prompt engineering in the context of technical interviewing<\/li>\n\n\n\n<li>Implementing prompt engineering to develop technical interview questions<\/li>\n\n\n\n<li>An example of prompt engineering in creating an interview question<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 The response below is from CoderPad Interview\u2019s new ChatGPT-based AI Chat. If you\u2019re an existing customer, <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/chatgpt-integration\/\">you can learn how to turn it on here<\/a>. If you\u2019re not yet using CoderPad for your interviews,<a href=\"https:\/\/app.coderpad.io\/register\"> you can sign-up for a free trial here<\/a> to access the AI Chat feature.<\/p>\n\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=\"#understanding-prompt-engineering\">Understanding prompt engineering<\/a><ul><li><a href=\"#prompt-engineering-in-technical-interviews\">Prompt engineering in technical interviews<\/a><\/li><li><a href=\"#benefits-of-using-prompt-engineering-for-technical-interview-questions\">Benefits of using prompt engineering for technical interview questions<\/a><\/li><\/ul><\/li><li><a href=\"#implementing-prompt-engineering-in-technical-interviews\">Implementing Prompt Engineering in Technical Interviews<\/a><ul><li><a href=\"#creating-the-prompt\">Creating the prompt<\/a><\/li><li><a href=\"#testing-the-prompt\">Testing the prompt<\/a><\/li><li><a href=\"#refining-the-prompt\">Refining the prompt<\/a><\/li><li><a href=\"#abstract-the-prompt-to-create-a-template\">Abstract the prompt to create a template<\/a><\/li><\/ul><\/li><li><a href=\"#common-mistakes-in-prompt-engineering\">Common mistakes in prompt engineering<\/a><\/li><li><a href=\"#final-thoughts\">Final thoughts<\/a><ul><li><a href=\"#keep-on-experimenting\">Keep on experimenting<\/a><\/li><\/ul><\/li><li><a href=\"#dont-forget-to-practice\">Don\u2019t forget to practice<\/a><ul><li><a href=\"#read-more-on-how-to-use-chat-gpt-in-interviews\">Read more on how to use ChatGPT in interviews<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"understanding-prompt-engineering\">Understanding prompt engineering<\/h2>\n\n\n\n<p>Instead of engaging in blog-writer wordplay, we\u2019re going to go straight to the source and let ChatGPT give you a detailed explanation of what precisely prompt engineering entails:<\/p>\n\n\n\n<p><code>The goal of prompt engineering is to structure an input query in such a way that the language model is likely to produce the desired response.&nbsp;<\/code><\/p>\n\n\n\n<p><code>Prompt engineering can involve several steps or considerations:<\/code><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code><strong>Understanding the Model<\/strong>: It\u2019s important to know what the model is capable of, as well as its limitations. For instance, a language model like GPT-4 doesn't \"understand\" text in the way a human does, it only predicts what comes next in a sequence based on patterns in the data it was trained on. It doesn't have beliefs or desires.<\/code><\/li>\n\n\n\n<li><code><strong>Clarifying the Objective<\/strong>: What is the goal of the prompt? Do you want a short, factual response? A long narrative? A joke? The type of response you're aiming for will greatly influence how you structure your prompt.<\/code><\/li>\n\n\n\n<li><code><strong>Formulating the Prompt<\/strong>: This is where you actually write the input query. This might involve specifying the format you want the response in, asking the question in several different ways, or providing some sort of context to guide the model. For instance, if you're asking for a joke, you might start with \"Tell me a joke about...\"<\/code><\/li>\n\n\n\n<li><code><strong>Testing and Refining<\/strong>: It\u2019s unlikely that you\u2019ll get the perfect response on the first try. Testing different prompts, tweaking the wording or structure, and learning from the model's responses is a key part of the process.<\/code><\/li>\n\n\n\n<li><code><strong>Systematizing<\/strong>: Once you\u2019ve found a formula that works, you can create a template or system to produce similar prompts in the future. This can help you get consistent results across a range of queries.<\/code><\/li>\n<\/ol>\n\n\n\n<p><code>Prompt engineering is a crucial skill in machine learning because the model's output is only as good as the prompts it's given. A poorly designed prompt can result in irrelevant, nonsensical, or even harmful outputs. On the other hand, a well-crafted prompt can guide the model towards the desired result, increasing the usefulness of the model and reducing the risk of harmful or unhelpful outputs.<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"prompt-engineering-in-technical-interviews\">Prompt engineering in technical interviews<\/h3>\n\n\n\n<p>There are <a href=\"https:\/\/coderpad.io\/blog\/hiring-developers\/4-ways-to-use-chatgpt-to-enhance-your-coding-interview-process\/\">several uses for prompt engineering in technical interview questions<\/a>, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creating test data&nbsp;<\/li>\n\n\n\n<li>Creating test cases<\/li>\n\n\n\n<li>Generating scaffolding code<\/li>\n\n\n\n<li>Generating the questions themselves<\/li>\n<\/ul>\n\n\n\n<p>You\u2019ll see in the implementation section below that our prompts will differ depending on the interview factors involved, including the developer level you\u2019re interviewing, the exact role (frontend, backend, full stack, data analyst, etc.), and the languages and technologies involved.&nbsp;<\/p>\n\n\n\n<p>As we see the answers that ChatGPT produces in response to those factors, we\u2019ll continue to refine our input queries until it has everything we need to get a complete question we can use \u2013 and reuse \u2013 in technical interviews.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"benefits-of-using-prompt-engineering-for-technical-interview-questions\">Benefits of using prompt engineering for technical interview questions<\/h3>\n\n\n\n<p>The ultimate reason for using ChatGPT to generate interview questions is to save time.&nbsp;<\/p>\n\n\n\n<p>Prompt engineering\u2019s part in that is to help you adjust your input query until you have a standard format where you can create a template that you can use to generate future questions.<\/p>\n\n\n\n<p>Once you have a solid query that gives you all the information you need, you can just replace the variable parts of the text to generate more good questions in other domains \u2013 different languages, roles, role levels, etc.<\/p>\n\n\n\n<p>For example, once I create a good query for a senior React dev, I can simply replace \u201cReact\u201d with \u201cNode.js\u201d if I\u2019m looking to assess a full stack candidate, or I can replace \u201csenior\u201d with \u201cjunior\u201d to create a question for a recent college graduate.<\/p>\n\n\n\n<p>Without prompt engineering, you\u2019d generate less-than-ideal questions every time, over and over again, and you\u2019d probably spend more time using LLMs than just writing your own question from scratch.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"implementing-prompt-engineering-in-technical-interviews\">Implementing Prompt Engineering in Technical Interviews<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creating-the-prompt\">Creating the prompt<\/h3>\n\n\n\n<p>The first \u2013 and probably easiest \u2013 thing to do in creating a prompt is to define the job role and level you want to review. As an interviewer, you know exactly what role you\u2019re hiring for, so this should be a piece of cake:<\/p>\n\n\n\n<p><em>Create a technical interview question for a senior React developer.<\/em><\/p>\n\n\n\n<p>Next, you\u2019ll need to consider the most important skills you want to assess. This could be specific technologies like utilizing the Pandas library or Express.js for an application\u2013 or it could be more general, like displaying best UI design practices or knowledge of API integrations.&nbsp;<\/p>\n\n\n\n<p><em>Create a technical interview question for a senior React developer that assesses their ability to utilize best UI design practices and knowledge of CSS.<\/em><\/p>\n\n\n\n<p>It\u2019d also be beneficial to add a business case context to create a question that reflects the real-world work the candidate would be undertaking in the role. For example, would they be working with an eCommerce application? Processing data via a microservice? Reading\/writing from a database to create a dashboard? Use that in your prompt:<\/p>\n\n\n\n<p><em>Create a technical interview question for a senior React developer that assesses their ability to utilize best UI design practices and knowledge of CSS. The question should be in the form of an application that takes data and turns it into a finance dashboard displaying stock prices for finance professionals.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"testing-the-prompt\">Testing the prompt<\/h3>\n\n\n\n<p>Now it\u2019s time to see how well our prompt creates the response we need and what we may need to fix. Here\u2019s the output from ChatGPT:<\/p>\n\n\n\n<p><code>Sure! Here's a technical interview question that assesses a senior React developer's ability to utilize best UI design practices and their knowledge of CSS:<\/code><\/p>\n\n\n\n<p><code>**Question: Finance Dashboard Application**<\/code><\/p>\n\n\n\n<p><code>You are tasked with developing a finance dashboard application that displays stock prices for finance professionals. The application will receive data from an API in JSON format, which includes information about different stocks. Your goal is to create a responsive and visually appealing dashboard using React and CSS, adhering to best UI design practices.<\/code><\/p>\n\n\n\n<p><code>**Requirements:**<\/code><\/p>\n\n\n\n<p><code>1. Fetch stock data from the provided API endpoint: `https:\/\/api.example.com\/stocks`.<\/code><\/p>\n\n\n\n<p><code>2. The dashboard should display a list of stocks, each represented by a card component.<\/code><\/p>\n\n\n\n<p><code>3. Each card should include the following information:<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Stock symbol (e.g., AAPL for Apple Inc.)<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Stock name (e.g., Apple Inc.)<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Current stock price<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Percentage change in stock price (compared to the previous day's closing price)<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Volume of shares traded<\/code><\/p>\n\n\n\n<p><code>4. Implement a color-coded indicator for the percentage change in stock price:<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Green for positive percentage change<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Red for negative percentage change<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- No indicator for zero percentage change<\/code><\/p>\n\n\n\n<p><code>5. The dashboard should be responsive and adjust its layout based on the screen size:<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- On larger screens, display multiple cards in a row (e.g., 3 cards per row).<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- On smaller screens, display a single column of cards.<\/code><\/p>\n\n\n\n<p><code>6. Apply CSS styling to enhance the visual appeal of the dashboard. Consider:<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Font choices, sizes, and weights<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Color scheme<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Card layout and spacing<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Responsive design principles<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Consistent UI design across different browsers<\/code><\/p>\n\n\n\n<p><code>**Deliverables:**<\/code><\/p>\n\n\n\n<p><code>Please create a React application that satisfies the requirements outlined above. You can use any additional libraries or frameworks if needed. Write clean and maintainable code, and feel free to use modern CSS techniques (e.g., CSS modules, CSS-in-JS, etc.) if you prefer.<\/code><\/p>\n\n\n\n<p><code>In addition to the functional implementation, please provide a brief explanation of your design choices, including any CSS frameworks or methodologies you used, and how you ensured the application's responsiveness and browser compatibility.<\/code><\/p>\n\n\n\n<p><code>Good luck!<\/code><\/p>\n\n\n\n<p>This is not bad!&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"refining-the-prompt\">Refining the prompt<\/h3>\n\n\n\n<p>There are a couple of things I want to fix, though:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>I have no API for them to connect to. I <em>could<\/em> find one on the internet (or ask ChatGPT to find me one), but for the purpose of time and having them focus on the UI design rather than on API integration, I\u2019m just going to adjust the question so the data comes from a flat file rather than an API.<\/li>\n\n\n\n<li>Having the candidate write all the boilerplate code for that question would be tedious and not worth my time \u2013 I want to see how they work with UI design, not rewrite components they learned about eight years ago. I want ChatGPT to generate the starter code for this question.<\/li>\n<\/ol>\n\n\n\n<p>Here\u2019s how I\u2019d reframe the prompt to include those points:<\/p>\n\n\n\n<p><em>Create a technical interview question for a senior React developer that assesses their ability to utilize best UI design practices and knowledge of CSS. The question should be in the form of an application that takes data from a JSON file and turns it into a finance dashboard displaying stock prices for finance professionals. <\/em><strong><em>Please also generate the sample data JSON file and provide starter code for the candidate.&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p>Let\u2019s see if we get any improvement:<\/p>\n\n\n\n<p><code>Here's a technical interview question that assesses a senior React developer's ability to utilize best UI design practices, their knowledge of CSS, and their ability to work with data in a finance dashboard application:<\/code><\/p>\n\n\n\n<p><code>**Question: Finance Dashboard Application**<\/code><\/p>\n\n\n\n<p><code>You are tasked with developing a finance dashboard application that displays stock prices for finance professionals. The application will receive data from a JSON file, which includes information about different stocks. Your goal is to create a responsive and visually appealing dashboard using React and CSS, adhering to best UI design practices.<\/code><\/p>\n\n\n\n<p><code>**Requirements:**<\/code><\/p>\n\n\n\n<p><code>1. Create a React application that reads stock data from a JSON file and displays it on the finance dashboard.<\/code><\/p>\n\n\n\n<p><code>2. The stock data is provided in a file named `stocks.json`. The file follows the structure below:<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">{\n  <span class=\"hljs-attr\">\"stocks\"<\/span>: &#91;\n    {\n      <span class=\"hljs-attr\">\"symbol\"<\/span>: <span class=\"hljs-string\">\"AAPL\"<\/span>,\n      <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Apple Inc.\"<\/span>,\n      <span class=\"hljs-attr\">\"price\"<\/span>: <span class=\"hljs-number\">150.25<\/span>,\n      <span class=\"hljs-attr\">\"change\"<\/span>: <span class=\"hljs-number\">1.34<\/span>,\n      <span class=\"hljs-attr\">\"volume\"<\/span>: <span class=\"hljs-number\">1000000<\/span>\n    },\n    {\n      <span class=\"hljs-attr\">\"symbol\"<\/span>: <span class=\"hljs-string\">\"GOOGL\"<\/span>,\n      <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Alphabet Inc.\"<\/span>,\n      <span class=\"hljs-attr\">\"price\"<\/span>: <span class=\"hljs-number\">2500.10<\/span>,\n      <span class=\"hljs-attr\">\"change\"<\/span>: <span class=\"hljs-number\">-0.75<\/span>,\n      <span class=\"hljs-attr\">\"volume\"<\/span>: <span class=\"hljs-number\">750000<\/span>\n    },\n    {\n      <span class=\"hljs-attr\">\"symbol\"<\/span>: <span class=\"hljs-string\">\"MSFT\"<\/span>,\n      <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Microsoft Corporation\"<\/span>,\n      <span class=\"hljs-attr\">\"price\"<\/span>: <span class=\"hljs-number\">300.50<\/span>,\n      <span class=\"hljs-attr\">\"change\"<\/span>: <span class=\"hljs-number\">0<\/span>,\n      <span class=\"hljs-attr\">\"volume\"<\/span>: <span class=\"hljs-number\">1200000<\/span>\n    }\n  ]\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>3. Read the stock data from the `stocks.json` file and display it on the finance dashboard.<\/code><\/p>\n\n\n\n<p><code>4. The dashboard should display a list of stocks, each represented by a card component.<\/code><\/p>\n\n\n\n<p><code>5. Each card should include the following information:<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Stock symbol<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Stock name<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Current stock price<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Percentage change in stock price (compared to the previous day's closing price)<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Volume of shares traded<\/code><\/p>\n\n\n\n<p><code>6. Implement a color-coded indicator for the percentage change in stock price:<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Green for positive percentage change<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Red for negative percentage change<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- No indicator for zero percentage change<\/code><\/p>\n\n\n\n<p><code>7. The dashboard should be responsive and adjust its layout based on the screen size:<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- On larger screens, display multiple cards in a row (e.g., 3 cards per row).<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- On smaller screens, display a single column of cards.<\/code><\/p>\n\n\n\n<p><code>8. Apply CSS styling to enhance the visual appeal of the dashboard. Consider:<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Font choices, sizes, and weights<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Color scheme<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Card layout and spacing<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Responsive design principles<\/code><\/p>\n\n\n\n<p><code>&nbsp;&nbsp;&nbsp;- Consistent UI design across different browsers<\/code><\/p>\n\n\n\n<p><code>**Starter Code:**<\/code><\/p>\n\n\n\n<p><code>Use the following starter code as a basis for your React application:<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> stocksData <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/stocks.json'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">FinanceDashboard<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span>\n\n &#91;stocks, setStocks] = useState(&#91;]);\n\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-comment\">\/\/ Read stock data from the JSON file<\/span>\n    setStocks(stocksData.stocks);\n  }, &#91;]);\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"finance-dashboard\"<\/span>&gt;<\/span>\n      {\/* Display the stock cards here *\/}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> FinanceDashboard;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>Feel free to modify the starter code as needed and add any additional components or styles to complete the finance dashboard application.<\/code><\/p>\n\n\n\n<p>Much better. You could continue to modify it to add test cases or generate starter code for multiple languages, but for simplicity\u2019s sake, we\u2019ll stick with what we have.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"abstract-the-prompt-to-create-a-template\">Abstract the prompt to create a template<\/h3>\n\n\n\n<p>Barring any other changes you may want to make to create your ideal interview question, we now have a specific prompt that we can generalize to generate a template for creating future interview questions for different roles, technologies, job levels, etc.<\/p>\n\n\n\n<p>Using our example above, our final prompt was:<\/p>\n\n\n\n<p><em>Create a technical interview question for a senior React developer that assesses their ability to utilize best UI design practices and knowledge of CSS. The question should be in the form of an application that takes data from a JSON file and turns it into a finance dashboard displaying stock prices for finance professionals. Please also generate the sample data JSON file and provide starter code for the candidate.&nbsp;<\/em><\/p>\n\n\n\n<p>A generalized template for that would look like this:<\/p>\n\n\n\n<p><em>Create a technical interview question for a <\/em>[role level] [job title]<em> that assesses <\/em>[skills you want to assess]<em>. The question should be in the form of an application that <\/em>[functionality of the application the candidate would be working on with your team]<em>. Please also generate the sample data <\/em>[data structure type]<em> file and provide starter code for the candidate.&nbsp;<\/em><\/p>\n\n\n\n<p>So if we wanted to create a question for a junior full-stack developer who would make the admin dashboard for that finance application, we would just fill in the template like so:<\/p>\n\n\n\n<p><em>Create a technical interview question for a <\/em>&nbsp;junior full-stack developer<em> that assesses <\/em>their ability to populate a user interface in Angular with customer information from a MySQL database<em>. The question should be in the form of an application that <\/em>displays an admin dashboard where users can update their personal information<em>. Please also generate the sample <\/em>customer <em>data <\/em>SQL<em> file and provide starter code for the candidate.&nbsp;<\/em><\/p>\n\n\n\n<p>Here\u2019s ChatGPT\u2019s response to that:<\/p>\n\n\n\n<p><code>Question<\/code>:<\/p>\n\n\n\n<p><code>You have been assigned a task to create an admin dashboard in Angular that allows users to update their personal information, which is stored in a MySQL database. Your task is to populate the user interface with customer information retrieved from the database and implement the necessary functionality to update the data.<\/code><\/p>\n\n\n\n<p><code>You need to create a single-page application that consists of the following components:<\/code><\/p>\n\n\n\n<p><code>1. Admin Dashboard Component: This component serves as the main container for the admin dashboard. It should display a table listing all the customers and provide options to edit their information.<\/code><\/p>\n\n\n\n<p><code>2. Customer Table Component: This component should display the customer data in a table format. Each row of the table should represent a customer, and each column should display a specific attribute of the customer (e.g., name, email, phone number, address). Include an \"Edit\" button in each row to allow users to update the information.<\/code><\/p>\n\n\n\n<p><code>3. Edit Customer Component: This component should be displayed when a user clicks the \"Edit\" button for a specific customer. It should show a form where the user can modify the customer's information.<\/code><\/p>\n\n\n\n<p><code>Your task is to implement the necessary Angular components, services, and routing configuration to fulfill the requirements mentioned above. Additionally, you need to retrieve the customer information from a MySQL database and populate the user interface with the retrieved data.<\/code><\/p>\n\n\n\n<p><code>To assist you, here's a sample customer data SQL file (customers.sql) that you can import into your MySQL database:<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"SQL (Structured Query Language)\" data-shcb-language-slug=\"sql\"><span><code class=\"hljs language-sql shcb-wrap-lines\"><span class=\"hljs-comment\">-- customers.sql<\/span>\n\n<span class=\"hljs-keyword\">CREATE<\/span> <span class=\"hljs-keyword\">TABLE<\/span> customers (\n  <span class=\"hljs-keyword\">id<\/span> <span class=\"hljs-built_in\">INT<\/span> PRIMARY <span class=\"hljs-keyword\">KEY<\/span> AUTO_INCREMENT,\n  <span class=\"hljs-keyword\">name<\/span> <span class=\"hljs-built_in\">VARCHAR<\/span>(<span class=\"hljs-number\">255<\/span>) <span class=\"hljs-keyword\">NOT<\/span> <span class=\"hljs-literal\">NULL<\/span>,\n  email <span class=\"hljs-built_in\">VARCHAR<\/span>(<span class=\"hljs-number\">255<\/span>) <span class=\"hljs-keyword\">NOT<\/span> <span class=\"hljs-literal\">NULL<\/span>,\n  phone <span class=\"hljs-built_in\">VARCHAR<\/span>(<span class=\"hljs-number\">20<\/span>) <span class=\"hljs-keyword\">NOT<\/span> <span class=\"hljs-literal\">NULL<\/span>,\n  address <span class=\"hljs-built_in\">VARCHAR<\/span>(<span class=\"hljs-number\">255<\/span>) <span class=\"hljs-keyword\">NOT<\/span> <span class=\"hljs-literal\">NULL<\/span>\n);\n\n<span class=\"hljs-keyword\">INSERT<\/span> <span class=\"hljs-keyword\">INTO<\/span> customers (<span class=\"hljs-keyword\">name<\/span>, email, phone, address)\n<span class=\"hljs-keyword\">VALUES<\/span>\n  (<span class=\"hljs-string\">'John Doe'<\/span>, <span class=\"hljs-string\">'john@example.com'<\/span>, <span class=\"hljs-string\">'1234567890'<\/span>, <span class=\"hljs-string\">'123 Main St'<\/span>),\n  (<span class=\"hljs-string\">'Jane Smith'<\/span>, <span class=\"hljs-string\">'jane@example.com'<\/span>, <span class=\"hljs-string\">'0987654321'<\/span>, <span class=\"hljs-string\">'456 Elm St'<\/span>),\n  (<span class=\"hljs-string\">'Mike Johnson'<\/span>, <span class=\"hljs-string\">'mike@example.com'<\/span>, <span class=\"hljs-string\">'5555555555'<\/span>, <span class=\"hljs-string\">'789 Oak St'<\/span>);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">SQL (Structured Query Language)<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">sql<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>Please provide the starter code for the candidate to work with.<\/code><\/p>\n\n\n\n<p><code>Starter Code:<\/code><\/p>\n\n\n\n<p><code>Here's the starter code for the Angular application:<\/code><\/p>\n\n\n\n<p><code>1. AdminDashboardComponent (admin-dashboard.component.html):<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-comment\">&lt;!-- admin-dashboard.component.html --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Admin Dashboard<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">app-customer-table<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">app-customer-table<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>2. CustomerTableComponent (customer-table.component.html):<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-comment\">&lt;!-- customer-table.component.html --&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">thead<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>Name<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>Email<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>Phone<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>Address<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>Action<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">thead<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tbody<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- Display customer data here --&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tbody<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>3. EditCustomerComponent (edit-customer.component.html):<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-comment\">&lt;!-- edit-customer.component.html --&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n  <span class=\"hljs-comment\">&lt;!-- Display editable fields for customer information here --&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>Save<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>Please use the provided code as a starting point and build upon it to complete the task. You may use any additional dependencies or libraries as needed. Good luck!<\/code><\/p>\n\n\n\n<p>That\u2019s got everything we need! <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"common-mistakes-in-prompt-engineering\">Common mistakes in prompt engineering<\/h2>\n\n\n\n<p>The use of AI in interviews is new enough that it\u2019s not without risks.<\/p>\n\n\n\n<p>First and foremost \u2013 always review the response! There are multiple stories of <a href=\"https:\/\/news.ycombinator.com\/item?id=33841672\" target=\"_blank\" rel=\"noopener\">ChatGPT<\/a> and <a href=\"https:\/\/mashable.com\/article\/google-bard-james-webb-telescope-false-fact\" target=\"_blank\" rel=\"noopener\">Google Bard<\/a> making up information or even just getting it wrong.&nbsp;<\/p>\n\n\n\n<p>Ensure you\u2019re reviewing not only the code snippets but also the assumptions ChatGPT makes when creating the response based on your input. As you saw above, for example, its first idea for where to get the data for the dashboard was via an API. If you have one ready, great; otherwise, you might want to look for quicker options.<\/p>\n\n\n\n<p>It\u2019d also be a good idea to answer the question yourself. You can ask ChatGPT to generate a solution, although it currently struggles to answer software development questions involving multiple files. But at the very least, make sure YOU can answer it before you give it to a candidate.<\/p>\n\n\n\n<p>You also want to avoid overly complex or vague prompts. The former will confuse the LLM and cause it to return a wrong or no answer. The latter will lead you to spend lots of time querying ChatGPT to refine your request to a usable point.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-thoughts\">Final thoughts<\/h2>\n\n\n\n<p>By now, you have a thorough understanding of why prompt engineering is essential for utilizing ChatGPT and how you can use it to enhance your technical interview process by generating technical interview questions.<\/p>\n\n\n\n<p>Here are a couple more suggestions for getting the most out of using LLMs in your interviewing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"keep-on-experimenting\">Keep on experimenting<\/h3>\n\n\n\n<p>The technical interview prompt we created represents just a small set of elements that you may want in your technical interview.&nbsp;<\/p>\n\n\n\n<p>For example, I asked ChatGPT to also generate a file with test cases for our senior React developer question by adding this line to the prompt:<\/p>\n\n\n\n<p><em>In addition, create a file that also has test cases.<\/em><\/p>\n\n\n\n<p>When it regenerated the response, it also added this:<\/p>\n\n\n\n<p><code>**Test Cases**<\/code><\/p>\n\n\n\n<p><code>Here is an example of test case file for your dashboard (`App.test.js`):<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { render, screen } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@testing-library\/react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> App <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/App'<\/span>;\n\ntest(<span class=\"hljs-string\">'renders stock data'<\/span>, <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n  render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">App<\/span> \/&gt;<\/span><\/span>);\n  <span class=\"hljs-keyword\">const<\/span> linkElement = <span class=\"hljs-keyword\">await<\/span> screen.findByText(<span class=\"hljs-regexp\">\/AAPL\/i<\/span>);\n  expect(linkElement).toBeInTheDocument();\n});\n\ntest(<span class=\"hljs-string\">'renders loading state'<\/span>, () =&gt; {\n  render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">App<\/span> \/&gt;<\/span><\/span>);\n  <span class=\"hljs-keyword\">const<\/span> loadingElement = screen.getByText(<span class=\"hljs-regexp\">\/loading\/i<\/span>);\n  expect(loadingElement).toBeInTheDocument();\n});\n\ntest(<span class=\"hljs-string\">'handles error state'<\/span>, <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n  global.fetch = jest.fn(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-built_in\">Promise<\/span>.reject(<span class=\"hljs-string\">\"API is down\"<\/span>));\n  \n  render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">App<\/span> \/&gt;<\/span><\/span>);\n  <span class=\"hljs-keyword\">const<\/span> errorElement = <span class=\"hljs-keyword\">await<\/span> screen.findByText(<span class=\"hljs-regexp\">\/error\/i<\/span>);\n  expect(errorElement).toBeInTheDocument();\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>Remember to add your own test cases to check for the presence and functionality of all the important components and states of the app.<\/code><\/p>\n\n\n\n<p>You can also have it generate starter code in other languages, CSS files with the styling you want the candidate to use, and more \u2013 the limit is your imagination.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dont-forget-to-practice\">Don\u2019t forget to practice<\/h2>\n\n\n\n<p>Whether you use ChatGPT or Google Bard, getting good at prompt engineering with LLMs is the kind of thing that takes practice.<\/p>\n\n\n\n<p>Both Bard and ChatGPT have free offerings with limitations on the number of queries you can submit. As of this writing, ChatGPT also offers monthly and annual subscriptions.&nbsp;<\/p>\n\n\n\n<p>CoderPad also allows you to use the <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/chatgpt-integration\/\">ChatGPT-powered <em>AI Chat<\/em><\/a><em> <\/em>in your interview pads. That way, you can practice engineering your prompt through the <em>AI Chat <\/em>and then set up your files and code when you get the response you want from ChatGPT:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/06\/img_648328b7f2d03.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"read-more-on-how-to-use-chat-gpt-in-interviews\">Read more on how to use ChatGPT in interviews<\/h3>\n\n\n\n<p>As access to LLMs continues to increase, you\u2019ll start reading about more and more use cases for it that will help make your life a whole lot easier.<\/p>\n\n\n\n<p>Given that we\u2019re a leading interview and assessment platform, we\u2019ll continue showing you how to use them to improve your hiring process.<\/p>\n\n\n\n<p>You can check out the resources in the <strong>Related Posts<\/strong> section below to learn more about improving your interview processes with ChatGPT.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Explore the power of prompt engineering in optimizing the performance of Large Language Models for effective responses in technical interviews.<\/p>\n","protected":false},"author":12,"featured_media":34649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"persona":[27],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-34641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interviewing"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/34641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=34641"}],"version-history":[{"count":38,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/34641\/revisions"}],"predecessor-version":[{"id":34788,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/34641\/revisions\/34788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/34649"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=34641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=34641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=34641"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=34641"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=34641"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=34641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}