LEAD QUALIFICATION & CRM AUTOMATION

Turn incoming leads into qualified sales opportunities.

Capture an inquiry, assess its fit, update a demo CRM, and prepare the next action—all in one visible workflow.

Run the interactive demo ↓

Live APIRules-based scoringDemo CRMEnd-to-end build

example workflowINTERACTIVE DEMO

01LeadCaptured

02RulesScored

03CRMUpdated

04NextAction prepared

00:00.0lead.receivedexample

00:00.4rules.scorescore: 92

00:01.0demo.crm.upsertstored locally

00:01.3followup.draftprepared

EXAMPLE OUTCOME92/100High priority

↗

DRAFT ONLYFollow-up prepared

PORTFOLIO CASE STUDYFrom lead capture to a clear next action in one visible flow.

01FrontendResponsive product UI

02WorkflowObservable execution states

03RulesDeterministic qualification

04CRMBrowser-local demo workspace

05APICloudflare Pages Function

THE BUSINESS PROBLEM

Less manual handling. A clearer next step for every lead.

Inquiries often arrive across forms and campaigns, leaving teams to review details, copy records, and decide who to contact first. LeadFlow demonstrates how those steps can work together.

BEFOREManual review and copying

Review each inquiry, copy details into a CRM, and prepare the next response manually.

Illustrative workflow scenario

WITH LEADFLOWOne observable workflow

Validate the submission, calculate priority, update the demo lead record, and prepare the appropriate handoff.

Each decision remains inspectable

HUMAN OVERSIGHTKeep exceptions visible

Review-path leads and demonstrated failures remain visible so a person can decide what happens next.

Review paths stay explicit

WORKFLOW

From inquiry to next action.

Follow one lead through each responsibility—from capture to the next action prepared by the workflow.

FOLLOW ONE LEADReady to trace a leadThe story will settle after one complete pass.

↳

Capture

Collect a lead from a form or adapted inbound source.

✓

Validate

Normalize required fields and reject incomplete submissions.

Qualify

Apply transparent rules across budget, urgency, and intent terms.

⌘

Prepare

Update the demo CRM and prepare the review, nurture, or sales path.

TRY THE WORKFLOW

Submit a lead. Follow every decision.

Start with an example or change the details. The workflow uses a live qualification endpoint when available and a deterministic browser fallback when it is not.

SERVER-BACKED QUALIFICATIONPOST /api/qualify · deterministic scoring · browser fallback available

ready

Workflow execution

READY

Waiting for a leadrun —demo 0.0s

ValidateCheck required fields and normalize input

Waiting

Duplicate checkCompare with browser-local CRM records

Waiting

Qualify leadApply deterministic scoring rules

Waiting

Update demo CRMCreate or update the browser-local record

Waiting

Prepare follow-upDraft a next-step message; nothing is sent

Waiting

Route next actionPrepare the sales, review, or nurture path

Waiting

EVENT STREAM0 events

Run the workflow to inspect execution events.

CRM WORKSPACE PREVIEW

A workspace for the next action.

Review qualification state, urgency, and the next action from the same browser-local records created in the interactive workflow.

LEAD

OPERATIONAL IMPACTRun a lead to see what changes.

The dashboard story uses only browser-local CRM records—no fabricated growth metrics.

Pipeline 0 browser-local leads

High priority 0 0% of pipeline

Average score 0/100 qualification score

Immediate follow-up 0 0% ASAP

PIPELINE MIXQualification distribution

Current records

SCORE TRENDRecent qualification scores

0–100

NEXT ACTIONAttention queue

What happens next

SOURCE QUALITYInbound mix + score

Count / average

URGENCYTimeline mix

Current records

DEMO PIPELINELatest qualified leads

0 records

Lead	Source	Score	Status	Timeline	Next action

RECENT ACTIVITYWhat changed

local state

Technical event details

WHEN SOMETHING GOES WRONG

Make exceptions visible and recoverable.

Choose a scenario and follow the system from trigger to safe final state. Implemented behavior and simulated recovery remain explicitly separated.

SCENARIO STORYSee what happened, how the workflow responded, and what state remains.

Duplicate handling and human-review routing are implemented. CRM timeout recovery is an explicit simulation.

01 · TRIGGERAwaiting scenario

Choose an exception to start the story.

02 · DETECTION—

The system state will appear here.

03 · RESPONSE—

The handling path will appear here.

04 · FINAL STATE—

The settled outcome will appear here.

INCOMINGCRM RECORD

3 → 3 records Existing identity is updated, not duplicated.

CRM REQUEST×RETRY PLAN

RETRY NOT EXECUTED IN THIS PUBLIC DEMO Production requires durable retry state + idempotent delivery.

NURTUREREVIEWHIGH

Sales reviewHuman review

The configured score band selects a person-in-the-loop path.

scenario.readySelect a scenario to inspect the technical event evidence.

HOW IT WORKS

A clear path from input to action.

Follow the same lead through the implemented path, including the point where scoring and browser-local CRM state branch and rejoin.

SYSTEM TRACEReady to trace the leadLead form → API → rules + CRM → next action.

LEAD SCORE STATE

INPUTLead formStructured browser submission

POST →

LIVE APICloudflare Pages FunctionValidation · trace ID · no-store response

JSON →

RULESQualification scoringBudget · timeline · intent terms

STORAGEDemo CRMBrowser localStorage

STATE →

NEXT ACTIONDraft · review · nurturePrepared in the demo; no outbound delivery

Implemented: HTML / CSS / JavaScriptCloudflare Pages FunctionREST JSONlocalStorage demo CRM

OPTIONAL TECHNICAL DETAILExplore integration and implementation details

EXPLORE INTEGRATION OPTIONSSee how the workflow could fit another toolset.

These selections are illustrative. They change the diagram only and do not connect accounts or configure external services.

Lead sourceCRMNotification

Meta Lead Ads→Validation + rules→HubSpot→Slack

01 · IMPLEMENTEDServer-side validation

The Pages Function validates required fields and returns a structured, non-cached JSON response with a trace ID.

02 · IMPLEMENTEDRules-based qualification

Budget, timeline and explicit intent terms contribute to a deterministic score and routing category.

03 · IMPLEMENTEDBrowser-local demo CRM

Runs create or update records in local storage. Duplicate matching uses normalized name plus company.

04 · SIMULATED DELIVERYNext-action preparation

Follow-up and sales-review states are prepared for demonstration. This public build does not send email, Slack, or CRM messages.

UNDER THE HOODInspect the API contract and verified demo safeguards＋

REQUEST

POST /api/qualify
{
  "name": "Sarah",
  "company": "Acme Dental",
  "budget": 5000,
  "timeline": "asap"
}

RESPONSE

{
  "ok": true,
  "qualification": {
    "score": 92,
    "status": "hot"
  },
  "traceId": "..."
}

VERIFIED DEMO SAFEGUARDS✓ server-side validation✓ no-store API responses✓ structured JSON contract✓ trace identifier✓ deterministic browser fallback

ROI ESTIMATOR

Estimate the time your workflow could save.

Adjust the assumptions to explore potential savings from repetitive lead handling.

Leads per month

leads

Current manual minutes per lead

min

Share of work automated

Additional review minutes per lead

min

Hourly labor cost

$/hr

Monthly operating cost

$/mo

SCENARIO ESTIMATE

42Estimated net
time saved (hours)

Estimated net monthly value$525

Baseline workload67h

Post-automation workload25h

Baseline workload67h

Post-automation25h

Review time is additional work not included in the remaining manual share. Scenario estimate based on your inputs, not measured client results.

OPTIONAL PLANNING TOOL

Sketch a workflow before implementation.

Use the same planning logic to explore a possible sequence without changing the running demo.

Explore the workflow planning tool

Describe your process

Suggested workflowReady

EDIT WORKFLOWSelect a step to configure it

Planning aid only — edits here do not change the executable qualification workflow.

PROJECT CONTRIBUTION

Designed as a complete product experience.

Independent portfolio project · Interactive demonstration

I designed and built LeadFlow to demonstrate how a business workflow can become an understandable, interactive product—from the first input to the final operational record.

01 Interface and interaction design02 Responsive frontend development03 Workflow and browser state management04 Server-side deterministic qualification05 Demo CRM data model and exception visibility

Verified stack: HTML · CSS · JavaScript · Cloudflare Pages · Pages Functions · localStorage

EXPLORE ANOTHER AUTOMATION PROJECT

STAYPILOT · HOTEL OPERATIONS & WORKFLOW AUTOMATION

Policy-aware hotel operations in one interactive prototype.

A related portfolio project covering hotel workflows, role-based approvals, execution traces, and production-oriented integration boundaries.

12 workflowsHuman approvalsAuditable tracesIntegration boundaries

View project ↗Inspect source

NEXT PROJECT

Have a lead workflow that needs less manual work?

This project demonstrates how intake, qualification, CRM updates, and follow-up can be designed as one connected experience.

Run another example ↗