Frontend Coding Interview Prep

In this Medium post we’ll talk about how to prepare for a coding interview if you’re a frontend engineer at any large FAANG company. Note, this post assumes you’ll be using React and Javascript/Typescript as the core technologies you’ll use, but the principles will apply if you’re using a different set of frontend technologies.

Here’s the post if you’re preparing for a coding interview as a backend engineer.

Overview of different classes of skills

Learning to be great at frontend interviews is a combination of three different classes of skills, and you should aim to practice each one individually, as they come together to form a strong interview performance:

(1) Problem Understanding & Expectations Alignment: This comes down to how well you do understand the problem and have aligned expectations with the interviewer.

• One of the biggest mistakes you can make during the interview is to building something that interviewer is not expecting.
• Once you’re presented with the problem, there is an art/skill to asking follow-up questions that give you valuable information about what to build, while also not appearing as “asking for too many hints”.

(2) Problem Solving & Communicating: It’s important as you make progress on the problem to communicate what is happening.

• Interviewers will give you credit and maybe hints if you are talking about your progress as you work on the problem.
• It’s important to have an intuition for what parts of the problem to tackle first (ie. functionality as opposed to the UI and styling).
• A good approach to sequencing might be something like: (1) Writing out basic structure of components, (2) Implementing core functionality, (3) Styling, (4) Refinement, (5) Testing. After each stage check-in with the interviewer and ensure you’re on the right track.
• Alternatively, if there are multiple milestones or functionalities that you can build incrementally and test them as you’re working on the functionality.

(3) Debugging & Testing: your code will not work immediately when you write it. How quickly you can debug and fix issues will be important.

Skill (1): Problem Understanding/Expectations Alignment

You should practice asking the right questions to make sure you’re building the right things in an interview setting. Find a partner and practice asking each other questions depending on the practice interview question.

(1) Ask interview meta-questions. It’s always good to ask the interviewer a set of “meta-questions” about the interview itself. Some examples:

• How many interview questions or parts will there be?
• For each part to this question, should I look to spend equal time on each or will part 1 take more time than part 2, etc.?

Understanding this can help give you understand the interviewer’s expectations (which includes how advanced/complex to make each part of the application you’re building).

(2) Clarify the specific functionality expectations. Here are some example questions of this:

• Should I make my application mobile-friendly? Should it be responsive?
• If X drop-down gets selected, should I automatically re-render Y component? Or only when the user presses Z button?
• Do I need to worry about various browsers? Or I can assume it’s on Chrome?

Usually “functionality” questions are great to ask since they give you signal about what the interviewer would like to see, but also don’t count as “hints” from the interviewer.

You can also demonstrate your own product intuition by asking “leading” questions, in that you have your own product opinion for how the application should work but are confirming it with th einterviewer.

• For example: “I feel like if the user selects X dropdown, the UI should automatically re-render, since that would be the best experience, but I wanted to double-check with you.”

(3) Clarify the tooling and technological choices you should use.

• Will this be a large scale application or relatively limited? Should I use Flexbox or Float Layouts or Grid Layouts?
• What type of performance characteristics are needed? Will I be loading a lot of data and be pre-fetching?
• Will this application be write-heavy or read-heavy? What will the usage pattern look like?
• Are certain workflows in this application more frequent than others?

Asking these types of questions will both showcase your experience as an frontend applications developer, as well as ensure you build something that matches the interviewer’s expectations.

Skill (2) Problem Solving & Communication

It’s important to practice problem-solving as well as communicating as you solve the problem.

1. Explain what decisions you’re making. It’s good to tie them back to the original functional constraints of the problem. “You mentioned the application will be very large scale, so I’ve opted for CSS Grid layout”.
2. Focus on getting a basic app working first. Try to get a basic version of the application working with basic core functionality before tackling advanced capabilities.
3. Break down functionality. Try to break functionality down into smaller bits. If there’s a piece of functionality or workflow that needs to be written, abstract it as a separate functionality so you can iterate/test it quickly.

Skill (3) Debugging and Testing

1. Shorten the Implement → Feedback Loop. Temporarily alter your code to shorten the implementation → feedback loop. For example, if you test logic that occurs when the user clicks through a few buttons, you can hack the code to trigger that logic / call the function as soon as the page renders. This allows you to test/debug much faster, as opposed to always manually simulating the user clicks to trigger to the logical flow you’re testing.
2. Utilize Console Logging. Be familiar with where console.log outputs in the interview IDE you’re using (e.g. CoderPad or HackerRank)
3. Error Messages. Be familiar with all common React / JS error messages and what they potentially mean, so that you can quickly diagnose the problem. This can save you from subtle bugs that might otherwise be hard to diagnose.
4. Live Reloading. Be familiar with the interview IDE and whether it supports live reloading so you can see changes immediately as soon as you save.
5. Test Incrementally. Test each piece of functionality incrementally so you can catch issues earlier.
6. Simplicity. Keep things simple and avoid premature optimization or complexity. This allows you to debug and reason about the challenges quickly. You can always mention to the interviewer, “I’ll refactor this later” or “I can probably optimize this some more after I get this working.”

How to prepare and practice

Now that we’ve laid out the different types of skills: (1) Problem Understanding / Expectations Aligning, (2) Problem Solving & Communication, and (3) Debugging & Testing, let’s talk about how you should prepare and practice for your interviews.

Get familiar with the interview IDE

Ask your recruiter which interview tool you’ll be using (for ex: HackerRank or CoderPad), and practice your interviews with that IDE tool. Each of these tools have many different aspects, so get comfortable with using various aspects of them.

1. Console and Error Output. Where do console.log or error messages show up? Are they visible in a place that allows you to easily see and debug?
2. Linting and Typing. When you’re using PropTypes or TypeScript how does the IDE underscore or highlight the types and check type compatibility?
3. Running the Code. Be familiar with how to run your code. Do you have to physically press a “run” button or does it automatically reload when files get saved? How are the files (css, jsx, html) linked together in the app?

Study Core Technologies

(1) HTML and DOM/Browser Environment. Have familiarity with how the DOM works.

• HTML5 Tags. Explore new HTML5 tags, multimedia features, accessbility attributes.
• DOM Manipulating. Practice manipulating the DOM using plain Javascript, understanding the rendering process and how the browser updates the DOM.

(2) CSS. You’re probably familiar with the basics, but spend some time understanding the more advanced parts of CSS.

• Layouts. Practice using the different layouts (Float, Positioning, Flexbox, Grid Layout) and when to use them in different scenarios. Practice talking aloud about why you’d use one layout vs. another given a problem.
• Multi-Column Layouts. Also understand different multi-column layouts (column-count and column-width properties.
• Responsive Design. Be familiar with different mechanisms for making your web page adapt to different screen sizes (e.g. Media Queries, Fluid Layouts, or Flexbox and Grid layouts).
• Transitions and Animations. Have some familiarity with transitions and animations to enhance the user experience if needed.
• Sizing and Absolute vs. Relative Units. Understand using absolute (px, pt) vs. relative units (em, %, rem, vw, ch, etc.)

(3) Javascript/Typescript Get familiar with some basic javascript concepts.

• Variables, scope, “hoisting”, closures, data types, type coercion. Be familiar with how variables and constants are defined and how scoping of these variables work.
• Functions, Callbacks, promises, event loop, async programming. Be familiar with functions including the “Arrow Function” syntax so that you can easily/quickly write functions and pass them around. Also get familiar with async functions and non-blocking behavior. Be familar with things like async/await.
• DOM Manipulation. Be comfortable with DOM manipulation.
• Fetching data. Get familiar with the different ways of fetching data from the server or a local file. How to use GraphQL and using RESTful APIs.

(4) React. Be familiar with using React and practice building out various applications.

• Components, States & Props. Understand how to use class and functional components and manage state and pass variables via props.
• Lifecycle Methods: Understand the component lifecycle methods like componentDidMount, componentDidUpdate, componentWillUnmount.
• State Management. Be familiar with additional libraries like Redux, Zustand, Flux, ContextAPI and how to use them to manage state.
• Event Handling. Handle user events like clicks, form submissions and keyboard events.
• React Router. Practice using React Router and understand how Route, Link, and Switch are used and practice creating new routes in your application.
• JSX. Get familiar with JSX syntax and practice making apps with it.
• Data Fetching. Practice handling HTTP/API requests within React components, or loading data from the local filesystem to get your application to work.
• Deployment and Updates. Know ahead of time which IDE (e.g. HackerRank, CoderPad) and how it updates when you update your React app.

Practice your communication and soft skills

When you do your mock interviews (with a practice partner), don’t just practice writing code and solving a given problem, but also practice communicating:

• Practice restating the problem and making sure you align with your practice partner on interview expectations.
• Remember/get in a habit of asking the interviewer the interview time layout. For ex: “how many parts to the problem are there” and “will we spend equal time on each part or will we spend more for part 1 than part 2?”.
• Get comfortable talking through your decision-making and thought process when it comes to making technical choices (e.g. “I’m going to make this variable a const, because xyz”).
• Practice asking clarifying questions to your interview partner and have have them evaluate and recommend additional questions you could have asked during the practice session (e.g. “you could have also clarified the functionality at this point in the interview”).
• When you make a mistake during the mock interview, practice verbally recovering quickly and ensuring your follow-up is correct. For ex: “I made a mistake here, I must have misunderstood the purpose of this boilerplate function, does this look better?”

Tips to Keep in Mind During Interview

Here are a few additional things you should keep in mind as you work through your frontend coding challenge during the interview. You should pay attention to these

1. Get in the habit of asking clarifying questions. Continue to ask clarifying questions both at the beginning and throughout the interview to fully understand what’s expected of you.
2. Mentioning improvements will give you credit even if you don’t implement them. Beyond building a base solution/application, even mentioning things will yield you credit. For example, saying something like “In the long-run I’d totally replace this css with a framework like less or sass” or “The way we fetch data here is really suboptimal, I’d replace it with X or Y”, will often give you credit with the interviewer, even if you don’t implement your own suggestions.
3. Practice and exercise Time Management. You should always have a sense of how many “parts” exist for the interview and how much to allocate to each “part”. This will give you intuition for whether you should move faster/onto the next “part” or take your time in improving the current “part”.
4. Pay attention to the interviewer cues. If an interviewer tells you to focus more on the current part of to move to the next part, you should follow the interviewer instructions. Remember, the goal is not to get the ideal working solution you want, but to provide the interviewer the signal needed. If an interviewer wants you to move on to the next “part”, it’s because there’s some specific signal they’re trying to gather.
5. Don’t forget product aesthetics and usability: It’s likely the interviewer may also want to test your product intuition and usability, so it’s good to keep that in mind during the interview. Even if you end up building a solution that lacks aesthetic or usability appeal, even mentioning it (ex: “We could probably replace this massive dropdown with a search typeahead”) will be very helpful during the interview.