Solving Uber Frontend Interview Question | Interactive Shape

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ • 104

  • @DevtoolsTech
    @DevtoolsTech  6 місяців тому

    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: ua-cam.com/video/9g1rYWJvvzY/v-deo.htmlsi=3KR-lnNf7GCcE_RU
    Other top questions --
    LinkedIn: ua-cam.com/video/6euTBVDCD6o/v-deo.html
    Facebook: ua-cam.com/video/7DJCpgc6V94/v-deo.html
    Atlassian: ua-cam.com/video/3OxMsnP78zg/v-deo.html
    Klarna: ua-cam.com/video/Py_bXjSMyTc/v-deo.html
    MakeMyTrip: ua-cam.com/video/yHg0bvNqJEQ/v-deo.html
    Microsoft: ua-cam.com/video/Iv1gZN900uc/v-deo.html
    AWS: ua-cam.com/video/PFo1ZQBv4hA/v-deo.html
    Custom Loader: ua-cam.com/video/E01XdDQgzDM/v-deo.html
    Practice with us: topmate.io/yomeshgupta

  • @mumarqayyum9286
    @mumarqayyum9286 6 місяців тому +34

    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
      @DevtoolsTech  6 місяців тому +4

      Glad to hear that! More videos coming soon! 🚀

    • @ionutsandu5913
      @ionutsandu5913 6 місяців тому +1

      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.

  • @ashmeetsmonga
    @ashmeetsmonga 6 місяців тому +40

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

    • @DevtoolsTech
      @DevtoolsTech  6 місяців тому

      Glad to see you learnt something new today! 🙌🏼

    • @adarshshete7987
      @adarshshete7987 5 місяців тому

      Yes, using event handler on parent, I have not used this pattern before, glad to learn this, thank you.

    • @AbhishekJain1992
      @AbhishekJain1992 3 місяці тому

      ​@@adarshshete7987 don't do that please. React delegates all the events already. It was core JS code where event delegation was required to avoid attaching events on new child event addition.

    • @DevtoolsTech
      @DevtoolsTech  3 місяці тому

      @AbhishekJain1992 Please share documentation around it.

  • @jj_tech_gate
    @jj_tech_gate 6 місяців тому +5

    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
      @DevtoolsTech  6 місяців тому +1

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

  • @logic0912
    @logic0912 5 місяців тому +3

    To make the code more flexible and scalable, before flattening the 2d array, you can make a ref of the number of columns and rows. And then write inline styles to repeat the grid template accordingly. This way, even a rectangular shape can be rendered.

    • @logic0912
      @logic0912 5 місяців тому

      Also, I have an alternate approach, which would require lesser calculations while unloading.
      If we abstract the Box into a separate component and provide its own state of selected, and on selection, we pass the deselect function as a callback, and add that cb into an array. The moment unloading begins, you can just iterate through this array of callbacks and call the cb. It will deselect in the order of insertion.
      Rest everything remains the same.

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому +1

      Thanks for sharing your approach! 🙌🏼

  • @kamal-purohit
    @kamal-purohit 6 місяців тому +1

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

    • @DevtoolsTech
      @DevtoolsTech  6 місяців тому +1

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

  • @travelrichardparker1088
    @travelrichardparker1088 6 місяців тому +5

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

  • @ankitagarwal4914
    @ankitagarwal4914 6 місяців тому +2

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

  • @Farooque7866
    @Farooque7866 2 місяці тому

    Amazing sir ji 🎉 I am a react developer and I see the first time optimization video.... Great 👍👍👍 keep it up ❤❤❤

    • @DevtoolsTech
      @DevtoolsTech  2 місяці тому

      Thank you! More to come. 🙌🏼

  • @syncmaster320
    @syncmaster320 6 місяців тому +1

    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
      @DevtoolsTech  6 місяців тому

      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.

  • @shubhamsingal3566
    @shubhamsingal3566 5 місяців тому +1

    Instead of using shift method which is O(n), we can just make use of closures and create a variable for index in unload, and use that to get value from keys array, then increment it afterwards

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому

      Could you please share the code? Thanks!

    • @kYt0-cz3hk
      @kYt0-cz3hk 5 місяців тому

      @@DevtoolsTech I JUST STARTED LEARNING HTML CSS JS, AND IM SHOCKED TO SEE ALL THESE THINGS IN FRONTEND

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому

      @@kYt0-cz3hk There is a lot more. You will learn with time and efforts. Just keep at it!

    • @kYt0-cz3hk
      @kYt0-cz3hk 5 місяців тому

      @@DevtoolsTech but i didt knew all this existed sadly, any way i can atleat know what all things exist

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому

      May be try roadmap.sh for a structured learning.

  • @midhlajap
    @midhlajap 6 місяців тому

    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
      @DevtoolsTech  6 місяців тому +2

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

  • @mrpocketsss
    @mrpocketsss 6 місяців тому

    An optimization to add is to make unloading a ref. It isn't technically state, as it only serves to short-circuit the click handler. The benefit is that a ref won't cause a render cycle, where the useState would

    • @kYt0-cz3hk
      @kYt0-cz3hk 5 місяців тому

      I JUST STARTED LEARNING HTML CSS JS, AND IM SHOCKED TO SEE ALL THESE THINGS IN FRONTEND

  • @ashishtiwary914
    @ashishtiwary914 6 місяців тому

    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
      @DevtoolsTech  6 місяців тому

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

  • @MrTyagi-rr9vg
    @MrTyagi-rr9vg 6 місяців тому +1

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

    • @DevtoolsTech
      @DevtoolsTech  6 місяців тому +1

      Both works in this case. Thanks for the suggestion!

  • @devLeopards
    @devLeopards 6 місяців тому +2

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

    • @DevtoolsTech
      @DevtoolsTech  6 місяців тому +1

      More coming soon! 🙌🏼

  • @divyanshsrivastava9571
    @divyanshsrivastava9571 5 місяців тому

    what if instead of using opacity zero, I choose not to even render the box if the array element is 0, do we still need that if condition 12:39 ?
    Btw I solved it but looking at your code there's a lot of improvement needed for optimisation 😝

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому

      I chose to render to keep the UI consistent and not run into issues where CSS behaves weirdly due to missing elements. If it works well for you then you can skip conditions.
      I am glad you learnt something new! 🙌🏼

  • @shubhanshusahuu
    @shubhanshusahuu 5 місяців тому

    Is Flattening the array is good idea?, what about scalability?
    I think it will afftect scalability, how will you tackle that?

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому

      You can do both ways. Unless you have thousands/lakhs of boxes in the shape, the flat is quite fast. We can optimise if we feel there is a bottleneck after measuring.

    • @shubhanshusahuu
      @shubhanshusahuu 5 місяців тому

      @@DevtoolsTech i was not talking about optimization, maybe that 2d array can be there for a reason, and any new requirement comes and now we lost the track of the nested arrays, in that case we need to change logic right?

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому +1

      You can't predict what all requirements can come. Solve for the current problem unless current changes create a major tech debt. There could be n of future changes, what all can you accommodate without knowing the changes? It can lead to logic change or it might not.

  • @fiskebent
    @fiskebent 5 місяців тому

    Was it stated somewhere that the data always will be 3x3? The CSS is hard coded to 3 columns, so if you get a 4x4 grid, it'll look weird. But otherwise great stuff. I learned a lot!

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому

      In the question, it was mentioned it is 3x3 for now. However, I agree we can go for a configurable approach where grid of any size should work.

  • @yoursshahnawaz
    @yoursshahnawaz 6 місяців тому

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

    • @DevtoolsTech
      @DevtoolsTech  6 місяців тому

      Thank you! Many more to come. 🙌🏼

  • @rajatmaheshwari2512
    @rajatmaheshwari2512 5 місяців тому

    I feel like while the current approach works, it relies on a React "quirk" rather than a feature. Essentially, the point of creating the removeNextKey was to get around the problem of stale state which would otherwise cause the keys to be set to the old state again and again (thus never unloading). I think a better approach is to create a new state variable called unloading, and when the unload function is called for the first time, set the unloading state variable to true, this will cause all effects to be propagated through only the one useEffect which increases predictability and readability.
    The flow would be:
    The selected boxes exceeds the length of the boxes
    useEffect triggers unload
    unload -> setUnloading(true)
    unload -> update state of the set
    This update triggers the useEffect again
    Since unloading is true, the unload function is called again with the new updated state
    Terminating condition is simply the keys running out
    Keeping a single source of truth to state updates is pretty essential IMO

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому

      I don't think it is a quirk. Both approaches work fine. Thanks for sharing! 🙌🏼

  • @bikidas5473
    @bikidas5473 6 місяців тому

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

    • @DevtoolsTech
      @DevtoolsTech  6 місяців тому

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

  • @karthikm.1804
    @karthikm.1804 4 місяці тому

    What is the salary range for frontend developer at uber

    • @DevtoolsTech
      @DevtoolsTech  4 місяці тому +1

      Depends upon many factors like experience, skills, profile, and more but it is good

    • @karthikm.1804
      @karthikm.1804 4 місяці тому

      @@DevtoolsTech how much one can expect with 1-2 years of experience?

  • @KuldeepSingh-fg4wn
    @KuldeepSingh-fg4wn 5 місяців тому

    I did not get the purpose to make it flatters i mean that data could be indicate allocation of row and column some how also can’t we just simply count what the length of array and how many box are selected once both match it should refresh all box…

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому

      There could be multiple ways to solve it. Making it flat just simplifies the logic. We can do with flat too and change the logic. Feel free to implement it and share it with all. Thanks! 🙌🏼

  • @freecourseplatformenglish2829
    @freecourseplatformenglish2829 6 місяців тому

    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
      @DevtoolsTech  6 місяців тому +1

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

  • @rishabhkumar17
    @rishabhkumar17 5 місяців тому

    In your opinion, what is the difficulty level of this problem?
    Great Video.

    • @DevtoolsTech
      @DevtoolsTech  5 місяців тому

      It would be a beginner/intermediate problem depending upon the kind of conversation that follows the solution.

  • @learningjoe1823
    @learningjoe1823 6 місяців тому

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

  • @codedesigner8839
    @codedesigner8839 2 місяці тому

    I came prepared for Java LLD round, however the interviewer was really cruel, and he started with dsa question, thinking it's a dsa round.
    Later for LLD, he said I have only 1 front end question, no java questions, and as this position was for full stack, I had no options but to go ahead.
    He asked this type of question, and surprisingly I was able to come up with working solution. However I couldn't answer some questions on react as I was prepared for java.
    For sure Im rejected this time.
    Interviewer made some comments like -
    - 'do u expect me to tell u the complete steps?' when I asked him that I may need some syntax help, as Im not prepared for react.
    - 'are you just assuming the solution to be this, and try more probable reasons ?' when I was trying to find a reason for useState event.
    literally such negative comments, downshifted my morale

    • @DevtoolsTech
      @DevtoolsTech  2 місяці тому

      Sad to hear. Hard luck! Don't lose faith, sometimes interviews go bad due to factors not in our control. We can hi just learn and move on.

  • @ADITYAKUMAR-vt6yo
    @ADITYAKUMAR-vt6yo 6 місяців тому

    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
      @DevtoolsTech  6 місяців тому

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

  • @mohnishsawlani
    @mohnishsawlani 6 місяців тому

    experience level for this interview round ?

  • @Manoj-qn3qw
    @Manoj-qn3qw 6 місяців тому +1

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

  • @AbhishekJain1992
    @AbhishekJain1992 3 місяці тому

    No need for new state for loading, set size is good enough.

  • @mohitashliya8750
    @mohitashliya8750 4 місяці тому

    So this is how elite devs code like

  • @shubhamverma3873
    @shubhamverma3873 6 місяців тому

    I learned something new, today.

  • @ankushladani496
    @ankushladani496 6 місяців тому

    Thanks Bhaiya...❤😊

  • @sunnygante9867
    @sunnygante9867 6 місяців тому

    Roadside coder also solve this type of question few months back

    • @DevtoolsTech
      @DevtoolsTech  6 місяців тому

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

  • @Fam-m4i
    @Fam-m4i 6 місяців тому +2

    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
      @DevtoolsTech  6 місяців тому

      This is commonly asked in Uber's Frontend roles!

    • @Fam-m4i
      @Fam-m4i 6 місяців тому

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

    • @DevtoolsTech
      @DevtoolsTech  6 місяців тому +1

      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

  • @DemystifyFrontend
    @DemystifyFrontend 6 місяців тому

    Awesome 🎉

  • @iganic7574
    @iganic7574 5 місяців тому

    Source code?

  • @AbhishekJain1992
    @AbhishekJain1992 3 місяці тому

    Please don't teach wrong things. React does the delegation itself.

    • @DevtoolsTech
      @DevtoolsTech  3 місяці тому

      Please share a valid resource or documentation to backup your claim.

    • @AbhishekJain1992
      @AbhishekJain1992 3 місяці тому

      @@DevtoolsTech you can read about it in official document on react synthetic events.a

    • @AbhishekJain1992
      @AbhishekJain1992 3 місяці тому

      @@DevtoolsTech ChatGPT - In React, event delegation is automatically handled to some extent through a mechanism called Synthetic Events. React doesn't attach event listeners directly to child DOM nodes. Instead, it attaches them to the root node (usually at the document level or the component's root). This is part of React's event handling optimization.
      Gemini - While React doesn't explicitly mention "event delegation" in its documentation, it does implement it under the hood. Here's what you need to know:
      How React handles event delegation:
      Root Container:
      In React 17 and later, event listeners are attached to the root DOM container where your React app is rendered. This means that a single event listener at the root handles events for all your React components.
      Event Bubbling:
      React leverages event bubbling, where events triggered on a child element propagate up the DOM tree until they reach the root. This allows React to capture events on any component within your application.
      Synthetic Events:
      React uses synthetic events, which are cross-browser wrappers around native DOM events. This ensures consistent event behavior across different browsers.

    • @DevtoolsTech
      @DevtoolsTech  3 місяці тому

      Thanks for sharing. I will read about it.
      Could you please your LinkedIn so that others folks can connect and learn from your knowledge too. Thanks!

  • @suhailriyaz6612
    @suhailriyaz6612 3 місяці тому

    let arr = []
    let getState = []
    const statesArr = (n)=>{
    return Array(n).fill(0)
    }
    const handleClick = (index)=>{
    arr.push(index)
    getState[index] = 1
    if(arr.length === getState.length){
    setTimeout(() => {
    deSelect()
    }, 2000);
    }
    console.log('select:',getState)
    }
    const deSelect = () =>{
    i = 0;
    while(i {
    handleClick(element)
    });
    }
    main()

    • @DevtoolsTech
      @DevtoolsTech  3 місяці тому +1

      This doesn't solve the question mentioned in the video. There is no event handler. You are setting the indexes to true in a sequence and then deselecting them. It is a partial solution.

    • @suhailriyaz6612
      @suhailriyaz6612 3 місяці тому

      @@DevtoolsTech ok sir