Add post engagement features

[tyaga001]

Overview

Implement engagement tracking features to increase reader interaction and provide valuable metrics.

Features to Implement

1. Like Counter System

• Add like button with animated counter
• Store likes in MongoDB with the following schema:

  interface PostEngagement {
  slug: string;
  likes: number;
  uniqueUsers: {
  userId: string; // Hashed IP
  count: number;
  }[];
  lastUpdated: Date;
  }

• Implement rate limiting
• Add optimistic updates for better UX

2. View Counter

• Track unique post views
• Show view count in blog header
• Implement caching to prevent overloading database

3. Reading Progress

• Add progress bar at top of post
• Track scroll position relative to content
• Smooth progress updates

Technical Requirements

• Neon database integration
• Server-side rate limiting
• IP address hashing for unique users
• Redis caching (optional)

UI Components Needed

• Like Button with animation
• Progress bar component
• View counter display

Acceptance Criteria

• [ ] Like button works with animation
• [ ] Progress bar shows accurate reading position
• [ ] View counts are accurate and cached
• [ ] All metrics should store in database
• [ ] Rate limiting prevents abuse

References

• Blog post: "How I Built My Blog" by Josh Comeau
• Current implementation path: components/

[tyaga001]

@ayasahmad7655, see if you would like to work on this task.

[ayasahmad7655]

@tyaga001 ok i will do it.