Feature: Add article reactions with real-time updates and emoji interactions

[Copilot]

Implements lightweight, emoji-based reactions for blog articles allowing readers to express engagement through 👍 ❤️ 🔥 💡 reactions. This enhancement provides a simple, fun, and low-friction way for users to interact with content while giving authors valuable feedback on what resonates with their audience.

Key Features

Reaction System: Four distinct emoji reactions (like, love, fire, idea) that users can toggle on/off per article. Each user can have one reaction of each type per article, with real-time count updates visible to all visitors.

Authentication Flow: Anonymous users can view reaction counts but must log in to interact. Clicking a reaction button when not authenticated redirects to the login page with a helpful toast notification.

Real-time Updates: Utilizes Supabase's real-time subscriptions to instantly update reaction counts across all connected clients when users add or remove reactions.

Optimistic UI: Provides immediate visual feedback when users interact with reactions, with automatic rollback if the server request fails.

Technical Implementation

Database Layer:

• New article_reactions table with proper indexes and Row Level Security policies
• Unique constraint on (user_id, article_slug, reaction_type) prevents duplicate reactions
• Supports PostgreSQL with Supabase integration

Service Layer:

• Comprehensive TypeScript API following existing patterns from the favorites system
• Functions for adding/removing reactions, fetching counts, and checking user reaction status
• Proper error handling and type safety with ReactionType enum

UI Component:

• ReactionsBar component with mobile-friendly circular buttons
• Hover effects and smooth animations using Framer Motion
• Clean styling that integrates seamlessly with the existing blog design
• Toast notifications for user feedback using react-toastify

Integration: Added to article pages alongside existing features like favorites and topics, maintaining the current layout and user experience.

Testing

Added comprehensive unit tests for the reactions service with 16/16 test cases passing. Tests cover reaction CRUD operations, count aggregation, and error handling scenarios.

The implementation follows the repository's established patterns and coding standards, ensuring maintainability and consistency with the existing codebase.

Fixes #17.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: node /home/REDACTED/work/DevVerse-SWE-Blog/DevVerse-SWE-Blog/node_modules/.bin/next build (dns block)
  • Triggering command: next-server (v15.1.7) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
dev-verse-swe-blog	Ignored			Sep 23, 2025 3:40pm