{"id":8990,"date":"2026-03-26T10:27:08","date_gmt":"2026-03-26T15:27:08","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8990"},"modified":"2026-03-26T10:27:09","modified_gmt":"2026-03-26T15:27:09","slug":"the-top-trait-companies-look-for-in-a-technical-interview","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-top-trait-companies-look-for-in-a-technical-interview\/","title":{"rendered":"The Top Trait Companies Look For in a Technical Interview"},"content":{"rendered":"\n<p><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">Hi \ud83d\udc4b \u2014 I am Abishek Jakhar. I work as a Senior Software Engineer at Coinbase, and I also run my product called&nbsp;<a href=\"https:\/\/www.frontprep.com\/\" target=\"_blank\">FrontPrep,<\/a>&nbsp;which helps candidates prepare for frontend engineer interviews.<\/span> I have interviewed many candidates in my professional career at Coinbase and Expedia. I am also a top-rated mentor on MentorCruise, where I help engineers get new jobs, prepare for interviews, conduct mock interviews, and develop new frontend skills.<\/p>\n\n\n\n<p>When it comes to front-end interviews, companies often ask you to do various things, typically broken into rounds. Those rounds might be things like this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>User Interface <\/strong>&#8211; Companies ask you to build a user interface based on an image.<\/li>\n\n\n\n<li><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\"><strong>JavaScript Coding&nbsp;<\/strong>&#8211; You are asked to create a JavaScript function like debounce, a custom promise, etc., or a custom mini library like a virtualization list, an analytics librar<\/span>y, etc.<\/li>\n\n\n\n<li><strong>System Design <\/strong>&#8211; You are asked to tell how you would go about creating an application from scratch. For example, you could be asked to design a JIRA board in which you outline your approach to which library\/framework you will use, styling, performance, accessibility, component architecture, how the backend API response will map to your components, etc.<\/li>\n\n\n\n<li><strong>MCQ<\/strong> &#8211; Multiple-choice questions are asked in technical phone screen rounds.<\/li>\n\n\n\n<li><strong>AI Proficiency<\/strong> &#8211; Companies are now asking how you use AI in your day-to-day work to increase productivity.<\/li>\n<\/ol>\n\n\n\n<p>Let&#8217;s focus on that first one: a user interface front-end interview question asked at Atlassian called Bar Chart. I will help you understand the prompt, requirements, and solution. Then we will go over how interviewers judge your solution and the common mistakes that candidates make.<\/p>\n\n\n\n<p>Before diving into the actual question, I would like to discuss the most important thing that candidates overlook in a front-end technical interview.<\/p>\n\n\n\n<p>Imagine you are in a technical front-end interview, and you have been asked to build a user interface. You just start coding the solution without discussing your approach with the interviewer. You&#8217;ve already missed a very important process. Ideally, you should have taken the first 5-10 minutes to discuss your approach and thought process with the interviewer, started coding, and, while coding, conveyed all the important code-level decisions you were considering.<\/p>\n\n\n\n<p>It is very important because, in our day-to-day work, we engineers discuss architecture, explain code, and understand our colleagues&#8217; code, so it is essential to be able to explain your code. Also, interviewers are always looking for candidates who can explain their code well.&nbsp;<\/p>\n\n\n\n<p>You do not need to explain every line; however, you do need to explain important decisions that you are taking while writing the code. Some very common examples could be:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, I will be creating a <code>useEffect<\/code> with an empty dependency array because I only want to run the effect on mount.<\/li>\n\n\n\n<li>I will move this logic into a custom hook to make the code cleaner and more reusable.&nbsp;<\/li>\n\n\n\n<li>I will use <code>box-sizing: border-box<\/code> before I start styling my component to ensure the width I set is the box&#8217;s actual width.<\/li>\n<\/ul>\n\n\n\n<p>Every time the interview starts, I recommend that candidates be more vocal and explain the important decisions they are making while writing code, but in most cases, I see silence during the interview. There are very few candidates who can explain what they are thinking and writing.<\/p>\n\n\n\n<p>There are multiple advantages of being more vocal<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>It shows you are communicative and open to feedback. Companies are always looking for collaborating engineers rather than a lone wolf.<\/li>\n\n\n\n<li>If you explain your plan before you start writing code (e.g, \u201cI\u2019m planning to use two states instead of a single React state\u2026\u201d), the interviewer has a chance to guide you or nudge you if you are thinking in the right or wrong direction because interviewers want you to succeed.<\/li>\n\n\n\n<li>A narrative approach sets you apart from entry-level candidates. It shows you care about requirements, edge cases, and you do things with a plan.<\/li>\n\n\n\n<li>It is psychological that you can often catch your own bug mid-sentence. For example (\u201cSo I will loop through\u2026. wait, that would be an infinite loop\u2026.\u201d)<\/li>\n<\/ol>\n\n\n\n<p>These days it is becoming very common to cheat with the use of AI, however even if candidates use AI to build the user interface they won\u2019t be able to explain it unless their concepts are good, if their concepts are good why would they use AI to cheat. So, explaining the code becomes a differentiating factor here as well and gives the interviewer much more confidence. Whenever I conduct an interview, I ask a couple of questions about the concepts used to create the UI. For example, I would ask such questions during an interview; obviously, the questions would vary by interviewee, but these are some general ones that usually come up in UI\/React interviews.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Why have you used an empty dependency array in <code>useEffect<\/code>?<\/li>\n\n\n\n<li>What is the benefit of wrapping the function in <code>useCallback<\/code>?<\/li>\n\n\n\n<li>Why have you used <code>box-sizing: border-box<\/code>?<\/li>\n\n\n\n<li>Is there a reason not to separate your code into multiple React components?<\/li>\n<\/ul>\n\n\n\n<p>Answering all these questions gives the interviewer confidence. However, if you explain your code yourself, leaving no chance for the interviewer to ask questions, then you are a \u201cStrong Yes\u201d candidate.<\/p>\n\n\n\n<p>Overall, being vocal during an interview and explaining your thought process will give you an edge over other candidates, which, in turn, will increase your negotiating power regarding designation and salary.<\/p>\n\n\n\n<p>Now, I will walk you through an actual interview challenge asked at Atlassian. We will go through the prompt together, then start solving it step by step. During this process, I will show you what an ideal solution looks like, where candidates go wrong, and how interviewers judge your solution and decide if you are \u201cStrong No\u201d, \u201cNo\u201d, \u201cYes\u201d, or \u201cStrong Yes\u201d. Getting \u201cStrong Yes\u201d gives you more negotiation power.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prompt<\/h2>\n\n\n\n<p><strong>Your task is to create a Bar Chart component using React.<\/strong><\/p>\n\n\n\n<p>This component will efficiently display a vertical bar chart using a structured array of data provided in the starter code. Each element in this array will map into a distinct bar in the chart. What makes this bar stand out is its use of color; each bar will be uniquely colored based on a predefined color in our data.<\/p>\n\n\n\n<p>You can use the <code>api.js<\/code> file in the server folder to retrieve the data from our mock API for rendering your bar chart. The data also includes color and height information.<\/p>\n\n\n\n<p>Your styling should look close to the image provided below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2026\/03\/image.png?resize=1024%2C576&#038;ssl=1\" alt=\"A bar chart displaying six vertical bars in various colors, representing different values.\" class=\"wp-image-8991\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2026\/03\/image.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2026\/03\/image.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2026\/03\/image.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2026\/03\/image.png?w=1280&amp;ssl=1 1280w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Starter Code<\/h2>\n\n\n\n<p>In the interview setup, we are given starter code with some data, as shown below; we will build on it. When it comes to where you will code, you are usually given a link to platforms like HackerRank, Codility, or Karat, or you are asked to code locally in your own IDE and share your screen with the interviewer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The <code>App.js<\/code> File<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Requirements<\/span>\n\n<span class=\"hljs-comment\">\/\/ Create a React component that displays a vertical bar chart<\/span>\n<span class=\"hljs-comment\">\/\/ Each bar's height should correspond to the 'ticketCount' value from the data<\/span>\n<span class=\"hljs-comment\">\/\/ Apply color to each bar using the 'color' attribute from the data<\/span>\n<span class=\"hljs-comment\">\/\/ Style the bar chart to be visually appealing, ensuring it closely resembles the example.<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/style.css'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n <span class=\"hljs-comment\">\/\/ your code here<\/span>\n <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> \/&gt;<\/span><\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><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<h3 class=\"wp-block-heading\">The <code>server\/api.js<\/code> File<\/h3>\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\"><span class=\"hljs-keyword\">const<\/span> chartData = &#91;\n {\n   <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">'dep-1'<\/span>,\n   <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Legal'<\/span>,\n   <span class=\"hljs-attr\">ticketCount<\/span>: <span class=\"hljs-number\">32<\/span>,\n   <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'#f1d05b'<\/span>,\n },\n {\n   <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">'dep-2'<\/span>,\n   <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Sales'<\/span>,\n   <span class=\"hljs-attr\">ticketCount<\/span>: <span class=\"hljs-number\">20<\/span>,\n   <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'#58a958'<\/span>,\n },\n {\n   <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">'dep-3'<\/span>,\n   <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Engineering'<\/span>,\n   <span class=\"hljs-attr\">ticketCount<\/span>: <span class=\"hljs-number\">60<\/span>,\n   <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'#63a6ee'<\/span>,\n },\n {\n   <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">'dep-4'<\/span>,\n   <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Manufacturing'<\/span>,\n   <span class=\"hljs-attr\">ticketCount<\/span>: <span class=\"hljs-number\">5<\/span>,\n   <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'#4fc08d'<\/span>,\n },\n {\n   <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">'dep-5'<\/span>,\n   <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Maintenance'<\/span>,\n   <span class=\"hljs-attr\">ticketCount<\/span>: <span class=\"hljs-number\">14<\/span>,\n   <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'#d67575'<\/span>,\n },\n {\n   <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">'dep-6'<\/span>,\n   <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Human Resourcing'<\/span>,\n   <span class=\"hljs-attr\">ticketCount<\/span>: <span class=\"hljs-number\">35<\/span>,\n   <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'#9abf7a'<\/span>,\n },\n {\n   <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-string\">'dep-7'<\/span>,\n   <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'Events'<\/span>,\n   <span class=\"hljs-attr\">ticketCount<\/span>: <span class=\"hljs-number\">43<\/span>,\n   <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'#73cbda'<\/span>,\n },\n];\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> getData = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span>\n <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve<\/span>) =&gt;<\/span>\n   setTimeout(resolve, <span class=\"hljs-number\">500<\/span>, chartData)\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<h2 class=\"wp-block-heading\">Solution<\/h2>\n\n\n\n<p>Before we start coding, it is very important to thoroughly read the prompt and understand the requirements. If anything is not clear, discuss it with the interviewer. It is very common for candidates to jump straight into coding under pressure and nervousness, only to later realize they have coded something unexpected. In the interview setting, time is so limited that going back is very difficult, which makes us feel even more nervous.<\/p>\n\n\n\n<p>Now, let\u2019s start solving.<\/p>\n\n\n\n<p>In the starter code, we see a mock API that provides the data to render bar charts. We can fetch the data by calling the <code>getData<\/code> function, the <code>getData<\/code> returns a promise that resolves to <code>chartData<\/code> after <code>500ms<\/code>.<\/p>\n\n\n\n<p class=\"learn-more\">Companies usually don\u2019t create APIs for interview purposes; instead, they provide a function that acts as a mock API. Some candidates who are new to coding sometimes get confused because they know that data needs to be fetched from the API, and there is no URL available<\/p>\n\n\n\n<p>We will start by creating a state called <code>chartData<\/code> in App.js, which will hold our fetched data. We will initially return null in our App because we have not built our UI yet, and we will replace it later.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The App.js File (Step 1)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/style.css'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n <span class=\"hljs-keyword\">const<\/span> &#91;chartData, setChartData] = React.useState(&#91;]);\n\n <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">null<\/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\">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>Now, we will fetch the data inside <code>useEffect<\/code> using our mock API. We will import the <code>getData<\/code> function and call it inside our <code>useEffect<\/code>, <code>getData<\/code> will return a promise, so we will use the method to get the result once the promise is fulfilled. We will pass an empty array as the second argument to <code>useEffect<\/code> to ensure our effect runs only once on the first page load. Now that we have data, we will use the <code>setChartData<\/code> updater function to update the <code>chartData<\/code> state with fetched data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The <code>App.js<\/code> File  (Step 2)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/style.css'<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> { getData } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/server\/api'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;chartData, setChartData] = React.useState(&#91;]);\n\n  React.useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    getData()\n      .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">data<\/span>) =&gt;<\/span> {\n        setChartData(data);\n      })\n      .catch(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\t  <span class=\"hljs-comment\">\/\/ handle errors<\/span>\n      });\n  }, &#91;]);\n\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">null<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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>Now, our <code>chartData<\/code> state has the data that we fetched from <code>getData<\/code> mock API, we will now create a component called <code>BarChart<\/code> and pass this <code>chartData<\/code> state to the <code>BarChart<\/code> component as prop. The <code>BarChart<\/code> component will be responsible for rendering the chart using this data.<\/p>\n\n\n\n<p>But, before we create our <code>BarChart<\/code> component and render our chart, I would like to discuss a common mistake that candidates usually make.<\/p>\n\n\n\n<p>Warning:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Many candidates get confused about imports. Our <code>getData<\/code> function is named export, so to import it, we need to use curly brackets. Candidates, import it as <code>import getData from '.\/server\/api'<\/code> without curly brackets(as default import), and then they see errors on screen, so it is always good to check if it is the default export or a named export.<\/li>\n\n\n\n<li>A lot of candidates do not initialize state with empty array, they keep it like <code>React.useState()<\/code>, which again throws error when you try to map over this state later on, so if you know that your state will hold an array of objects and you are supposed to loop over it to generate a piece of UI, it is always good to initialize it with empty array before only.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Interview Tip<\/h4>\n\n\n\n<p>I highly recommend candidates to use <code>console.log<\/code> during interviews, when we fetch the data we should always use <code>console.log()<\/code> to check if everything looks good and we are storing the data in state correctly. A lot of the time what happens is the data does not get set as expected in the state, later on it causes issues and the candidate does not understand what went wrong, so it is better to keep checking if everything is working fine step by step during interviews, don\u2019t try to write all the code and test everything at once, it will become tough and time consuming to identify where you made mistake.&nbsp;<\/p>\n\n\n\n<p>Now, we will create a new folder called components, where we will create a component file called <code>BarChart.js<\/code>. This component will accept props called items and render the chart using those items. We will also update our <code>App.js<\/code> to import and render the <code>BarChart<\/code> component, passing <code>chartData<\/code> as the items prop.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The <code>components\/BarChart.js<\/code> File<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Bar<\/span>(<span class=\"hljs-params\">{ ...delegated }<\/span>) <\/span>{\n <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bar\"<\/span> {<span class=\"hljs-attr\">...delegated<\/span>} \/&gt;<\/span><\/span>;\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">BarChart<\/span>(<span class=\"hljs-params\">{ items }<\/span>) <\/span>{\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\">\"chart\"<\/span>&gt;<\/span>\n     {items.map((item) =&gt; (\n       <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Bar<\/span>\n         <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id<\/span>\n         <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span>\n           <span class=\"hljs-attr\">backgroundColor:<\/span> <span class=\"hljs-attr\">item.color<\/span>\n         }}\n         <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">{item.name}<\/span>\n       \/&gt;<\/span>\n     ))}\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><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<h3 class=\"wp-block-heading\">The <code>App.js<\/code> File (Step 3)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/style.css'<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> { getData } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/server\/api'<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> BarChart <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/components\/BarChart'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;chartData, setChartData] = React.useState(&#91;]);\n\n  React.useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    getData()\n      .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">data<\/span>) =&gt;<\/span> {\n        setChartData(data);\n      })\n      .catch(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\t  <span class=\"hljs-comment\">\/\/ handle errors<\/span>\n      });\n  }, &#91;]);\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"wrapper\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">BarChart<\/span> <span class=\"hljs-attr\">items<\/span>=<span class=\"hljs-string\">{chartData}<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><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>Our <code>BarChart<\/code> component is reusable; it accepts items as props and renders a bar chart. Let\u2019s see how it works at this moment.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>We will create a container <code>div<\/code> and give it the class name of the chart, this will be responsible for holding all our bars.<\/li>\n\n\n\n<li>Now, inside this container <code>div<\/code> we will render each individual bar using the <code>map<\/code> method. Giving the <code>key<\/code> prop is very important here (some candidates will forget that).<\/li>\n<\/ol>\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\">{items.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">item<\/span>) =&gt;<\/span> (\n\u00a0 <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Bar<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id}<\/span> \/&gt;<\/span><\/span>\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<ol start=\"3\" class=\"wp-block-list\">\n<li>Each individual bar is a <code>div<\/code>, however, I have separated it into a separate component called <code>Bar<\/code>.<\/li>\n\n\n\n<li>Some might argue making it a component is overkill, but we need to think in terms of reusability and maintainability. Going forward, a couple of features could be added to single bar as well, so I have created it as a separate component. If it grows in features, I will move it to its own separate file.<\/li>\n\n\n\n<li>We will give style using inline styling. The <code>backgroundColor<\/code> of each bar will be the colors of each item in our array of objects. The reason we are using inline styles is that, otherwise, we would have to create classes for each color in our CSS, and we do not know what the colors might be because the data is coming from the backend.<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">{items.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">item<\/span>) =&gt;<\/span> (\n\u00a0 <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Bar<\/span>\n\u00a0 \u00a0 <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id}<\/span> \/&gt;<\/span><\/span>\n\u00a0 \u00a0 style={{\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">backgroundColor<\/span>: item.color\n\u00a0 \u00a0 }}\n))}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><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<ol start=\"6\" class=\"wp-block-list\">\n<li>Now, to improve accessibility, you could pass a <code>title<\/code> attribute to the <code>div<\/code>. When you pass <code>item.name<\/code> as title. If you hover over each bar, it will show the name of that bar.<\/li>\n<\/ol>\n\n\n\n<p>I would like to discuss two common mistakes that candidates make when it comes to component architecture:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>They do not create a separate component like <code>BarChart<\/code>, they write all the logic in App.js. There are two reasons why they do so:\n<ol class=\"wp-block-list\">\n<li>They feel that if they create a separate component like <code>BarChart<\/code>, it will take a lot more time to finish the solution, so they end up writing all logic in App.js in hope that they will separate it out later on once functionality is working end to end. But usually they never get to that. I always recommend breaking it down as early as you can, as you might not get time later.<\/li>\n\n\n\n<li>They don\u2019t think in terms of reusability and separation of concerns. They end up writing everything in a single file; they just don\u2019t feel responsibility\/sense of responsibility or a need to break it down.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>Some candidates do create a separate component like <code>BarChart, but they end up making the <\/code>API call inside <code>BarChart<\/code>, which makes our <code>BarChart<\/code> less reusable and coupled with API fetching logic, which is incorrect. To keep the <code>BarChart<\/code> as a reusable component, the only responsibility of <code>BarChart<\/code> needs to take items as props and render the chart. The <code>BarChart<\/code> should not be concerned with where the items are coming from; that should be the responsibility of the parent component, which, in our case, is <code>App.js<\/code>. If <code>BarChart<\/code> accepts data in a different format than what is being returned from API; it is the responsibility of the parent component of <code>BarChart<\/code> to transform that data according to the expectations of <code>BarChart<\/code> and pass it as props.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Calculating the height of each individual bar<\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> getBarHeight = <span class=\"hljs-function\">(<span class=\"hljs-params\">height, maxHeight<\/span>) =&gt;<\/span> <span class=\"hljs-string\">`<span class=\"hljs-subst\">${(height <span class=\"hljs-regexp\">\/ maxHeight) * 100}%`;\n\nfunction Bar({ ...delegated }) {\n return &lt;div className=\"bar\" {...delegated} \/<\/span>&gt;;\n}<\/span>\n\nexport default function BarChart({ items }) {\n const maxHeight = Math.max(...items.map((item) =&gt; item.ticketCount));\n\n return (\n   &lt;div className=\"chart\"&gt;\n     {items.map((item) =&gt; (\n       &lt;Bar\n         key={item.id}\n         style={{\n           background: item.color,\n           height: getBarHeight(item.ticketCount, maxHeight),\n         }}\n         title={item.name}\n       \/&gt;\n     ))}\n   &lt;\/div&gt;\n );\n}<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><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>Let\u2019s talk about the calculation of the height of bars. We need to calculate the height of each bar relative to the height of the bar that has the maximum height; otherwise, the bar might flow out of the container. We can use <code>Math.max<\/code> to achieve this, here is the logic.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> maxHeight = <span class=\"hljs-built_in\">Math<\/span>.max(...items.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">item<\/span>) =&gt;<\/span> item.ticketCount));<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><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>Now, that we have a maximum height, we calculate a percentage for each bar: using the following formula.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">(current ticket count \/ maximum ticket count) * 100<\/pre>\n\n\n\n<p>If our max is 60, that bar will be 100% high. A bar with a 30 ticket count becomes half of that, which is 50% height. This mathematical calculator ensures that irrespective of what value we get in items prop, our bar always fits perfectly and does not overflow.<br><br>We have created a utility function called <code>getBarHeight<\/code> to do this calculation for us. If any JavaScript logic is not dependent on state and you feel it could be reused later on, we should always create a utility function for it and move it to the <code>utils<\/code> folder. In our case, I have kept it within the <code>BarChart<\/code> component since we are not using it elsewhere. These are the little things that separate a junior engineer from a senior engineer and a \u201cYes\u201d from a \u201cStrong Yes\u201d during an interview.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Styling the Bar Chart<\/h4>\n\n\n\n<p>Now, let\u2019s talk about styling our bar chart with a <code>style.css<\/code> file. We need to make sure our styling looks good; it should look close to the example.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">*,\n*<span class=\"hljs-selector-pseudo\">::before<\/span>,\n*<span class=\"hljs-selector-pseudo\">::after<\/span> {\n  <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n}\n\n<span class=\"hljs-selector-tag\">body<\/span> {\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.wrapper<\/span> {\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">40px<\/span> <span class=\"hljs-number\">12px<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n}\n\n<span class=\"hljs-selector-class\">.chart<\/span> {\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">500px<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: transparent;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: flex-end;\n  <span class=\"hljs-attribute\">flex-direction<\/span>: row;\n  <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">12px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.bar<\/span> {\n  <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ol class=\"wp-block-list\">\n<li>The first thing I do in almost all the user interface interview challenges is to use <code>box-sizing: border-box;<\/code> it makes width and height calculations easier by including padding and border in the elements total size.<\/li>\n\n\n\n<li>I have added a wrapper class that centers the whole bar chart in our application using <code>display: flex<\/code> and <code>justify-content: center<\/code>. We have also added some <code>padding<\/code> to give it some space to breathe.<\/li>\n\n\n\n<li>To make the bars sit side by side and grow from the bottom to top, we are using CSS flexbox. We set our chart container (the <code>div<\/code> with <code>className<\/code> of chart) as flex container using <code>display: flex;<\/code>. To fix the bar to the bottom, we use <code>align-items: flex-end;<\/code> on this flex container, this makes sure all bars are anchored to the bottom. The bars grow upwards because we apply <code>height<\/code> using inline styles, there is a calculation which we do to calculate the relative heights of bars which we have already discussed above. We use <code>gap: 12px<\/code> to add spacing between bars so they don\u2019t stick to each other.<\/li>\n\n\n\n<li>One very important thing here is that our <code>.chart<\/code> container has a fixed <code>height: 400px<\/code>. This is important because our bars use percentage heights. If the parent container does not have a fixed height, percentage heights on children will not work, and our bars will not appear at all. This is a very common mistake candidates make, and it can be difficult to debug.<\/li>\n\n\n\n<li>&nbsp;We give <code>flex: 1<\/code> to each individual bar, ensuring that each bar gets an equal share of the available horizontal space.<\/li>\n<\/ol>\n\n\n\n<p>Our Bar Chart is ready and working; we have successfully built its core. Now, if time is left, I would highly recommend that you handle loading and error state while fetching data; it is simple and does not take much time. It also shows seniority to the interviewer. This is how I would update my App.js to add status.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The App.js File (Step 4)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/style.css'<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> { getData } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/server\/api'<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> BarChart <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/components\/BarChart'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n <span class=\"hljs-keyword\">const<\/span> &#91;chartData, setChartData] = React.useState(&#91;]);\n <span class=\"hljs-comment\">\/\/ idle | loading | success | error<\/span>\n <span class=\"hljs-keyword\">const<\/span> &#91;status, setStatus] = React.useState(<span class=\"hljs-string\">'idle'<\/span>);\n\n React.useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n   setStatus(<span class=\"hljs-string\">'loading'<\/span>);\n   getData()\n     .then(<span class=\"hljs-function\">(<span class=\"hljs-params\">data<\/span>) =&gt;<\/span> {\n       setChartData(data);\n       setStatus(<span class=\"hljs-string\">'success'<\/span>);\n     })\n     .catch(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n       setStatus(<span class=\"hljs-string\">'error'<\/span>);\n     });\n }, &#91;]);\n\n <span class=\"hljs-keyword\">return<\/span> (\n   <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"wrapper\"<\/span>&gt;<\/span>\n     {status === 'loading' &amp;&amp; <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Loading...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>}\n     {status === 'error' &amp;&amp; <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Something went wrong!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>}\n     {status === 'success' &amp;&amp; <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">BarChart<\/span> <span class=\"hljs-attr\">items<\/span>=<span class=\"hljs-string\">{chartData}<\/span> \/&gt;<\/span>}\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span>\n );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><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<h3 class=\"wp-block-heading\">Communicate While You Code<\/h3>\n\n\n\n<p>Throughout the interview, it is very important for the candidate to express their thought process and the key decisions they make when writing code. Lots of candidates silently code the solution and don\u2019t talk much. It is very important for candidates to understand that coding is one part of their job as a software developer; explaining and reasoning about code is another. The interviewer loves candidates who can talk through their solutions. So, please don\u2019t be silent, but don\u2019t overexpress too; talk about the important decisions, for example<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>I am thinking of maintaining the state here because of so-and-so reasons<\/li>\n\n\n\n<li>This is how I am thinking of fetching the data; these are the pros and cons<\/li>\n\n\n\n<li>I would like to create a separate component for <code>BarChart<\/code> for so-and-so reasons.<\/li>\n<\/ol>\n\n\n\n<p>It gives the interviewer more confidence that you have solid concepts and can reason and communicate well.<\/p>\n\n\n\n<p>I have seen a lot of candidates generate solutions from Cursor, Claude etc, but when asked how it is working, they are not able to tell much, in such cases candidate is usually rejected.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Interviewer Criteria<\/h2>\n\n\n\n<p>These are the criteria the interviewer will use to judge your solution.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML\/CSS<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><input type=\"checkbox\"> Does my layout closely match the provided image?<\/li>\n\n\n\n<li><input type=\"checkbox\"> Are my CSS class names both self-explanatory and meaningful? That means if someone reads the <code>className<\/code> will it tell what it might be doing?<\/li>\n\n\n\n<li><input type=\"checkbox\"><\/input> How quickly was I able to style the UI? Because, in the interview setup, the UI is not very complex, they use CSS properties which are expected to be known to frontend engineers, like flexbox, margin, padding, width, etc.<\/li>\n\n\n\n<li><input type=\"checkbox\"><\/input> Did we use the name data from the <code>chartData<\/code> to improve accessibility? Did we do other accessibility improvements?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><input type=\"checkbox\"> Was I able to fetch data from the mock API without much issues or guidance?<\/li>\n\n\n\n<li><input type=\"checkbox\"> Have I used ES6 features like let, const, arrow functions, destructuring etc?<\/li>\n\n\n\n<li><input type=\"checkbox\"> Are my variable, function and components names self explanatory?<\/li>\n\n\n\n<li><input type=\"checkbox\"><\/input> Was I able to handle the edge case where we need to calculate heights of the bar relative to the bar with maximum height and was I able to easily create the JavaScript logic?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">React<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><input type=\"checkbox\"><\/input> Have I used the <code>key<\/code> prop when I map over items in the <code>BarChart<\/code> component?<\/li>\n\n\n\n<li><input type=\"checkbox\"> Have I considered loading and error states when fetching the data?<\/li>\n\n\n\n<li><input type=\"checkbox\"><\/input> Do I know how to use react hooks like <code>useState<\/code>, <code>useEffect<\/code>?<\/li>\n\n\n\n<li><input type=\"checkbox\"><\/input> Did I create separate components like <code>&lt;BarChart \/><\/code> and <code>&lt;Bar \/><\/code>?<\/li>\n\n\n\n<li><input type=\"checkbox\"> Did I create separate files for separate components or put everything in a single file?<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Getting More Signals<\/h2>\n\n\n\n<p>The interview is 60 minutes, with 5 minutes for the introduction and the last 5 minutes reserved for any questions the candidate has for the interviewer about the company. So, on average, a candidate gets 50 minutes to complete the challenge.<\/p>\n\n\n\n<p>A lot of candidates are pretty quick, and they write solid code, so they end up finishing the above challenge within 30 minutes. Now, the interviewer has 20 more minutes, so in most cases, they extend the challenge to get more signals.<\/p>\n\n\n\n<p>The way a bar chart can be extended is to sort the bars in ascending or descending order. Which brings us down to the second prompt, which is:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>We would like to add a select menu above the bar chart to be able to sort the bars in ascending, descending or default order. The styling of the dropdown does not matter we are only concerned about the functionality here.<\/p>\n<\/blockquote>\n\n\n\n<p>We will keep the Bar Chart II for some other day.<\/p>\n\n\n\n<p>I hope you learned how to solve Bar Chart I interview questions and got insights into how your solution will be judged. Happy Interviewing!&nbsp;<\/p>\n\n\n\n<p><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">If you wish to explore more questions like these, I have them all at\u00a0<a href=\"http:\/\/frontprep.com\" target=\"_blank\">FrontPrep<\/a>, the platform is a one-stop platform for front-end interview preparation.<\/span> It helps frontend engineers at any level, from junior to staff, prepare for front-end interviews. It has over 300 questions from top tech companies such as Amazon, Google, Meta, Microsoft, Apple, Netflix, and Uber. You get prompts, hints without spoilers, a solution with best practices, and, most importantly, the interviewer criteria (the actual rubric interviewers use to evaluate you). We have a browser playground for you to run and preview your output, company-tagged questions, and curated practice lists.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A look at an example task an interviewer might give you and all the details of how you could approach and and what they are watching for.<\/p>\n","protected":false},"author":47,"featured_media":8998,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[22,62],"class_list":["post-8990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-job-hunting","tag-react"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2026\/03\/interview.jpg?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/8990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=8990"}],"version-history":[{"count":12,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/8990\/revisions"}],"predecessor-version":[{"id":9103,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/8990\/revisions\/9103"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/8998"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=8990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=8990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=8990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}