Project Eighteen: Threads & Trees

Despite of the holiday season the trees I want to talk about today have no presents, stars or angels: instead they are representing some nested structure.

Take this thread for example:

That's how this page would look like when you leave a comment and I'd reply you under this article ;-)

Dev.to and literally every social media platform and most of blogs have this kind of functionality, so it'll definitely come in handy many many times.

How about implementing it today?

Comments and Replies: requirements and recipe

As a user I want to be able comment and reply to other commenters, so that we could keep communication going

You've already seen an example and I'm sure you have a basic idea how such a feature would look like, so let's go straing to requirements:

Requirements

1. User should be able to submit a comment
2. User should be able to reply to a comment
3. User should be able to see both comments and replies together
4. Level of replies should be limited to a reasonable amount
5. Comments should have proper microdata
6. Form, comments and replies should be accessible

Recipe

1. Implement static markup for a comment
2. Implement static markup for a comment with a couple of replies
3. Add form to submit a comment
4. Write logic to store comments locally
5. Add logic to submit a reply to a comment
6. Ensure that reply level is properly limited
7. Check that other requirements are met
8. Enjoy conversation with yourself!

Hints

You can use Schema/Comment in order to fulfil microdata requirement.

A good data structure would make it easy to store and render comments and replies: one approach could be to store both replies and comments the same way and differentiate them based on a parent comment id.

The same structure could help limit the level: when user submits a reply to an top nested reply - just set the parent comment to the grandparent instead.

Hard Mode: File Tree

Of course, threads are fun, but trees are even better:

Widely used in IDE, control panel and dashboards to represent structure of documents, pages or assets - you'll probably need them at some point. Though, unlike the comment threads folders can be nested quite deep, how can you represent any level?

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?