I'm working on a side project using Vite with React for the frontend and Node with Express for the backend, along with Supabase for the database. I want to add a feature that allows for nested comments, similar to what Reddit has. What are the best practices or tools I can use to achieve this? Any tutorials or resources would be really helpful!
3 Answers
Are you planning to build the commenting system from scratch? If so, your tech stack is well-equipped for a custom solution. I’ve built similar systems before using React and Node. If you'd prefer a simpler path, you might want to consider managed options like Open Web or Disqus — I haven't used them myself, though!
One effective method would be to use an adjacency list in Postgres/Supabase. Create a comments table that includes an ID, parent_id, post_id, and created_at field. You can fetch threads using a recursive CTE and order them by a path. If you need faster reads, consider adding a materialized path column. In your React app, you can build a map using parent_id and render the comments recursively. This should work great with your tech stack!
To create nested comments, you'll mainly focus on your data structure. Each comment should include a `parentId`, which indicates its parent comment (it’ll be null for top-level comments). When rendering your comments, use a recursive function to display them according to their relationships. Since you're using Supabase, which is based on Postgres, you can manage this easily with a self-referencing table. Look up some tutorials on implementing threaded comments with Postgres for some good guidance!
Thanks, I will look at these things!

I don't know anything about Open Web and Disqus. Could you tell me more?