Build an Embeddable Comment System Like Disqus (Step-by-Step Guide)

mkdir comment-system
cd comment-system
npm init -y
npm install <a href="/backend/nodejs/">Express</a> sqlite3 cors uuid

// db.js
const sqlite3 = require('sqlite3').verbose();
const path = require('path');

const db = new sqlite3.Database(path.join(__dirname, 'comments.db'));

db.run(`CREATE TABLE IF NOT EXISTS comments (
  id TEXT PRIMARY KEY,
  page_id TEXT NOT NULL,
  parent_id TEXT,
  author TEXT NOT NULL,
  body TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  is_spam INTEGER DEFAULT 0,
  is_approved INTEGER DEFAULT 0
)`);

db.run(`CREATE INDEX IF NOT EXISTS idx_page_id ON comments(page_id)`);

module.exports = db;

// spam.js
const SPAM_PATTERNS = [
  /\b(buy now|click here|free money|limited offer)\b/i,
  /\b(http|https):\/\/[^\s]{30,}/g,
  /<a\s+href/i,
  /(.)\1{10,}/,
];

function isSpam(author, body) {
  const text = `${author} ${body}`;
  let score = 0;
  for (const pattern of SPAM_PATTERNS) {
    const matches = text.match(pattern);
    if (matches) score += matches.length;
  }
  return score >= 2;
}

module.exports = { isSpam };

// server.js
const express = require('express');
const cors = require('cors');
const { v4: uuidv4 } = require('uuid');
const db = require('./db');
const { isSpam } = require('./spam');

const app = express();
app.use(cors());
app.use(express.json());

app.get('/api/comments', (req, res) => {
  const { page } = req.query;
  if (!page) return res.status(400).json({ error: 'page required' });

  db.all(
    `SELECT id, parent_id, author, body, created_at
     FROM comments
     WHERE page_id = ? AND is_approved = 1 AND is_spam = 0
     ORDER BY created_at ASC`,
    [page],
    (err, rows) => {
      if (err) return res.status(500).json({ error: err.message });
      res.json({ comments: rows });
    }
  );
});

app.post('/api/comments', (req, res) => {
  const { page, author, body, parent_id } = req.body;
  if (!page || !author || !body) {
    return res.status(400).json({ error: 'page, author, body required' });
  }
  if (body.length > 2000) {
    return res.status(400).json({ error: 'body too long (max 2000)' });
  }

  const id = uuidv4();
  const spam = isSpam(author, body);

  db.run(
    `INSERT INTO comments (id, page_id, parent_id, author, body, is_spam, is_approved)
     VALUES (?, ?, ?, ?, ?, ?, ?)`,
    [id, page, parent_id || null, author, body, spam ? 1 : 0, spam ? 0 : 1],
    function (err) {
      if (err) return res.status(500).json({ error: err.message });
      res.status(201).json({
        id,
        approved: !spam,
        message: spam ? 'awaiting moderation' : 'comment posted',
      });
    }
  );
});

app.get('/api/comments/pending', (req, res) => {
  db.all(
    `SELECT * FROM comments WHERE is_spam = 1 OR is_approved = 0 ORDER BY created_at DESC`,
    (err, rows) => {
      if (err) return res.status(500).json({ error: err.message });
      res.json({ pending: rows });
    }
  );
});

app.post('/api/comments/:id/approve', (req, res) => {
  db.run(
    `UPDATE comments SET is_spam = 0, is_approved = 1 WHERE id = ?`,
    [req.params.id],
    function (err) {
      if (err) return res.status(500).json({ error: err.message });
      res.json({ success: true });
    }
  );
});

app.listen(3000, () => console.log('Comment API on :3000'));

// widget.js
(function () {
  const API = 'http://localhost:3000/api';
  const container = document.getElementById('comments-widget');
  if (!container) return;

  const page = encodeURIComponent(window.location.pathname);

  function render(comments) {
    const thread = {};
    const roots = [];

    comments.forEach((c) => {
      thread[c.id] = c;
      c.replies = [];
    });
    comments.forEach((c) => {
      if (c.parent_id && thread[c.parent_id]) {
        thread[c.parent_id].replies.push(c);
      } else {
        roots.push(c);
      }
    });

    function commentHTML(c, depth = 0) {
      let html = `<div class="comment" style="margin-left:${depth * 24}px">
        <strong>${escapeHtml(c.author)}</strong>
        <span style="font-size:0.85em;color:#888">${c.created_at}</span>
        <p>${escapeHtml(c.body)}</p>
        <button onclick="replyTo('${c.id}')">Reply</button>
      </div>`;
      c.replies.forEach((r) => { html += commentHTML(r, depth + 1); });
      return html;
    }

    container.innerHTML = `<h3>Comments</h3>
      <div id="comment-form">
        <input id="cmt-author" placeholder="Name" />
        <textarea id="cmt-body" placeholder="Write a comment..."></textarea>
        <button onclick="postComment()">Post</button>
      </div>
      <div id="comment-list">${roots.map((c) => commentHTML(c)).join('')}</div>`;
  }

  window.postComment = function () {
    const author = document.getElementById('cmt-author').value;
    const body = document.getElementById('cmt-body').value;
    fetch(`${API}/comments`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ page, author, body }),
    }).then(() => { loadComments(); });
  };

  window.replyTo = function (parentId) {
    const author = prompt('Your name:');
    const body = prompt('Your reply:');
    if (!author || !body) return;
    fetch(`${API}/comments`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ page, author, body, parent_id: parentId }),
    }).then(() => { loadComments(); });
  };

  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  function loadComments() {
    fetch(`${API}/comments?page=${page}`)
      .then((r) => r.json())
      .then((data) => render(data.comments));
  }

  loadComments();
})();