[Front-End System Design] - Typeahead component

[@abhishekkumar98yt]

One of the most well structured and explained system design videos for Frontend Engg.

[@raymondyan3671]

Went through the video about 3 times and it really helps to prepare for the front end system design.

[@gopithangaraj9914]

I wish I had see your videos earlier. Got rejected in system design. I should have put it in the way you had explained. Great content! Will be helpful for my inteview prep! Thanks a lot!

[@AbijithB]

Great content! Thank you for taking the effort to share the knowledge :)

[@aps9369]

Thank you Sir, kindly post more quality videos like this

[@Ahmad-dh6eg]

I got an overall picture of what to consider while designing a front-end application. Superb content. It would be much appreciable if you can share your knowledge some more on front-end system design going forward. Please keep posting videos about front-end system design.

[@adityadubey4578]

This is brilliant, very useful, gonna be very helpful in an upcoming interview, THANK YOU 🙂😇

[@ddflruc]

Thank you so much!!! It's an extremely useful content. I would suggest to add Right-To-Left view mode support for such common widgets like Typeнead.

[@cats_lao_jiao]

Just watched the entire video. I have a frontend system design interview tomorrow. The video definitely will help in some ways. Good luck to me! 😁

[@FrontEndEngineer]

Good luck!

[@ymatuhin]

I'm just blown away how some little thing can be shown as rocket science.

[@FrontEndEngineer]

I'm glad that you find a FE SD easy for you 🙂 But it would be nice to hear about any advanced topics that could be also covered here. Thanks!

[@jatthundeaaaaa]

after a long wait ... finally, hope we get atleast multiple videos this time

[@aruzhanzhaubassar6651]

thank you! amazing explanation as always!

[@tamvongatvn1084]

welcome back :)) u make me happy

[@sujaynandhakumar3395]

Amazing. Can we get a full code video from scratch with all these requirements? Definitely, it will help for many frontend engineers.

[@Young-fl6rq]

Appreciate your work, it's a really great stuff in frontend comunity

[@HunorMartonBorbely]

Great content! The only thing is that the chapter times are completely shifted

[@MR.SubratGarnaik]

More more more❤❤❤❤❤

[@АнастасияБыкова-н7ю]

Thank you for video!❤

[@alesdrobysh951]

Hey, great video! But I have one comment, I would add template sanitization into the Security section

[@FrontEndEngineer]

Since the template is defined by the user (developer), you can use any sanitization library. So there is no strong need including it in the box

[@lokeshkhati8413]

Thanks for this awesome tutorial❤

[@rishav.bharti]

Great Explanation. But when do we really need a stateful / hybrid architecture? Can you give a few examples of actual products which use it? As far as I can see, data is always fetched from the server in interactions like this.

[@FrontEndEngineer]

Hey, stateful is great for instance for: 1. PWA apps - search over static content 2. Personal book library 3. Contact List (on your phone) Hybrid is very edge case, I saw it only a few times. Example was very old banking system with slow API.

[@shubhamagrawal7244]

for the Data flow which type of architecture we are going to use ?

[@TheReaper215]

Shouldn't we be passing down the results to the component in the case of a stateless component

[@geethurajasekharan1883]

@FrontEndEngineer CAn you please share the drawio link like you did in the last 2 videos? I didnt make notes for this one because I thought I'll just go through the drawio page before the interview on monday, but you havent shared it in this one! 🙈

[@v.demchenko]

Thanks for this valuable info! Could you pls, start to implement smth? (actually coding, maybe even LIVE?)

[@ardaktileu4481]

Hey Evgenii! Thanks for sharing the video! Do you use the isWord flag in the Trie structure to differentiate the word?

[@FrontEndEngineer]

From data-structure development perspective, you can have 2 values: 'value: T' (associated value with a prefix) and 'word' (which is a prefix).

[@kashyapit]

Could you share the png or exported file for this system design. it will help me check the design offline. Thanks in advance.

[@AnkitGupta-lr1qq]

Great video, just superb 👏🏼 just wondering why would we want to have minQuerySize? and onItemUpdate? minQuerySize (just like debounce) as an implementation detail seems unnecessary to me and should be handled within onQuery callback. Also, onItemUpdate seems like an escape hatch for the user to manipulate results before actually showing them.. wondering on it's relevance and use-case..

[@FrontEndEngineer]

1. minQuerySize is a different property from the debounce. Debounce delays the call until timeout is reached, but minQuery completely prevents the search. It's useful if you're searching across large collection and you won't to minimize a search complexity, especially in case of large static data set 2. onItemUpdate - we're building a generic solution using a Vanilla (assumption that there is no framework to handle tree updates). If developer provides a template, instead of full re-render it's useful to have a function that's provided by the developer of the template. This property is optional of-course and exists only to have a way to optimize the perf. You can always use full item re-render.

[@AbhishekKumar-rp1vw]

Google search autocomplete or Amazon product search will be a hybrid architecture right?

[@FrontEndEngineer]

AFAIK: Amazon & Google uses server driven typeahead with some simplified caching (showing latest search queries) on UI side, it's a stateless architecture.

[@kashyapit]

Diagram link please

[@ashishkb92]

Diagram link ?

[@sushmitgaur8537]

over engineering.