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.

Each stage stays visible, so a viewer can follow the workflow instead of watching an unexplained loading state.

↳

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.

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.

Explore duplicate handling, a simulated external-CRM timeout, and the rules-based human-review path.

SCENARIO DETAILSImplemented behavior and simulated scenarios stay clearly separated.

Duplicate handling runs in the demo. Timeout recovery is shown as a simulation, while review routing follows explicit score thresholds.

scenario.readySelect a scenario to inspect what happened, what the demo does, and what remains pending.

HOW IT WORKS

A clear path from input to action.

Each stage has one clear responsibility, so the workflow is easier to inspect, explain, and adapt.

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 ↗