The Fanfiction Frontier is a web application built with React, Tailwind CSS, and TypeScript, leveraging Appwrite for backend services. It provides a platform for users to create and share blog posts centered around fan fiction, character analysis, and personal opinions. The goal is to allow users to unleash their inner storyteller, writing engaging blogs about their favorite characters, exploring mind-bending alternate realities, or simply sharing passionate thoughts with a community of fellow enthusiasts.
One of the key features I wanted to implement was a comment section similar to Instagram’s, where users can not only comment on posts but also reply to other comments, creating a nested comment structure. This article walks you through how I built this feature.
Designing the Comment Data Structure
The first step in building the comment section was designing the data structure to store the comments. I created a comment collection in Appwrite with the following attributes:
postId (string): The ID of the post the comment belongs to.
content (string): The content of the comment.
parentId (string): The ID of the parent comment, used to track replies. If a comment is a top-level comment, this value is null. This is similar to how Instagram handles comments and replies.
commentsCount (integer): A count of how many replies a comment has.
likesCount (integer): A count of how many likes a comment has received.
userCommenting (relationship): A relationship with the user collection, storing the ID of the user who made the comment.
userCommentedOn (relationship): A relationship with the user collection, storing the ID of the user who was commented on.
Fetching Top-Level Comments
To fetch the top-level comments (comments directly on a post), I used the following query:
Query.equal("postId", postId),
Query.isNull("parentId"),
Query.orderDesc("$createdAt"),
This query retrieves comments for a specific post where the parentId is null, meaning they are not replies to another comment. The comments are ordered by creation date in descending order, ensuring that the newest comments appear first.
Fetching Replies (Nested Comments)
For fetching replies to a specific comment, I used a similar query:
Query.equal("parentId", id),
Query.orderDesc("$createdAt"),
This query retrieves comments where the parentId matches the ID of the comment being replied to, again ordering them by the date they were created.
Optimizing with Redux
To minimize database calls and improve performance, I stored the comments in my Redux store. This approach ensures that once the comments are fetched, they are readily available for the user without requiring multiple database queries. By caching the comments in the Redux store, I reduced the load on the backend and enhanced the user experience.
Conclusion
Building this nested comment section was a challenging but rewarding experience. It allowed me to delve deeper into React, Redux, and Appwrite, and refine my problem-solving skills. The result is a dynamic, user-friendly comment system that enhances the interactivity of The Fanfiction Frontier. I'm excited to see how users will engage with this feature as they share their stories and thoughts on the platform.