motyl.dev
TrendingNewsletterBlogNewsAbout
Support
Grzegorz Motyl

© 2026 Grzegorz Motyl. Raising the bar of professional software development.

GitHubTwitterEmail
Home
News
Blog
Me
    /
    motyl.dev
    TrendingNewsletterBlogNewsAbout
    Support
    1. Home
    2. News
    3. Build a Simple Client Tracker With Claude Code: No Spreadsheet Chaos

    Build a Simple Client Tracker With Claude Code: No Spreadsheet Chaos

    Published on 14.03.2026

    #substack
    #claude-code
    #productivity
    AI & AGENTS

    TLDR

    Build a client tracker in 45 minutes with Claude Code — Color-coded pipeline, client notes, dashboard summary, search/filter, and "Needs Attention" alerts. Single HTML file, lives on your desktop, no subscriptions or backend required. The key: confirm the plan with Claude before writing code.


    Build a Client Tracker With Claude Code

    The problem: Client info is everywhere. One client in a Google Sheet, another in your notes, a third buried in an email. Deal status? You dig through five places to remember where it stands. This is the status quo for solo founders, consultants, agencies, and service providers who haven't hired a full-time CRM admin.

    The solution: Claude Code builds a custom HTML tracker tailored to your workflow in about 45 minutes. No generic template to force-fit. No hiring a developer. No multi-week turnaround.

    What you get:

    • Full client list with status, contact info, deal value
    • Color-coded pipeline stages (Lead, Active, Paused, Closed)
    • Per-client notes and next action reminders
    • Summary dashboard (total pipeline value, active client count)
    • Search and filter to find anyone in seconds
    • "Needs Attention" view surfacing overdue follow-ups

    The critical insight: Most people jump straight to "build me a thing" without context. This guarantees a round of corrections after the code is written. The confirmed-plan-first approach saves enormous back-and-forth.

    Prompt #1: The Plan Confirmation Before Claude Code writes a single line, give it your business context:

    • Your role (freelancer, agency owner, coach, etc.)
    • What you do in 1-2 sentences
    • How many clients you manage
    • Fields you need (name, email, phone, status, deal value, dates, notes)
    • Your pipeline stages (Lead → Discovery → Proposal → Active → Closed)

    Then ask Claude Code to confirm back: full field list, color assignments for status badges, key features, clarifying questions. Do NOT ask for code yet. This conversation prevents misunderstandings. A 5-minute confirmation saves 30 minutes of rework.

    Prompt #2: The Build Once the plan is confirmed, ask Claude Code to build the complete tracker: HTML, CSS, and JavaScript all in one file.

    Deliverables:

    • Full client table with all fields
    • Add, edit, delete functionality
    • Color-coded status badges
    • Auto-save using localStorage (survives tab closes and browser restarts)
    • Summary header (total clients, total pipeline value, active count)
    • Responsive design for laptop screens

    Copy the HTML output, save it as client-tracker.html, double-click to open in your browser. You're live.

    Prompt #3: Add Filtering and Insights After verifying the basic tracker works, add the power features:

    • Filter by status (All, Lead, Active, Paused, Closed)
    • Sort any column by clicking the header
    • Search bar that filters as you type
    • "Needs Attention" tab for clients overdue for follow-up (based on last contact date)

    This turns a simple table into an actual pipeline management view. The "Needs Attention" filter becomes your daily morning check.

    Key principle: Build in layers. Start with the minimum viable tracker (table, add, edit, delete). Verify it works offline. Then add filtering, search, and intelligence. Each layer is a separate prompt, reducing cognitive load on both you and Claude Code.

    Why this matters for developers:

    1. Non-technical users can now build business tools — No coding knowledge required, but the workflow is professional-grade (plan first, build second, iterate incrementally).
    2. This pattern scales to bigger builds — Confirm the plan, build the core, add features in layers. Works for trackers, dashboards, internal tools, anything HTML-based.
    3. localStorage is enough for solo/small team operations — No backend complexity for the initial version. If you outgrow it, you upgrade then—not before.

    The "do NOT write any code yet" discipline is non-negotiable. Without it, Claude Code starts building immediately and you end up correcting a half-built version instead of a clean brief.

    ☕🤖Tutorial: Build a Simple Client Tracker With Claude Code (No Spreadsheet Chaos)


    Disclaimer

    This article summarizes technical newsletters and curated links for developers. All views and opinions expressed here are for educational purposes. Verify claims and evaluate tools based on your specific needs before adopting them in production.

    ☕ Knowledge costs tokens,fuel meHelp me keep the content flowing
    External Links (1)

    ☕🤖Tutorial: Build a Simple Client Tracker With Claude Code (No Spreadsheet Chaos)

    theaibreak.substack.com

    Sign in to bookmark these links
    Previous
    Claude Code's 12 Game-Changing Updates: Multitasking, Scheduling, and Multi-Agent Code Review
    Next
    Tailwind Weekly #208: Inclusive Dark Mode, CSS Spinning Diagrams, and 5k+ Component Library
    Grzegorz Motyl

    © 2026 Grzegorz Motyl. Raising the bar of professional software development.

    GitHubTwitterEmail