Frontend System Design Questions ( Autosuggestion / Typeahead )

Frontend System Design Questions ( Autosuggestion / Typeahead ) - HLD, LLD, Interview Experience 🔥🔥

Рет қаралды 24,073

Күн бұрын

➡️ My Frontend Interview Preparation Course - roadsidecoder.com/course-details (50% off)
🟪 My Instagram - / roadsidecoder
➡️ Book an Interview Preparation call with me - topmate.io/roadsidecoder
Frontend System Design Question on building a Scalable Autosuggestion or Typeahead Component will be discussed in this video along with Requirement gathering, HLD, LLD and Optimisations on this. We will also discuss tips and tricks to tackle your React JS and JavaScript Questions in Frontend System Design Interviews.
🔗 Frontend System Design Interview Series -
• Frontend System Design...
➡️ Source Code -
github.com/piyush-eon/fronten...
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 React JS Interview Series -
• Frontend Machine Codin...
🔗 MERN Stack Chat App Tutorial -
• MERN Stack Chat App wi...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#JavascriptInterview #ReactInterview #ReactJS
-------------------------------------------------------------------------
00:00 Intro
01:19 Requirement Gathering
03:17 HLD of Autocomplete Component
04:28 LLD of Autocomplete Component
05:25 Setup new React App
08:44 Autocomplete Component Props
11:48 Building the Component
20:44 Rendering Suggestions
26:42 Highlighted Text Logic
28:59 onSelect Logic
29:56 Implementing Debouncing
33:27 Keyboard Navigation, Caching, Accessibility etc
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -

Пікірлер: 39

@RoadsideCoder 2 ай бұрын

Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥 roadsidecoder.com/course-details (50% Discount for limited time)

@saiphaneeshk.h.5482 2 ай бұрын

Sometimes all you got to do is break the problem and solve them one step at a time. It looks simple, but it's not simple. But you can make it simple, which is not simple. If it makes any sense. Thanks for the awesome videos.

@manikandanmk2959 2 ай бұрын

Really explained simply tq lot

@Isagi__000 2 ай бұрын

He really knows his stuff. Keep going bro.

@amirmansoor89 2 ай бұрын

This guy is a genius ❤

@ChitranshAnkitSaxena Ай бұрын

Awesome bhai👍

@manojb1606 2 ай бұрын

Always comes with great content

@RoadsideCoder 2 ай бұрын

💖

@seeratrehman62 2 ай бұрын

great stuff

@dhruvverma1001 Ай бұрын

Writing props this ways is the best practice? I am new to this

@hamzahahmad1670 7 күн бұрын

I wish you would've mentioned that the caching and keyboard navigations are not going to be part of the video. Those were some of the main topics I watched the video for. I definitely understand wanting to promote your product, but it should be clarified up front that it some of the topics mentioned won't be covered. Great video, regardless.

@devascript 27 күн бұрын

Love you mere sher❤

@Aviralsingh-yw7xx 2 ай бұрын

Sir I cleared many intern level interviews watching your videos. Thanks a Lot

@RoadsideCoder 2 ай бұрын

That's amazing bro!

@tianbo7028 8 күн бұрын

test nested comment

@ajiteshmishra0005 Ай бұрын

Brother, please create one video on Redux and Redux Toolkit in any React Application so that we can lear Redux from scratch........ Also, JWT authentication and authorisation technique in any React Project.

@Abishnoi69 Ай бұрын

New sub. from this video 🎉

@RoadsideCoder Ай бұрын

Welcome!!

@Dev-Phantom Ай бұрын

cool

@AbhishekVerma-cz6uq Ай бұрын

Where did you use customHook that you created ? Also, i think saving fetched result to cache was missed in the video.. ? BTW, thanks for awesome content

@RoadsideCoder Ай бұрын

Watch full video till the end u will know all this

@Abhishekkumar-nv4bz Ай бұрын

@@RoadsideCoder i watched till end but couldn't find the hook implementation, can you please check this one.

@Srishtikhobragade 2 ай бұрын

could you please give example of LLD in board as well

@RoadsideCoder 2 ай бұрын

Just use the props I have mentioned in the components, its stright forward. eg - interface AutocompleteProps { staticData?: string[]; // Array of static suggestions fetchSuggestions?: (query: string) => Promise; // Function to fetch suggestions placeholder?: string; // Placeholder text for the input customloading?: string; // Custom loading text onSelect?: (suggestion: string) => void; // Callback for when a suggestion is selected onBlur?: () => void; // Callback for when the input loses focus onFocus?: () => void; // Callback for when the input gains focus onChange?: (value: string) => void; // Callback for when the input value changes customStyles?: CSSProperties; // Custom styles for the input dataKey?: string; // Key to access suggestion data }

@RahulKumar-no9gh 2 ай бұрын

👍👍

@arunkaiser 2 ай бұрын

❤❤❤❤❤

@swarnakumarkoppala7817 2 ай бұрын

I'm big fan of your explanation

@RoadsideCoder 2 ай бұрын

Thank you!

@clownop2201 2 ай бұрын

Just wanted to thank you for these amazing videos.. I kept learning a lot and now have got a 30lpa package and now I just finished my BCA final exams.. these videos literally help a lot.. btw should I do MCA also or my job? Thought I've accepted it and wanted to do that but most of the people advised me to do masters.. any suggestions

@RoadsideCoder 2 ай бұрын

if u have a 30lpa offer, DO NOT GO FOR MCA. It will waste your 2/3 years.

@_jatin_Vaishnav329 Ай бұрын

Bro you got 30 lpa from just development knowledge or DSA also required for this package 😅

@clownop2201 Ай бұрын

@@_jatin_Vaishnav329 development skills only it's a US start up so no DSA, OS, NetworKing, but you have be very very good at development

@mjtech4243 Ай бұрын

@@clownop2201 Bro can you please tell us , what are the skills that they mainly focused to interview you, was it related front end or backend ,was it react or angular??