Interactive Comments Platform with Nested Replies and Reactions System

Description:

This comprehensive comments and replies system provides a complete user engagement platform with real-time interactions and advanced features. Built with vanilla JavaScript and PHP/MySQL, it demonstrates complex nested comment structures, real-time reactions, and secure backend API integration for modern web applications. Unlike basic comment systems, this implementation features multi-level nested replies, real-time like/dislike reactions, mention support, and secure API endpoints to create a professional discussion experience that enhances user engagement and community building.The application showcases advanced comment threading algorithms, real-time UI updates, comprehensive validation systems, and secure data handling - essential capabilities for building interactive platforms that foster community discussions.

The Challenge:

Most comment systems are either too simplistic or rely on heavy frameworks. I wanted to create a lightweight, framework-free system that handles nested replies, real-time reactions, and user interactions while maintaining security and performance.

Development Story:

This project combined database design challenges with real-time UI synchronization. The most complex aspect was implementing the nested reply system that maintains proper thread structure while providing real-time updates without page refresh.

Key Challenge: Managing the parent-child relationships between comments and replies while ensuring efficient database queries and real-time UI synchronization, especially for deeply nested threads.

Technologies Used:

• HTML5 - Semantic structure with proper ARIA labels for accessibility
• CSS3/SCSS - Responsive card layouts, animations, and visual hierarchy
• JavaScript (ES6+) - Real-time updates, form handling, and API communication
• PHP - Secure backend API with prepared statements and validation
• MySQL - Optimized database schema for nested comments and reactions
• AJAX/Fetch API - Asynchronous data loading and real-time interactions

Technical Architecture:

• RESTful API Design - Separate endpoints for comments, replies, and reactions
• Secure Data Handling - Prepared statements, input validation, and CORS protection
• Real-Time Synchronization - Immediate UI updates without page refresh
• Nested Data Structure - Efficient parent-child relationship management
• Modular Backend - Separated concerns with dedicated endpoint files

Technical Implementation:

• Comment Threading: Recursive or flat structure with parent references
• Reaction System: Toggle-based likes/dislikes with mutual exclusivity
• Mention Support: Automatic detection and linking of @mentions in replies
• Form Validation: Client-side validation with server-side security
• Pagination: Efficient loading of comments with lazy loading support

Core Functionality:

• Post, edit, and delete comments with real-time updates
• Nested reply system supporting multiple levels of discussion
• Like/dislike reactions with immediate visual feedback
• User mention detection and linking in replies
• Comment and reply counts with live updating
• Collapsible reply threads for better navigation

User Experience:

• Clean card-based layout with visual hierarchy
• Real-time feedback on form submissions and reactions
• Smooth animations for expanding/collapsing replies
• Intuitive reply nesting with clear visual indicators
• Responsive design optimized for mobile and desktop
• Accessible form controls and keyboard navigation

Technical Features:

• Secure API endpoints with CORS protection and input validation
• Efficient database queries with proper indexing for comments and replies
• Real-time UI updates using vanilla JavaScript DOM manipulation
• Session-based or token-based user identification (extensible)
• Comprehensive error handling with user-friendly messages
• Optimized SQL queries for retrieving nested comment structures

How to Use:

• Enter comment in main form and submit to add to discussion
• Click 'Reply' on any comment to start a nested discussion
• Use like/dislike buttons to react to comments and replies
• Type @username in replies to mention other users
• Toggle reply visibility with expand/collapse buttons
• Navigate through pagination for large comment threads

Code Highlight:

async function commentSubmit(e) {
   const formSubmit = e.target.closest('[data-form="comment_or_reply"]');
   if (formSubmit) {
      const formInput = document.getElementById("formInput");
      const formInputValue = formInput.value;
      const commentID = formInput.getAttribute("data-comment_id");
      const isReply = formInput.classList.contains('reply');

   if (!formInputValue.trim().length > 0) {
      console.log('Comment cannot be empty!')
      return;
   }

   if (isReply) {
      formInput.classList.remove('reply');
      formInput.removeAttribute("data-comment_id");

      await createCommentReply(commentID, formInputValue);
   } else {
      await createComment(formInputValue);
   }

   formSubmit.reset();
   formInput.setAttribute('placeholder', 'Make a comment on the article')
   }
}

Key Learnings:

• Mastered nested data structures and efficient database queries for hierarchical data
• Improved understanding of real-time UI updates without frameworks
• Learned to create secure API endpoints with proper validation and error handling
• Gained experience with complex state management in vanilla JavaScript
• Developed skills in optimizing database queries for parent-child relationships
• Understood the importance of transaction management for reaction systems

Future Enhancements:

• Real-time WebSocket integration for live comment updates
• Rich text editor with formatting options for comments
• User authentication and profile system
• Comment moderation tools and admin interface
• Email notifications for replies and mentions
• Comment voting system (upvote/downvote with ranking)
• Attachment support for images and files in comments
• Spam detection and moderation tools
• Thread locking and moderation features
• Export functionality for comments and discussions

Github:

Live demo:

Recommended Tools:

This project is hosted on Hostinger - get 20% off your first plan with my referral code.

Features:

• Responsive design
• Minimal design
• Nested Comment Replies
• Real-time Reactions
• User Mention Detection
• Thread Collapsing
• Secure API Endpoints
• Responsive Design
• No Framework Dependency
• Comment Pagination
• Live Comment Counts
• Accessibility Features