Building web in 2024

Full Stack coding interviews - how it was in 2024

In this article, I want to zoom in on coding interviews for Senior Full Stack JavaScript roles at small to medium-sized companies (not FAANG!). Below, I share my experiences interviewing for these roles from both sides of the table.

Categories of tasks

Good news: Most companies can’t afford a super complicated full stack coding task in a typical 1-hour interview. They can’t have too many interview rounds either because both candidates and interviewers are busy.

As a result, most companies come up with something relatively standard, often not too relevant to the actual role, but certainly manageable after some prep work. I identified five categories (or archetypes) of live coding tasks for Full Stack JavaScript roles.

Category 1: Data Structures and Algorithms (DSA)

🎯 Goal: demonstrate confident usage of arrays, loops, hash maps etc.

From my modest experience, LeetCode-like questions are still very popular in interview pipelines, including for Full Stack roles. While I see them as a waste of time, they do have their benefits:

  • Programming language independent
  • Easy to measure (solved / not solved, in what time, Big O, etc.)
  • Large pool of tasks of various levels
  • Tests-friendly

Prep tips:

  • Focus on easy (70%) and medium (30%) tasks (LeetCode 75)
  • Talk out loud as you solve a problem (imagine you’re streaming on Twitch)
  • Use TypeScript (but perhaps solve a couple in plain JS)
  • Implement Bubble Sort and Quick Sort from memory (ThePrimeagen’s course)
  • (Re)read Big O section from the Cracking the Coding Interview book (or alternative)
  • Solve a couple of easy problems using lightweight TDD approach

Because I don’t sort arrays in place in my normal professional life, this type of task requires the most prep effort from me.

Real problems from my interviewing experience:

  1. Determine if a given number is a prime number.
    This is one of the first examples in “Cracking the Coding Interview”, and yet people still ask it in interviews as a “sanity check”
  2. Calculate the N-th number in the Fibonacci sequence.
    I was asked to use my own IDE and took the opportunity to drive the solution with tests, which gave me bonus points with the interviewer
  3. Return an array of sums of columns in a matrix
  4. Shift all zeros to the end of an array
  5. Flatten a deeply nested JS object into a new object with properties in the format “propNameLevel1.propNameLevel2.propNameLevel3”.
    I got lost in recursive calls and failed that round

Category 2: React (Vue/Angular) exercise

🎯 Goal: demonstrate confident frontend coding

If the role involves React, the pipeline will almost certainly include a React coding exercise.

Prep tips:

  • Practice building simple components from scratch, with minimal dependencies
  • Try to keep all code in one file for as long as possible. If it gets too long, you are doing it wrong
  • Make use of all common hooks. In practice, I’ve only needed useState and useEffect during my interviews, but it’s good to be overprepared
  • Reread the entire useEffect documentation page (I learn something new every time!)
  • Build a simple Todo app using built-in fetch for data fetching
  • Challenge your data fetching implementation for potential race conditions, missing error handling, CORS, slow network support etc.
  • Cover your app with different types of tests

Nothing feels more awkward in a React interview than when a candidate struggles to write useState without Copilot. A day of prep can make a huge difference.

Real problems from my interviewing experience:

  1. React Like Button (example)
  2. Redux Shopping Cart (example) - yes, Redux is still a thing
  3. React StarRating component
  4. React Stopwatch component

Category 3: REST endpoint

🎯 Goal: demonstrate confident backend coding

Another popular task is to build a REST endpoint and/or read data from it.

Prep tips:

  • Build a simple CRUD REST API using two different REST libraries (e.g. Express and Hapi)
  • Implement GET, POST, PATCH, DELETE verbs with fake/in-memory data
  • Implement basic pagination
  • Build a simple endpoint in raw Node.js (for example, streaming a big CSV file)

Real problems from my interviewing experience:

  1. Given a JSON contract, build GET and PUT endpoints
  2. Fetch data from an external resource, sort and expose via GET endpoint

Category 4: Take home tasks

🎯 Goal: set the stage for the in-person discussion

Take home tasks allow companies to go beyond basic fetch, GET and useState by letting candidates spend more time on the task. Remember that just solving a take home task is not enough to succeed. You need to prepare for further discussion and live code changes.

Prep tips:

  • Add tests!
  • Make sure you are proud of the code you’ve written. A personal touch is a plus too.
  • If you had to write a lot of code, reassess. Is there a simpler way?
  • Make sure you understand every single line of it.
  • Be able to explain every decision you’ve made: libraries, naming, algorithms, testing strategy, etc.
  • Come up with a couple of additional features for the task and try to implement them without sharing with the interviewer
  • Add tests!

Real problems from my interviewing experience:

  1. Implement search UI by screenshot
  2. Build markdown editor

Category 5: code katas

🎯 Goal: demonstrate professional coding style (testing, debugging, refactoring, pairing, etc.)

Unlike LeetCode questions where the main goal is to solve the problem, code katas are focused on the process rather than the end result. In fact, many of them are open-ended and can have many “correct” solutions.

Prep tips:

  • Practice popular katas (Gilded Rose, String Calculator, Mars Rover, Tennis, Bank Account)
  • Practice them again. The whole point of katas is to repeat them again and again to sharpen your skills and uncover nuances.
  • Find a community to practice collaborative design and pairing (or organize one)

I haven’t experienced classic code katas in interviews, but I know they are not uncommon. Practicing them can help with other types of tasks too.

Mixing categories

🎯 Goal: demonstrate broad set of skills

In practice, companies only have an hour or two to assess a candidate’s coding skills. As a workaround, they may come up with a Full Stack task that contains a bit of everything: design a contract, implement custom business rules, expose an API endpoint and render it with React. While it sounds like a lot, the interviewers likely expect simple, standard solutions that you can surely implement.

Traits of strong candidates

Now that we’ve covered all common categories of live coding tasks, let me share my observations on what makes a Full Stack developer stand out in a live coding interview.

Bias, bias, bias

A lot of candidates that I liked just played to my biases. They mentioned something I strongly agreed with. They impressed me by writing a reduce function on first try. They named a variable applesauce, etc. Despite our best efforts to address our biases, interviewing will never be fair and objective.

Now, to the actual traits.

Keep code green

Successful candidates tend to test their code often even if there are no actual tests. It can be as simple as refreshing the browser or printing a variable via console.log. As a result, code is always green (runnable), without random typos or unfinished pseudocode.

Show off without writing code

Candidates often trap themselves when they try to show off. I noticed that strong candidates prefer mentioning unessential code improvements (like useMemo) without actually implementing them. Usually interviewers are happy enough to move on and get an impression that the candidate knows how to code what they’ve just suggested. I’ve seen multiple times how this helped candidates pivot or extend code quicker because they kept it simple. It’s tempting to extract code into a separate function, file, or component, but great candidates know to delay it until absolutely necessary.

Know coding symbols names in English

Slow and error-prone coding without an AI assistant can be perceived as confident and professional if accompanied by clear communication of what’s happening. Knowing the names of all the common symbols is essential.

Engage the interviewer

A coding interview is supposed to focus on code, but at least half of its success lies in great communication. Clarifying the task and expectations, deciding on the approach, nailing the details, offering improvements and opinions - all of that affects how the candidate will be judged. Unfortunately, we all are biased, and what works for one interviewer may not work for another. Great candidates listen to signals from the interviewers and calibrate their communication style accordingly.

Confident coding basics

It’s difficult for candidates to communicate well if they are stuck mapping one array to another. Fluent knowledge of the basics of the language or framework frees up mental capacity for meaningful communication. For example, in a React exercise, the following can be considered the building blocks:

  • A functional component with typed props
  • useState
  • useEffect
  • Common JS Array functions (map, find, filter)
  • Promises and async / await

If all above sounds trivial, great! Just make sure you can code your way through those basics.

Keep a steady pace

Time constraint is real and it would be unfair to give “Don’t rush” advice. One has to rush to deliver meaningful results in the interview setting. Still, strong candidates somehow manage to keep a steady pace without creating a sense of rush.

Mention tests

The harsh reality is that very few developers write tests regularly. Strong candidates know how to bring up the topic of testing without necessarily applying TDD to the task at hand.

To summarise

Interviewing for Full Stack roles at small to medium-sized companies has its own specifics. For me, the key is to narrow my prep efforts to the right category of tasks and focus on the basics. Of course, coding interviews are just one part of the job hunting process. I found the recent “An Engineering Leader’s Job Search Algorithm” extremely thorough and relevant. I hope this article complements it well for those who are looking at Senior Full Stack roles specifically.


Profile

Hi, I’m Kate 💡

I’m a Full Stack Developer and Engineering Mentor, obsessed with regular expressions, books, and web technologies. In my work, I mix old with new, soft with hard, cats with dogs. When it’s not a disaster, it’s pure magic!

LinkedIn ~ Twitter ~ Mastodon ~ RSS

Building web in 2024