Solving Uber Frontend Interview Question | Interactive Shape

Подписаться 34 тыс.

Просмотров 25 тыс.

50% 1

In this video, we will solve a front-end interview question from top companies like Uber. We will build an interactive shape based on the given data. The user can interact with the shape. We will take care of multiple edge cases, talk about effects, and lots of other fundamental concepts.
Question link: devtools.tech/questions/s/how...
Support Us: topmate.io/yomeshgupta/748345
Try now using the links below
devtools.tech/questions/all?t...
devtools.tech/list/all
You can support our channel via:
rzp.io/l/support-devtools-tech
devtoolstech.gumroad.com/l/su...
www.buymeacoffee.com/yomeshgupta
************************************************************
Devtools Tech is a RU-vid channel started as a collaborative effort among like-minded engineers to provide high-quality programming tutorials for free. We firmly believe in knowledge sharing and easy access to quality content for everyone. Hence, this channel is an effort to give back to the community and a step toward our belief -- "We rise by lifting others".
Interview questions: devtools.tech/questions/all?r...
Interview resources: devtools.tech/resources/all?r...
Hidden Gem: devtools.tech/crazyones
Team Members:
Yomesh Gupta
Portfolio: yomeshgupta.com
LinkedIn: / yomeshgupta
Twitter: / yomeshgupta
#javascript #ai #web #frontend #interviewquestions #devtoolstech #code #programming #developement #devtoolstech #code
***********************************************************

Наука

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 51

@DevtoolsTech 24 дня назад

Question link: devtools.tech/questions/s/how-to-create-an-interactive-shape-based-ui-uber-frontend-interview-question-or-javascript-or-react-js---qid---6FVH1ZMWMXd4uZ8WAGEi Best coding practices: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9g1rYWJvvzY.htmlsi=3KR-lnNf7GCcE_RU Other top questions -- LinkedIn: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6euTBVDCD6o.html Facebook: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7DJCpgc6V94.html Atlassian: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3OxMsnP78zg.html Klarna: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Py_bXjSMyTc.html MakeMyTrip: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yHg0bvNqJEQ.html Microsoft: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Iv1gZN900uc.html AWS: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PFo1ZQBv4hA.html Custom Loader: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-E01XdDQgzDM.html Practice with us: topmate.io/yomeshgupta

@mumarqayyum9286 21 день назад

Please make more videos like these. Despite being a developer with 3 years of experience, I have literally learned at least 3 to 4 new things in just 26 minutes of absolutely smooth explanation.

@DevtoolsTech 21 день назад

Glad to hear that! More videos coming soon! 🚀

@ionutsandu5913 16 дней назад

Same here although I don't agree with few stuffs such as using recursion or the event bubbling thing (that will complicate things with typescript) but still great content.

@ashmeetsingh3238 21 день назад

I did not think of using event delegation and attributes to record which box is clicked 😅😅😅. Awesome video

@DevtoolsTech 21 день назад

Glad to see you learnt something new today! 🙌🏼

@travelrichardparker1088 14 дней назад

This video I watched randomly, but worth for wach learn many things. Thank you

@DevtoolsTech 14 дней назад

Glad to hear that! Many more coming soon! 🙌🏼

@DeepakSingh-by3je 8 дней назад

same bro

@jj_tech_gate 15 дней назад

First time i watched, i realized many things i dont know 😅😂 but i enjoyed and i will watch again and again, not only for logic also for improving eng😂

@DevtoolsTech 15 дней назад

Glad to see you learnt something new! More coming soon. 🙌🏼

@ankitagarwal4914 20 дней назад

Thank you! I am learning the way how you are explaining tradeoffs why to DS to choose , explaining technicalities

@DevtoolsTech 20 дней назад

Glad to hear that! 🙏🏻

@Manoj-qn3qw 23 дня назад

Was really helpful and think I learnt something new, thank you !

@DevtoolsTech 23 дня назад

Glad to hear that! 🙌🏼

@midhlajap 16 дней назад

Thanks man, one thing that came to my mind is while unloading, instead of using unloading state to control the click event, we can get the parent div element and make its pointer-events to none

@DevtoolsTech 16 дней назад

Thanks for the suggestion! I did that to be double sure incase some css overrides happen!

@nonish_9 24 дня назад

Thanks for this types of videos and questions. also you well explained ✌✌

@DevtoolsTech 24 дня назад

More coming soon! 🙌🏼

@kamal-purohit 4 дня назад

Learned alot! tried to solve it myself but couldn't at 1st go. thanks to you learned so many important and new stuff.

@DevtoolsTech 4 дня назад

Glad to hear that! New video coming out this Sunday. Watch out for that! 🙌🏼

@syncmaster320 23 дня назад

Hey man! Thanks for another great video. I had a few questions here: 1) Why flatten the array? The 2D array provided might have the row and column details but when you flatten, you might lose that and is being hard coded to 3 columns and n rows. 2) Using of non-primitive data structures in the dependency array, wouldn't it defeat the purpose of memorizing? Also, I left you a message on reddit yesterday, I just wanted to thank you for the platform and the videos!

@DevtoolsTech 23 дня назад

I wanted to simplify the problem that is why flatten it. Ideally, it should be configurable and no hard coded CSS. Columns count should change as per the data. If you mean selected then we need an effect whenever it changes. It is a state and unless explicitly changed, we will get the same value across re-renders.

@DemystifyFrontend 12 дней назад

Awesome 🎉

@ashishtiwary914 9 дней назад

I have one point to raise, at the time of selecting set over objects, you said it's not reliable, i agree with you on that but set is also not reliable because there is no guarantee of getting the data in the same order of insertion. May be we can use array with the checks of existing indexes

@DevtoolsTech 9 дней назад

In Set, order of insertion is preserved. I used it because order of insertion is preserved and look up is O(1)

@MrTyagi-rr9vg 22 дня назад

in my opinion, using setInterval instead of setTimeout may be better option, and clear the interval when all the card deselection completed.

@DevtoolsTech 22 дня назад

Both works in this case. Thanks for the suggestion!

@yoursshahnawaz 17 дней назад

Very interesting problem and you explained it really well, thanks ❤

@DevtoolsTech 17 дней назад

Thank you! Many more to come. 🙌🏼

@shubhamverma3873 21 день назад

I learned something new, today.

@DevtoolsTech 21 день назад

Glad to hear that! 🙌🏼

@learningjoe1823 11 дней назад

Really Nice. Would like to learn more. Subscribed and bell icon clicked.

@DevtoolsTech 11 дней назад

Thank you! 🙌🏼

@ankushladani496 21 день назад

Thanks Bhaiya...❤😊

@DevtoolsTech 21 день назад

You are welcome! ♥️

@bikidas5473 23 дня назад

? was it to be solved using a ui framework or plain JS dom mainpulation will work?

@DevtoolsTech 23 дня назад

Question was asked using React.js but could be solved with Vanilla JS.

@sunnygante9867 16 дней назад

Roadside coder also solve this type of question few months back

@DevtoolsTech 16 дней назад

Haven't seen his video yet. More the no. of resources better for us all! 🙌🏼

@freecourseplatformenglish2829 16 дней назад

Thanks Yomesh, I would like to mention that 5th point in functional requirement of this question is a bit confusing "During de-selection, user should be able to select a new box as in disable any box interaction." Can you please fix it.

@DevtoolsTech 16 дней назад

Hi, thanks for pointing it out. I will fix it! 🙌🏼

@ADITYAKUMAR-vt6yo 12 дней назад

Two query : const removeFill = ()=>{ if(allSelectedKeys.length){ const currentKeys = allSelectedKeys.shift(); setClickedCells(prev=> { const updatedKey = new Set(prev); updatedKey.delete(currentKeys); return updatedKey; }) setTimeout(removeFill,500) } } setTimeout(removeFill,100) why we are doing const updatedKey = new Set(prev);

@DevtoolsTech 11 дней назад

We are creating a copy and removing keys from it. We don't want to mutate original value.

@mohnishsawlani 21 день назад

experience level for this interview round ?

@DevtoolsTech 21 день назад

SDE 1/SDE 2

@user-tt7po9td3x 12 дней назад

Imagine being asked this question in 45 minutes 😂. I mean people shouldn’t judge a candidate based on a single question . Many would freak out and won’t be able to build it in that period of time.

@DevtoolsTech 12 дней назад

This is commonly asked in Uber's Frontend roles!

@user-tt7po9td3x 12 дней назад

@@DevtoolsTech 😂 I’m doomed bro. I can build but in interview it’s whole different game

@DevtoolsTech 10 дней назад

You need to practice! That is the only way. I don't want self plug but you can try mock interviews. Try something like topmate.io/yomeshgupta