[Feature Request]: Allow likes to Blog Posts

[victoria-lo]

Describe the solution you'd like

Currently, our community blog don't have a "Like" feature so our members cannot like the article to show support. It will be nice to have this feature just like other blogging platforms like Hashnode.

For example, platforms like Hashnode and Dev.to allow users to like or react to blog posts, which helps foster community interaction.

Suggested Implementation

• Implement a simple "Like" button for each article.
• Display the total number of likes beside it.
• No login required (this can be a future feature)
• Each user can give up to 10 likes per articles (like Hashnode)
• Likes should persist even after the user refreshes or revisits the site

Additional context

• A visible "Like" button appears for every article.
• Clicking the button increases the article’s like count by 1.
• The total number of likes displays beside the button.
• A user can only give a maximum of 10 likes per article
• When a user returns to the site, their previous likes are remembered.
• The button visually indicates when a user has already liked an article.
• Unliking an article (if implemented) decreases the count and frees up one like.

[AKRITI-ENG]

I'd like to work on this feature.
Can you please assign this issue to me?

[shermainelim]

Hi @victoria-lo and @eileenchua , this issue is quite interesting. Will like to discuss and seek your feedback first on implementation proposal.

💡 Proposal: Implement Global “Like” Button (Netlify Functions + Blobs)

🧭 Overview

Propose implementing a global “Like” system for each article using Netlify Functions and Netlify Blobs.

Since the website is already hosted on Netlify, we can leverage their free built-in serverless platform — no extra backend, database, or credentials required.

Key goals

• Display a visible “❤️ Like” button beside each article.
• Show a global like count visible to all users.
• Allow each visitor to give up to 10 likes per article (similar to Hashnode).
• Persist likes across refreshes or revisits via cookie-based device_id.
• Function automatically handles shared counts and user limits.

🌍 Global Visibility

• Likes are stored centrally in Netlify Blobs, which act as a shared key-value store.
• Every visitor interacts with the same record for a given article (post:<id>:prod), so all users see the same total.
• Deploy Previews and branch deploys use isolated namespaces (:pr-XX, :branch-YY) to keep testing data separate.
• Once merged to production, all users share the same live counter.

⚙️ Technical Summary

Layer	Role
Astro Frontend	Renders the Like button + total count and communicates with /api/like.
Netlify Function (/netlify/functions/like.js)	Handles GET and POST requests for fetching and updating likes.
Netlify Blobs	Stores global counts and per-user totals in JSON (e.g. { count: 120, users: { device_123: 4 } }).
Identity	Anonymous device_id cookie; persists per browser up to 2 years.
Limit	Each device can add up to 10 likes per article (enforced server-side).

🧪 Local and Production Testing

Local setup

npm i -D netlify-cli

npx netlify login

npx netlify init       # link repo to Netlify site once

npx netlify dev        # runs Astro + Functions locally at http://localhost:8888

• Local testing requires no additional credentials — Netlify CLI handles all permissions automatically.
• The same function and Blobs store are available in production once deployed.

Deploy Previews

• Every pull request automatically gets a unique Deploy Preview URL with its own function + data namespace for testing.
• Likes in previews don’t affect the production counters.

Production

• On merge to main, production uses the :prod namespace — all users see and update the same global like count.

🔐 Credentials

• ✅ No manual credentials or API keys needed.
• ✅ Netlify manages authentication internally for linked repos.
• ✅ You only need to run netlify init once to link the project.

🚀 Acceptance Criteria

• Each article displays a Like button and a global count.
• Clicking the button increases the total count (up to 10 per user).
• User’s like count persists across page refreshes and revisits.
• Count updates reflect globally for all users (shared store).
• Exceeding 10 likes disables the button or shows a “limit reached” indicator.
• Users can optionally remove likes (reduces count and frees quota).
• API endpoints (GET/POST /api/like?post=<id>) return correct data and enforce 0–10 limits.
• Works on local (netlify dev), Deploy Preview, and Production environments.
• No manual credentials or secrets are required to test or deploy.

🧩 Next Steps (if approved)

1. Add netlify.toml with redirect and function bundler config.
2. Create /netlify/functions/like.js (handles GET/POST logic and user limits).
3. Add reusable LikeButton.astro component for frontend integration.
4. Test locally, open PR, and verify Deploy Preview counts.
5. Merge to main and confirm global visibility in production.

Request for feedback:

Can we proceed with this implementation using Netlify Functions + Blobs to enable a globally visible “Like” feature across all articles?

[roshninaktode]

@victoria-lo I would like to work on this issue.Could you please assign this issue to me?
Thank you!

[eileenchua]

Hi @victoria-lo, please review @shermainelim's approach.

Hi @roshninaktode, @shermainelim will have priority on this as she commented first.

[shermainelim]

Hi @victoria-lo and @eileenchua , I don’t think I currently have time to attempt this task. Will not want to hog on the task. Can give to @roshninaktode or someone else .

[roshninaktode]

@victoria-lo please assign this issue to me.

[eileenchua]

Hi @roshninaktode, as explained previously in another comment you can only be assigned to one issue at a time across all our repos.

[eileenchua]

Hello @shermainelim, thanks for updating, and we appreciate that you shared your ideas for implementation :)