Building an Instagram-Style Like Button with Cloudflare D1 (No Backend Required)

// Hash IP addresses for privacy (SHA-256)
async function hashIP(ip) {
  const encoder = new TextEncoder();
  const data = encoder.encode(ip);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

function getClientIP(request) {
  return request.headers.get('CF-Connecting-IP') ||
         request.headers.get('X-Forwarded-For')?.split(',')[0] ||
         'unknown';
}

// GET /api/likes?photo=IMG_123.jpg
// Returns: { photo, count, liked }
export async function onRequestGet({ request, env }) {
  const url = new URL(request.url);
  const photoName = url.searchParams.get('photo');

  if (!photoName) {
    return new Response(JSON.stringify({ error: 'Missing photo parameter' }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' }
    });
  }

  const clientIP = getClientIP(request);
  const ipHash = await hashIP(clientIP);

  // Get total likes
  const countResult = await env.DB.prepare(
    'SELECT COUNT(*) as count FROM likes WHERE photo_name = ?'
  ).bind(photoName).first();

  // Check if current user liked it
  const likedResult = await env.DB.prepare(
    'SELECT COUNT(*) as liked FROM likes WHERE photo_name = ? AND ip_hash = ?'
  ).bind(photoName, ipHash).first();

  return new Response(JSON.stringify({
    photo: photoName,
    count: countResult.count || 0,
    liked: (likedResult.liked || 0) > 0
  }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

// POST /api/likes
// Body: { photo: "IMG_123.jpg" }
// Toggles like/unlike
export async function onRequestPost({ request, env }) {
  const body = await request.json();
  const photoName = body.photo;

  if (!photoName) {
    return new Response(JSON.stringify({ error: 'Missing photo' }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' }
    });
  }

  const clientIP = getClientIP(request);
  const ipHash = await hashIP(clientIP);
  const timestamp = Date.now();

  // Check if already liked
  const existingLike = await env.DB.prepare(
    'SELECT id FROM likes WHERE photo_name = ? AND ip_hash = ?'
  ).bind(photoName, ipHash).first();

  if (existingLike) {
    // Unlike
    await env.DB.prepare(
      'DELETE FROM likes WHERE photo_name = ? AND ip_hash = ?'
    ).bind(photoName, ipHash).run();
  } else {
    // Like
    await env.DB.prepare(
      'INSERT INTO likes (photo_name, ip_hash, created_at) VALUES (?, ?, ?)'
    ).bind(photoName, ipHash, timestamp).run();
  }

  // Get updated count
  const countResult = await env.DB.prepare(
    'SELECT COUNT(*) as count FROM likes WHERE photo_name = ?'
  ).bind(photoName).first();

  return new Response(JSON.stringify({
    action: existingLike ? 'unliked' : 'liked',
    photo: photoName,
    count: countResult.count || 0,
    liked: !existingLike
  }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

// Load like status when page loads
document.addEventListener('DOMContentLoaded', function() {
  const photoLikes = document.querySelectorAll('.photo-likes');
  photoLikes.forEach(function(likeDiv) {
    const photoName = likeDiv.getAttribute('data-photo');
    loadLikeStatus(photoName, likeDiv);
  });
});

async function loadLikeStatus(photoName, likeDiv) {
  try {
    const response = await fetch(`/api/likes?photo=${encodeURIComponent(photoName)}`);
    const data = await response.json();

    const button = likeDiv.querySelector('.like-button');
    const heart = button.querySelector('.heart');
    const countSpan = button.querySelector('.like-count');

    countSpan.textContent = data.count;

    if (data.liked) {
      heart.textContent = '❤️'; // Red heart
      button.classList.add('liked');
    } else {
      heart.textContent = '🤍'; // White heart
      button.classList.remove('liked');
    }
  } catch (error) {
    console.error('Error loading like status:', error);
  }
}

async function toggleLike(photoName, button) {
  if (button.classList.contains('loading')) return;

  button.classList.add('loading');

  try {
    const response = await fetch('/api/likes', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ photo: photoName })
    });

    const data = await response.json();

    const heart = button.querySelector('.heart');
    const countSpan = button.querySelector('.like-count');

    countSpan.textContent = data.count;

    if (data.liked) {
      heart.textContent = '❤️';
      button.classList.add('liked');
    } else {
      heart.textContent = '🤍';
      button.classList.remove('liked');
    }
  } catch (error) {
    console.error('Error toggling like:', error);
    alert('Failed to update like. Please try again.');
  } finally {
    button.classList.remove('loading');
  }
}