Design Whiteboard (Excalidraw, Figma, Draw.io) | HLD Mock Interview | 💪Chakde System Design Ep. 14

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

КОМЕНТАРІ • 39

  • @GalaxyGazer929
    @GalaxyGazer929 Рік тому +2

    Detailed Timestamps:
    0:00 - Introduction
    0:36 - Speaker Introduction
    2:25 - Problem statement
    3:48 - Requirement Discussion
    8:48 - Tech Stack Discussion
    17:49 - Implementation
    18:02 - Implementing - Canvas
    19:58 - Implementing - Drawing a rectangle
    23:45 - Implementing - Problem with Drawing (a rectangle or) any shape to the canvas
    25:33 - Implementing - Data structure to store the shapes & caching canvas using weakMap to enhance performance
    32:35 - Implementing - Selecting the shapes
    39:23 - Implementing - Moving
    45:42 - Implementing - Resizing
    58:40 - Implementing - Zooming
    1:00:36 - Implementing - Encryption & Security
    1:03:56 - Implementing - Infinite Canvas
    Very detailed discussion. Thank you both guys.

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

    this girl's so knowledgable. great guest!

  • @hafslion
    @hafslion 2 роки тому +3

    amazing content guys and very detailed and interactive, thanks for knowledge sharing and keep the great content coming 💯

    • @engineerchirag
      @engineerchirag  2 роки тому

      Our pleasure! Keep watching #chakdeSystemDesign

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

    Really a great content, got to learn a lot with this discussion but I believe it is far from real HLD interviews...

  • @vishwaskhurana1217
    @vishwaskhurana1217 2 роки тому +2

    Great content, it was very informative. However, It felt more like a session on canvas and its low level implementation rather than an HLD interview. Does it make sense to ask this question in an interview to an engineer who has never used canvas/svg ? Just want to know your thoughts.

    • @engineerchirag
      @engineerchirag  2 роки тому

      Yes, you are right, we touched a bit on a low level to make it informative, rather than just interview oriented.
      Depending on past experience, it's ok to ask/go deeper into such concepts.

  • @adilismail3593
    @adilismail3593 2 роки тому +1

    Nice topic chirag.
    It was a very informative video thanks.

    • @engineerchirag
      @engineerchirag  2 роки тому

      Glad you liked it. Keep watching and sharing #chakdeSystemDesign

  • @navaneethtechnical7071
    @navaneethtechnical7071 2 роки тому +2

    Thank you so much for bringing such videos 😊.
    Can we get a video on website builder, sort of wordpress, wix etc...

    • @engineerchirag
      @engineerchirag  2 роки тому +1

      Thanks Navaneeth, and keep watching. Yes, will try to plan a detailed one, but some part of it is covered in ua-cam.com/video/6z7ZXb4ntbE/v-deo.html

    • @navaneethtechnical7071
      @navaneethtechnical7071 2 роки тому +1

      @@engineerchirag sure, thank you.

  • @akibali7123
    @akibali7123 Рік тому

    Can anyone please share some resources on system design for a whiteboard from a backend pov?

  • @felipequintero122
    @felipequintero122 2 роки тому

    Outstanding interview, thanks for sharing 🙏🏻

    • @engineerchirag
      @engineerchirag  2 роки тому

      Thenks Felipe, keep watching and sharing #chakdeSystemDesign series

  • @sushantbhaskar855
    @sushantbhaskar855 Рік тому

    Great video. Would have loved to know more about how collaboration feature is implemented in these types of products in depth. Overall, awesome stuff.

  • @venkatvenkateswarlu2326
    @venkatvenkateswarlu2326 Рік тому +1

    Really I did not get it, implementation part, why guys are jumping that particular requirement, is there any reason?

    • @engineerchirag
      @engineerchirag  Рік тому

      For implementation part, you should basic APIs of canvas to understand it.

  • @kanha504
    @kanha504 2 роки тому

    Nice Video and well explained :). One thing is missing how to type texts in the shapes?. Can you please reply me in comments. Should we need to create a dynamic div with contenteditable="true" on every shape at runtime? or it's possible with any canvas api?

    • @engineerchirag
      @engineerchirag  2 роки тому

      Hey Lal, I have share you some resources on DM. As discussed avoid using DOM (div) element on canvas.

    • @TheSelvassn
      @TheSelvassn 2 роки тому +2

      @@engineerchirag Can you share the resources description , so that it wil be beneficial to everyone. Thanks for the very informative session.

  • @sojuthomas7727
    @sojuthomas7727 2 роки тому

    Amazing,thank you so much ❤️❤️

  • @saketsinha23
    @saketsinha23 7 місяців тому

    I have built whiteboard at Vedantu and physicswallah
    Building a whiteboard for laptop is tough but building for smartboard is different level of challange.
    One basic challenge is as the canvas size increases the latency increses
    So we actually have used best of both worlds we are drawing on svg, which gives like 58 to 60fps than canvas which was giving 45 fps and on mouseup we will take that svg data and paint it on canvas and then we can use all the power of canvas ln that .

  • @Atulkumar-te4rt
    @Atulkumar-te4rt 4 місяці тому

    Just one concern here why didn't we considered free form drawing here ? why only rectangle and all we took in consideration !

  • @VishalGupta-jsdev
    @VishalGupta-jsdev 2 роки тому +2

    As far as my feedback is concerned, users love to gain more in less time. So you can work on some time to reduce it to atleast half...but really appreciate the type of description you guys has gone deep in terms of tech structure and design.
    One more thing that i wanna point is performance, can't we boost performance of canvas resize and zoom events with debouncing?

    • @engineerchirag
      @engineerchirag  2 роки тому

      Good point! Debouncing can always be used on user triggered actions to avoid extra computation. Thanks for your feedback, will try to reduce the video duration. Keep watching #chakdeSystemDesign

    • @aakansha1216
      @aakansha1216 2 роки тому +5

      Debouncing helps in improving perf but at the same time introduces delay as well so should be used where needed. For resizing - you can try using resize observer instead and set a threshold beyond which you would like to do some action and for zooming as well debouncing is not really needed, instead you could batch the updates (If using React then with React 18 you don't need to batch as well as its taken care by React) for better perf.

  • @DK-ox7ze
    @DK-ox7ze 2 роки тому +1

    It will be nice to have timestamps in your videos 🙂

    • @engineerchirag
      @engineerchirag  2 роки тому

      Hey Dhruv, there is the timeline in my videos. You can refer description. Let me double-check if there is any issue. Thanks for highlighting this!

    • @DK-ox7ze
      @DK-ox7ze 2 роки тому +1

      @@engineerchirag Don't see any time lines in your videos. Though time stamps are much more convenient if we have less time and want to see some specific parts only.
      Also, I find that the volume level in all your videos is very low. I have to put on headphones to hear properly when I am watching on my mobile (not having this issue with other videos, so my mobile is fine).

    • @engineerchirag
      @engineerchirag  2 роки тому +1

      Hey DK, thanks for highlighting the timeline issue. I have fixed it. Regarding audio quality, I'm working on it. Let me know in case you face similar issues in new episodes.