How to Build an Infinite Nested Comments System in React JS | System Design + Code

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ม.ค. 2025

ความคิดเห็น • 56

  • @xplodivity
    @xplodivity  ปีที่แล้ว +2

    Build 16 Medium/Hard JavaScript projects for live coding Interview rounds
    Get it now- xplodivity.graphy.com/courses/16-js-projects-65883553e4b08ebe75f39885
    Full Video Preview of each project from the course- th-cam.com/video/coZucJEvsSk/w-d-xo.html
    What you'll get:
    - Lifetime access
    - Full video explanations of building each project from scratch
    - 10+ hours of premium content
    - Step-by-step explanations and code walkthroughs
    - No bullshit, No time waste
    - This project list Should get you ready for any JavaScript live coding interview round.
    - Extremely cheap (You'll be surprised)
    - Practical tips and strategies for mastering JavaScript
    - Confidence in handling technical interviews
    - Enhanced JavaScript proficiency
    Content list:
    1. File Explorer (similar to vs-code)
    2. Infinitely Nested comments
    3. Advanced Custom Toast notification from scratch
    4. Drag & Drop, Swap, Add and delete elements using JavaScript
    5. Custom Calendar/Date-picker
    6. Multi-Select dropdown with support to add & remove elements
    7. Build a Memory game with all rules integrated
    8. Build an analog clock with smooth animation
    9. Dynamic Progress bar with custom input support
    10. Build a Star rating system with dynamic hover effects
    11. Build a tic tac toe game with best practices
    12. Advanced To-Do List with Local Storage support
    13. Accordion with smooth transition effects
    14. Countdown timer & days remaining timer
    15. Create a custom modal
    16. Build an optimised Chessboard

  • @isumtk
    @isumtk ปีที่แล้ว +5

    I was asked this same question in an interview for FE role. Thanks for solving this project.

    • @maiphan9680
      @maiphan9680 11 หลายเดือนก่อน

      hbhb

  • @AMAN-un7ji
    @AMAN-un7ji ปีที่แล้ว +5

    I love this kind of projects, small but extremely useful. Besides, you understand because a specific topic is emphasized

  • @Yuuffyy
    @Yuuffyy ปีที่แล้ว +1

    Thanks for creating real world examples. Please keep these going!

  • @oscaranillo7131
    @oscaranillo7131 ปีที่แล้ว +1

    This is simple wonderful! Exactly what I was needing for a project!

  • @RavindraSingh-lp9pl
    @RavindraSingh-lp9pl 9 หลายเดือนก่อน

    Superb video man...very knowleadeable. Please make more such machine coding React series.

  • @Akephalos204
    @Akephalos204 ปีที่แล้ว

    Came from Reddit, thanks this is great

    • @gautamgoyal6301
      @gautamgoyal6301 ปีที่แล้ว

      can you give me the link of that subreddit

  • @merajali938
    @merajali938 11 หลายเดือนก่อน +2

    Video is good but to shorten the video you've added copy pasted code, pls create another video for nested comments and write code online by communicating with us on the video. Your content and type of videos are challenging and helps us learn new concepts as compared to other youtube channels. Thank you.

  • @utibeokodi4997
    @utibeokodi4997 8 หลายเดือนก่อน

    Great article, an improvement would be breaking down the project into more components to adhere to SRP

  • @Ravi_Goyal
    @Ravi_Goyal ปีที่แล้ว +2

    In insert node if id is found in first object itself then why are you iterating over rest of the objects also?
    const insertNode=(comments,id,item)=>{
    if(comments.id===id){
    comments.items.push(item)
    return true
    }
    else{
    for (let obj of comments.items){
    if(insertNode(obj,id,item)){
    break;
    }
    }
    }
    }
    does this make sense?

    • @macmacmac740
      @macmacmac740 11 หลายเดือนก่อน

      I had the same question. The 'map' which is written will still continue to run even after the insertion is done successfully.

  • @pritamhippargekar1840
    @pritamhippargekar1840 ปีที่แล้ว +1

    Verry useful and real time use case sir. Make one more vedio on roled based access menu.

    • @xplodivity
      @xplodivity  ปีที่แล้ว +1

      Thank you. And yes, i will look into it!

    • @alirazzaq1541
      @alirazzaq1541 9 หลายเดือนก่อน

      @@xplodivity .

  • @HARDY4006
    @HARDY4006 ปีที่แล้ว

    Amazing content yet again👍👍👌👌

  • @PwnKilla
    @PwnKilla 2 หลายเดือนก่อน

    i'm not quite understanding how that map you are doing on the comments, is grabbing every id, when they are nested in your hard coded example

    • @PwnKilla
      @PwnKilla 2 หลายเดือนก่อน

      Found the answer, the Comment component, is calling itself, and we are passing all the props it's need to map through the comments again 👍

  • @chahatbhatia90
    @chahatbhatia90 ปีที่แล้ว +1

    I think it can be improved more by adding Context API instead of sending the callbacks using prop drlling.

  • @IAmOxidised7525
    @IAmOxidised7525 7 หลายเดือนก่อน

    using immer along with state could help with complete UI re-renders ?

  • @rudra4780
    @rudra4780 11 หลายเดือนก่อน

    How the f* do you build all this in 20 min while explaining this as well!!
    Am I the only one tripping over this?

  • @akir2v568
    @akir2v568 8 หลายเดือนก่อน

    thank you GOAT

  • @lemon_maho
    @lemon_maho ปีที่แล้ว

    I have a question: how would u make this with nested ul and li s so that we get different bullet point shapes for nested ones, I'm kinda struggling to do that, any ideas?

    • @ican-in2gz
      @ican-in2gz ปีที่แล้ว

      did you solve the problem that you have faced

    • @lemon_maho
      @lemon_maho ปีที่แล้ว

      @@ican-in2gz yes, I was doing something wrong with my code

  • @bengternman6
    @bengternman6 ปีที่แล้ว

    Hey I just came from r/nextjs you are creating good content.
    Could you make video how to create hook or api for uploading image or images to cloudinary and deleting them.
    so for example user can add image to profile, remove it, add new one and so on.

  • @satyamgupta1785
    @satyamgupta1785 ปีที่แล้ว

    I don't want an infinite nested reply , so what do I do?

  • @sumitbhardwaz
    @sumitbhardwaz ปีที่แล้ว

    one question. i want it to implement into my project? i want to comments to stay permanent ? Should i use database for fetching and storing comments there?
    what is the viable and appropriate way to do this?

    • @hmehta051
      @hmehta051 ปีที่แล้ว

      Use local storage or redux persist

  • @christa_3131
    @christa_3131 10 หลายเดือนก่อน

    how do you run it?

  • @akrammohammed3581
    @akrammohammed3581 11 หลายเดือนก่อน

    Thanks

  • @venkatasuryakiranvudutha3360
    @venkatasuryakiranvudutha3360 ปีที่แล้ว

    How to access updated document instead of paying again?

    • @xplodivity
      @xplodivity  ปีที่แล้ว +1

      You will be mailed the updated document. During purchase, you will be asked for your email, and any updates to the book will be sent to that email itself.

    • @thedungnguyen4440
      @thedungnguyen4440 ปีที่แล้ว

      @@xplodivity hhh

    • @maximus_precladius
      @maximus_precladius 10 หลายเดือนก่อน

      @@xplodivity great

    • @maximus_precladius
      @maximus_precladius 10 หลายเดือนก่อน

      great

    • @hieune6125
      @hieune6125 2 หลายเดือนก่อน

      @@xplodivity .

  • @HBCGAMING
    @HBCGAMING หลายเดือนก่อน

    I am watching this if I can,t SOLVED 😢 i gone try for my self I just getting some hints from you in 2;52 forever

  • @SajjadHematiNourani
    @SajjadHematiNourani ปีที่แล้ว

    please make the backend as well.

  • @ftheworld2885
    @ftheworld2885 ปีที่แล้ว

    if possible then please also integrate rich text editor to the comment and reply box

  • @rayyanabdulwajid7681
    @rayyanabdulwajid7681 9 หลายเดือนก่อน

    Don't you think this recursive approach is very inefficient compared to a simple approach. Refer to Nested comments section article by geeks for geeks as they have not used recursion. It is simpler to understand and involves lesser computation as well.

    • @PwnKilla
      @PwnKilla 2 หลายเดือนก่อน

      but that example shown by geeks for geeks, doesn't have code to load nested data from a DB, or harcoded data, it only has code to create comments and replies, not code to handle loading per-existing data.

  • @PRANAVMAPPOLI
    @PRANAVMAPPOLI 9 หลายเดือนก่อน

    Nice

  • @srisaisandeepsandeep1208
    @srisaisandeepsandeep1208 7 หลายเดือนก่อน

    good

  • @ashwinikumar13
    @ashwinikumar13 11 หลายเดือนก่อน

    asa