Lead Finder Lite Build Plan

3-Session Workshop

The complete build plan

Goal, step-by-step flow, end state, and the exact Claude Code prompts to hand out — for all 3 sessions.

Architecture

The browser hits Cloudflare, which splits traffic by subdomain to the Vercel-hosted React frontend and the Railway-hosted FastAPI backend. The frontend calls the backend directly for data. Only the backend talks to Supabase and Clay.com.

Lead Finder Lite architecture Browser requests go through Cloudflare DNS, which routes to a Vercel-hosted React frontend and a Railway-hosted FastAPI backend. The backend connects to a Supabase Postgres database and the Clay.com enrichment API. The frontend calls the backend directly for data. Browser Cloudflare DNS: app. & api. subdomains Vercel — Frontend React app (Vite) Railway — Backend FastAPI service Supabase Postgres database Clay.com Enriches lead data

Session 1 · 1 hr

System Setup + Vibe-Coded UI

Goal: everyone has Node, VS Code, and Claude Code installed, and a working React UI running locally with mock data.

Flow

  1. 1

    Install Node.js, VS Code, Claude Code CLI; sign in

  2. 2

    npm create vite@latest lead-finder-lite -- --template react

  3. 3

    git init, first commit, push to GitHub (create empty repo first)

  4. 4

    Build the UI with Claude Code, using a downloaded admin template as a visual reference so the app looks polished without hand-styling everything from scratch.

    Download this template as reference: tailadmin.com

    Steps for students

    1. Use the prompt below in Claude Code
    2. Attach the reference screenshots (Dashboard and CRM page, shown below)
    3. Give Claude Code the path to the unzipped template folder so it can use it
    4. Ask it to run the local dev version to see the output

    Reference screenshots

    TailAdmin dashboard reference showing lead totals by status and a recent leads table
    Dashboard page
    TailAdmin CRM page reference showing the leads table with an Add lead button
    CRM page

    Prefer ready-made code?

    If you'd rather skip building this from a prompt, the finished UI is already up at github.com/pratibimb/vibe-to-live-ui. Download or clone it and install to get the same result instantly:

    1. Go to the repo, click Code → Download ZIP (or git clone https://github.com/pratibimb/vibe-to-live-ui if using GitHub Desktop/CLI)
    2. Unzip it and open the folder in VS Code
    3. Run npm install to install dependencies
    4. Run npm run dev to see it live locally
  5. 5

    Prompt: "Push the latest code to git main and then deploy the main branch on vercel replacing deployed version with this new version." — share the URL in Zoom chat

Setup commands

Command Description
Install Node.js (LTS)JavaScript runtime needed to run Vite, npm, and the React dev server — download
Install VS CodeCode editor students will work in — download
Install GitHub DesktopA visual way to commit and push to GitHub, no git commands needed — download
npm install -g @anthropic-ai/claude-codeInstalls the Claude Code CLI
claudeLaunches Claude Code and prompts sign-in
npm create vite@latest lead-finder-lite -- --template reactScaffolds a new React project using Vite
cd lead-finder-liteMoves into the new project folder
npm installInstalls project dependencies
npm run devStarts the local dev server to preview the app
git initInitializes a git repository in the project folder
git add .Stages all files for commit
git commit -m "Initial commit"Creates the first commit
Create empty repo on GitHub (no README)Sets up a remote to push to
git remote add origin <repo-url>Links the local repo to the GitHub repo
git branch -M mainRenames the default branch to main
git push -u origin mainPushes the first commit to GitHub
npx vercelDeploys the app live and returns a shareable URL

Prefer not to use the terminal for git? GitHub Desktop covers git init, add, commit, and push with buttons instead of commands.

How the git repo fits in

Everyone edits locally, commits to their own history, then pushes to GitHub. GitHub is the single source of truth — Vercel and Railway both watch it and redeploy automatically on every push, which is why Session 3 is mostly configuration, not new code.

Git workflow for Lead Finder Lite You edit code locally in VS Code with Claude Code, commit to your local git history, then push to GitHub. GitHub is the single remote source of truth, and both Vercel and Railway watch it, auto-deploying the frontend and backend respectively on every push. commit push Your laptop Edit code with Claude Code Local commit git add && git commit GitHub Remote repo (origin/main) Vercel Auto-deploys frontend Railway Auto-deploys backend

End state

A deployed, working (but backend-less) UI. This is the "wow, I built and shipped something in an hour" moment.

Claude Code prompts to hand out

Create a CRM using this template "/Users/thor/Downloads/free-nextjs-admin-dashboard-main".

The CRM should have "Create a UI for 'The App: Lead Finder Lite' — a
minimal CRM-style tool:

- Add a lead — company name, contact name, title, one-line notes
- View leads — a table with status: New → Contacted → Replied → Closed
- Update status — click to move a lead through the pipeline
- Research notes field — students paste in whatever they found (manual for
  now — no live scraping/enrichment, keeps the class demo-safe and free)

This is intentionally simpler than the original guide's 5-skill chain
(ICP Builder → Prospect Finder → Company Spy → Message Crafter →
Follow-Up Sequencer). Those become stretch goals students can add after
the workshop, once they're comfortable with the codebase — see "Where To
Go Next" at the end."

The output should have a side menu, dashboard page, and CRM page. Use
"https://demo.tailadmin.com/crm" as reference look and feel. Don't use
any premium features. The template code is in the folder above.

This replaces the earlier, shorter vibe-coding prompt for this step — it now builds on the downloaded TailAdmin template instead of starting from a blank project.

Enjoying the workshop so far?

QR code linking to the HumanAI Google Maps review page

If Session 1 was useful, a quick review helps us a lot. Scan the QR code, or use this link:

Leave a review on Google Maps

Session 2 · 1 hr

FastAPI Backend + Supabase Database

Goal: replace mock data with a real API and a real database.

Flow

  1. 1

    Create a Supabase project → create a leads table (id, company, contact_name, title, notes, status, created_at)

  2. 2

    New folder backend/, set up FastAPI:

    • pip install fastapi uvicorn supabase python-dotenv
    • Prompt Claude Code: "Set up a FastAPI app with endpoints: GET /leads, POST /leads, PATCH /leads/{id} to update status. Connect to Supabase using the supabase-py client. Read the Supabase URL and key from environment variables."
  3. 3

    Test locally with uvicorn main:app --reload + the FastAPI auto-docs page (/docs) — a nice visual for non-devs to see the API working

  4. 4

    Rewire the React frontend: replace local state with real fetch calls to the FastAPI endpoints

  5. 5

    Push backend to GitHub, connect the repo to Railway, add Supabase env vars in Railway's dashboard, deploy

End state

A full-stack app — adding a lead in the browser actually writes a row into Supabase, visible live in the Supabase table editor.

Claude Code prompts to hand out

Set up a FastAPI app with GET /leads, POST /leads, and PATCH /leads/{id}
to update status. Connect to Supabase using supabase-py, reading the URL
and key from environment variables.

Update the React app to fetch leads from the FastAPI backend instead of
local mock data, and call the API when adding a lead or changing its status.

Session 3 · 1 hr

Deployment + Custom Domain

Goal: everyone has a live, production app on a real domain.

Flow

  1. 1

    Confirm production deploys: frontend on Vercel, backend on Railway (both should already be live from earlier sessions — this session is about tidying and connecting a domain)

  2. 2

    Add environment variables properly for production (Supabase keys, API base URL) in both Vercel and Railway dashboards

  3. 3

    In Cloudflare: add the custom domain, create DNS records —

    • app.yourdomain.com → CNAME to Vercel
    • api.yourdomain.com → CNAME to Railway
  4. 4

    Update the frontend's API base URL to point at api.yourdomain.com

  5. 5

    Final test end-to-end: add a lead on the live domain, watch it land in Supabase

  6. 6

    Wrap-up: each student pushes a final commit, gets a README template to document their own app

End state

A live app on a custom domain, a GitHub repo they own, and a clear picture of how frontend/backend/database/domain fit together.

Materials to prepare per session

Slide deck (short — mostly live-coding, slides just for concepts/diagrams)

Step-by-step written guide, split into 3 handouts

Starter repo with a "checkpoint" branch per session, so latecomers can git checkout into a working state

Claude Code prompt cheat-sheet — the boxed prompts above, printable

Where to go next (stretch goals)

Once students are comfortable, they can layer back in ideas from the original Sales Navigator guide — as optional add-ons, not core curriculum:

  • Email draft generation for a selected lead
  • CSV import/export for bulk lead lists
  • A simple dashboard chart of leads by status

These are natural "session 4+" material if you run a follow-up workshop.

Lead Finder Lite Workshop — React · FastAPI · Supabase · Cloudflare