All you need to know for your next frontend system design interview 🚀

Frontend system design questions can vary from easy to hard, there are very high chances (almost 70–80%) that you have already seen the question during interview prep, but what to do if the question is completely out of the box, and you don’t have any idea what to do.

if you don’t know how a frontend interview is structured I recommend you to go through this article to get a clear idea about the number of rounds and what exactly is expected in each round.

The overhyped term — Frontend system design

Many people think system design is only backend system design which includes, server scaling & handling request loads, but system design is beyond the backend, Anything that involves properly building a system using some pre-defined rules in the correct order can be considered as system design.

Even if a shopkeeper can learn and implement shop system design to scale its operations and increase its profit, just that the rules will be according to the nature of its business.

How to approach a system design problem

Let’s say the interviewer has asked you to build a web app for XYZ purpose and this question is something you have not read before and don’t know where to start.

Now that you have the question, before jumping directly into anything ask questions and doubts from the interviewer about the app features, and requirements, these questions will help you decide on strategies to use while framing the system design for the application.

After clearing out everything about the app features, start picking up the points mentioned below and explain every point in detail with proper reasoning.

Note: Below mentioned points are some of the most relevant points which should be covered while answering a system design question, you can increase or decrease the number of points based on the questions & the scenario of the interview

1. Rendering ⭐️
2. Framework
3. State management ⭐️
4. CSS & Theming ⭐️
5. Translation & Internationalization support
6. Accessibility
7. Authentication
8. Data fetching techniques
9. Performance & Optimisation (Important ⭐️)
10. Testing (Unit testing and integration testing)
11. Handling some of the key utility functions
12. Building the App & Deployment (optional)
13. Some points around backend (optional)

Uff 13 points, that is a lot to speak in a 20–30mins system design right, actually no, the interview is not about checking to mark all points, it’s all about proving that you know how to design an app, some points will be one-liner some points may take more space, it all depends on the nature of the question which interviewer has asked, and mostly there are only 4–5 points which are deciding factor whether you are pass or fail

Now let’s discuss some of the above points in a brief

I believe if you are reading this article you are not a beginner and already know some of the things, so I will explain those points in which there are high chances of getting stuck while answering.

Rendering

Depending on the nature of the app, you need should answer this point, if the question is around the app that needs SEO, you can go with SSR (Server side rendering), SSG (Static site generation), or ISR (Incremental site generation), similarly CSR (Client side rendering) is preferred if you are building an App, which is an internal dashboard or something that doesn’t require SEO, further you can explain about pros and cons around each of this rendering techniques, also if an App has some parts which require SEO and some don’t require SEO then based on the requirement you can also use hybrid rendering techniques, you can read about all these things in detail from the internet.

Framework

Now that your rendering technique is finalized, you can go to the next thing which is deciding on the framework, to be honest, it depends on company to the company 90% of the time they already have a framework set with them but in case if the interviewer asks you to choose a framework. You have to be smart and explain your choice with proper reasoning, here you have to define the key benefits of one framework over another for example: React is faster than Angular because it uses virtual DOM, and it is better than Vue because it has better community support, and similarly Next.JS or Nuxt.JS should be should if you are building an App which uses server-side rendering. A well-thought-out answer backed by your personal opinions should be given in this situation.

State management

It is a very important, topic because state management will decide how well your app will scale, here you should cover the following points.

1. How are you planning to manage the state locally or globally for different components of your application?
2. If you need a state management solution like Redux or Zustand, then what are their pros and cons, you should know scenarios in which these solutions should not be used.
3. A data structure in which you want to store data, to maintain different UI states example, here you can also explain the the optimized approaches which can help in accessing data faster from state.Example of storing data in redux

CSS & Theming

UI is incomplete without good CSS, When choosing a UI component library or a CSS framework following things should be considered.

1. It should have good community support
2. The components you are getting from the library should fit your application use case
3. It should be optimized to give a faster page load
4. It should be extensible so that tomorrow if you want to apply a custom theme to it you can easily do that.

Performance & Optimisation

It is very important to think about performance from day 1 because it can become worse with time, here you have to explain majorly 2 things.

1. How you can measure a website’s performance (Mainly the tools that are available in the browser)
2. What are the steps you should take after identifying the issue

Testing (Unit testing and integration testing)

You are a developer your main task is to write code for features only not for tests— this mentality is very bad, and if you have such kind of mentality you should improve it first.

Here you should know the following things

1. How to choose a testing library
2. Write basic unit and integration test cases
3. Importance of test automation in CI/CD

These are some of the points which I feel should be covered in a frontend system design interview.

That’s all from my side, All the best for your next interview, please let me know in the comments of this article if this helped you even 1% in your interview.

If you like this article and want to learn more around frontend development with personalized classes and mentorship from a seasoned professional. With 4 years of hands-on experience contributing to top products used by industry giants like Amazon, Flipkart, Urban clap, Meesho, Dominos, Swiggy, etc. I specialize in React, Node.js, TypeScript, and System design. Let’s elevate your career together! Reach out at [email protected] or connect on LinkedIn.

Any suggestions or corrections for this article are welcome. Stay tuned for more articles. Happy coding till then !❤.