Design Configurable / Dynamic UI | Frontend Mock Interview | HLD | 💪Chakde System Design Ep. 9

In this episode, we have Shivani Tiwari, a UI/Frontend engineer at Flipkart. We will be conducting a Mock System Design Interview on Configurable UI / Dynamic UI.
0:00 Introduction
0:36 Speaker Introduction
2:50 Problem statement
4:10 Requirement Discussion
8:40 Visualizing functional requirement
9:47 Non Functional Requirement Discussion
14:40 Configuration discussion
31:41 CSR, SSR, Prerendering, Static SSR
40:04 HLD
In case you have missed other episodes of the #ChakdeSystemDesign series, do check out :
• Frontend System Design...
⭐️ Courses: learnwithchirag.engineerchira...
Connect to learn & grow together in our career❤️:
✅ Linkedin: / engineerc. .
✅ Twitter: / engineerchirag
✅ Instagram: / engineerchirag
#SystemDesign #FrontendSystemDesign #frontend #HLD #frontend #lowLevelDesign #interviewQuestions #AutoComplete #Typeahead #Suggestions #coding

[@arung007]

Thanks @Chirag & Shivani for taking time out and explain things in detailed

[@engineerchirag]

Glad you liked it Arun!

[@kapilupadhyay5047]

This is great help for senior devs. Really helps visualising how we should approach building any webpage.

[@engineerchirag]

🙂

[@gunjangidwani4276]

Absolutely 🔥🔥. This is gold, great work 👍👍

[@engineerchirag]

Glad you like it! Keep watching @chakdeSystemDesign. Looking for support to spread it to more folks :)

[@hrudayd4217]

Thanks for bringing system design series helps us a lot.

[@engineerchirag]

Keep watching #chakdeSystemDesign and spreading your love for the same ❤️

[@kumarrishabh3587]

Big fan of you after completing the Namaste Frontend System design course.

[@engineerchirag]

Thanks a ton ❤️🙏

[@tuntunpandit8367]

I liked it before watching. I know this is going to be awesome💯

[@engineerchirag]

Thanks for trusting 🥰. Keep watching and sharing #chakdeSystemDesign series 👍

[@sumitsinha995]

What i like most about your lecture is that in between interview you give a little brief...

[@engineerchirag]

There are a lot of hidden gems in between all videos. Keep exploring 😁

[@sumitsinha995]

Very great Chiraj sir &Shivani mam.

[@engineerchirag]

❤️

[@anubhapant5227]

Thanks for bringing this knowledge-packed episode.

[@engineerchirag]

Thanks you ❤️

[@himanshushekhar3694]

Thank you for the great content

[@engineerchirag]

Thanks Himanshu. Keep watching and sharing #chakdeSystemDesign series 🙂

[@Whirlwind03]

Hey Chirag good work, please do more LLD(machine coding) rounds as those are the first / second round for frontend

[@engineerchirag]

Thanks Sajan for your feedback. I have a plan around the same. Looking for support to spread the series to more folks 🙂

[@samerkayali4525]

I love your vídeos!

[@engineerchirag]

Love you brother ❤️. Thanks for your love and support ☺️

[@ajinkyavijay3577]

good job !!

[@engineerchirag]

Thank you! Cheers!

[@JatinKumar-pl4sq]

@chirag thanks for creating these videos. I am really looking for such content. I have a question suppose user lands on the home page at 11:58 and at 12 flipkart want to show a different ui to all user. so will there be a timer running on in client side which will fetch the latest ui from server at 12 or this can be solve with different approach.

[@sarcasticdna]

Can be a server sent event (SSE) OR a long polling might be happening

[@engineerchirag]

SSE, Long polling and web socket are options available. Where most of the time system as long polling as fallback.

[@FriendlyNeighborhood45]

I have a question, how do we decide our implementation? Do we implement our functional requirements first and then we see about adjusting the implementation so that we satisfy our non functional requirements? Or is it that before we implement of functional requirements we see that our implementation is satisfying both functional and non functional requirements?

[@engineerchirag]

Check out this video for detailed answer: kzbin.info/www/bejne/h5bQepmwmKqYg68

[@kumarrishabh3587]

Can someone explain what she is talking about around 30:27 ? I'm not aware of this technique.

[@RaviPrakash-qj2lz]

Hi @chirag! I have few doubts. Doubt 1 At 16:54, is it a right way to inject data in config? Shouldn't the data part be handled separately? Doubt 2 Under the discussion on "instant change of config" 45:51, parser has capability to decide critical pieces for a config. Would those critical pieces will be config independent or dependent? If config dependent, then should we store those critical rules in config itself or anywhere else? Btw, love your #chakdeSystemDesign series.

[@engineerchirag]

Hey Ravi, Doubt1: It is recommended to keep config and data separately. But if the application is small enough you can keep them together.

[@engineerchirag]

Doubt 2: Having fallback in a parser is good to have. But we should always have different config for A/B scenarios .

[@engineerchirag]

Also, rules can be part of the same or separate config depending on complexity and scale of rule.

[@engineerchirag]

Keep watching #chakdeSystemDesign and pls help to spread it to more folks.

[@shaantalk]

Can you please make a video on what things one should take care in terms of security from the frontend perspective ?

[@engineerchirag]

Hey Shaan, I have plan for Security series as well. Hopefully, will record in January. Keep watching and sharing #chakdeSystemDesign series

[@shivani820]

@@engineerchirag lets do this, sounds like a good topic to cover :)

[@sumitsinha995]

cool configuration sir parents are vertically align and child are horizontally align.

[@engineerchirag]

🤣