How to prepare for a Front End System Design Interview

Recently I’ve been going through a number of interview processes, some of them involving System Design. It is not the first time I do this type of interviews and I know how challenging they are and how even more challenging they seem.

I decided to put in words this short compilation of my own experience due to the fact that many Engineers — especially my colleagues on the Client Side of the Web Development —consider this type of interview to be very complicated, ambiguous and even biased. Many of them — including me — do not face System Design problems in their daily routine and lose confidence when having to solve them in an interview.

In this article I will concentrate on the Front End, but many things I mention also apply to the ‘traditional’ System Design.

Front End Engineers and System Design

System Design is the process of designing a complex software system from scratch that meets specific functional and non-functional requirements. Common tasks in a System Design interview can range from designing a simple application to manage a parking lot to a complex system like Google Search Engine.

You may wonder why would someone ask a Front End Engineer to design a complex software system. The point is to highlight their understanding of the software ecosystem. Front End developers need to know how to work with APIs, where to get assets from and what to pay attention to in an application with regard to its usage patterns.

Moreover, as an engineer gains experience and takes on more responsibilities, they may be expected to collaborate with other teams and participate in high-level discussions about the system’s architecture. In these cases, having a good understanding of System Design principles will be essential.

Not every company leverages System Design in their interview process. A Front End System Design interview may indicate that the company has a DevOps-oriented culture and expects their engineers to have a broad understanding of the entire software system, rather than just being focused on their specific domain.

Furthermore, in some companies, the Front End engineer’s role may overlap with that of a Tech Lead, which requires a deeper understanding of system design principles.

Front End System Design interview preparation

1. Review your CV

During an interview it is crucial to be able to speak confidently about the projects and experiences you’ve included on your CV. If you write 4 years of work with AWS but during the interview struggle to remember at least some of their core services by their name — that will almost certainly raise a red flag in the eyes of the interviewer.

2. Master the Basics

The book by Alex Xu is an excellent resource for anyone looking to learn about System Design from scratch. The book does not concentrate on the Front End but in my opinion is a Must Read if you are not feeling confident going into a traditional System Design interview. I also bought the 2nd part even though I didn’t have to prepare for an interview anymore and I totally love it!

Another great resource is the AlgoExpert web course on System Design. Some basics overlap with the aforementioned book, but I still recommend to watch it entirely for the sake of repeating the essentials. The course also includes mock interviews and practice problems to help you apply what you’ve learned.

3. Do Mock Interviews

Once you have learned the theory — try to practice System Design problems with a friend or colleague. I did it multiple times before going into an actual interview and it improved my System Design abilities significantly.

Doing these excercises I was able to analyze and create the context of an unknown System Design problem much faster. I think such excersises are especially helpful when preparing for a System Design interview as it is supposed to be a discussion more than just problem solving.

4. Master Front End

I will talk more about that further down below.

System Design Interview Tips

1.Ask Questions

System Design interviews typically involve a task with little to no precise description. It’s up to the candidate to ask clarifying questions and gather information in order to understand the exact requirements.

It is also the candidate’s problem if in the middle of the interview they realize they have to redesign the entire system because they weren’t aware that in addition to text they also need to store images and videos.

Common questions you as a candidate may ask your interviewer are:

• What is the exact list of features we need to implement?
• How many Daily Active Users do we expect?
• Is it going to be mobile app only or do we also need a web app?
• Is the app going to be global or limited to a concrete location?
• Are there any strategical plans for the app? Are we going to scale or add some complex features with time?

2. Be proactive. Suggest ideas and lead the dialogue.

That’s about it. Ask good questions when you feel they are required and at the same time demonstrate solid knowledge and understanding of modern software systems.

Remember — this is not a Q&A session. Do not expect your interviewer to constantly poke you with different questions. I would even dare to say that if they do— you probably are doing something wrong. The candidate is expected to take the initiative here.

3. Write down everything

I personally love to write down every bit of information I get from the interviewer or my own thinking process. That gives me multiple benefits. First — I know that every thing written is a thing I am aligned with my interviewer on. Second — I can always come back to what I’ve written later in the interview. System Design requires you to disperse your attention which might lead to forgetting important requirements or limitations. Finally — it is easier for the interviewer to assess my thinking process after the meeting by looking at the notes I left.

My approach to System Design.

1. Start with a Big Picture.

You can quickly sketch a very simple schema. That way you will demonstrate familiarity with the basic components of a modern software system, meanwhile being able to think about the next steps.

In web development, the three-tier architecture is a common starting point.

If the system requires handling large files, you may need to consider using an object storage service, such as Amazon S3.

Adding a load balancer in front of the application tier and a cache in front of the database can help to improve scalability and performance.

It is important to be vocal and communicate your thought process to the interviewer. This helps to guide the discussion in the right direction.

2. Choose the next Battle. Do not go too deep.

Once you have the big picture of the system in place, you can start to dive deeper into specific components. This might be the choice of database, adding a CDN, implementing auto-scaling to handle fluctuations in traffic, or focusing on the Front End. If you are not sure what to focus on — ask your interviewer for guidance.

Do not get caught into the trap of concentrating too much on a single feature or component. Ask your interviewer whether you should go one level deeper.

Example:
Candidate: ‘I go with PostgreSQL for the reasons A, B and C. Should I draw the tables and connections between them or can we leave it for later?’

Interviewer: ‘That is fine, thank you. For now, please, let’s move on to discussing the availability of our system.’

3. Be careful about using buzzwords.

Some interviewers may appreciate your ability to name a ton of tools, others may require you to talk about those technologies in more depth and see it as a red flag if you can’t.

Also be prepared to explain why you chose a particular technology and not its alternatives E.g. why PostgreSQL and not MariaDB?

Overall, the key is to strike a balance between demonstrating your technical expertise, and avoiding the impression that you’re just name-dropping technologies without really understanding them.

How to design the Front End?

If you are interviewing for a Front End role it is to expect that a big part of the interview will be dedicated to the client side.

I will mention some aspects of the Client Side ecosystem in one or two sentences, otherwise this article will turn into a book. Kindly use the links I left here or google search to get more information about a particular topic.

In my humble opinion, in a Front End System Design interview you should be prepared to talk about…

• …how you serve the assets. Usually a Content Delivery Network (CDN) is the way to go.
• …interactivity. Single Page Applications have become very popular in recent years. Be ready to talk about technologies that allow to create them — from AJAX to client-side routing.
• …Server Side Renderng — its pros and cons.
• …browser’s rendering pipeline, as well as how to use techniques like lazy loading and code splitting to improve page load times.
• …Optimization and performance including compression and minification.
• …bundlers. Webpack is a prominent example.
• …modern HTML features, like the <picture> tag.
• …performant CSS animations.
• …common Front End libraries and tools such as React, Typescript, (S)CSS. Should I repeat that you are better off being able to talk about anything that is visible on your CV? =)
• …accessibility — making your website user friendly by default, especially for users with disabilities.
• …WebSockets, when asked to achieve real-time updates — like in a chat application. Other options could be server-sent events (SSE) or long-polling.
• …web vitals.
• …debugging performance issues.

Finally — though this is more of a Back End feature — be ready to talk about Push Notifications. For some reason many of my interviewers liked to mention this topic — often as a bonus question.

Outro

I hope this little bundle of my experience and insights will be helpful to those preparing for their System Design interviews. I’m happy to see your feedback or any additions in the comments. Also feel free to contact me on LinkedIn. Good Luck in the interviews!