Designing Scalable Frontend Systems

Attend your next frontend system design interview round with confidence

What you will learn

Designing frontend for crypto orderbook.

Differences between HLD / LLD.

Know the Interviewer’s expectations.

Representing the complete HLD / LLD.

Create a complete sequence diagram.

Identifying the right tech stack.

Consideration aspects for the use case.

Leveraging generic templating mechanism.

Component-based architecture design.

Identifying components in the UI

Identifying API schema definitions.

Connection to downstream services.

Writing Pseudo code for solutioning.

Download the complete design file.


**This is the recording of a LIVE session I conducted on Designing Scalable Frontend Systems. The design file is also attached in the closing note section for your future reference**

Exactly 1 year ago, in Feb 2021, I gave an interview for the E5 ( Senior SDE ) position in Facebook, London ( React core team ) But little did I know that my dream of working with Dan Abramov would get shattered due to 1 mistake.

I neglected the design round.

I thought cracking an interview is just about showing that I can solve problems and implement features that the interviewer would ask me.​

After I failed that design round, I decided that I should become better at representing systems and focusing on various aspects that I should talk about in that specific round. I should clearly represent HLD, LLD & focus on the component architecture.

Hello, my name is Manoj Satishkumar.

I have attended interviews in 35+ companies and got selected by multiple companies including Walmart, PayPal, Oracle, Tesco, JP Morgan, and Cerner. This is a LIVE session I conducted for all the job seekers who are able to crack the coding round but are not able to crack the design round.

I am trying to shed light on what are the aspects interviewers look at in the frontend design round. We will draw in-depth HLD / LLD / Sequence block diagrams and also write pseudocode in this session.

“I wish you all the best in your upcoming interviews”



Introduction to the session

Welcome to the session
About the instructor
The facebook background
Design … Round … Ready
Agenda – What will you learn ?
Diagrams and pseudo code
Let’s get started !

The Design Round Question

The crypto exchange order book
Interviewer’s expectations
Diffferences between HLD & LLD

High Level Design ( HLD )

A quick recap of the question
Front-tier, Mid-tier and DB client
Template based rendering unit
Quick Summary of HLD

Low Level Design ( LLD )

Let’s get started with LLD
The sequence of explanation
Choosing the frontend frameworks
Representing the tech stack
Identifying the UI components
Determining API schema definitions
Identify the template definition
Let’s write some pseudo code
Quick summary of LLD

The Sequence Diagram

Getting the order book data
Placing a buy order

Closing notes

A quick recap of the session
Download the design file
Congratulations! You are now design round ready.

The post Designing Scalable Frontend Systems appeared first on StudyBullet.

Check Today's 30+ Free Courses on Telegram!

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock