Build Your Data Explorer

With tens of thousands of companies and thousands of contacts in a database, you need a way to see it, search it, filter it, and act on it. This is where you build your own internal tool.

What is this?

A data explorer is a private web app that lives on your laptop. It reads your database and shows you the data in a useful, searchable table. You can filter by tier, search by name, see whether someone has a LinkedIn profile, and add them to your outreach queue — all with a few clicks.

Why not just use Excel or Airtable?

Excel can't run live queries against a database with tens of thousands of rows without freezing. Airtable costs money and has import limits. A custom explorer is faster, free, and built exactly the way you think. You describe what you want in plain English and Claude builds it in an afternoon.

Try the demo

The interactive demo below shows how a real explorer works — with fictional data. You can search, filter, and "add to funnel" contacts. The real version is connected to a live database of tens of thousands of companies.

Open Interactive Demo →

~4h

to build from scratch with Claude

ongoing cost (runs on your laptop)

Python

Flask backend, HTML/JS frontend

Live

always reflects latest data

Describe the interface you want

Before asking Claude to build anything, sketch the interface on paper (or in words). What columns do you want in the table? What filters matter most? What actions can you take on a row? Having clear answers to these questions means Claude builds what you actually want the first time.

Build the backend first

A Flask app reads from your SQLite database and serves JSON endpoints. Start simple: one endpoint that returns all contacts as JSON, with optional search and filter parameters. This is the core — once it works, the frontend is just a table that calls this endpoint.

Build the frontend as a single HTML file

The UI is one HTML file with embedded JavaScript. It fetches from your local API and renders the table. Start with a plain table, then add search, then filters, then color coding, then action buttons. Each step is a separate conversation with Claude — "now add a filter dropdown for tier."

Add the "add to funnel" action

The most valuable feature: clicking a button marks a contact as queued for your outreach funnel. This writes back to the database. The funnel scripts read from this same database, so whoever you queue here automatically becomes part of your next LinkedIn or email batch.

Add multiple views

Over time, you'll want more than one table: a People view (contacts), an Agencies view (companies), an Email Campaigns view, a LinkedIn Funnel view. Each view is a new tab that queries the database differently. Add them one at a time as you need them.

It should feel fast. If your table takes more than a second to load, add a database index. Ask Claude: "The query is slow — add an index on the columns I'm filtering most often."

Python / Flask SQLite HTML + Vanilla JS fetch() API CSS Grid / Flexbox

Build a Flask web app that serves as a data explorer for my outreach database. Database: outreach.db (SQLite) Tables: - agencies (id, domain, company_name, description, city, state, employee_count, tier, quality_score) - contacts (id, agency_id, first_name, last_name, title, email, email_verified, linkedin_url, li_found, funnel_status, score) Build these endpoints: GET /api/people — returns contacts as JSON, with params: - search (searches name, email, company) - tier (A/B/C) - size (1-10, 11-50, 51+) - limit (default 100) - offset (for pagination) - Returns each contact joined with their agency data GET /api/agencies — returns agencies as JSON, with params: - search (searches name, domain, city) - state - tier - enrich_status POST /api/funnel/add — body: {contact_id}, sets funnel_status='queued' POST /api/funnel/remove — body: {contact_id}, sets funnel_status=null GET / — serves the HTML explorer file Run on port 8784. Use Flask-CORS. Open the browser automatically on startup.

Build a single-page HTML data explorer for my outreach database. It fetches data from a local Flask API at localhost:8784. Design: Dark titlebar (like a desktop app), white content area, clean table with hover states. People view (default): - Search box (queries the API as user types) - Filter dropdowns: Tier (A/B/C), Size (1-10, 11-50) - Table columns: Score (color-coded circle), Name + Title + Email, Company + City, Employee Size, LinkedIn (link or "not found"), Funnel button - Score color: A=green, B=blue, C=amber - "Add to funnel" button → calls POST /api/funnel/add → shows "✓ Queued" state Agencies view (tab): - Same pattern but for agency table - Columns: Domain, Company Name, State, City, Size, Enrichment status, Founder name Status bar at bottom: total record count, current view count Make it feel like a real internal tool, not a demo. Minimal design, fast, functional.

Design decisions

Why Flask instead of something fancier? Flask is a 50-line Python file that serves JSON from SQLite. It has no build step, no dependencies to manage, and Claude can write the whole backend in one pass. A React app or Next.js backend would add hours of setup for zero functional benefit.

Why vanilla JavaScript, not React? A table that filters and sorts doesn't need a framework. Vanilla JS with fetch() is 50 lines of code. Claude writes it easily and you can read and understand it. If you add React later, you've added a build pipeline and a learning curve for the same table.

Why keep everything local? Your prospect database is sensitive business intelligence. Putting it on a cloud server adds cost, security surface, and complexity. A local Flask app running on port 8784 is accessible only from your laptop — nothing to breach.

Setting up the launcher

Once the app works, add it to Claude Code's launch.json so you can start it with one click. Add a configuration like this:

{ "name": "data-explorer", "runtimeExecutable": "python", "runtimeArgs": ["explorer.py"], "cwd": "C:/path/to/your/project", "port": 8784 }

See it in action

Try the interactive demo — fictional data, real interface. Search, filter, and add contacts to the funnel to see how it feels.

Open Demo Explorer →

This is one implementation. Tell Claude how you'd prefer it to work differently.

← Stage 3: Find Your Contacts Stage 5: Email Outreach →