Live demo: iamsaadhabib.github.io/lead-tracker Source code:

github.com/iamsaadhabib/lead-tracker

What it does

• Add leads with name, company, email, source and status
• Pipeline stages: New, Contacted, Qualified, Won, Lost
• Live stats: total leads, count per stage and win rate
• Search by name or company, filter by status
• Export all leads to CSV
• Saves data in the browser, nothing leaves your device

1. Keep the data in one array

Every lead is an object in a single array. Saving and loading is just JSON in localStorage, wrapped in try/catch because storage can be blocked in private windows.

const KEY = "fivup-lead-tracker";
let leads = [];
try { leads = JSON.parse(localStorage.getItem(KEY)) || []; } catch (e) { leads = []; }

function save() {
  try { localStorage.setItem(KEY, JSON.stringify(leads)); } catch (e) {}
}

2. Render from state, always

Instead of patching the page by hand, one render() function rebuilds the stats and the table from the array. Every action (add, delete, change status) updates the array, saves it, and calls render().

function render() { renderStats(); renderRows(); }

document.getElementById("leadForm").addEventListener("submit", e => {
  e.preventDefault();
  const d = Object.fromEntries(new FormData(e.target));
  leads.unshift({ id: Date.now(), ...d });
  save(); e.target.reset(); render();
});

This keeps the logic simple. There is only one place that decides what the screen looks like.

3. Escape what the user types

Because the table is built with template strings, anything a user types goes straight into HTML. A name like <img src=x onerror=...> would run code. A small escape function fixes that:

function esc(s) {
  return String(s).replace(/[&<>"']/g, c => ({
    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
  }[c]));
}

Every value is passed through esc() before it is placed in the table.

4. Stats and win rate

The stats row counts leads per stage and calculates the win rate:

function renderStats() {
  const counts = Object.fromEntries(STATUSES.map(s => [s, 0]));
  leads.forEach(l => counts[l.status]++);
  const total = leads.length;
  const rate = total ? Math.round((counts.Won / total) * 100) : 0;
  // ...build the tiles from counts and rate
}

The total ? ... : 0 check avoids dividing by zero when the list is empty.

5. Search and filter

Search and the status filter work together on the same list:

const list = leads.filter(l =>
  (!f || l.status === f) &&
  (!q || l.name.toLowerCase().includes(q) || l.company.toLowerCase().includes(q))
);

6. Export to CSV

CSV export builds the file in memory and downloads it with a temporary link. Double quotes inside values are escaped by doubling them, which is how CSV expects them:

const cell = v => `"${String(v || "").replace(/"/g, '""')}"`;
const csv = [header.join(",")]
  .concat(leads.map(l => [l.name, l.company, l.email, l.source, l.status].map(cell).join(",")))
  .join("\n");
const a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
a.download = "leads.csv";
a.click();
URL.revokeObjectURL(a.href);

What I would add next

• A Node.js and MongoDB backend so a team can share the same leads
• Follow-up reminders by email
• Import leads from a CSV file

Takeaways

• A single HTML file is enough for many small tools.
• Keep one source of truth (the array) and re-render from it.
• Always escape user input when you build HTML from strings.

I'm Saad Habib, founder of Fivup Leads, where we help businesses get qualified leads and build websites that convert. You can find me on LinkedIn and GitHub.

What feature would you add to the Lead Tracker? Tell me in the comments.