Front-end engineer interviews at Meta (formerly Facebook) are really challenging. The questions are difficult, specific to Meta, and cover a wide range of topics.
The good news is that the right preparation can make a big difference, and can help you land a front end engineer job at Meta. We have put together the ultimate guide to help you maximize your chances of success.
Here's an overview of what we will cover:
Click here to practice with engineering interview coaches
1. Interview process and timeline
What's the Meta front-end engineer interview process and timeline? It usually takes around two months and follows these steps:
1.1 What interviews to expect
- Application and referrals
- Recruiter phone screen
- Technical screening
- Onsite interviews
Let’s take a look at each of those steps in a bit more detail.
1.1.1 Application and referrals
First, recruiters will look at your resume and assess if your experience matches the open position. This is the most competitive step in the process, as millions of candidates do not make it past this stage.
So take extra care to tailor your resume to the specific position you're applying to.
If you’re looking for expert feedback, get input from our team of ex-Meta recruiters, who will cover what achievements to focus on (or ignore), how to fine tune your bullet points, and more.
If you do have a connection to someone in Meta, it can be really helpful to get an employee referral to the internal recruiting team, as it may increase your chances of getting into the interview process.
1.1.2 Recruiter phone screen
In most cases, you'll start your interview process by talking to an HR recruiter on the phone for 15-30 minutes. They are looking to confirm that you've got a chance of getting the job at all, so be prepared to explain your background and why you’re a good fit at Meta. You should expect typical behavioral and resume questions like, "Tell me about yourself", "Why do you want to work at Meta?", as well as some basic JavaScript questions.
If you get past this first HR screen, the recruiter will then help schedule a technical screen with a Meta engineer.
One great thing about Meta is that they are very transparent about their recruiting process. Your recruiter will therefore walk you through the remaining steps in the hiring process, and will also share with you a helpful email with resources you can use to prepare.
1.1.3 Technical screening
If you make it past the HR screen you’ll have one or two initial 45-minute technical screenings which usually take place online. Your interviewers may start with a few behavioral questions but most of the time will be spent on coding questions (i.e data structures and algorithms, etc.)
You'll use a simple online code editor without syntax highlighting or auto-completion for these phone interviews (e.g. CoderPad) and it's a good idea to get used to using one of them beforehand.
1.1.4 Onsite interviews
If you make it past the technical screening you’ll be invited to the real test: a full day of “onsite” interviews at a Meta office. As you can see in this extremely helpful guide from Meta, you can expect four, 45-minute interviews, including:
- Coding interviews (x2), with questions on data structures and algorithms, and with a practical focus on what you might encounter building user interfaces at Meta.
- Design/architecture interview, where you'll be asked how you would build web application products and how you'd handle UI components.
- Career and coding interview, where you can expect behavioral questions about your background and motivation as well as some more coding questions.
In addition to these interviews, you'll also have lunch with a fellow engineer while you are onsite. Lunch is meant to be your time to ask questions about what it's like to work at Meta. The company won't be evaluating you during this time, but we recommend that you behave as if they were.
[COVID note] It's likely that your onsite interviews will be held virtually instead of in-person, given the COVID-19 pandemic. However, your recruiter should be able to provide you with the most up-to-date information on Meta's onsite interview procedures. Feel free to ask your Meta recruiter for details after you've been officially invited to participate in the onsite interviews.
1.2 What happens behind the scenes
Throughout the interview process at Meta, the recruiter usually plays the role of "facilitator" and moves the process from one stage to the next. Here's an overview of what typically happens behind the scenes:
- After the technical screening, the interviewer you've talked to will have 24h to submit their ratings and notes to the internal system. Your recruiter then reviews the feedback, and decides to move you to the onsite interview or not depending on how well you've done.
- After the onsite, your interviewers will make a recommendation on hiring you or not and the recruiter compiles your "packet" (interview feedback, resume, referrals, etc.). If they think you can get the job, they will present your case at the next candidate review meeting.
- Candidate review meetings are used to assess all candidates who have recently finished their interview loops and are close to getting an offer. Your packet will be analyzed and possible concerns will be discussed. Your interviewers are invited to join your candidate review meeting, but will usually only attend if there's a strong disagreement in the grades you received (e.g. 2 no hires, 2 hires). If after discussion the team still can't agree on whether you should get an offer or not, you might be asked to do a follow up interview to settle the debate. At the end of the candidate review meeting, a hire / no hire recommendation is made for consideration by the hiring committee.
- The hiring committee includes senior leaders from across Meta. This step is usually a formality and the committee follows the recommendation of the candidate review meeting. The main focus is on fine-tuning the exact level and therefore the compensation you will be offered.
It's also important to note that hiring managers and people who refer you have little influence on the overall process. They can help you get an interview at the beginning, but that's about it.
2. Example questions
As we mentioned above, for the position of Meta front end engineer you'll face three types of interviews:
- Coding
- Design and architecture
- Career
Now let’s take a look at what you can expect from each interview. We’ve analyzed scores of candidates’ interview reports on Glassdoor and Rooftop Slushie to provide you with real questions asked by Meta. We've categorized them and we've changed the grammar and phrasing in some places to make questions easier to understand.
Let’s get into it.
2.1 Coding interviews
As we’ve mentioned, coding interviews will make up a major part of your interview process at Meta, first during the technical screening and then with two, 45-minute coding interviews when you get onsite.
You can expect the questions to be mainly on JavaScript, HTML, and CSS. Think Leetcode-type questions involving data structures and algorithms but with a practical focus on what you might encounter building user interfaces at Facebook. You’ll need to provide accurate, bug-free, efficient, and well-thought-out code, and you should share your thought process out loud while you work through it on a whiteboard (or online equivalent).
We’ve analyzed the data on Glassdoor to provide you with some real examples of questions that Meta has asked in front end engineer interviews.
Finally, we recommend reading this guide on how to answer coding interview questions and practicing with this list of coding interview examples in addition to those listed below.
Example coding questions asked in Meta front-end engineer interviews
-
In JavaScript, write a function that takes an array as input that can contain both ints and more arrays (which can also contain an array or int) and return the flattened array. [1, [2, [ [3, 4], 5], 6]] => [1, 2, 3, 4, 5, 6]
-
Take an array of N elements in the form "property1: value1; property2: value2;...;propertyX: valueX;" for some N and any X. There is also another array of M elements of the form "property: value". Write an algorithm to remove every element in the N length array that has a "property: value" pair in the M length array.
-
If you have 500 revisions of a program, write a program that will find and return the FIRST bad revision given a isBad(revision i) function
- Implement a simple store class with set(Node, value), get(Node) and has(Node) methods, which store a given Nodes with corresponding values
- Explain the concept of ES6 Promises to a 5-year-old
- What are the advantages of using ES6 maps over objects?
- What about using ES6 sets over arrays?
- Write an emitter class:
/* emitter = new Emitter();
// 1. Support subscribing to events. sub = emitter.subscribe("event_name", callback); sub2 = emitter.subscribe("event_name", callback2);
// 2. Support emitting events. // This particular example should lead to the "callback" above being invoked with "foo" and "bar" as parameters. emitter.emit("event_name", foo, bar);
// 3. Support unsubscribing existing subscriptions by releasing them. sub.release(); // "sub" is the reference returned by "subscribe" above
- Given a grid of characters, output a coded message
- Implement a square root function
- How many times would “addEventListener('scroll', handleScroll);” run as the user looks at their News Feed? And what would be user experience if the “handleScroll” function takes 100ms to execute? Secondly, how could you implement debouncing? Say you wanted the “handleScroll” function to be called only after 200ms has passed between scroll events?
- Given two identical DOM tree structures, A and B, and a node from A, find the corresponding node in B
- Using HTML and CSS, show how you would create an image that would display another image (aligned to the bottom, right) when the user hovers over the image. E.g. the Facebook "edit profile picture" icon
- Design a poll widget
- How would you ensure that clicking on this picture would go to a specific link?
To see more example coding questions asked by Meta in engineering interviews, check out our software engineer interview guide, where we’ve included example questions that also have links to free solutions.
2.2 Design and architecture interview
Meta front end engineers design user interfaces that billions of people around the world will interact with. They need to have a strong understanding of web browsers, the DOM, performance, and API design.
In this interview, you’ll typically be asked a quite open-ended question about how you would design the front end architecture of a common application. You should drive the conversation by asking clarifying questions, discussing the pros and cons of various approaches and describing the utility of each component that you propose to use.
We analyzed candidates' interview reports on Glassdoor and Rooftop Slushie to find some real example questions that you can practice with. Let’s take a look.
Example design and architecture questions asked in Meta front-end engineer interviews
- How would you implement a newsfeed (which has only posts of text and pictures)?
- How would you implement a photo album?
- Design and code a Pinterest-style UI, where cards stack top/down and scroll infinitely
- Design a component to support rich text content creation across products, with the following critical features: block-level styling (list items, blockquotes, etc.), inline-level styling (bold, italic)
- Design a general-purpose typeahead component
For more help on how you should approach this interview, we recommend reading the following guide on how to answer system design questions. You should find it very useful, just bear in mind that the design and architecture questions you face will have more of a UI focus.
2.3 Career interview
The name 'career interview' is slightly unclear. In practice, it consists of behavioral and resume questions in the first part, with a coding interview in the second. This coding interview is simply to supplement the main coding interview which we've already discussed, focusing on HTML and CSS. In this section we're going to focus on the behavioral part of the interview.
The behavioral questions will aim to test your capacity to communicate clearly, work with others efficiently, build trust and relationships, etc. This is important because Meta engineers usually work in cross-functional teams with other engineers, product managers, designers, data analysts, etc.
You'll need to show that you have a capacity for conflict resolution, empathy, motivation, initiative, perseverance and self-improvement, and that you can deal with ambiguity.
Below we've listed some frequent behavioral questions that Meta tends to ask, according to data from Glassdoor. We’ve included questions taken from software engineer interviews, as well as front-end ones, because they tend to be very similar in this round. To dig deeper into them, check out our articles on how to answer behavioral interview questions and the "Why work at Meta?" question.
Example behavioral questions asked in Meta engineer interviews
- Tell me about a difficult problem that you had to solve
- Why Meta?
- Tell me about yourself
- Tell me about a recent/favorite project and some of the difficulties you had
- Tell me about the greatest accomplishment of your career
- Tell me about a time you struggled to work with one of your colleagues
- Tell me about a time you had to resolve a conflict in a team
- Tell me about a time you were given feedback that was constructive
- Tell me about a time you had to step up and take responsibility for others
- Tell me about a time you struggled on one of your software projects
- Tell me about your worst boss and why they were bad
3. How to prepare
Now that you know what questions to expect, let's focus on how to prepare. It's no secret that the performance bar at Meta is high. Some people even go as far as quitting their job to prepare for interviews full-time.
This is obviously extreme and not what we recommend doing, but it shows how much effort some candidates are ready to put in. We've listed the four steps we recommend taking to prepare as efficiently as possible below.
3.1 Learn about Meta's culture
Most candidates fail to do this. But before investing tens of hours preparing for an interview at Meta, you should take some time to make sure it's actually the right company for you.
Meta is prestigious and it's therefore tempting to ignore that step completely. But in our experience, the prestige in itself won't make you happy day-to-day. It's the type of work and the people you work with that will.
If you know engineers who work at Meta or used to work there it's a good idea to talk to them to understand what the culture is like. In addition, we would recommend reading about Meta's 6 core values and Facebook's hacker culture.
3.2 Practice by yourself
First of all, for a great overview of what to expect and some invaluable tips, you’ll want to read Meta's own guide to the front-end engineer interview process. Then you’ll want to start digging a bit deeper into each of the three types of interviews you’ll be facing (coding, design and architecture, and career) and start to practice answering them by yourself.
For coding questions, we recommend using our coding interview prep article as your one-stop shop to guide your prep process. It has a 7-step preparation plan and links to the best resources.
If you haven’t already, you should also take a look at our Meta software engineer interview article for useful example coding questions and additional information.
For the design and architecture interview (which Meta themselves say is the hardest one to prepare for), we recommend studying our system design interview guide and learning how to answer system design interview questions. These guides cover a step-by-step method for answering system design questions (which are very similar to the design and architecture questions you’ll face, but with a back-end perspective) and provide several example questions with solutions.
For the career interview, we recommend learning our step-by-step method for answering behavioral questions. In addition, you'll want to write down your answers to the example questions we gave you in the previous section.
We also recommend FrontendLead as a prep resource for front-end interviews.
Once you’re in command of the subject matter, you’ll want to practice answering questions. But by yourself, you can’t simulate thinking on your feet or the pressure of performing in front of a stranger. Plus, there are no unexpected follow-up questions and no feedback.
That’s why many candidates try to practice with friends or peers.
3.3 Practice with peers
If you have friends or peers who can do mock interviews with you, that's an option worth trying. It’s free, but be warned, you may come up against the following problems:
- It’s hard to know if the feedback you get is accurate
- They’re unlikely to have insider knowledge of interviews at your target company
- On peer platforms, people often waste your time by not showing up
For those reasons, many candidates skip peer mock interviews and go straight to mock interviews with an expert.
3.4 Practice with experienced Meta interviewers
In our experience, practicing real interviews with experts who can give you company-specific feedback makes a huge difference.
Find a Meta front-end engineering interview coach so you can:
- Test yourself under real interview conditions
- Get accurate feedback from a real expert
- Build your confidence
- Get company-specific insights
- Learn how to tell the right stories, better.
- Save time by focusing your preparation
Landing a job at a big tech company often results in a $50,000 per year or more increase in total compensation. In our experience, three or four coaching sessions worth ~$500 will make a significant difference in your ability to land the job. That’s an ROI of 100x!